Design comparison
Solution retrospective
Instead of just directly using htm, css and js. I tried writing thr code in typescript and scss and compiling them into Js and css using webpack. Doing so improved my knowledge in not only webpack but also in dynamic creation and querying of languages using typescript.
What challenges did you encounter, and how did you overcome them?I faced some issues due to the relative path of the image and mobile view.
What specific areas of your project would you like help with?Like I mentioned above, I faced some issues eth mobile view. So kindly provide suggestions and tips if any on not only mobile view but also overall. Also, is the way I applied mobile styles correct?
Community feedback
- @ValsCodesPosted about 1 month ago
Great Job!
Here are some ideas for improvements:
- the mobile view can use more margin
- there is something weird happening with your bool that checks if a dropdown has been closed and opened, after you click it and close it, the header of the drop down stays with less opacity rather than going back to it's original state
- a little size up will get you closer to the design
- I could not see whether you have used sematic HTML tags such as <main></main> or just giving your main div this attribute role="main"
I am sorry if I didn't give you a better direction. Glad to hear that you learned a lot from this experiment. I am not sure if it is a common practice to write everything through code but since you had fun I guess everything is alright :)
Best regards, keep up the good work!
1@Jala30Posted about 1 month agoHi @ValsCodes
Thanks a lot for the suggesting - I will keep them in mind while I refactor this code after a while. Also, regarding your second concern. The dropdown header has a hover effect color (Which is what I think you refer to as the opacity change). In mobile devices click event also triggers the hover event of that element. As a result, the dropdown header continues to remain in that hover effect when you open and close them.
Regards, Jalagandeswaran
0
Please log in to post a comment
Log in with GitHubJoin 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