This is a solution to the Tip calculator app 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
- Calculate the correct tip and total cost of the bill per person
I started by making the semantic HTML, I gave classes applying the BEM methodology, then I went on to design it with SCSS, I separated the files by blocks, I made the card with Grid, I went on to the Responsive design with media queries and finally I made the logic of the calculator with OOP.
- Semantic HTML5 markup
- SCSS
- CSS custom properties
- Flexbox
- CSS Grid
- BEM Methodology
- Mobile-first workflow
- OOP
In this section, I learned how to use SCSS to design the user interface and how to modularize the BEM methodology blocks into separate .scss files.
- Frontend Mentor - @josemiguel02
- Gmail - josemidev24@gmail.com