17 New JavaScript Projects for Beginners [Full Course]

[@codewithbubb]

Hope you enjoy this video. It took around 50+ hours to plan, record, edit and put together so please share with anyone you feel might find it useful and drop me a comment with any feedback you have 👍

[@Abd-Shajan]

This video is very useful, we have a lot of things to learn in this video. thank you for your time and effort to create this wonderful video in an effective way. Thank you so much

[@AliKing-t7v]

thank you sir for creating such type of valuable vidio

[@Rachit-i9s]

thank you for these simple but very useful js project bubb! really appreciated your work

[@codewithbubb]

Ah, no problem at all. Hope you find them useful 😀

[@Abd-Shajan]

The way you teach us JS coding is really impressive. I could understand it line by line. Thank you man.🎉

[@mohammadabbas1623]

following this project I got such a confident on my javaScript skills, thankyou. keep posting such content

[@codewithbubb]

Ahh, that's so great to hear Mohammad! Glad you found the projects useful and look forward to seeing what you get up to in the future!

[@mohammadabbas1623]

@codewithbubb you're really an underrated channel. I'm willing to see this channel at 1M soon

[@codewithbubb]

@@mohammadabbas1623 Thanks so much for your kind words - I wish I could get to 1M !! 😀

[@hassansyed6087]

Bubb, you're a real champ. Thank you for making these videos for the newbies. We really appreciate you Subbed and Liked.

[@codewithbubb]

Thanks very much Hassan, appreciate your support!!

[@neilduran3586]

Just completed the Hello World program and what I love about JS is that you can write a different line of codes and achieve the same outcome!

[@linux-sv5nr]

I really learn a lot making these projects. You got a new subscriber, You have my gratitude, Bubb. Looking forward to your next videos!

[@HariPrasad-vj9os]

Love this course!! Really good for beginners...Thank You Bubb

[@mescalsour]

this is an amazing content thanks for your time and effort. will share definetely!

[@codewithbubb]

Ah, thank you so much! Appreciate your support and I hope you find the video useful.

[@TenderHooligan]

Love the videos, only thing that is slightly annoying is that you dont drag your window over to the right more so that i can see more code at once :)

[@codewithbubb]

Cheers mate. Thanks for the feedback. Yeah, it’s always a bit of a compromise; some people want to see the updates, others want to see all the code and then other people want to have the code in a massive font size so they can watch in their phone!! All the code is on GitHub if you want you see/follow along with anything if the helps you.

[@Localmarketpac]

Outstanding content! I wish half the screen was not hidden most of the time

[@CamaguNcoso]

This video was suggested by KZbin to my feed. I'll drop another feedback when I'm done with building all the projects in this vid.

[@AJSoundbites]

5 months have gone by did you manage to get even 1 project done ???

[@CamaguNcoso]

@AJSoundbites I even forgot that I made a comment on this video On that same month, I came across a video from Supersimpledev channel, a JavaScript tutorial from beginner to Pro. I have been doing the tutorial and the activities in it. For this tutorial, a prior knowledge of JavaScrip is needed. I noticed that the first project he uses DOM So if you don't know what DOM is and how it works it'll be confusing if you haven't done any JavaScript project on your own

[@monicapardo-dq7cc]

Gracias por tu trabajo, me esta ayudando mucho a aplicar javascript en mis proyectos. Buen video para empezar.Continua subiendo contenido!!

[@codewithbubb]

Thanks very much - appreciate all your support!

[@Salah-YT]

thank u so much 🙂

[@spartondon1010]

Underrated

[@codewithbubb]

Thanks very much for your support 😀

[@emiliorodrigues270]

Obrigado pelo otimo conteudo!! Fortaleza - Brasil - Go JS!!!

[@Raj_Vishwa1]

Subscribed ❤ Liked 👍 Shared 😊

[@codewithbubb]

Thank you so much Raj! Very much appreciated 🙏

[@ibraheemkatta3488]

Great!! Awesome!! So Useful!! thanks so much.

[@codewithbubb]

Thank you so much Ibraheem! Glad you found it useful.

[@AnnatarTevildo]

Awesome video!!!!

[@codewithbubb]

Cheers Dimitrije! Hope you find it useful 👍

[@AnnatarTevildo]

@@codewithbubb very!!! Hope there will be more in the future

[@codewithbubb]

@Kinder_Jajce certainly! What kind of things would you like to see?

[@AnnatarTevildo]

@@codewithbubb well, you explain in such a plain language which is perfect, i would like to see more projects with Promises, (fetch, async ) and also about Class Composition and i know there is alot out there on KZbin nut you explain in such a good way!!

[@lonewolf6160]

Subscribed. Thanks

[@Shipupa]

Really great beginner projects and I love the use of the constructor class in the shopping list project. I have a question: why did you call the renderItems function twice in the initialize function..? Also, how could we work around the input element to avoid rendering an empty string when the button is clicked? I’ll try the “if” statement on the renderItem function. Thanks and am happy to be your student.

[@codewithbubb]

Thanks Shi for your feedback! I take it you're talking about the Shopping List project? The initialise function calls renderItems to first of all get all the existing items (when the page loads) then there's a second call inside the event listener for when a new item is added - this is only called when the user clicks the add item button. Yes, that's a very good idea - we should really check what the user is entering and see if it is an empty string or perhaps meets a minimum string length. Probably the best place to do this is inside that event listener we just mentioned (which is setup in the initialise function). I would probably, for starters, just add a check to see if the user input is either an empty string or just consisting completely of white space like so: initialise() { this.addItemButtonElement.addEventListener('click', () => { // Check for empty strings if (this.newItemTextElement.value.trim().length < 1) { // Stop the item from being added (optionally display a message to the user) return; } this.addItem(this.newItemTextElement.value); this.newItemTextElement.value = ''; this.renderItems(); this.storeItems(); }); this.renderItems(); } Hope that helps you out!

[@Shipupa]

Thank you so much. Yes it has helped and solved the puzzle 🧩. I’m happy to continue learning from you. Happy holidays 🎉

[@codewithbubb]

@Shipupa Amazing! Glad I could help.

[@taylorchen678]

Why the script is placed in head section instead of right above the body end tag and what does the defer property do?

[@Salah-YT]

read this u will understand this is from chatGPT so yes bro i was same is u anyway. The decision between placing the `` tag in the `` or using the `defer` attribute in the `` depends on how you want your JavaScript to load and execute in relation to the rest of your webpage. Here’s a breakdown of each approach: --- ### 1. **Using `` in the ``** ```html ``` #### How it works: - The script is loaded and executed **immediately** when the browser encounters it. - This means the HTML content before the script tag is fully parsed, but the script will block the browser from parsing any remaining HTML until it is executed. #### Pros: - Ensures that the DOM (Document Object Model) elements defined before the script tag are available when the script runs. - Simple and commonly used in small projects or demos. #### Cons: - Not optimal for performance because the browser pauses parsing HTML to fetch and execute the script, which can slow down page rendering. - If the script is large or hosted on a slow server, the page might appear to "hang" while the script is being fetched. --- ### 2. **Using `defer` in the ``** ```html ``` #### How it works: - The `defer` attribute tells the browser to **download the script in parallel** while continuing to parse the HTML. - The script is executed **only after the entire HTML document is fully parsed**. #### Pros: - Improves performance as it does not block HTML parsing. - Ensures the script runs after the entire DOM is loaded, so all elements are available for manipulation. - Ideal for larger projects or when working with frameworks like React or Vue, where scripts depend on the fully loaded DOM. #### Cons: - Scripts with `defer` must wait for HTML parsing to finish, so if the script is critical for the page's initial behavior, this might slightly delay its execution. --- ### Which Practice is Better? In modern web development, **using `defer` in the `` is generally better** for the following reasons: 1. **Improved performance**: The browser can parse the HTML and download the script at the same time, reducing page load time. 2. **Non-blocking behavior**: HTML parsing is not interrupted, so the page renders faster for the user. 3. **Predictable execution order**: If multiple scripts use `defer`, they execute in the order they are declared in the HTML, which is critical for dependencies between scripts. --- ### When to Use `` in the ``: - If you are writing small, simple scripts and don't want to worry about the `defer` attribute. - If your script is very small and needs to execute immediately after certain DOM elements are loaded. --- ### Conclusion: For most cases, especially in larger or modern projects: - **Use `` in the ``.** For quick tests or small projects: - Placing the script in the `` is fine. ### Final Suggestion: Use the `defer` attribute for better scalability, readability, and performance.

[@princesharma-pz4ur]

U earn a new subscriber form inda

[@codewithbubb]

That's great! Glad to have you aboard 😀

[@AdityaKumar-z2t4x]

thanks for the video

[@learner3404]

Great content.

[@codewithbubb]

Cheers! Appreciate your support!

[@winstoneanderson1817]

Thank you 😃

[@codewithbubb]

You're welcome Winstone! Hope you found it useful.

[@EndlessFlowCodes]

i used the opacity property to that model when btn clicked the model will appear like opacity to "1" and when clicked on the model window the opacity is set to 0 which will make it disappear

[@adesegunsamuel1671]

this is lovely

[@codewithbubb]

Thank you very much - hope you find it useful!

[@mohamedessakhi7501]

Thank you

[@kehindeoluwadamilare5594]

Lovely Video @codewithbubb, I have a question, It's about the Star Rating, I noticed when the app started with the empty class of the star content if I select the last star it changes to filled which is fine, but when I select the last star again it doesn't change or reduced back to empty, except I selected on the fourth or the 3rd or any other than the 5th star, if I select on the 1st star and it changes to filled, when I select back the 1st star it doesn't change back to empty...??

[@kgomotsolouisaseema]

Hey , so i completed ALL the projects and i must say ,it was nice to learn that way . the level of beginer friendliness is 5/10 , thought the projects are commonly beginner friendly as some youtubers also have them , youre explanation of some concepts is lacking and you kept halving the screen which made coding along difficult . but thank you so much for this , i would mos def recommend this to some else learning JS. i did not proof read this .

[@pranavkumar2169]

thankyou

[@codewithbubb]

You're welcome - hope you find the projects useful!

[@Saifcore]

Thank youuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu

[@codewithbubb]

You’re welcome lol 😂

[@Saifcore]

@@codewithbubb It's my fifth day on this tutorial and fifth project and I give about 4-5 hrs/day to coding. I have a chemistry major but I think this skill will be a lot beneficial a lot to. What do you advise me on it for better growth? It's been a month since I started this all.

[@codewithbubb]

Oh wow! Great effort and thanks for choosing to spend your coding time with me! Yeah, definitely a great skill to have. I would say to get the fundamentals of coding (in any language) under your belt first and then you can explore what sort of things you might want to move into. Is there anything about coding you particularly enjoy? Designing websites? Solving problems? Making apps?

[@Saifcore]

@@codewithbubb I explored the topics bit and I think making apps would be a interesting thing.

[@gokseninturan6434]

Hi, First thanks you so much for this video I have a question rather problem. If i delete "defer", my code is not work (for modal project). What is the reason of this. Thanks.

[@codewithbubb]

Hi, you’re welcome! Hope you’re finding it useful. To answer your question, the defer keyword in the script tag waits for the document (all of the HTML etc) to be loaded into the browser first, before running any JavaScript (included in the script tag). This means your JavaScript won’t run before the document is loaded and try and access something on the page that isn’t there yet! Chances are, if you remove the defer keyword the JavaScript is being run too early and throwing an error as it’s trying to work with an element on the page that’s not there. You can also do a similar thing by wrapping your code in the window.onload function which will also wait for the page to be ready before running the JavaScript. Hope that makes sense!

[@timothyluppes2665]

Hé Bubb, question: regarding the modal tutorial. I’m using glitch, it doesn’t toggle open close when you press the content element. It opens, but doesn’t closes, expected when I put a space in the code it reacts. Thoughts ?

[@anasanas6027]

Bro! Are these projects enough to start studying react js

[@djlee0721]

🔥🔥🔥

[@codewithbubb]

Cheers Daniel!

[@l-fitness3590]

Just finished the colour flipper and I attempted these before i watch the projects to test my knowledge I add onclick to my buttons with a function name instead of addeventlistener is this bad Practice

[@codewithbubb]

Do you mean inline functions in your HTML or a .onclick = in your JavaScript code. Inline functions in your HTML are considered bad practice in most situations but it’s good to know of them! Adding event listeners or using properties on selected elements (like .onclick) in your JavaScript code is pretty much the same thing. I prefer the .addEventListener method but assigning functions directly to a property is fine.

[@l-fitness3590]

@@codewithbubb great thank you and great videos I started my coding journey two weeks ago and wish I found this channel sooner

[@codewithbubb]

@l-fitness3590 no problem. Good luck with your journey - let me know if you have any questions!

[@l-fitness3590]

@@codewithbubbyou definitely should have picked a different work on the testimonials project 😂

[@codewithbubb]

@@l-fitness3590 Sorry, not sure what you mean Lawrence?

[@aloSolo]

shouldn't the script go at the bottom instead of at the top?

[@codewithbubb]

Yes, the reason for putting the script tag at the bottom of the body is so that the whole document (any HTML elements on the page) are loaded and available before the JavaScript runs. However, you can achieve the same thing by putting the script tag in the HEAD of the document and using the defer keyword. This allows all the elements on the page to load before the JavaScript is executed. Hope that helps.

[@JeremiKress]

​@@codewithbubbvaluable information!

[@Jester19-o1f]

❤

[@codewithbubb]

Thanks for your support!

[@Sneha_srishti]

Helpfull 🥹❤️

[@bmxir199]

i love u

[@codewithbubb]

Why thank you ☺️ Hope you enjoy the vid.

[@bmxir199]

@@codewithbubb 👌

[@hwapyongedouard]

this is what i needed any THANK YOU... any ways " not ms word aaaaaaaaa 😂😂😂😂😂😂"

[@codewithbubb]

You’re more than welcome! Hope you find the video useful. I think there did used to be an ‘Export to HTML’ option in Word. Not sure if it’s still there 😀

[@aloSolo]

in your future videos can you break up the code so its visible on the screen please?

[@codewithbubb]

Do you mean, keep the code on a separate screen to the preview/finished project? Apologies if you meant something else.

[@aloSolo]

@@codewithbubb You know when you have both screens next to each other? When you're writing code, it keeps going when you write a long line of code, I'm not able to see what you wrote. I was just suggesting breaking up the code so it fits on the screen. I hope this clears things up.

[@codewithbubb]

@aloSolo Ah I see, yeah that would be better. Thanks fit the feedback.

[@alimansimov1929]

Sticky nav,

[@РодионЧаускин]

Hernandez Betty Miller Donna Rodriguez Karen

[@kgomotsolouisaseema]

you cloned projects require permission from you sir 🙃🙃