What I learnt while building an interactive pricing page

·

3 min read

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.

Capture025.png

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

toggle.png

This was the first time I would use an input tag <input type="range"> which I had to style to the specification below .

input-range.png

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

jotdown.jpg

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 😜