Hour of Code: Top 5 Frontend Projects

Ekaterina Khudikova

Today, we continue showcasing the most popular projects on JetBrains Academy as a part of the Hour of Code celebration. This time, we’ll talk about the technologies used for frontend development – HTML, CSS, and JavaScript. If you missed our previous posts on Python, Java, Kotlin, and Android, visit Join Us for Hour of Code at JetBrains Academy to see the full lineup.

Frontend development usually handles the client-side graphical interface in websites and software applications. This task is far from trivial: technology is always changing, and people use lots of different kinds of screens and devices to access the internet. Frontend developers make sure that no matter the device type or screen resolution, customers see a relevant and user-friendly interface.

2022 marks JavaScript’s 10th year in a row as the most commonly used programming language, according to the Stack Overflow Developer Survey 2022. JavaScript also joins HTML and CSS as the most popular learning languages among the respondents of the survey.

At JetBrains Academy, we do our best to help you stay on top of your frontend skills – this summer, we released three HTML, CSS, and JavaScript tracks tailored to different levels and learning goals. Rest assured, these tracks include a huge variety of real-life projects to keep you engaged during your studies. And if you’re not sure where to start or which project to choose next, check out these most popular frontend projects on JetBrains Academy in 2022.

Case Converter (Medium)

Everyone has been in a similar situation at least once: you need to text a friend or a colleague, so you pull up a phone and type a long and elaborate message only to find out that the whole text has been written in caps. Well, let’s create an app to resolve this problem and edit the message for us. While working on Case Converter, you will get familiar with basic HTML elements, create event handlers for click events, and learn to work with strings in JavaScript.

Simple Currency Converter (Medium)

What is the dream destination for your perfect vacation? No matter the country, you will face the same challenges when visiting any city abroad – which hotel to book, which sights to see, and, most importantly, how much money you need to take with you. This project will help you convert one currency into another. In addition to making a handy app, you will learn the basic JavaScript syntax and get familiar with variables, conditions, loops, and functions.

Virtual Piano (Hard)

One of the most common tasks every junior frontend developer faces is matching the keys the user presses on their keyboard with different functions of the web application. To help you develop and train this useful skill, we invite you to create a Virtual Piano app. In this project, you will learn the most popular CSS properties, use JavaScript to create event handlers for browser events, and write your first HTML document.

Portfolio (Challenging)

Now that you have a few frontend projects under your belt, it’s time to get serious and create a portfolio to showcase your knowledge of HTML, CSS, and JavaScript. The portfolio project will help you test your skills while creating a one-page website with its own design and interactive elements. You will also learn to adapt web pages to different screen resolutions and browser versions.

Flashcards (Challenging)

Every learner knows how important repetition is for remembering new information. Whether you study HTML tags or words in a foreign language, having a tool to train your memory will be a great help. With this project, you will create a stylized page with flashcards, each containing a question on one side and the answer on the other. Apart from getting a useful memory-aid application, you will understand the basics of HTML and CSS and learn how these two languages can help you build a simple web page with a beautiful design.

We hope you enjoy celebrating the Hour of Code with us! Share your favorite frontend project on social media with the hashtags #HourOfCode and #JetBrainsAcademy or use these hashtags to see other great projects our learners like. 

Happy Hour of Code!
Your JetBrains Academy team

Subscribe to JetBrains Academy updates

Subscribe form

By submitting this form, I agree to the JetBrains Privacy Policy Notification icon

By submitting this form, I agree that JetBrains s.r.o. ("JetBrains") may use my name, email address, and location data to send me newsletters, including commercial communications, and to process my personal data for this purpose. I agree that JetBrains may process said data using third-party services for this purpose in accordance with the JetBrains Privacy Policy. I understand that I can revoke this consent at any time in my profile. In addition, an unsubscribe link is included in each email.

Submit

Thanks, we've got you!