I found Frontend Mentor where you can improve your front-end coding skills by building real projects. You can pick a challenge that appeals to you. Then, download the design documents, images and other assets that you need.
Pricing Component With Toggle
The challenge I chose was the pricing component with toggle. It has three options: Basic, Professional and Master. You have to use a toggle switch to show the prices for Annually or Monthly.
How I Built It
What I Learned
The style guide defined colors in HSL and included a linear gradient. The linear-gradient is a CSS function that allows you to create a transition between two or more colors along a straight line. You can choose the direction or angle of the transition. For two of the buttons and toggle, the gradient moves from left to right. The professional plan card moves from top to bottom.
I used two structural pseudo-classes in CSS to create the design. The :first-of-type and :last-of-type selectors allow you to target the first and last occurrence of an element in a container.
Bootstrap has a toggle switch available. It was not customizable with CSS. You have to compile custom Bootstrap in order to change how it looks. I found CSS toggle solution that works like the design. I modified it to work with my CSS.
Frontend Mentor asks developers to post their solutions to their site. If you get stuck on a project, you can look at their solution to see how they approached it.
You can see my version of the pricing plan with toggle.