Pricing component using HTML, CSS and JS

Solution retrospective
As it happens for almost every project I've improved my HTML, JS and CSS skills. My biggest challenge was making the slider because it's my first time building one and making it interacts with the other elements. The toggle was pretty fun to make as I didn't have to research a lot to make. I gave a special attention on the animations, so my project differs from the other solutions.
With the project code getting big, it was hard to find some classes on my styles.css code. I don't know what is the best solution for this, I would say I have to separate it in several files contemplating different areas of the page but it's so common to find pages with just one file for styling.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @ApplePieGiraffe
Greetings, Arthur Reis Bello! 👋
Nice job on this challenge! 👏 Your solution looks good and the slider works pretty well! 👍 It's good to hear you learned a lot from creating this solution (I always do when I complete challenges, as well)! 😀
I suggest looking into using a preprocessor such as Sass for your CSS. Using Sass, you can separate your styles into a bunch of different files (called partials, I think) and then combine them into one big file that will get converted into normal CSS and sent to the browser along with your HTML. It'll make organizing and finding your styles much easier, and you'll benefit from a bunch of other features that Sass has, too! It's not hard to pick up once you know CSS, so consider giving it a try. 😉
Keep coding (and happy coding, too)! 😁
- @samuelpalaciosdev
Hi, Arthur👋
Great job on this challenge. Your solution looks good and it scales pretty well👍
I only suggest some things 😉:
-Changing the buttons to an <a> (anchor link). If this would be an actual webpage, those buttons should redirect somewhere.
-Maybe, you don't need height. I mean, setting an explicit height, could cause you some problems, when talking about responsivenes.
I hope this would help you, have a nice day, keep coding!💙
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