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

P
Lo-Deck 2,460

@Lo-Deck

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?

Hi here is my solution for Project-tracking-intro. I used HTML, CSS , JS.

Community feedback

Tharun Raj 1,310

@Code-Beaker

Posted

Hi there, Congratulations on completing this challenge... I see that you've done a great job with this one...! 🎉

  • I noticed that the Image was overflowing the screen on desktop screen. I could see this because there was a horizontal scrollbar on the site.
  • Make sure to use elements/tags that actually meet the purpose of what you're trying to achieve. Instead of using div, make use of the img tag for the images

Hope this is helpful to you... 😄

Marked as helpful

1

P
Lo-Deck 2,460

@Lo-Deck

Posted

Hi @Code-Beaker and thanks for your comment.

I didn't see the overflow and set new properties to avoid it.

width: 50%;
background: url(./images/illustration-devices.svg) no-repeat 0 0 / cover;

I used background to have a better positioning with my image and in fact avoid the overflow.

Previously I worked with <img> for a background and struggled with positioning and overflow, so I used this method with this website.

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