Top 10 Project-Based Tutorials for Learning HTML/CSS/Javascript
1. To-Do List App
This intermediate-level project will show you how to make a to-do list web app in Javascript. You’ll be able to use this app to track whatever you want: cool programming tricks you want to learn, places to go, songs to listen to (or learn to play!), or just something as simple as things to pick up at the shops.
Check it Out Here ➡︎ https://projects.raspberrypi.org/en/projects/cd-intermediate-javascript-sushi
2. Guess the Color!
You will make this color guessing game! In the game, the player gets to see six different colors and one set of RGB (red, green, blue) values and has to guess which color matches these RGB values. Click on a color to guess, then click on the Reset button to change the colors and start a new game!
Check it Out Here ➡︎ https://projects.raspberrypi.org/en/projects/cd-beginner-javascript-sushi
3. Sweet Scroll
This web development project will teach young people how to use CSS classes. You will learn how to make background content on a web page move at a different speed to the foreground content. This cool website scrolling technique is called ‘parallax scroll’. In this tutorial, you will create a movable web page for a cake recipe.
Check it Out Here ➡︎ https://projects.raspberrypi.org/en/projects/sweet-scroll
4. How to build an HTML calculator app from scratch using JavaScript
This is an epic article where you learn how to build a calculator from scratch. We’ll focus on the JavaScript you need to write — how to think about building the calculator, how to write the code, and eventually, how to clean up your code.
Check it Out Here ➡︎ https://www.freecodecamp.org/news/how-to-build-an-html-calculator-app-from-scratch-using-javascript-4454b8714b98/
5. How to Build a Delightful Loading Screen in 5 Minutes
Learn how to build the Slack Loading Screen animation using HTML/CSS in CodePen.
Check it Out Here ➡︎ https://www.freecodecamp.org/news/how-to-build-a-delightful-loading-screen-in-5-minutes-847991da509f/
6. Bird watch website 1.0 (Most Beginner Friendly)
Learn how to code your first website using HTML/CSS.
Check it Out Here ➡︎ https://projects.raspberrypi.org/en/projects/cd-sebento-htmlcss-1
7. Bird watch website 2.0 & 3.0
Build upon your existing HTML/CSS skills to make a website and gain more control over how it looks.
Check it Out Here ➡︎ https://projects.raspberrypi.org/en/projects/cd-sebento-htmlcss-1
Check it Out Here ➡︎ https://projects.raspberrypi.org/en/projects/cd-sebento-htmlcss-3
8. Build a Python Web Server with Flask
You’ll set up a web server and create a simple website using Flask, Python, and HTML/CSS.
Check it Out Here ➡︎ https://projects.raspberrypi.org/en/projects/python-web-server-with-flask
9. Build a robot (Beginner Friendly)
In this project, you’ll learn how to position images to design your own robot!
Check it Out Here ➡︎https://projects.raspberrypi.org/en/projects/build-a-robot
10. Cat meme generator (Beginner Friendly)
In this resource you will make a cat meme generator. Using an image of your cat, you can create your own cat meme to show off to your friends.
Check it Out Here ➡︎ https://projects.raspberrypi.org/en/projects/cat-meme-generator
