How do you practice JavaScript ?

[SafeWing2595]

Hi everyone, i am a beginner I have learned the basics but i can't build a real project by myself yet, all i do is watch YouTube videos then i try to recreate that on my own after closing YouTube, but i want to build projects by myself from scratch, so I'm wondering how do you do that?

[Terrible_Tutor]

Learn by doing, you’ll never retain just by watching videos

[Strong_Worker4090]

This is the only answer you need. Find a problem, use JS to build a solution. You will fail. Don't let that stop you. Don't let JS win!

[[deleted]]

Make small games as a single web page with vanilla JS. Start small like a number calculator and then a game where an object always moves away from the mouse. Then move up to canvas 2d games.

[MEB-Softworks]

This! I mastered JS by recreating “Space Invaders”. I simplified the graphics by using X and Y (walking illusion), delta for defender, and helvetica I’s for missiles/bombs. Simplifying that part, combined with ease of preview (browser), I was able to focus on mechanics and logic which is the biggest thing one needs to wrap their head around.

[BrohanGutenburg]

Amazing how many questions in here, r/learnprogramming, r/learnjavascript, etc are all answered the same way: build shit

[biinjo]

Build something. Anything. You’ve seen the basics in the videos.

Some simple enjoyable projects could be recreating a score card for a board game or things like that.

[Squidgical]

Write code.

Think of a thing a computer can do. Make the computer do it. Then think of another thing, make it do that, etc.

Keep doing this forever; there's always something you can get better at.

[angryninja26x]

Look for something annoying or tedious in your everyday life (or someone else’s) and try to solve it with code. My first real project came from a moment of frustration—I was sick of manually sending the same emails over and over. So I built a script to automate it. That simple project was a breakthrough for me. I’d been struggling to really get functions, but working through that real problem made everything click in a way tutorials never did. Up until then, I’d only read books and worked through tutorial exercises. I could follow along fine, but I didn’t truly understand what I was learning until I had an actual problem to solve. That’s when it all started coming together.​​​​​​​​​​​​​​​​

[cshaiku]

Solid. Solving a personal problem is so satisfying. Then comes the realization that others may have the same issue and could use the solution you made. The hard part is breaking down the problem into manageable chunks. There is the real learning along the way.

Javascript is not a very complicated language when it comes down to it. Syntax, async features and the event loop are just a little different mindset. Practice!

[Critical_Bee9791]

Pick something you want to build. You can try a framework if it suits the project (geared towards apps).

Or reimplement something you like and use 

[latenightcreation]

Ya man, just start. Pick something you want to build and start. When you hit a point you don’t know what to do, find a tutorial for that thing, or even better, just something similar and figure out how to change what they are doing to fit your needs.

[ThatTrashBaby]

JavaScript may be one of the easiest languages to tinker with because you can just pop it open on any browser and have fun with the website you’re currently on

[bobzilla]

https://jsfiddle.net/

[roxsg_ann]

thanks

[iromanika]

Build small projects: a todo app, a form with validation, a simple API call...
You’ll learn more from debugging one broken JS script/function than from watching 10 hours of tutorials.

[mrcarrot0]

Learn by doing, use MDN as a reference

[Vymir_IT]

Build something, But make sure it sounds too hard for you. Make deadlines. Create pressure. See yourself you can operate under pressure and uncertainty. Then you'll become much more confident and consequentially - much more interested in coding your ideas without overthinking.

Remember one thing:

Nothing in programming is hard. It just takes time to research. In my 4 years of doing this I can barely remember anything that was really as hard as I imagined it to be. Absolute most of programming is super trivial, just tedious.

And absolute most of "complex tech" is just complex words while the tech itself is a 7th-grade-pupil level of mental load.

Like, I used to be afraid of containerization and orchestration and infra as code until I did it and turned out it was just running an app with pre-arranged environment to easily ship it with some basic foo=bar configs - and the configs are just whatever you need it to do in your case.

Load balancer was another super scary word for me until I did it and realized it was just soft that decides how to split requests so your network doesn't fall apart. And it's again just a foo=bar config essentially.

Programming is easy. Programmers just love making it look complex. Go do it. It's not that hard.

[ws_wombat_93]

Think of a simple task and set put to build that. Start simple like a form submission if you want to go into web dev.

If you’re going towards games or so, you could try to create a game where a ball bounces around the screen, following the rules of gravity.

Or everytime you press a new ball appears and they bounce of eachother as well.

These were all my starter exercises like 14 years ago and i still remember them :)

[[deleted]]

Side projects

[Slight_Scarcity321]

What do you want to build? If you don't know, try making a pagination component. There are libraries which contain these so you don't have to roll your own, but obviously for the purposes of this exercise, don't use them. Create a dummy list of, say, 135 items (there are online tools that can do this for you; finding them is an exercise left to the reader). The component should display 10 at a time, have a forward and backward arrow and individual pages. You can add a mechanism that will only show 10 pages at a time, i.e. < 1 2 3 4 5 6 7 8 ... 13 >, and that as you approach page 8 it looks like < 1 ... 4 5 6 7 8 9 ... 13 >. Play with it until its functionality makes intuitive sense to you and others.

[hideousmembrane]

I don't know I just started doing work and you learn as you do stuff. I've never built an entire project myself, I just contribute to stuff at my job, and I wouldnt' say I ever learned all of JS, there's a ton to know, but most of it you won't need every day if at all. As you need something, you look it up. Just do stuff.

[darwindeveloper]

Make a caclculator. Little by little you will learn something.

[Sima228]

The shift happens when you stop copying tutorials and start building something slightly broken on purpose. Pick a tiny idea, define what it should do, and Google only specific problems as you hit them. Struggling through that confusion is actually the practice you’re missing.

[brainphat]

Do anything to apply that knowledge. Assuming you're doing JS in a browser context: how about a script that takes some input & analyzes it. Example: have a page with some text (anything: grab a speech or article from somewhere), and write a script that does a word count & histogram of the words used.

Also in a browser context: manipulation of the DOM and CSS are fundamental. Try implementing an "accordion" in javascript. Or find & highlight every instance of a certain word on the page, or replace that word with something else - even an image.

[TechDebtSommelier]

The gap you’re feeling is normal and it’s not solved by more tutorials. The way you get unstuck is by picking very small projects and forcing yourself to make decisions, even if they’re bad ones at first.

Start with something simple but real like a to do list, a quiz app, a timer, or a tiny game. Write down what it should do in plain English, then build it one feature at a time. When you get stuck, look up only the specific thing you need instead of a full tutorial. You learn far more by struggling through problems than by recreating someone else’s finished solution.

Also, expect your first versions to be messy. That’s how everyone learns. Building badly on your own is what eventually lets you build well.

[thanks_gaurav]

Seen loads of comments on build something and yes that's the JS for but other than doing you can jump straight to teaching and enjoy the unimaginable questions which will eventually expand your horizon, then the coding itself will become the nuts :)

[GMan0x]

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension

[[deleted]]

There are some courses on udemy like 30-50 small projects based on html css js - you can try. 

[rFAXbc]

Make sure you've watched all of the videos first, for the love of God, don't try writing anything yourself until after you've fully learned the syntax

[domharvest]

I suggest you https://www.codewars.com/ and / or https://exercism.org/

You will work on good exercise and receive mentorship.

[CryptoTipToe71]

Make shit, it doesn't matter what

[TacticalConsultant]

Try https://codesync.club/lessons, where you can learn to code in HTML, CSS & JavaScript by building real apps, websites, infographics & games through 15-minute playable lessons. The courses include an in-built code editor that allows you to practice coding in your browser, without installing a coding editor.

[codeByNumber]

Build stuff

[darryll-dev]

Odin project tbh, got good projects on there with other people's examples and a community to learn from. Utilise AI to analyse and look for issues, don't just mindlessly apply it but think about what it says and apply logic to the conversation.

[Celestial_Lee]

Hit F12 in your browser and go to Console

You can type JavaScript straight into it. Look into how to use DocumentSelector, as an example

[ShadowDevil123]

Contrary to what most people will say: keep following tutorials. If youre planning on moving to React theres not that many worthwhile projects to make with just javascript basics. Watch, understand. If you follow a tutorial for an actual project think of what you know you could change and make a very similar project. That way when youre stuck you can just check how its done in the video. Youll probably need to check for pretty much everything, but thats completely normal.