Assessment wanted for - Responsive Web Design assessment

Hello, could someone please assess this?

Link to my code: https://jsfiddle.net/Keyboardguy/jrywu53f/5/

Link to task: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/rwd_skills

Thanks!

Great job on this task, @Keyboardguy! Your code works as inteded :medal_sports:
There are some simplification you could do:

In your header you nested grid > flexbox > flexbox. You could simplify that whole header with this code:

  header {
    display: flex; /* separate the nav and title */
    justify-content: space-between;
    align-items: center;
  }

  header ul {
    display: flex; /* mav navigation display using flexbox */
  }

  header li {
    margin: 0; /* remove the margin used in the mobile design */
  }

  header a {
    border: 0; /*remove the border used in the mobile design */
  }

I don’t quite understand why you used a 12-column grid on <main> since we only need two columns. You could use grid-template-columns: 3fr 1fr; and let <article> and <aside> be placed automatically.

As a general note: When I was experimenting with different values in your code I found out that online editors put styles in the HTML panel after styles in the CSS panel. So I think it’s best to always put all the styles into the CSS panel to have control over the order.

I hope that helps. :slightly_smiling_face: If you have any questions just ask.

Have a nice day,
Michael

1 Like

Hello,

Thank you for the feedback! The header you suggested looks much cleaner than mine. Also, the reason why I used a 12 column grid was because of this:

I thought that every grid layout for the main part of a website should be 12 columns or 16 - which I now know is not always the case.

Thanks, Keyboardguy

Ahh, I see. Now I understand :smiley:
It’s definitively not wrong. Just a bit overkill for the simple layout in this task.