20 Web Projects With Vanilla JavaScript

Haha, wow, that same video was actually what got me into Javascript, which eventually led me to where I am now, creating full stack apps with React and NextJS. It's been about 2 years.

So here's the path I took. I wanted to learn JS after watching that video so I went to Udemy and bought a $10 course called modern Javascript from the beginning. It was pretty great but a little over my head. As soon as the first project rolled around, creating a book list application, I knew that I would need to go back and learn HTML/CSS first because I was completely lost on that side. So I put JS on hold for a few months and then did HTML/CSS from the beginning.

It took me 2 months to finish HTML/CSS course at about 1 hour a day, and after that I went back to the JS course and finished it in about 3-4 months.

After that, I felt I had a nice introduction to web dev, but was still totally a baby when It came to making things, so I did a few easy projects on my own to solidify my knowledge, and eventually stumbled across this course which was useful for learning more vanilla JS in practical applications. I did select projects from there and it helped but didn't do all 20 projects.

So in the process of doing that 20 project course, I actually went pretty deep on one of the projects, I believe it was the one using Meal DB. I created search and filter functionality and even different pages and everything, but after a while I started to realize how slow it was making projects with Vanilla JS. Over time I realized that people don't actually make full scale web apps using vanilla JS at least not professionally (though it can be done) - and was introduced to the React framework after this realization. I watched a lot of youtube about it and slowly started to see what React was about and later on (maybe 6-8 months after finishing that first JS course) I took this course for React and was thoroughly impressed. I learned a ton in this course, and I think it's a must for new React devs. This course changed my life.

In about 2 months, I had finished that React course, and then I was at a crossroads. Because up until this point I wasn't sure how far I wanted to go with web dev. It started as me watching a single JS video so that I could add a skill to my resume but the more I went with it the more I loved creating web applications. React was a total game changer, and suddenly I started to see how me, a solo developer, could create entire websites by myself. Suddenly I understood how people created such amazing portfolios and started to see that it was possible for me. So around this time I decided that I wanted to actually do several projects with React, develop a portfolio and Resume, and try to switch careers into it. I knew it would take a while, so I developed a plan while I worked from home during Covid and began spending like 3-4 hours a day working and learning this topic. This was around November of 2020, that I made this decision. It worked out for me well because I still got paid full time but also was learning what I wanted to learn at my own pace, which finally closed the door to the possibility of doing a bootcamp (which up to that point, I had been considering. Glad I didn't do it!)

Following that React course linked above, I did a solo project where I created a weatther application, and that took a few weeks. As Christmas/New Years of that year rolled around, I started to see that I had a new blind spot - backend and full stack. I had been messing around with React for months now but I had never used my own API, never created my own Database, etc, never created a server. And I started to see how easy it was to do that stuff. So I made a resolution to learn how to make a full stack React app, and a few weeks later I started this full stack react course (which I honestly wouldn't recommend, it was only ok) where I learned all about NodeJS and how to create a full stack application with Authentication and everything. That was eye opening and I learned so much, that after finishing it (about 3 months) I decided that I wanted to build one myself. Now we're in March 2021.

So started my longest solo project to date, which took about 4 months to fully build and deploy. This one was a doozie, I learned waaay more than I thought I would. That was only about 2 months ago that I finished that project (Early June).

Since then, Ive continued to mess around with Node and done some small projects, but I mostly have been learning NextJS, which I realized was valuable for how simple and easy it helped me to create full stack applications, and for how easy deployment was. For that large solo project, actually deploying was the hardest part.

So I took this course with Next JS which was so much fun. That took about 1 month and only 3 weeks ago, I started creating my Web Development portfolio using NextJS. And that's where I'm at now.

Anyway, it's long winded but I wanted to let you know my story and have a taste of the kind of time and patience it takes to develop skills with this. My advice is to figure out what you want out of Javascipt - do you want to just tinker with or do you want to use it to build full scale web applications? Because over time, my goals definitely shifted the more I learned about it, and now I'm actually building full scale apps, which is fun. I went into this thinking that JS by itself would be useful for my job, but it turns out that it really isn't. And to be honest, it's only so useful for building websites without a framework like React or Angular. The real power of Javascript, is using it with a framework to quickly build powerful reactive applications so I recommend you consider that before spending 6 months learning it.

Also, these course I've linked are just the ones I've used, not necessarily the best ones out there. The path I took was long, partly because I didn't know what to learn first, didn't know where I Wanted to take it. I think if I were to do it over, I would have spent way less time tinkering with vanilla JS and would have gotten into using a framework much sooner, because I could have probably cut out 8 months or so of learning time if I had done that.

So regardless of what you end up doing with Javascript, if you want to build websites, you'll need to learn HTML and CSS pretty well, so I'd start there and get the basics. Then work on building small simple web apps using JS where you're inserting and removing things from the DOM. After you've done 1 or 2 of those, start learning a framework like React, this will take a while and will feel weird at first but just stick with it. After you've gotten that exposure you should have a good idea if you want to continue learning this or not. Try a solo project something small and basic, and see if it makes sense. If it's fun just keep going!

I'll do that. I bought a javascript course a few days ago. But I will buy this course too after that. I bought this course: https://www.udemy.com/course/web-projects-with-vanilla-javascript/

I have used a similar app before called SoloLearn. I'll inbox you my email.

I'll highly recommend this course

https://www.udemy.com/course/web-projects-with-vanilla-javascript/

This course on udemy sounds perfect for you: https://www.udemy.com/course/web-projects-with-vanilla-javascript/

If you dont want to do the course you can always look at the github repo.

https://javascript30.com/

https://www.udemy.com/course/web-projects-with-vanilla-javascript/learn/lecture/17832668?start=15#overview

I liked the stuff from Brad Traversy.

He has a Youtube Channel where you can check beforehand if you like his 'teaching style'

I would highly recommend Brad Traversy's modern javascript from the beginning course. I'm taking it now and Brad explains things better.

https://www.udemy.com/course/modern-javascript-from-the-beginning/

Once that's done he also released a 20 project vanilla JS course today.

https://www.udemy.com/course/web-projects-with-vanilla-javascript/

\^I will be buying that today and taking it once I'm done with the modern javascript one.

I'll take a look then.

https://www.udemy.com/course/javascript-beginners-complete-tutorial/

then

https://www.udemy.com/course/web-projects-with-vanilla-javascript/

​

is that correct?

https://www.udemy.com/course/web-projects-with-vanilla-javascript/

https://www.udemy.com/course/the-complete-web-developer-zero-to-mastery/

These ones and no none of those are refs links btw! https://www.udemy.com/course/modern-javascript-from-the-beginning/https://www.udemy.com/course/web-projects-with-vanilla-javascript/

Anyway, I love Brad's courses! But there are two more new and much longer Javascript courses on Udemy that are 52+ hours and maybe better and go deeper:

JavaScript - The Complete Guide 2020 (Beginner + Advanced) from Academind/Maximilian Schwarzmüller: https://www.udemy.com/course/javascript-the-complete-guide-2020-beginner-advanced/

The Modern Javascript Bootcamp Course (2020) from Colt Steele and Stephen Grider: https://www.udemy.com/course/javascript-beginners-complete-tutorial/

Those two look amazing as well and got far more students, Academind also got a discord that is full students that you can talk to in case something is not clear!

Θελει Mix

Coding bootcamps, online moocs, προσωπικη δουλεια με δικα της Project κτλ. Θα προτεινα να δωσει πανελληνιες ή κατατακτηριες και να περασει σε μια σχολη πληροφορικης και να βρει δουλεια ταυτοχρονα. Υπαρχουν πολλες σχολες με πολυ λιγα μορια και αν βρει κατι καλο τοτε την παραταει την σχολη.

Ενα που δεχεται τωρα ειναι το skg code με 100Ε (μεχρι 15 αυγουστου) δεν χρειαζεται να εισαι θεσσαλονικη https://www.skgcode.gr/ . Εχει πολυ καλες κριτικες αλλα μολις αλλαξαν το business plan και πλεον δεν ειναι δωρεαν. Αλλα και σε αυτα τα χρηματα αξιζει καθως παιρνεις 3 μηνες πρακτικής δουλειας και ενα Project για το βιογραφικό.

Σιγουρα να αρχισει να κανει μαθηματα ειτε απο youtube ειτε απο udemy, udacity, coursera, edx για να αποκτησει καποιες θεωρητικες γνωσεις https://github.com/ossu/computer-science . Μπορει να παρει τις βεβαιωσεις αλλα δεν παιζουν και πολυ ρολο μπροστα στα πρσωπικα Project. Απλως αυτα τα μαθηματα συνηθως μεσα κανουν κατι πρακτικο, ειδικα απο udemy υπαρχουν συγκεκριμενα μαθηματα με Project σε ολες τις γλωσσες. Μπορει να αρχισει ετσι και να δειξει τι εκανε και μετα να κανει κατι ολο δικο της.

πχ https://www.udemy.com/course/complete-web-development-course/

https://www.udemy.com/course/complete-web-development-course/

https://www.udemy.com/course/web-projects-with-vanilla-javascript/

https://www.udemy.com/course/react-and-typescript-build-a-portfolio-project/

και 1000+ αλλα, ειναι αναλογα τι θελει να μαθει και κανεις search αυτο που θελεις να μαθεις και επιλεγεις ενα καλο θεωρητικο και ταυτοχρονα πρακτικο με Projects μαθημα.

ΑΛΛΑ το θεμα ειναι οτι πρεπει να βρει κατι να της αρεσει ή τουλαχιστον να πεισει τους recruiters οτι της αρεσει. Ο τομεας ειναι τεραστιος, υπαρχει web, υπαρχει android, υπαρχει web app, cross platform, software, desktop app, data analytics, data engineer. Τι ακριβως θελει; Απλα προγραμματισμο δεν λεει κατι. Λογικα μαλλον για web. Ακομα πιο χαος. cross platform?native? τι framework? angular, node, react, boostrap, css, html, javascript, python django και 1000+ αλλα πραγματα. Πρεπει καπως να το οργανωσει, να δει τι ζητανε οι εταιρειες και να μαθει αυτα που της αρεσουν. Εκτος απο αυτα μετα εχεις testing, integration tests, unix tests, μετα εχεις και λιγο operations με docker, kubernetes, goLang. Ζητανε ΠΑΡΑ πολλα οι recruiters στο web και δυσκολο να τα ξερει καλα και αποφοιτος πληροφορικης αλλα τουλαχιστον τα εχει δει στα μαθηματα και εχει αποκτησει καποιες γνωσεις για να τα μαθει πιο ευκολα. Συν καποια αλλα ζητανε wordpress, zoomla, wix κτλ να κανεις plug in, συναλλαγες, να συνδεεις καρτες, τραπεζες κτλ για e-shop.

Τα bootcamp ειναι καλα μονο αν εχουν connections και πανε οι αποφοιτοι σε μια τετοια εταιρεια. Ρωτα η αν μπορεις δες profile απο αποφοιτους στο Linkedin. Η οποια εταιρεια προφανως θελει φθηνο ανειδικευτο προσωπικο, αλλα αν εχει 1-2 χρονια εμπειριας μετα δεν παιζει ρολο οτιδηποτε χαρτι και να εχεις. Να παει σε bootcamp μονο αν την παρουν μετα σε εταιρεια που συνεργαζεται

Γενικα υπαρχουν πολλοι αποφοιτοι πληροφορικης + ημμυ + φυσικο + μαθηματικο + ηλεκτρολογοι που κανουν προγραμματισμο οποτε η αγορα εργασιας ειναι ΠΟΛΥ ανταγωνιστικη. Ωστοσο δεν ασχολουνται πολλα ατομα με το να κανουν δικα τους project ή εχουν του πανεπιστημιου, οποτε υπαρχει ελπιδα να βρει δουλεια αλλα θελει κοπο. Να στελνει συνεχεια βιογραφικα οχι σε μεγαλες εταιρειες αλλα σε μικρες τοπικες που ασχολουνται με e-shops, διαφημισεις κτλ Εκει δουλευουν ακομα και φοιτητες πληροφορικης. Μολις αποκτησει εμπειρια μετα ειναι περιπατος

You can try this:

Udemy: 20 Web Projects With Vanilla JavaScript https://www.udemy.com/course/web-projects-with-vanilla-javascript/

JavaScript: Understanding the Weird Parts (unique explanations, a bit older but still great) https://www.youtube.com/watch?v=Bv_5Zv5c-Ts

The Net Ninja: JavaScript Tutorial For Beginners https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

The Net Ninja: Modern JavaScript Tutorial https://www.youtube.com/playlist?list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrQAc

More useful stuff, some already recommended, here:

https://github.com/getify/You-Dont-Know-JS/

https://www.freecodecamp.org/

https://www.codecademy.com/

https://javascript.info/

https://egghead.io/

There are about about 300K Udemy courses on different topics. Of course, not all of them are good. But, from my experience, some courses are of very high quality.

Full stack web development. These courses are excellent for beginners in HTML, CSS, Flexbox, JavaScript, MongoDB, Node.js, etc.

1. Vertex Academy https://www.udemy.com/course/result-oriented-web-developer-course/
2. Angela Yu: https://www.udemy.com/course/the-complete-web-development-bootcamp/

SQL:

1. Vertex Academy (SQL, MySQL) https://www.udemy.com/course/the-complete-mysql-bootcamp-from-sql-beginner-to-expert/
2. Stephen Grider (SQL, PostgreSQL) https://www.udemy.com/course/sql-and-postgresql/

​

JavaScript projects (for those who already know HTML, CSS and JavaScript):

1. https://www.udemy.com/course/the-javascript-course-build-modern-javascript-projects/
2. https://www.udemy.com/course/javascript-web-projects-to-build-your-portfolio-resume/
3. https://www.udemy.com/course/web-projects-with-vanilla-javascript/
4. https://www.udemy.com/course/50-projects-50-days/

React:

1. Maximilian Schwarzmüller https://www.udemy.com/course/react-the-complete-guide-incl-redux/
2. Stephen Grider: https://www.udemy.com/course/react-redux/