Here Are 5 Frontend Challenges That Will Get You Pumped Up To Code

Some individuals are particularly excellent at coding, and you could also belong to that group.

Not a single person became a pro at programming overnight. Mastering programming involves putting in tons of work. You’ll have to be coding as often as possible to get really good at it.

Yes, some people are geniuses— 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 I promised. 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. With each idea, I’ll add a list of stuff you’ll learn by building it.


1. Interactive rasterized triangle

Rasterization is the task of taking an image described in a vector graphics format and converting it into a raster image (a series of pixels, dots, or lines, which, when displayed together, create the image which was represented via shapes).

— According to the rasterization Wikipedia page.

Pretty cool, huh? Well done Lea Rosema for creating this!

Check out the source code if you’re not sure where to start. It gets easier when you just start coding and chip the problem away, I promise.

What you will learn by building this

  • Loops, loops, loops! — You’ll need to re-calculate a lot of graphics when the user drags the triangle corners.

  • HTML, CSS, JavaScript — Notice how the triangle is composed of individuals tiny squares.

  • Working Event listeners — whenever the user drags around the triangle, it changes width and height. Check out the source code for examples.


2. Rasterized fish

If the example above is way over your head, I can totally relate. I’m a bit rusty at the moment and unsure if I could re-create it in a single work session.

How about creating something similar, without the interactions? A rasterized fish — It still looks awesome, even without all the fancy interactions.

What you will learn by building this

  • HTML, JavaScript — You’ll need to re-create the fish somehow. Notice how the fish is composed of squares.

  • CSS — You can use CSS to create the individual square and color them. Or you could also use JavaScript for that.


3. CSS Houdini Party Cube 🎉

Neat! A flamboyant, jumping square!

If you’re unsure how to get started with this one — check out the Mozilla “Creating 3D objects using WebGL” article for inspiration and ideas.

What you will learn by building this

  • Advanced concepts for CSS animations —How will you make the square jump around in joy?

  • JavaScript event listeners— for instance, there’s the “activate party mode” button which lets users start or finish the animation.


4. Twitter Profile Card Clone

Twitter is probably the most preferred way for how developers communicate with each other. Why not learn how to code the profile section?

The profile above belongs to me—but you can use any profile you like. Don’t worry about the data, you can use plain dummy data and hardcode the profile.

Although, if you’re feeling lively—Twitter does have an API you can use to make things much more dynamic.

What you will learn by building this

  • Working with HTML and CSS.

  • After you’re done—Try using a framework such as React, Vue, Angular, or Svelte— See if you can do it with a before-mentioned frontend JavaScript library too.

    Note: Being able to use a JavaScript library makes you much more hireable and stand out from the crowd.

  • Optional: How to use Twitter API and fetch data from it. You can use React combined with React Hooks for this.

    Note: I wrote an article about using React with hooks to fetch data from an API— check it out here.


5. Reddit Public Access Network Clone

Reddit Public Access Network, commonly known as RPAN, is a live streaming service run by Reddit. It launched on August 19, 2019.

Whenever I have some time to kill I watch what RPAN and see what other people are up to.

It’s a fun way to have a quick conversation and see how different our lives really are.

Start simple and just do the HTML and CSS parts. Come back later and finish the rest of the functionality.

What you will learn by building this

  • HTML & CSS — just the very basic layout. You can hardcode this.

  • Optional: Video Player — If you’re up for it. Implement the video player.

  • Optional: Websocket powered chatroom.


Conclusion

Thanks for reading, and happy coding!


Early-adopters, thanks for signing up! You guys make my day — I appreciate every one of you.

For everyone else, please sign up to get the latest news and articles. It’s never too late, and it’s free!