Mobile first using grid

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 4 years ago

  Hey Stephen, nice work on this challenge! How did you get on working mobile-first?

  Your solution looks great! The main thing I'd recommend would be to review your use of the header, section, and footer elements. The header and footer are more typically used to represent the top and bottom of the page, or sections or other HTML5 structural elements.

  In this design, I'd go with div elements for each of the 3 areas as they're generic groupings of content. The fact that you've wrapped the component in a main element is great.

  I hope this helps. Let me know if you have any questions!

  0

  ---

  

  Stephen Tyers•235

  @stephentyers1975Posted almost 4 years ago

  @mattstuddert Thanks for the feedback around the usage of HTML tags. I must admit I am a bit all over the place with using the right semantic tag - a section or an article, etc. My main focus at the moment is fully understanding all the CSS and then I'll circle back to the HTML. I love the mobile-first approach as I find you get most of the component styling out of the way on a simple column layout first. Which then leaves a few media queries left for the other screen layouts. Ultimately aside from it being recommended best practice, you end up writing less code. cheers Steve

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 4 years ago

  @stephentyers1975 awesome to hear those are your takeaways! It's a much simpler approach, and as you'd said can reduce the amount of code you write, which is a big win!

  Yeah, which semantic elements to use where can be tricky at first. I'd recommend reading up on it at some point, as they're a huge part of writing good markup.

  0