In this project, I have created a responsive one-page magazine site. The focus was to use FLEXBOX to create the page layout. The site has a big news section and a grid of cards with other news.
I created a mobile, tablet, and desktop mockup via Figma.
The mobile view is the default. The sections were created by using FLEXBOX.
Mobile version:
Has a 1 column structure and one card on each row.
Tablet version:
Has 2 cards on each row.
Desktop version:
Has 4 cards on each row.
To create the structure of 1, 2, and 4 cards, FLEXBOX has the option of flex-wrap and allows for specifying how big, in %, the cards are going to be. For 2 in one row, they are approx 50% and for desktop, they are approx 25%. I have also used box-sizing to manage the content dimensions.
For each version
- There is a header (with logo and navbar), a main news article, and a grid of news articles. The header changes depending on screen size.
- The cards are aligned to the center of the page.
- There is a hover effect showing additional information for the cards.
- There is an animation effect in the footer.
This is my first project as a front-end developer student, so plan vise it was not very planned. I have, however, now learned how I could try to structure the next one. Like:
- Start from the top when coding
- Create a nice skeleton
- HTML first then CSS
- Mobile devices as the default MEDIA QUERIES to start off from
If I had more time I would have tried to align the content on desktop view better (main and other news section), I would also probably tried to play around more with the animation, and the layout of the navbar.
The site is deployed here.
Check it out and learn some cool facts about Iceland!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent