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 Menu responsive to desktop and mobile only (Some Bootstrap)

@greasypicadillo

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


First time submitting a solution and I know there are TONS of problems. My code is messy and overcomplicated first of all. Secondly the site could be more responsive (I only made it work on 1440px and 375px as a patch-job) Forgive me. It was my first challenge and I was very tired. Oh also my card and background sizing seem a bit off.

Please be gentle, I am very new but even I can see there's about a million and one things wrong with how I did this.

Appreciate concise and constructive criticism on how to logically take next steps to avoid this mess on future projects. Thanks so much!!

Community feedback

@beslerpatryk

Posted

Just chill Aidan 😎 You are doing more than fine

Try getting rid of width: 30% property on your #maincard element. This will make it nice and responsive on most of the displays.

The markup looks solid. I would recommend you using classes instead of id's to target your elements when styling. Also, read about the mobile-first approach.

Keep up the good work Aidan. Don't worry, be happy. Your code will never look perfect. You can spend a whole day refactoring it and you will probably still be unsatisfied with it so stop worrying about it. Remember, consistency is most important.

If you had any specific questions, hit me up.

Marked as helpful

1

@greasypicadillo

Posted

@beslerpatryk Thanks for the kind words and helpful criticisms! I really do appreciate it. I looked up mobile-first design and loved the idea. I'm going to give it a go on my next challenge.

Also I viewed and liked your solution to this challenge. Great work!

Thanks again, and I'll be in touch when a question inevitably confounds me.

Be well

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