Introduction
As a frontend developer, I try to improve my front-end coding skills by building real projects. Frontendmentor has helped me have more experience in solving real-world HTML, CSS and JavaScript challenges while working with professional designs. It gives me the opportunity to learn new ways to build responsive web pages.
In this article I will talk about my process of building the interactive pricing page, the challenges I encountered, and the experience I gathered from that.
The Project
In this project, I set out to build an interactive pricing component together with custom range input slider and pricing toggle.
Starting the project
The first thing I do when starting a project is to write a semantic HTML5 and CSS custom properties using the mobile-first workflow. For this project, I started with writing the HTML and discovered that I had to create a toggle switch which I had never done in my previous projects. After writing the HTML, I started to style the HTML elements, but on getting to the <input type="range">
input tag I discovered I had to restyle it from the start.
Project bumps
"Research means that you don’t know, but are willing to find out."- Charles F. Kettering.
I thought there was a HTML tag for the toggle switch below, so I searched for the HTML tag for it and couldn't find any for the very obvious reasons (not evident to me 🤣 🤣) that there is no tag for the toggle switch. So I had to research on how to create one using web3
This was the first time I would use an input tag <input type="range">
which I had to style to the specification below .
I tried to change the background color and applied other CSS properties, but none seemed to be working properly. So I searched on google about how to style an input tag <input type="range">
. I used mdn web docs to understand more about the input tag, and css tricks to learn how to style it.
After going through the resources from my search, I was able to style the input tag and create a toggle switch, and finally finished the HTML and CSS for the project.
It was then made functional using Javascript.
View my project
Here is a video demo of my Interactive Pricing Component
Try it out here at my Live url
Its also on Github
What I learnt
This project was an interesting experience for me.
While building this Interactive pricing page, I was very excited at the beginning because it looked like a challenge that I could handle within a day, but as I started I was discouraged because I didnt know certain things. At the end of this project, I feel very proud because I accomplished all I thought I couldn't.
I learnt the following during the course of this project :
- How to create a toggle switch
- Redesign a input tag element
- Improved online research skills
- Self confidence
Conclusion
I look forward to the next challenge 😜