Html Css flexBox

Community feedback

• 

  osamaaabdullah•60

  @osamaaabdullahPosted 6 months ago

  Great job!

  0
• 

  W. Brett Egbert•80

  @crossinguardPosted 6 months ago

  The overall design is getting pretty close, with easily readable and well-organized code!

  In index.html, I noticed you start with an H2 header (for the "Learning" category), then use an H1 header for the blog topic. While you are using them visually in terms of H2 = big text and H1 = bigger text, there is also a logical flow to how they should be used. H1 is the highest, and should appear first. Each H2 is a subset of H1, and each H3 is a subset of its H2. Headers are a giant hierarchy, and that hierarchy informs screen readers and other non-visual interactions. My recommendation would be to make the H1 a general title outside of the blog card (and possibly make it thoughtfully disappear), then change the category tag to a standard paragraph.

  Responsive is tough, especially when we start dealing with oddities like an ancient iPhone held in landscape mode...which I use. One thing that helped me is to remember that HTML is responsive by default. It is only once we start giving it fixed design choices that the responsiveness starts breaking. Options like height: 100vh, position: absolute/relative, width: 30%, and media queries all have a place, but depending on the combination can end up hurting responsiveness rather than unlocking it. In your case, the 100vh combo with absolute positioning makes the card cut off for small landscape screen sizes. The media queries make certain sizes look near-perfect while others look distorted. That distortion often happens worst right before a media query is set to kick in.

  I find that putting temporary outlines on my working areas helps me to really understand how much room elements are taking up as I resize my screen. Watch how those outlines squish or expand as you resize your screen in responsive design mode. If you can get your main card sizing solid across all sizes, then the information and images nested inside can reference their size off of the card to be equally solid.

  0