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

Responsive site with just HTML and CSS

Bethany 855

@whimsicurl-creations

Desktop design screenshot for the Project tracking intro component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I really enjoyed working on this challenge. I learned from others who completed this challenge on how to create the background shape and crop the image using the overflow property. Since this is pure HTML and CSS, the mobile menu must be manually closed, but I'm pleased with the overall final result.

Please share any and all feedback so I can continue to learn and improve!

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Hey Bethany, great work on this challenge. I'm glad to hear you enjoyed it. Your solution looks really good and it's great that you were getting inspiration from other people's solutions to help with certain areas.

Here are a couple of small pointers after taking a look at your code:

  • For the circle in the navigation, if you're going to keep it in the HTML like you've done I'd recommend adding the aria-hidden="true" attribute to make sure it's not read by screen reader software. You could also use a pseudo-element, like the ::before or ::after element to create this effect purely in CSS.
  • You've got a h1 and h3 headings, but no h2. Be sure to avoid skipping heading levels unnecessarily, as this can cause accessibility issues with the content hierarchy.

I hope that helps. Keep up the great work!

1

Bethany 855

@whimsicurl-creations

Posted

Great tips, Matt! Thanks for taking a look at my solution and looking over the code. I will make those changes and keep that in mind for the future as well. These challenges have been great to get more experience and learn with this encouraging community.

0
P
Matt Studdert 13,611

@mattstuddert

Posted

@whimsicurl-creations that's great to hear! Your solutions and the feedback you're giving is awesome. Doing the challenges and then also reviewing other people's code is an amazing way to level-up your skills. You get such a good insight into how other people approach the same problems, which is a goldmine of information!

1

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