avatarTrevor-Indrek Lasn

Free AI web copilot to create summaries, insights and extended knowledge, download it at here

2810

Abstract

able way</li><li>Optional: Learn how to use the <code><canvas></code> element and how to draw elements with it</li></ul><p id="91ee">You can find the data for the world population by year <a href="https://www.worldometers.info/world-population/world-population-by-year/">here</a>.</p><div id="1d68" class="link-block"> <a href="https://www.worldometers.info/world-population/world-population-by-year/"> <div> <div> <h2>World Population by Year</h2> <div><h3>Population growth through history from 5000 BC to the current year (2019) for the entire population of the world</h3></div> <div><p>www.worldometers.info</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/0*O-3h6TIOBfuFhgNy)"></div> </div> </div> </a> </div><h1 id="0750">3. Twitter Heart Animation</h1><p id="7f1d">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?</p><figure id="64a2"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*mdijyUaqeu48ORAw9QPBBA.gif"><figcaption>Twitter tweet like animation</figcaption></figure><h2 id="e6cc">What you’ll learn by solving the challenge</h2><ul><li>How the <code>keyframes</code> CSS attribute works</li><li>How to manipulate and animate HTML elements</li><li>How to combine JavaScript, HTML, and CSS</li></ul><h1 id="9338">4. GitHub Repositories With Search Functionality</h1><p id="74f9">Nothing out of the world here — GitHub repositories are basically just a glorified list.</p><p id="2fe6">The task is to display the repositories and allow the user to filter through the repositories. Use the <a href="https://developer.github.com/v3/">official GitHub API</a> to fetch repositories per user.</p><figure id="a081"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*PAPNqs_dj7Jd9RkqSXYlbw.png"><figcaption>GitHub profile page — <a href="https://github.com/indreklasn">https://github.com/indreklasn</a></figcaption></figure><h2 id="3a9b">What you’ll learn by solving the challenge</h2><ul><li>How to fetch data from an API</li><li>How to display the data from the API</li><li>How to filter and show the relevant data for each search</li><li>Optional: If you’re up for the challenge, use the <a href="https://developer.github.com/v4/">v4 API</a>, which is built using GraphQL. <a href="https://readmedium.com/how-to-setup-a-powerful-api-with-graphql-koa-and-mongodb-339cfae832a1">If you want to learn GraphQL, head over to one of my previous articles</a>.</li></ul><div id="1c7b" class="link-block"> <a href="https://readmedium.com/how-to-s

Options

etup-a-powerful-api-with-graphql-koa-and-mongodb-339cfae832a1"> <div> <div> <h2>How to set up a powerful API with GraphQL, Koa, and MongoDB</h2> <div><h3>Building an API is fun!</h3></div> <div><p>medium.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/1*KQneAcO1GBVPIkucIZe41g.png)"></div> </div> </div> </a> </div><h1 id="feda">5. Reddit-Style Chat Rooms</h1><p id="9912">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!</p><figure id="ac92"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*AdNcS-2KHOGCuiZmEcKtRA.png"><figcaption></figcaption></figure><h2 id="ce66">What you’ll learn by solving the challenge</h2><ul><li>How to use WebSockets and real-time communication and data updates</li><li>How user permissions levels work (e.g, the owner of a chat channel has the role of <code>admin</code>, while others in the room have the role of <code>user</code>)</li><li>Form validation and handling — remember, the chat box for sending a message is an <code>input</code> element</li><li>How to create and join different chat rooms</li><li>Direct messages and how they work. Users can communicate with other users privately. Essentially, you’ll be establishing a WebSocket connection between two users.</li></ul><h1 id="8604">6. Stripe-Style Navigation</h1><p id="4f26">What’s unique about this navigation is the popover container morphs to fit the content. There’s an elegance to this transition versus the traditional behavior of opening and closing a new popover entirely.</p><figure id="4ffa"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*SSCs0AjDiZbWcY9Fa6NDMQ.gif"><figcaption>Stripe navigation</figcaption></figure><h2 id="a3be">What you’ll learn by solving the challenge</h2><ul><li>How to combine CSS animations with transitions</li><li>Cross-fading content and applying the <code>active</code> class for the element being hovered</li></ul><p id="cace">Try doing it first yourself, but if you need help, <a href="https://lokeshdhakar.com/dev-201-stripe.coms-main-navigation/">check out this post for a step-by-step guide.</a></p><h1 id="f008">Conclusion</h1><p id="e91f">Thanks for reading — hope you found something interesting to code.</p><p id="6d70"><b>P.S: Looking for more coding ideas? Never run out of coding ideas, ever again. <a href="https://gumroad.com/l/IuqKc">Get access here to a bunch of front-end challenges by me.</a></b></p><p id="5d39">Remember, there are no shortcuts when it comes to getting good at coding.</p></article></body>

Here Are 6 Front-End Challenges to Code

Are you able to code these front-end challenges?

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 effort in, you’ll be able to become a proficient problem solver in the front-end development landscape. One effective 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.

Become a Medium Member to directly support my work. You’ll also get full access to every story on Medium. Thanks in advance!

1. Credit Card Form

A fantastic credit card form with smooth and sweet micro-interactions. Includes number formatting, validation, and automatic card-type detection. It’s built with Vue.js and is also fully responsive.

See it live here.

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

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

You can find the data for the world population by year here.

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?

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

4. GitHub Repositories With Search Functionality

Nothing out of the world here — GitHub repositories are basically just a glorified list.

The task is to display the repositories and allow the user to filter through the repositories. Use the official GitHub API to fetch repositories per user.

GitHub profile page — https://github.com/indreklasn

What you’ll learn by solving the challenge

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!

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)
  • Form validation and handling — remember, the chat box for sending a message is an input element
  • How to create and join different 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 fit the content. There’s an elegance to this transition versus the traditional behavior of opening and closing a new popover entirely.

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

P.S: Looking for more coding ideas? Never run out of coding ideas, ever again. Get access here to a bunch of front-end challenges by me.

Remember, there are no shortcuts when it comes to getting good at coding.

Front End Development
JavaScript
Programming
Software Development
React
Recommended from ReadMedium