Assessment wanted for Media Queries and Responsive Design Test

MDN Learn
#1

Hello,

Just looking for an assessment on the test. Any feedback would be great.

https://codepen.io/cecmahumane/pen/mdRNNYa?editors=1100

Below is the original test page

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

Thanks

#2

Hi @Cecil_Mahumane

The link you shared is for the Typesetting community school. Could you share the one for Test your skills: Media Queries and Responsive Design?

Ran

#3

I think this should work now.

https://codepen.io/cecmahumane/pen/dyvoJwX?editors=1100

Thanks for all the feedback Ran, I really appreciate it.

Cecil.

#4

Hi @Cecil_Mahumane.

First of all well done and thank you for doing this and sharing it. I find it really useful to read the MDN docs again to remember what they taught. Also I want to point out that there is no right or wrong way here. Its all about getting it to work. from what I can see you have achieved that. Nice work! :sunglasses: :muscle:

My comments are as folllows.

  1. I like that you have only applied the changes when the min-width goes to 40em. So no code is changed before that as the HTML layout is fine. I did however update the header area so that the text-align was at the center. Then when the media query hit I updated the header to be a display of flex with a justify content of space between.
  2. Good use of grid on the cards class. I added something extra to the grid-template-columns so that it used both repeat and minmax
grid-template-columns: repeat(auto-fill,minmax(300px, 1fr));

As explained in MDN in As many columns as will fit which states

We can combine some of the things we have learned about track listing, repeat notation and minmax() to create a useful pattern. Sometimes it is helpful to be able to ask grid to create as many columns as will fit into the container. We do this by setting the value of grid-template-columns using repeat() notation, but instead of passing in a number, pass in the keyword auto-fill . For the second parameter of the function we use minmax() , with a minimum value equal to the minimum track size that we would like to have, and a maximum of 1fr .

  1. Good use of grid on the main section. I used flex as I could see two children to the main, article and aside elements. Then I created a margin for the aside so there would be a gap.

  2. Nav section links. Using grid in that way is great. I didnt think of that. I did the following

  header ul {
    display: flex;
  }

as flex would automatically make it into a column. I get the feeling you are very comfortable using grid. This is great as it is more complicated than flex. However try to get familiar with flex as well as it might mean less work.

Let me share what I created for this so you can compare. I did add text-align: center; to the header section before this.

@media screen and (min-width: 600px) {
  body {
    background: red;
  }
  
  header {
    display: flex;
    justify-content: space-between;
  }
  
  header ul {
    display: flex;
  }
  
  header a {
    border-top: none;
    margin: 20px auto;
  }
  
  main {
    display: flex;
  }
  
  aside {
    margin: 10px;
  }
  
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(300px, 1fr));
    gap: 10px;
    
  }
  
}

Also you can use the CSS section in Codepen to fill out the CSS bit. By using the tag you have made it inline to the html.

Well done again. Learning all this is very time consuming. I hope it will be as rewarding to you as it is to me.

Ran

#5

Hello Ran,

Thanks a lot for all the feedback. I think I might go back and redo this exercise using some of your feedback, like doing the nav bar using flex just so I can get a feel for using the various tools. I feel like its good practice to be able to use the tool kits that are out of your comfort zone, as it’ll make you more adaptable with your team.

Again thanks for all the notes. Now to beat my head against the wall learning java script :smiley: