Digital Food Magazine
The project is to build a responsive website for mobile, tablet and desktop by using HTML5 and CSS3
🔵 Blue Level (Minimum Requirements)
- Style your page.
- Use CSS Grid or Flexbox to layout the page.
- Create a responsive design with the following views; Desktop 4 columns, tablet 2 columns, mobile 1 column.
- The site should have a header, a main news article, a grid of news articles.
- Play around with hover effects, i.e. change colors, add or remove borders or flip the image upside down.
🔴 Red Level (Intermediary Goals)
- Add a box shadow to make the photos look like polaroids
- Align the cards to the center of the page
⚫ Black Level (Advanced Goals)
- Add some animations to your project.
I started by project by building a prototype in Figma. That provided a clear visual approach for the website and helped me to save time for styling in CSS. The biggest challenges were the responsive navigation bar which is displayed differently on different devices. I've solved it by creating seperate navigation bars, later using media queries to hide and display. Next, the other challenge is to make the website responsive by using less media queries, and I came up with the solution of using autocolumn in Grid CSS, particularly autofit. Consequently, the columns will wrap into new row if the viewport is too narrow.
In order to solve all the problems above, I want to give a big shoutout to my Hippo team at Technigo class 2022, who helped me by giving me a lot of tips and always being supportive.
If i had more time, I would love to experiencing more animation styles in CSS. The idea is to make the text and images fadeIn when the user scrolls over the pages.