Frameworks come and go, but JavaScript will stay!
Therefore, I have listed nine awesome projects that you can do to refresh your skills, learn new things about JS, and stay relevant in 2020 and beyond. All of them are based on pure JavaScript, some HTML, and some CSS. You can add them to your portfolio, show them to recruiters or potential employers, or keep them in your GitHub as references for future work. To be clear: This is not meant to teach you everything about JavaScript. There are perfect courses for you covering JS from A-Z.
So check the list and let me know which one you love most ?
1. E-Commerce JavaScript Tutorial - Shopping Cart from Scratch
Learn how to create a shopping cart using vanilla Javascript in JavaScript Tutorial Course.
💻Setup files: https://github.com/john-smilga/setup-files-js-comfy-house
2. Beginner Vanilla Javascript Project Tutorial - Todo App
In this episode we are going to cover a small project of the full Creative Javascript Course, a todo list in vanilla js.
3. How to Build a Simple Calculator using JavaScript
This is a simple calculator tutorial using HTML, CSS and Javascript. The logic is very simple with the minimum lines of code possible. This is a step by step tutorial for beginners. Including a simple design and logic that’s easy to follow.
The link to the code: https://github.com/abarna-codespot/A-simple-Calculator
4. Neural Networks with JavaScript - Full Course using Brain.js
This course gives you a practical introduction to building neural networks in the browser and in Node.js using the Brain.js JavaScript library. To complete the course’s interactive challenges, simply head over to the Scrimba version: https://scrimba.com/g/gneuralnetworks
⭐️What you’ll learn ⭐️
By the end of the course, you’ll be able to solve a range of different problems using neural networks. The lectures does not dwell with much theory, but rather on how to code the networks. That means the course is suitable for anybody who knows JavaScript.
⭐️About Robert Plummer ⭐️
Robert is the lead developer of the Brain.js library. He has a unique ability to explain complex concepts in a manner that everyone can understand. Feel free to reach out to Robert via Twitter if you have feedback, or simply want to thank him for creating this course.
Good luck, and welcome to the exciting world of neural networks!
⭐️Course Contents ⭐️
⌨️ (0:00:00) Course introduction
⌨️ (0:01:46) Our first neural net!
⌨️ (0:04:31) How they learn - Propagation
⌨️ (0:07:57) How they learn - Structure
⌨️ (0:10:09) How they learn - Layers
⌨️ (0:14:04) Working with objects!
⌨️ (0:21:52) Learning more than numbers
⌨️ (0:34:21) Example: Counter
⌨️ (0:44:10) Normalization
⌨️ (0:50:35) Example: Stock price predictor
⌨️ (0:56:06) Predicting multiple steps
⌨️ (0:57:43) Example: A recurrent neural network that learns math
⌨️ (1:03:56) Example: Number detector
⌨️ (1:09:41) Example: Writing a children’s book
⌨️ (1:11:28) Example: Sentiment detection
⌨️ (1:13:50) RNN inputs and outputs
⌨️ (1:17:56) Example: Simple reinforcement learning
⌨️ (1:21:03) Example: Recommendation engine
⌨️ (1:26:02) Closing thoughts
5. JavaScript Mini Project | Student Grade Calculator in JavaScript with Code Hindi
6. Build A Music App With JavaScript Tutorial
Today we are going to learn how to create a music app from scratch with vanilla javascript, css and html.
In this vanilla javascript project we are going to take a look at how we can implement an audio track and add different sounds to it.
This project is recommended for anyone interested in learning beginner web development projects/javascript projects from scratch.
📕 Things covered in this video:
- How to add sounds to the audio track
- How to play sounds in javascript
- Adding dynamic colors to our animations.
📔 Materials used in this video:
Starter Files: https://github.com/developedbyed/vanilla-js-beatmaker
7. Live Coding a Memory Game: HTML, CSS, Javascript
Coding a Javascript Memory Game Tutorial
This is a live coding tutorial where I show you how to build a memory game using javascript, html, and css.
8. Build Tic Tac Toe With JavaScript - Tutorial
Learning web development can be tough and boring, but it doesn’t have to be. In this video we take a look at creating an advanced JavaScript tic tac toe game. This is a great project for anyone that wants to create a fun project while learning advanced JavaScript and CSS concepts.
📚 Materials/References:
GitHub Code: https://github.com/WebDevSimplified/JavaScript-Tic-Tac-Toe
CodePen Code:
🧠 Concepts Covered:
- Advanced CSS Hover Effects
- Advanced JS Game Logic
- CSS Not Selector
- CSS Shape Building
9. JavaScript BookList App | No Frameworks
We build a full app in JavaScript without and library or JS framework, using classes, local storage and more.
Code:
See the Pen JavaScript BookList App by Brad Traversy (@bradtraversy) on CodePen.
#javascript #web-development #developer
