News Site:
First project for Technigo's web development bootcamp - spring 2023. Assignment to build a news site with the requirements to use CSS Grid, Flexbox and that the website has a big news section with one article and a news grid section where the mobile-first version has one news item, the tablet media query has two news items and the desktop media query four news items in a row.
The problem:
The project is built with HTML5 and CSS. The layout is made up of a multi-grid layout system with separate grids in the header, navigation bar, main section and small news section. The news site is mobile-first and responsive. Mobile-first grid layout has 4 grid-columns, tablet media query 8 grid-columns and desktop media query 12 grid-columns. Flexbox is used for layouts within the grids. The news site has a header with a logo, website title and a subscribe button. Navigation bar is made up of a grid with the hamburger menu and the search input outside of the element. Navigation bar has a hamburger menu in the mobile version with hidden navigation links and hidden search field input, which are visible upon clicking on the hamburger menu. In tablet and desktop media queries the navigation links and search field input are visible in a row by default. Footer is made with Flexbox and has icons from Font-Awesome which are used as links for contact links to Linkedin, e-mail and Github. How did you plan? I started out by making a basic sketch for all three layouts. Then started out by writing code for the trying to use semantic HTML. I added basic HTML code and CSS styling that I had knowledge of. Continuing by adding flexbox for layout and step by step changing the layout to CSS Grid as I gradually gained a greater understanding of it. Changed the rest of the website and added more html code and styling by a lot of trial and error.
If you had more time, what would be next?:
If I had more time I would make the website truly responsive by learning and using other units than px like %, auto-fit, auto-fill and properties like max-width, min-width and so on. I would also like to gain a greater understanding of transitions and transformations and use that in the styling.
View it live: