Here Are 6 Front-End Challenges to

Code
Are you able to code these front-end challenges?
Indrek Lasn Follow
Oct 23 · 4 min read

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Photo by Olav Ahrens Røtne on Unsplash

Front-end development is stressful and hard — but with practice, one can
master the craft. If you’re willing to put the work and e ort in, you’ll be able
to become a pro cient problem solver in the front-end development
landscape. One e ective way to become a great front-end developer is to
simply build and solve as many challenges as one can.

Here are six challenges you can start solving today to become a master of
front-end development. Without further ado, here are the six challenges
you probably should code.

. . .

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 1. Credit Card Form
A fantastic credit card form with smooth and sweet microinteractions.
Includes number formatting, validation, and automatic card-type detection.
It’s built with Vue.js and also fully responsive.

See it live here.

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 credit-card-form — https://github.com/muhammederdem/credit-card-form

What you’ll learn by solving the challenge

Form handling and validation

Handling event listeners (e.g., when the elds change, it’ll print the
values on the credit card)

Understanding how to display and position elements on the page,

especially the credit card overlapping the form

. . .

2. Bar Chart From Scratch

A bar chart or bar graph is a chart or graph that presents categorical data
with rectangular bars with heights or lengths proportional to the values
they represent.

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 The bars can be plotted vertically or horizontally. A vertical bar chart is
sometimes called a line graph.

What you’ll learn by solving the challenge

Display data in a structured and easily understandable way

Optional: Learn how to use the <canvas> element and how to draw
elements with it

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 You can nd the data for the world population by year here.

World Population by Year

Population growth through history from 5000 BC to the current year
(2019) for the entire population of the world

www.worldometers.info

. . .

3. Twitter Heart Animation

Back in 2016, Twitter introduced this awesome animation for their tweet
likes. As of 2019, it still looks rad, so why not create one yourself?

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Twitter tweet like animation

What you’ll learn by solving the challenge

How the keyframes CSS attribute works

How to manipulate and animate HTML elements

How to combine JavaScript, HTML, and CSS

. . .

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 4. GitHub Repositories With Search Functionality
Nothing out of the world here — GitHub repositories are basically just a
glori ed list.

The task is to display the repositories and allow the user to lter through the
repositories. Use the o cial GitHub API to fetch repositories per user.

GitHub pro le page — https://github.com/indreklasn

What you’ll learn by solving the challenge

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 How to fetch data from an API

How to display the data from the API

How to lter and show the relevant data for each search

Optional: If you’re up for the challenge, use the v4 API, which is built
using GraphQL. If you want to learn GraphQL, head over to one of my
previous articles.

How to set up a powerful API with GraphQL, Koa, and

MongoDB
Building an API is fun!
medium.com

. . .

5. Reddit-Style Chat Rooms

Chat rooms are a popular way of communicating thanks to being easy and
fun to use. But what actually powers modern-day chat rooms? WebSockets!

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 What you’ll learn by solving the challenge
How to use WebSockets and real-time communication and data updates

How user permissions levels work (e.g, the owner of a chat channel has
the role of admin , while others in the room have the role of user )

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Form validation and handling — remember, the chat box for sending a
message is an input element

How to create and join di erent chat rooms

Direct messages and how they work. Users can communicate with other
users privately. Essentially, you’ll be establishing a WebSocket
connection between two users.

. . .

6. Stripe-Style Navigation
What’s unique about this navigation is the popover container morphs to t
the content. There’s an elegance to this transition versus the traditional
behavior of opening and closing a new popover entirely.

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Stripe navigation

What you’ll learn by solving the challenge

How to combine CSS animations with transitions

Cross-fading content and applying the active class for the element
being hovered

Try doing it rst yourself, but if you need help, check out this post for a step-
by-step guide.

. . .

Conclusion
Thanks for reading — hope you found something interesting to code.
Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Remember, there are no shortcuts when it comes to getting good at coding.
Start putting the work in, and boost your coding skills by building as much
as you can. If you didn’t nd anything interesting, check the post below for
even more ideas.

The Secret to Being a Top Developer Is Building Things!

Here’s a List of Fun Apps to Build!
medium.com

Front End Development JavaScript Programming Software Development React

580 claps

WRITTEN BY

Indrek Lasn Follow

Engineer. Invest in yourself. Follow me on Twitter @

https://twitter.com/lasnindrek

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Better Programming Follow

Advice for programmers.

See responses (2)

More From Medium

More from Better Programming

7 Essential Books for Programmers

Giorgos Petkakis in Better Programming
Oct 17 · 8 min read 1.8K

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 More from Better Programming

How to Ace the Coding Interview, by an Ex-

Facebook Interviewer
Ish Baid in Better Programming
Oct 10 · 8 min read 2.8K

More from Better Programming

Thinking in Kubernetes (K8s)

Chris Cooney in Better Programming
Oct 21 · 5 min read 331

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
 Discover Medium Make Medium yours Become a member
Welcome to a place where words matter. Follow all the topics you care about, and Get unlimited access to the best stories on
On Medium, smart voices and original we’ll deliver the best stories for you to your Medium — and support writers while
ideas take center stage - with no ads in homepage and inbox. Explore you’re at it. Just $5/month. Upgrade
sight. Watch

About Help Legal

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD