What Projects Should I Build To Practice Web Development?

Project 1: JavaScript Clock

In this project you'll be using HTML, CSS, and JS to build a clock. You'll learn about DOM manipulation, adding event listeners to elements, using setTimeout, and of course, get to flex your css muscles. I've created Adobe XD mockups for each of these projects available on https://selftaught-dev.com/ if you want a design to base it off of. They also come with a README file that gives each project a few different levels (eg, lv 1 is just the desktop mockup, lv 2 includes tablet and mobile)

Project 2: TO-DO List (Basic CRUD App)

Project number 2 is a basic To Do List. This will teach you how to preform all of the basic CRUD operations (Create, Read, Update, and Delete) and is a great first project when you learn any new language, because when you boil it down, that's all any web app really does. Facebook - Creates Posts, Reads other peoples posts/data, Update/Edit your posts/pictures/ect, Delete Posts. Same thing with almost any other site/web app. Level 1 of this project is the basic todo list. In the second level you'll learn about localStorage and store the users todo list items there. In level 3 you'll turn it into a full stack app and connect it to a database to store the items.

Project 3: Stock Quote App

In project number 3 you'll learn how to connect to and pull in data from an API to build a stock quote app. When it initially loads you'll display IBM's data, but there will be a search bar so the user can search for other stocks if they'd like. The first level only requires you to display the Open, close, high, low, and volume, but in level three you'll also be using a charting library like D3 to convert the stock's data into a candlestick chart.

-------------------

There's plenty more projects on https://selftaught-dev.com/, but these are a few basic, free ones, to get you started. Feel free to reach out on the socials or in discord if you have any questions or want to chat! I'll see you in the next one.