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

HTML, CSS and JavaScript were the technologies used.

@lawrecks

Desktop design screenshot for the Todo app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


What do you think about this? Where do you think I need to improve on?

Community feedback

Karim 590

@Galielo-App

Posted

Hello Ugo!

Awesome build, just a few tips:

  • Your background is repeating on bigger screens, this is happening because the image is not of the same size. A simple solution would be to add background-repeat: no-repeat; background-size: cover;. This will stop your background from repeating and will make sure that your background is the same size as your screen without stretching it, it's contained automatically.
  • I strongly suggest using unordered lists for semantic reasons. Use ul on id="todoList" and for all the children use li.
  • U should not use a percentage width on your class="to-do", this is making your main content look very small on smaller screens. I suggest using 550px instead of 35%.

Please upvote my comment if I was helpful and happy coding :)

Marked as helpful

1

@lawrecks

Posted

@Galielo-App Thanks for your feedback. I'll implement the changes as soon as possible.

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