search

prgrmfl / hyf-html-css

My html and css works
0 stars 0 forks source link

Week 2 homework review #2

Open otagi opened 5 years ago

otagi commented 5 years ago

The HTML is very clean, with good use of semantic tags like main and section, and a proper hierarchy of h1, h2, and h3. 👏

Since you are using multiple languages, a nice addition would be to use the lang attribute on elements with text, like this: <p lang="ar">, <p lang="nl">, etc. It won't change anything visually, but it can help search bots or speech synthesisers, for example.

Great CSS code too, using animations, varied properties, and advanced selectors like [class*="grid-"]. I even learned about the useful start value for text-align. 😉

The media queries behave as requested in the exercise, with different layouts for mobile, tabled, and desktop. Good use of the "mobile first" approach too.

Are the properties for #grid-float::after and #grid-flex::after needed? Since their content is always an empty string anyway, it seems like they could be safely removed.

prgrmfl commented 5 years ago

Thank you for the nice, informing and improving comments @otagi !

About lang attribute, surely it is better to use; I will usethis code in future projects for language recognition of the text.

Media queries are really practical for responsiveness, and thanks to this exercise I learned "mobile first" approach.

Actually I thought about #grid-float::after and #grid-flex::after as useless for this code too. In which cases should I use them?

otagi commented 5 years ago

Actually I thought about #grid-float::after and #grid-flex::after as useless for this code too. In which cases should I use them?

If your code snippet comes from an example on the net, I suppose they were used as a hack to fix alignment problems with floats, or some similar layout problem.

The ::before or ::after pseudo-elements can otherwise be used to add decorative characters around elements. For example something like li::after { content: '|' } to insert a | separator between items in a horizontal navigation bar. Or li::before { content: '>' } for a breadcrumbs list. Or add a small icon after certain types of links, like in this example. You can go very creative with it, as you can see. 😉

The only thing to remember is to use it only for decoration, not actual content, since it won't be seen by search engines, screen readers, etc.