Design comparison
SolutionDesign
Solution retrospective
Hello All - uploaded after quite a gap. This took some time for me as I needed to wrap my head around positions and pseudo elements all over again. Do check it out and see if any suggestions on better practices. Thanks so much :)
Community feedback
- @lukasrihaPosted about 1 year ago
Hi Jessicasamtani,
great attempt!
Couple of tiny suggestions:
- Your html should have a <main> tag
- Also, look into semantic html - they aren't essential but improve readability for both coders (yourself included should you ever review your code in the future) or crawlers (having your html structured properly improves SEO). Semantic tags include tags such as <header>,<section> and <footer> - which you have identified correctly according to your css classes.
- You don't need to wrap your <img> elements inside an italic <i> tag - you can apply styles driectly to the <img> element.
- Your html document should have only one <h1> element. The idea with heading elements is that <h1> is the title of the entire document, <h2> a heading of a section, <h3> a subheading in that same section etc.
- You can use <a> tags to link emails
- Look into something called BEM - it's a style of writing css which will help you with writing readable css
- Install an extension like prettier to your IDE. It will help you format your code and help make it more readable
Overall great job! Keep hacking :)
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord