Pure Flexbox solution

Community feedback

• 

  Szymon Rojek•4,540

  @SzymonRojek

  Posted over 4 years ago

  Hi Vladimir,

  Welcome here, well done :D

  I have checked your HTML structure by the inspector in the browser, a few tips for you:

  • the solution with h1 it is quite nice => I have seen it on CSS-tricks blog in the article HTML for Subheadings and Headings but author didn't use the h1 tag over there. What do you think about this solution:

  <h1 class="heading-primary">
      <span class="heading-primary-main">....</span>
      <span class="heading-primary-sub">....</span>
  </h1>
  
  => and below paragraph
  

  • instead of h2 I could use h2 but that's your choice;
  • instead of div wrapper probably I could use the main tag, and inside of it the section with three divs;
  • text alt => don't need to use words like picture or image, photo, icons in the alt text as it's already announced as being an image. In this project, icons have only decorative role - that's a reason why alt text should be provided as a empty (alt="") so these icons can be ignored by assistive technologies, such as screen readers;
  • you should change names of the classes;
  • remove all CSS styles and transfer them to the CSS file;

  Also:

  • check your project by the inspector in your browser on different devices, especially after 400px. You can include tablets in your project: go from one column (on mobiles), then create to rows with to boxes each and then implement desktop design pattern;
  • centre the project in the viewport and eliminate the scroll by adding overflow: hidden to the body
  • reset the CSS style (margin, padding and box-sizing: border-box).

  I can recommend two courses providing by Wes Bos, they are for free:

  • flexBox;
  • grid.

  That's from me.

  Greetings :D

  12