Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

CurvedLandingPage_FeMentorChallenge

@JessicaSamtani

Desktop design screenshot for the Huddle landing page with curved sections coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

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

@lukasriha

Posted

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 helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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