Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive News Homepage using Grid and Flexbox

Gr3g0ry99 120

@Gr3g0ry99

Desktop design screenshot for the News homepage coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Enjoyed this one! Starting to get the hang of using grid and flexbox, whilst also learning JavaScript. If anyone could help me with the following that would be appreciated:

I know the CSS is messy, is there a good way of simplifying this code? I know I have repeated a few things that I could easily simplify but any best practises would help me.

What are the best breaking points for media queries with a design like this?

I have used a lot of absolute font sizes and image sizes, is there a better way such as using Rem and Em?

I used grid and flexbox for mobile, I know I can just change the grid to span one column but it is very easy just to change it to flexbox for mobile, is this a bad practise?

How are the semantics with my HTML?

Community feedback

@Genildocs

Posted

Hello, congratulations on completing the challenge!

One way to simplify your CSS code would be to use a preprocessor like SASS, which has tools such as mixins and variables to avoid code repetition.

Regarding breakpoints, I suggest using the developer tool to identify the points where the layout begins to break and make adjustments at those points.

Regarding font size, use the REM unit, which utilizes the font settings of the root element. In this element, try setting the font size in percentage, for example:

html{ font-size: 62.5%;}

In this configuration, the font size is set to 10 pixels, so the REM unit will be relative to this value, making it easier for you to use.

Regarding the grid, you wouldn't need to change to flex-box, you could have configured the grid on mobile devices to have only one column. I hope these suggestions have been helpful.

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord