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 using HTML and CSS

PJ Mantoss 235

@PJMantoss

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 had some difficulty designing the hamburger menu. Is there any other way to do the menu using only CSS? Thank you

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Awesome work on this challenge PJ and congrats on submitting your first solution! You've done a good job of creating the hamburger menu. What did you have difficulty with? CodePen is a great place to look to see how people build them purely from HTML and CSS.

0

PJ Mantoss 235

@PJMantoss

Posted

@mattstuddert I had great difficulty in displaying the menu list on a small screen. I spent days trying to achieve this. I wrote lots of codes which I felt was a little too much. I was just wondering if there's another better and easy way to achieve the design.

0
P
Matt Studdert 13,611

@mattstuddert

Posted

@PJMantoss as far as the actual menu dropdown goes you've done a good job. In hindsight, I should have actually added the icons as SVGs inside the project. I've actually updated the GitHub repo as a result of this, so thanks for bringing it up. This would prevent you from needing to code a custom hamburger menu and close icon. Another option would have been an icon font library, but then it wouldn't look exactly like the design.

0
PJ Mantoss 235

@PJMantoss

Posted

@mattstuddert Hey Matt! I just checked out the repo. I saw the icons you added. I'm glad you didn't add the icons before I took the challenge. That would've prevented me from learning something new. Even though, I must admit, it was frustrating :) At least I've learnt how to design a hamburger menu using only CSS. And also, initially I considered using a font icon from material-ui but decided against it after considering the lack of flexibility in customizing it to look like the design. Thank you

0
P
Matt Studdert 13,611

@mattstuddert

Posted

@PJMantoss no problem. Yeah, it's good practice! It can definitely be frustrating when you spend hours on a single problem, but that's where the real learning happens.

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