Four Card Section using HTML/ CSS with Flexbox.

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