Here Are 6 Frontend Coding Ideas That Get You Fired-Up To Code
Here's a bit of an inspiration that will get you pumped to code
Mastering programming involves putting in tons of work. You’ll have to be coding as often as possible to get good at it.
Some people are natural at coding — I’m not one of them — but even geniuses need to put in the work.
Getting good starts with practice, practice, and more practice
Without further ado, here are the coding ideas. Use each idea as a source of inspiration. Pick something that makes you excited to code and get on with it.
Use whatever tools or programming language you prefer. I’ll also include stuff you’ll learn by building each idea.
1. Animated Racetrack with moving cars
A racetrack with two cars that go around the track. It’s built with HTML, CSS, and SVGs.
What you will learn by building the animated racetrack
Loops, loops, loops! — You’ll need to re-calculate a lot of graphics.
How to work with SVGs, CSS animations, and combining both.
2. Clickable French Cards
Clickable french cards that have two states. Hidden and visible. Every time you hide the card, it generates a random new value.
What you will learn by building the clickable french cards
How to track state for each card and generate a new value for the card.
3. Scrolling letters
As you scroll down, the letter wraps up. As you scroll up, the letter wraps open again.
What you will learn by building the animated scrolling letters
Working with mouse scroll event listeners. Whenever the user scroll, fold the letter and vice versa.
How to iterate loops and recalculating the graphics when the user scrolls on the page.
Making the app work on smaller screens; like mobile phones or tablets.
4. Custom Radio Buttons
Slick looking custom design radio buttons. Neat!
What you will learn by building the custom radio buttons
Working with HTML and CSS.
Coding a semantically correct HTML form.
Working with forms and creating custom inputs and radio buttons. Check the source link for inspiration or instructions.
5. Quickchat Clone
Quickchat is a dark-themed and clean looking chatroom. Ever wondered how to build a chat? Here’s your chance!
What you will learn by building the Quickchat clone
Clean and modern UI design principles.
How to write high-quality HTML and CSS.
6. HSL Slider
The HSL slider is a slider that you can drag left or right. It changes the color based on where the toggle is located at.
Notice how you can enable gradients and change the depth of the colors.
What you will learn by building the HSL slider
Re-calculate graphics and colors when the user drags the slider. Don’t forget the gradients and color depth controllers!
How to work with HSL, RGB, and Hex codes.
Thanks for reading, and happy coding!