comendrun / interactive-pricing-component

Frontend Mentor Challenge

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Frontend Mentor - Interactive pricing component solution

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.

Table of contents

Overview

The challenge

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

Screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Mobile-first workflow
  • React - JS library
  • React Router Dom V.6
  • Tailwind CSS

What I learned

I really enjoyed working with tailwindCSS again. It definitely made my coding faster but I very much prefer vanilla CSS. but sometimes it's great that I don't have to leave a .css file to change the style. I also designed a second-page using react-router that will show up when you submit the offer. it already took so much time so I didn't have time to redesign the second page. But I should definitely do it soon.

Continued development

I also designed a second-page using react-router that will show up when you submit the offer. it already took so much time so I didn't have time to redesign the second page. But I should definitely do it soon.

Useful resources

Author

Acknowledgments

About

Frontend Mentor Challenge


Languages

Language:JavaScript 55.9%Language:CSS 28.3%Language:HTML 15.8%