Szymon Rojek• 4,540
@SzymonRojek
Posted
Hi Kevin,
Well done :D
I have checked mainly your HTML structure, a few tips from me:
- the h1 tag can be used only once on a page (in this example you can use one h1 with two spans inside of it (main-heading, sub-heading);
- you don't have to use two sections here (at the top will be ok to use header tag, and below the main tag);
- instead of h3 I'd recommend to use the h2 tag because we have to use headings gradually without skipping them;
- names of the classes should be readable and descriptive => maybe start to learn the BEM naming convention;
- width and height => you gave explicit width and height, 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;
- also you can create RWD dedicated for tablets => one column for mobiles, then two rows with two boxes each, and finally desktop design pattern otherwise you have got one column till 960px (approx).
- repository: DS store transfer to the .gitignore file and change the name of your css file to the style.css, or main.css, or index.css. I prefer style.css.
Ps. Don't forget to upvote any comments on here that you find helpful.
Greetings :D
2
