Four Card Section using HTML/ CSS with Flexbox.

Community feedback

• 

  Szymon Rojek•4,540

  @SzymonRojek

  Posted over 4 years ago

  Hi Nistor,

  Well done :D

  I have checked your project, mainly the HTML structure by the inspector in my browser, a few tips below:

  • I started learn grid when I was confident with the flexbox;
  • the best practice is to create one repository for one project;
  • at the moment it is very hard to read your HTML structure because you didn't add a proper spacing to the elements;
  • instead of div class= "title" I'd suggest to add the header tag;
  • we can use only one the h1 tag on a page (it is very important) => in this project you can create one h1 with two spans inside (main-heading and sub-heading);
  • instead of div class="card-container" you can use the main tag to indicate the main content below the header;
  • alt text => In this project, images have an only a decorative role - that's a reason why alt text should be provided as an empty (alt="") so img can be ignored by assistive technologies, such as screen readers;
  • names of the classes are not readable and descriptive => what do you think about BEM naming convention?
  • try to do not style on tags => that's a reason why we have got a descriptive classes;
  • you have used an explicit width (container and card) => important: that's not a good practice especially that you want to use the flexbox or grid. It is essential to understand well the height and width vs min-height/max-height & min-width/max-width. You shouldn’t need to give items height unless they have a background or absolutely-positioned or floated elements within them that would not normally be accounted for in the height of an element. Experienced developers use min-height and min/max-width more than anything else. It allows elements to grow and shrink;
  • RWD: check a project in your browser by using the inspector on different devices => add text align center to the header, the cards are very narrow because of explicit width, play with margin and padding, add max-width;

  In the end, I'd recommend learning about semantic tags, headings, alt text (why they matter).

  Ps. Don't forget to upvote any comments on here that you find helpful.

  Greetings :D

  20