This is a solution to the Interactive pricing component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- Use the slider and toggle to see prices for different page view numbers
Above is a screeshot of the Interactive Pricving Component
- Solution URL: https://github.com/dxn1310/invsto_task
- Live Site URL: https://dxn1310.github.io/invsto_task/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- React - JS library
- Bootstrap
I learnt many new things, like how to properly use flexbox and media query in my react app, i also got plenty of practice with reactjs and css. I implemented dark mode first time for the entire webpage. I learnt various new concepts and wish to learn more.
.bottom-container{
display: flex;
flex-direction: row;
justify-content: space-between;
}
@media screen and (max-width: 480px){
.bottom-outer{
width: 80%;
margin-left: 10%;
}
.bottom-last-component{
flex-direction: column;
}
.bottom-container{
flex-direction: column;
}
label.name{
font-size: 80%;
}
.rchild{
margin-top: 1%;
}
.btn{
width: 160%;
}
.ul-container{
width: 70%;
}
}I want to continue focusing on using flexbox and applications that are compatible with a mobile phone aswell, i also want to focus more of learning the various other hooks that can be used to make my react app better. I will also like to focus more on dark mode and try adding dark mode in my future projects for practice.
During the project development, i got plenty of help and support from my friends who debugged my code when i got errors, They also helped me learn new things and introduced me to various resources that i can use in the future to make my projects better and more professional.