This is the first individual project made when doing the Technigo bootcamp. The project itself consisted in creating a news site. Prior to the bootcamps intro days, this is the first web site I have ever built.

The focus was to learn about boxmodel, layout pages using FLEXBOX and making a web page responsive for mobile, tablet and desktop.

I started building my news site by first looking through all the material given to us by Technigo. From the sketch they drew, code along videos of a similar web page layout and the requirements listed, I drew a rough draft of how I wanted my web page to look like. With a background in dentistry I chose to make a dental magazine and therefor also decided to go with a clean look for the whole page.

I built a basic structure in the HTML code first, and then added styling to this, even though I added a lot of extra code to the html along the way. I wanted the main page to show all the news articles, with the top one being the main one, and with all of them only showing a teaser header and text as they do in most news sites. I then created separate html files to give each article a link to the news article with its full content and made the logo into a button to be able to go back to the main site from there. I used pictures from unsplash and added "lorem ipsum" text not to waste any time on the content of each article, since the main focus was the code itself.

To achieve making the web page responsive, I started writing the CSS code for mobile first, and then added media queries for tablet and then desktop view. I used flexbox for the layout. I struggled to change the layout for the header in tablet view, but managed to solve the problem by using stackoverflow, talking to my team mates, browsing the web and simply by trying different methods.

If I had more time I would add extra CSS styling and make the media queries overlapping instead of having a fixed max-width for tablet. However the structure I have right now give me the result that I was aiming for, for this particular project. Further on I will use overlapping media queries instead. Lastly I would also try to incorporate some CSS grid.

View it live at Netlify - https://jolly-swirles-0cdbae.netlify.app