Design comparison
Solution retrospective
Hey guys, I started learning web development about 2 months ago. This is my very first challenge that I'm submitting it here. This is a desktop first design, and I couldn't completely make it responsive for the phones. I have a couple of questions regarding this challenge: 1- I'm not sure about the changing page that I wrote in HTML and JS. It just works fine, but I guess it's a wrong way to hide some elements and show them later in the same page. Can you give some ideas about this issue? 2- How can I make it better responsive for phones? 3- I used jQuery for DOM manipulation. Nowadays, is this somehow a deprecated model?
Community feedback
- @OGShawnLeePosted about 3 years ago
Hey!
Welcome to the world of Web Development! I hope you like it and stick around. This is my first feedback and my first language is not English; I apologise for any mistakes beforehand.
-
I think you should have wrapped everything around a main element. I would have used: A form to wrap the rating component. A button for each rating option. And for submitting, a button of type submit. If you code your project like I did mine you have to set the rating buttons type to button so that they don't submit the form, and prevent the submit. This is the way I did the HTML, don't know if it is the best choice right.
-
I don't know if you updated your component but I think it is fine. A tip is always going mobile-first, basically start coding everything for a smartphone then add support for bigger devices. I personally use Windi CSS for styling. It has great support for responsive designs.
-
Never needed to use jQuery. It is kind of deprecated nowadays, however a lot of projects still use it. So if you get a job then it is likely that you would have to maintain a legacy jQuery website. I would recommend learning a framework once you are familiar and comfortable with JavaScript.
I noticed your component is not properly centered. To fix it you can set the min-height of its container to 100vh, use flexbox and set align-items and justify-content to center. All of that is for the container, no need to touch its children.
I would suggest learning Svelte as your first framework; it is the easiest one to learn and it is pretty much vanilla JavaScript and what your learn with it will help to learn the others. Once your learn it I recomment React since... well it is the most popular and its good for getting a job. And lastly maybe you should try Alpine as a replacement for jQuery if you want to go with something minimal and quick.
Marked as helpful1@roshan-ghPosted about 3 years ago@OGShawnLee Hi Shawn Thanks a lot for your detailed comment. Also, English is not my first language. Yes, I liked the web development world, it's like a game or puzzle for me. Sometimes it's going to be real confusing, but it's fun! There are lots of new information in your comment. I should check all the new frameworks you introduced me. For starter, I like to learn more pure HTML CSS, then move to CSS frameworks. But as JS yes I guessed jQuery is a bit like old thing. I'm going to try Alpine or Svelte. Thanks again for the information!
1@OGShawnLeePosted about 3 years ago@roshan-gh Glad to help, Roshan. Remember to take your time learning, it is not good trying to learn too many things at the same; you'll end up pretty confused. Hope you have fun learning!
1 -
Please log in to post a comment
Log in with GitHub
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