I follow this list of projects for beginners from FreeCodeCamp . These projects were created by John Smilga and Ani Kubow.They also have videos explaining every detail, which you can check here: John andAni
The list of projects are:
You click on a button, this will change the colour of the background and show the name of the colour. You can choose rainbow colours or HEX.
Key Topics: arrays, document.getElementById(), document.querySelector(), addEventListener(), document.body.style.backgroundColor, Math.floor(), Math.random() and array.length.
You can increase, decrease or reset a counter.
Key Topics: document.querySelectorAll(), forEach(), addEventListener(), currentTarget property, classList and textContent.
I changed the purpose from "personal reviews" to "games reviews", whit some of my favourites video games. I used the scoring list of IGN.This project is useful because you can use it in a lot of situations when you want the client to focus on one item at a time, but also can change the item.
Key Topics: objects, DOMContentLoaded, addEventListener(), array.length and textContent.
Like a carousel, this is basic and very useful. And you have to know to include it in other projects too. You can see the navbar on a lot of sites and it is very good for small-screen clients (smartphones)
Key Topics: document.querySelector(), addEventListener() and classList.toggle().
The same as NavBar but on the side of the page.
Key Topics: document.querySelector(), addEventListener(), classList.toggle() and classList.remove().
Here I change a lot of the initial project. You have to create a page with a button, when you click, another "modal window" will show. I changed this to a "rocket lunch" page, when you click on the button, will show the modal window but with a rocket launch video in autoplay.
Key Topics: document.querySelector(), addEventListener(), classList.add() and classList.remove().
You need to create a FAQ page, when you click on the "tabs" they need to show the text that was hidden and close the other tabs for you.I maintain the logic but I changed the subject to "How to Survive" when you are on fire, have an accident or need to carry someone.
Key Topics: document.querySelectorAll(), addEventListener(), forEach(), classList.remove() and classList.toggle().
This is supposed to be a "menu" with prices and descriptions, you can filter the meals whit some buttons like "breakfast", "lunch", "Shakes" and "All". I change to my tier list of best teams of history, using the buttons to filter "national teams" or "league teams". This was very funny, you need to hide objects when using the filters and need to deal whit objects, you can create more information if you want.With this project, I realized how much I like to play with objects.
Key Topics: arrays, objects, forEach(), DOMContentLoaded, map, reduce, and filter, innerHTMLand includes method.
You have to use a video as a background with some features.
Key Topics: document.querySelector(), addEventListener(), classList.contains(), classList.add(), classList.remove(), play() and pause().
This is another very nice project, I learned to mix a navbar with a scrolling page, another very popular website. I customized this site as a "SpaceX" website.
Key Topics: document.getElementById(), getFullYear(), getBoundingClientRect(), slice methodand window.scrollTo().
Very simple and clean website, It is a different way to "use" modal, hidden and showing the text.I use the Node.Js theme for this, everything is green.
Key Topics: classList.add(), classList.remove(), forEach() and addEventListener().
This website is different from the others because the purpose is to deal with functions that give you date and made mathematical operations.
Key Topics: getFullYear(), getMonth(), getDate(), Math.floor(), setInterval() and clearInterval().
With this project, you deal again with objects, who to extract information from and changed the home page with this information.
Key Topics: parseInt(), Math.floor(), Math.random(), isNaN(), slice method and event.preventDefault().
This is a CRUD (Creat, Read, Update and Delete) project, very important. I change the subject from grocery list to "ADHD Tasks List" using a lot of contrast to help the client don't exclude or change something wrong. This was the first time we use local storage to maintain the list.Probably one of the most important projects.
Key Topics: DOMContentLoaded, new Date(), createAttribute(), setAttributeNode(). appendChild(), filter() and map().
15 - Slider, 16 - RockPaperScissor, 17 - Simon Game, 18 - Memory Game, 19 - Wack-a-mole Game and 20 - Snake Game.
These projects are very "closed" to make changes on Javascript and you have to follow every step, if you miss some detail the code will not work. You have to understand very well the previous projects to make these. I customized Rock Paper Scissor to "Fire Emblem Game", with the same logic but you use Axe, Lance and Sword. In Memory Game I use the theme "Pokemon", and "wack-a-mole" I changed the "running guy" to Snake from Metal Gear Solid. Some projects don't look so good because, as I said, my focus was on Javascript.
Key Topics: querySelectorAll(), addEventListener(), forEach(), if/else statements. Math.floor(), Math.random(), switch statements, setInterval(), clearInterval(), setTimeout(), play(), for loops, onclick event, arrow functions, sort(), pop(), unshift(), push(), indexOf(), includes(), splice(), and concat()
After these little projects, I will create i bigger project, trying to use a lot of functions and tricks that I had learned here. This list is very good, but you have to know something about Javascript or already know where to consult when you have some doubts about how the code is working.