DEV Community

Cover image for 15 Beginner JavaScript Projects to Improve Your Front-End Skills!

15 Beginner JavaScript Projects to Improve Your Front-End Skills!

Miguel Z. Nunez on August 13, 2021

The fastest way for you to become a good web developer is to practice. An excellent way to practice is by building as many beginner projects as you...
Collapse
 
akaricypher profile image
akaricypher

With this I can be the next Mark Zuckerberg if i to work hard and improve everyday.... Many thanks Miguel Niguez.. Am following you this instant

Collapse
 
miguelznunez profile image
Miguel Z. Nunez

Thank you brother

Collapse
 
akaricypher profile image
akaricypher

Can i apply for frontend jobs after completing these projects??... Kus i believe if i can do all these projects, then there's no frontend job out there that i can't handle

Thread Thread
 
miguelznunez profile image
Miguel Z. Nunez

You can certainly try. It also depends on the particular position and company you are applying with. A lot of companies require a bachelors degree in Computer Science. Most companies, if not all, also require a skills test that tests you on data structures/ algorithms, so you will need to brush up on that as well. One thing is for sure, completing these projects is an excellent start for anybody looking to become a developer. I also can confidently say that if you can build these projects you will know more about web development than most software engineering students. I know that for a fact because I graduated with a whole bunch of them.

Thread Thread
 
akaricypher profile image
akaricypher

Ok that's good to know sir...
I myself graduated from electrical/electronics engineering department, and while in college i learnt data structures and algorithms... I think I will be a good fit

Collapse
 
princemuel profile image
Prince Muel

Hello, using the eval() function in JS is forbidden because it can allows the opportunity for dangerous code to be passed into an application

Collapse
 
lakshyachopra profile image
Lakshya Chopra

It's not forbidden, eval() is just not recommended.

Collapse
 
princemuel profile image
Prince Muel

half empty, half full. still means the same thing

Collapse
 
plake492 profile image
Patrick Lake

Added a bit to the color generator
plake492.github.io/color_picker/

Collapse
 
sourabhd profile image
Sourabh Das

Hey patrick,loved your work.can i get your twitter link??
twitter.com/SourabhWebDev here is mine,please ping me once i have something in my mind and wanted to discuss.

Collapse
 
plake492 profile image
Patrick Lake

Thanks! And sure thing: twitter.com/PatrickLake492

Collapse
 
ronaldochelone profile image
Ronaldo

Show , muito bom , parabéns e obrigado por compartilhar seu conhecimento.

Collapse
 
standiki profile image
Stanley Diki • Edited

Of all, I have seen this is one of the best and easy-going for learners. I'm creating a GitHub repo for all 15 including the remain 10 from your website. Thanks

Collapse
 
rubao76 profile image
rubao76

Realmente muito bom, sem duvida o melhor jeito de aprender, porem fiquei com muitas duvidas no projeto Image carousel, nao entendi completamente as funcoes, o if, se alguem puder me explicar melhor, agradeco...

Collapse
 
manuelsayago15 profile image
Manuel Sayago

I just saw this and as a coincidence, I'm studying more Javascript to learn its theory because they're asking me that at work. I always coded like with the best effort and try to apply solutions to the problems, but, this theory is about knowing all Javascript and how it works and in that way, code better, so, I was looking for projects to do and practice more, as I'm reviewing those subjects again, your projects list looks awesome!

I'll do it and I'll be back ;)

Thanks for sharing!

Collapse
 
robsonmuniz16 profile image
Robson Muniz

Good material, I believe in learning by doing:
I myself created a playlist of several real projects, where you can learn DOOM, Arrays, Data structures, Data structures while producing a project.
It's magical to see each line of code and its result in real time.

🖥️ JavaScript Projects for beginners (explained, step-by-step):
bit.ly/3sxW24M

Collapse
 
ptejada profile image
Pablo Tejada

This is a great list. Given the length of it i suggest adding a table of context at the top with anchors to each project idea.

Collapse
 
j33mk profile image
Jamal Hussain

Best 👍 Good work

Collapse
 
suzanna profile image
Suzanna

Hello, guys. I did all as shown here, but have a problem with displaying of the container3. If I initially choose none in display of css, "create note" button doesn't showing this area. This area is either shown from the beginning (I delete the "display" from ccs and works, or I don't have it, if I do all as it is shown here.

Collapse
 
amesavee23 profile image
amesavee23

Hii, thank you so much for an educative video.
I just started building projects in JavaScript, I started with the calculator, but I don't think my JS is working, cos the calculator isn't clicking.
What can I do?

Collapse
 
miguelznunez profile image
Miguel Z. Nunez

Is your JavaScript file linked in the HTML file?

Collapse
 
bigol profile image
José Santos Silva

Muy útil. ¡Gracias!

Collapse
 
meo3w profile image
Phil Hasenkamp

Well done, Miguel! I plan to try each of these this coming week. Thank you for sharing your knowledge with us!

Collapse
 
prashant1304 profile image
Prashant1304

already did first 8 gonna start doing other

Collapse
 
lassonico profile image
Nicolas Lasso Rodriguez

Muchas gracias por compartir todo lo que sabes. Estoy aprendiendo y me establecí la meta de hacer estás aplicaciones amigo!
Un saludo desde Colombia!!

Collapse
 
miryana profile image
miryana

Thank you for sharing!

Collapse
 
fridaycandours profile image
Friday candour

, great collection

Collapse
 
booot profile image
phpdevroot

Let's do It.. thanks for share

Collapse
 
nicoalani profile image
Nico Alani -✨🛸☄️

Nice for Starters! Well Done!

Collapse
 
faisalamin001 profile image
Faisal Amin

Thanks! all are interesting projects🤍

Collapse
 
qq449245884 profile image
qq449245884

Dear Miguel Nunez,may I translate your article into Chinese?I would like to share it with more developers in China. I will give the original author and original source.

Collapse
 
miguelznunez profile image
Miguel Z. Nunez

Sure you can, how will they understand the tutorials though? Many people add my videos in websites without asking. I appreciate you asking

Collapse
 
bygossipgirl profile image
Beatriz

Oh, My God, Awesome!!! 👏👏

Collapse
 
zmalarcon profile image
Zully Alarcón Rodriguez

Your can participate in katas, pair programming too for improving your skills in development

Collapse
 
mkstancreative profile image
Chidimma Stanley

It has not been easy for me trying to get along with JavaScript. I hope this helps

Collapse
 
jumzeey profile image
Jumzeey

Thanks a lot for this Miguel, now I have more beginner projects to practice and to expose students to.

Collapse
 
akaricypher profile image
akaricypher

Thanks so much sir once again.... Please I would like know if these projects are good enough to show potential employer??

Collapse
 
awsomebro profile image
awsomebro

I am the next Bill gates
Let's gooooooo

Collapse
 
bigt1305 profile image
Anthony Hoss

Thanks for the list, nice collection for ideas!! 😁

Collapse
 
suzanna profile image
Suzanna

Thank you! You explain so well!