5 Javascript Projects to Build (For Beginners)

if you've watched my channel for long enough you should know that i'm a huge proponent of building projects not just watching tutorials not just reading books but getting your hands dirty and getting into something and what i've noticed is a lot of you guys who are just starting out with learning to code especially if you're learning javascript you're not sure really what to build and a lot of you guys overthink this a lot of you guys get this way wrong and you make this harder than it has to be so in this video i'm going to recommend five simple beginner javascript projects that you can do right now even with very little skills to get some momentum going these aren't projects that necessarily going to get you a job but they're going to get the ball wrong they're going to get you feeling more comfortable with javascript now before we dive into that quick introduction here i'm andy sterkowitz i'm a self-taught software developer i taught myself to code back in 2014 i landed my first job in 2015 and i've created this channel to help people do the same so i cover a lot of high level concepts about how to become a self-taught software developer how to get your first job so definitely recommend hitting the subscribe button below also make sure to hit that bell icon so that you get notifications anytime i put out a new video now before we dive into these five projects a quick disclaimer about who this video is for this video is for beginners so people who maybe have a few weeks of learning under your belt maybe you're reading a book or watching a tutorial and you haven't built your first project yet maybe you followed a tutorial and built some cool projects but if you haven't built anything yet and you've been doing this for a few weeks or maybe even a few months this video is for you and these projects that i'm about to mention are for you the reason that i want you to get started with some of these projects is we're just trying to build momentum in getting started with something these projects are not spectacular they're probably not things that are going to go in your portfolio but what you really need to get comfortable is getting outside of the passive learning outside of just reading books all the time and into actually using what you're learning so that's really who this is for so if that's you that's great keep on watching from here now as far as the goals of these projects i'm about to list these out but here's the goal for you okay the goal is not to focus on styling your app can look as terrible as possible we're really focused on this is just getting it to work right so when you click a button does it do what it's supposed to do styling can come later styling is usually the the you know it's something that you don't need to focus on as much because we're really focused on javascript and the programming side of things now from there as well the other thing you don't want to do is you don't want to copy code from other people's projects so say one of the projects was a calculator or something like that you don't want to go to other people's projects who've worked in a calculator and look at their code and try to copy it the reason is because we want you to come up with solutions on your own we want you to come up with maybe even our hacky solutions right coming up with code that works but it's not really working that well that's okay we can always there's there's good teaching moments in that there's good when you can look back and say okay this is why i shouldn't write code like this but as long as it's working for now then you got it that's all you have to worry about don't worry about writing perfect code and then from there the last thing is make sure to continue watching those tutorials or reading the books so for example i mentioned head first javascript a lot because one of the things you want to do is if you're reading head first javascript is to continue reading it while you're building these projects you should be reviewing sections that maybe you think are going to be helpful but you shouldn't just be building the project you should be spending some of your time building the project and also some of your time in the book and the last thing i would say is try to do these projects with within a week give yourself a hard deadline of one week where you're going to try to get it done because if you just kind of leave it open-ended i know people will just kind of spend months just going you know well whatever i'll i'll figure this out eventually and you never really finished the project so get it done and really try your best to get it done within that week maybe two weeks at the most assuming maybe you're just starting out by the way feel free to google whatever you like google as much as you possibly can just don't copy code from existing projects okay so with that being said let's go ahead and dive into it so the first project i recommend is the most cliched project in the world that's a to-do app right so you're going to create an application that will track the to-do's for a person right so things that are they need to do at a certain given day so this is really simple all you need to do has have one html input on the page you can type in your to do you press the ok button the submit button the add me button whatever it is you want to call it and then it shows up in the bottom of the page there and it says you know the new to do item has been added right like that's basically all it has to be and there's more to this than meets the eye a lot people say oh that's so simple i could just bang that out in a weekend well it may or may not there's a couple different moving parts here first of all you have to figure out how to respond to a click event right with a button getting clicked how do you respond to that how do you how do you write code that executes when that occurs also as well when that code executes how do you take the text from the input box and then place it on the page and what do you use for that what i recommend here i'll give you a hint is an unordered list element a ul so those are a few of the questions that you have to answer and it's not always apparent and if you want an extra challenge by the way again sort of a bonus you should put a delete button on each one of the to-do items so when you click it it will delete that item but again keep this simple don't a lot of your temptations will be to make this complicated make this simple get through that to do app then go on to your next project from there the second project that i recommend is an expense tracker and actually an expense tracker is going to be very similar to a to do application the only main difference is that there's going to be three inputs on the page right we'll say a date a description and an amount and then instead of using a unordered list or ul element we're going to use a table and it basically works like this you fill out the three inputs you press the submit button and then a new expense item shows up on the page and you can add as many as you want and i would also recommend to add a delete button to that as well but that's the basics of that now it's a little bit more complicated than the to do application i'll say that most of the functionality that you need you can pretty much look at the to-do app to try to get there's only some minor differences as far as working with the table and some other things which i won't necessarily get into i'll let you kind of discover that but once you do the to-do app step it up a little bit in complexity do the expense tracker the third application i recommend is this very similar to the two app and the expense tracker it's a note-taking application and i keep this super simple again with the theme that i had mentioned earlier just create a note-taking application where you can write some notes and save them so you would use something like a text area to allow the user to type it in again add that submit button when it gets submitted it will get added to the table below the only difference that i would say to try to really step up the complexity is have some sort of button where you can view the entire note so it'll basically pop up in a modal and you can see sort of the entire note and a modal just means sort of like a hover over or a pop-up screen overlay so you can see more of the details of the note and that's it make it super duper simple again we're just trying to keep things simple or focus on functionality over style from there the fourth thing i would recommend is similar but we're going to add a little bit more functionality logic to it more programming logic to it and that is a vowel counter so again similar to the note taking app we're actually going to extend that a little bit so it's going to be a separate project but it's going to be very similar you're going to have an input there like a text area so you're going to be able to put in a lot of text and when you press submit you're going to be able to find out how many vowels are in the in that paragraph of text or in that section of text that you've submitted and the reason i like this a little bit better is because now you have to analyze a piece of or i guess a string or a piece of text and figure out how many vowels are in there and how you go about doing that uses just some again programming functionality very very simple but this is something that will help to just get you moving forward with this for the fifth and final application that i recommend it's going to be a culmination of everything you've done so far so once you've completed all those applications the last one you're going to want to do is a memory game and the memory game is if you guys kind of remember from your childhood basically there's a deck of cards with animal pictures on it they're all placed face down in front of you and you're trying to match the cards together you flip one over and you flip another over if they're a match you get the cards you sort of win that round if you don't they get flipped back over and you try to match them all and it's really fun to write in javascript but it's really going to be a step up from everything you've done you're going to use the same skills using the document object model or the dom you're going to have to add images so image tags or image elements there you're going to have to respond to click events when somebody clicks on the image elements and it's a lot of fun it's a lot of fun but it's definitely not as easy as it may seem from the outset but what i would recommend is again really focusing on functionality and make the game super super simple um just do something like six cards displaying on the page don't try to do like 100 cards or something like that you can always do that later and just take some images from the internet right take a picture of an elephant a dog or a pig and try to get them so that when you click on it they flip over and when two match you have some sort of pop-up that says you win or something like that keep it super duper simple but just have fun with it and try to make that work so those are the five projects that i recommend for you guys who are beginners who are just getting into this remember this okay the focus is that you just want to build stuff you just want to use what you're learning to build these small applications they're not yeah they're not complex they're not a business you're going to build someday but i promise you that if you complete these projects and you get all five of these projects done if you're in the early stages when you start moving on to more complicated projects you're going to feel comfortable with the process you're going to feel comfortable with diving into the unknown but start off with those and then later on you can step it up so i hope this video has been helpful for a lot of you guys who've been asking me about this definitely really happy to share this with you guys let me know in the comments if you've tried this out what you think if you were struggling if this was too much definitely let me know and i can make future videos on it other than that guys also recommend if you like my content and you want to get more of it definitely join my facebook group i will leave a link in the description below in that group i try to do live q a events from time to time and just stuff that i don't do here so highly recommend joining when you have a chance other than that that's really all i have for today so thank you so much for watching and as always guys [Music] you

Channel: Andy Sterkowitz

Views: 125,094

Rating: 4.9621301 out of 5

Keywords: javascript, javascript for beginners, javascript for beginners 2018, javascript introduction for beginners, javascript introduction, javascript (programming language), javascript primer, learn programming, andy sterkowitz, self-taught software developer, web development, coding for beginners, learning how to code

Id: roumzWd4XJU

Length: 10min 20sec (620 seconds)

Published: Mon Sep 07 2020