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

Trevor Lasn
Jan 4CommentShare

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. 

“CS)Scalextric 😎🚗 ” — ByJhey

What you will learn by building the animated racetrack

  • Loops, loops, loops! — You’ll need to re-calculate a lot of graphics.

  • HTML, CSS, and JavaScript!

  • 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. 

“CSS Random Cards” — ByAdir

What you will learn by building the clickable french cards

  • Event listeners — Every time you click on the card, something happens. You’ll need to wire up the card with JavaScript or CSS.

  • HTML, CSS, and JavaScript.

  • 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.

“Scrolling letters” — By Aaron Iker

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!

“Custom Radio Buttons” — By Metty

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!

“Quickchat UI Themes” — By Aybüke Ceylan

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.

“React HSL Slider” — By Jhey

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.

Conclusion

Thanks for reading, and happy coding!

CommentShare
← PreviousNext →