Szymon Rojek• 4,540
@SzymonRojek
Posted
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
2