The first individual project during the Technigo Front End developer bootcamp, creating a responsive magazine using box sizing and flexbox layout.
I started with HTML, mapping the sections I needed and created ‘cards’ for the different news, one bigger section for the most important news and then a grid of smaller news.
The main tool I used was box sizing and flexbox in the CSS code. It made me center the content and structure the navigation bar, the text within the cards, the top news and the footer. I did also use grid for the first time, managing to give a nice structure to the smaller news. The grid made me also do the site responsive, so it shows 4 columns in desktop view, 2 columns in tablet view and 1 in mobile view. Grid seemed very straight forward and helpful in this project, working with "boxes". For me this was the first-time using responsiveness. It added some complexity to the task but when I understood how it is used it got really intuitive.
I added hovering effect to the navigation bar and the boxes. I did also add box shadow and made the boxes to elements to get the nice effect when hovering them. In the end I added just two small animations to the last little box so the background color and text color changes colors.
• Structure webpages using boxmodel
• Layout webpages using flexbox
• Create responsive webpages for desktop, tablet and mobile
• Structure cards using grid
• CSS
• HTML5
Link to the site: https://mystifying-aryabhata-e79b77.netlify.app/