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

Project tracking intro component with HTML5, SCSS, and ES6

#accessibility#bem#parcel#sass/scss#progressive-enhancement

@YariMorcus

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


What are you most proud of, and what would you do differently next time?

  1. Implementing an accessible mobile navigation with progressive enhancement.
  2. Getting the devices illustration to be aligned according to the given designs.

What would I do differently next time?

Not spending my time trying to align a decorative image to the side of the page by using img. This resulted in a constant horizontal overflow of the body on desktop which I was unable to solve. Because of this, I decided to create a div as a sibling of the introduction section to append the device illustration. Eventually, I got it working with the background-* css properties.

Supplementary information

The schedule a demo button contains a slide animation when hovered.

Community feedback

P
alexander 1,260

@alex931d

Posted

Great solution you nailed the design 👍🏻 Im excited to see you learn and work on new callenges😀

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