15+ Projects to master HTML, CSS and JS with source code
Hi Guys, my name is Gautam Jain and I have been fascinated by the wondrous aspects of technology ever since i was a kid, and after getting my personal computer after 12th standard my interest sky-rocketed.
I was so amazed by the cool operations one can perform using such small machine like a laptop and a phone. I begin to dive deep into the concepts of the computer science and to get more proficient in the field, enrolled for a Computer Science undergraduate degree.
I graduated with my bachelors degree from GNDEC, Ludhiana in august 2023. Throughout my course of 4 years, I invested in developing a good understanding core computer science concepts like discrete mathematics, Data Structures and Algorithms, Operating systems, Database management, CAM, Cyber Security, Compiler Design etc. Along with my academics, i also invested in developing my problem solving skills by actively indulging in competitive tournaments on platforms like GeeksforGeeks, Leetcode, Code studio, Hacker rank, Code chef and also made a routine of solving daily problem and challenges.
I worked together with my team (college friends and work colleagues) to create innovative, scalable and open-source projects and gained experience in software development by working as student SDE intern at E-Cell, TNP Cell and 11 mantras. I am currently working as a Programmer Analyst trainee in Cognizant Technology Solutions, brushing my skills in technologies' like Oracle Apps, Oracle SQL, Oracle PL/SQL, Java, JSP, JDBC, Spring etc.
I am always open to opportunities to further polish my skills and get a insight to how the daily world functions with the help of technology.
Actively Looking for open technology and project idea discussions.
HTML, CSS, and Js are one of the best building blocks used today to build websites and web apps and they also serve as the footstone for more complex frameworks and technologies.
I put together a list of projects that cover most of the concepts one needs to master before starting to work with dream technologies like React, tailwind, bootstrap etc.
So what are we waiting for? Let's deep dive right into it.
Quiz App
Through this app you can learn to build a data structure to store our questions and fetch data from it, one question at a time. You will also learn some styling concepts along with embedding HTML and managing global variables to screen to show scores at the end of the quiz.
To-Do List
A to-do list is the most basic and necessary of the projects one should build to deepen the understanding of CSS styling and dom manipulation along with the use of event listeners.
Theme toggler
Through this project, you will learn to use and control css custom properties(also called CSS variables) and use javascript to change styling properties of HTML elements based on user input.
Expanding Gallery
This is one of the most exciting and fun projects which enables you to understand the one of key concepts of CSS styling, flexbox. Through this project, you can learn to work with flexbox properties like flex-grow, flex-shrink, and flex-basis. furthermore, we add a bit of javascript to create a cool expanding effect.
Magazine Layout
Flexbox is the absolute best in designing responsive layouts for your websites, but sometimes the way Flex works can be confusing, irritating and hard to understand. Therefore to add one more tool to your arsenal, this project will help you understand two ways of creating a layout with Grid - Grid template and grid area.
using grid template
using grid Area
Colour Guessing Game
This is a fun and exciting game that will help you create a good understanding of RGB colours, and how the combination of red, blue and green colours creates a variety of colours and their different shades.
Random Color Pallete Generator
Through this project, you will learn adding event listeners to buttons, embed HTML code, and work with hashcode for CSS colours and how different hashcodes make different colours. As you can see in the code pen below, the button generates a colour palette of random colours with every click.
Weather App
A weather app that provides tons of information about the weather of a region with a responsive and cool UI. By building this project you can learn to work with APIs like openweather API, javascript destructuring and Responsive CSS design layouts. The background is also made dynamic using Unsplash API.
Glassmorphism Design Website
A website designed using Glassmorphism styling techniques that looks stunning in every aspect. You can learn border effects, and box shadow effects by building this project.
GitHub Profiles
Another project operates using an API, but this project also covers null-checking techniques for data coming from API. Any user on GitHub can be searched using the app and public info can be seen.
Notes app
This is a cool notes-creating app that enables us to create as many distinct notes as we want and also store them in local storage to prevent data loss.
Tic Tac Toe Game
We all have one time or another played a game of tic tac toe with friends. How great it would be to create a digital version we play anywhere on mobiles and computers, this project will enable you to do just that.
Meme Generator
Cool meme generator that lets you select any image and convert it into a Meme!
Drawing App
A drawing app that makes use of canvas and stroke methods that enables you do draw anything you want on the canvas.
Rock Paper Scissors Game
A fun rock paper scissors game to play with the computer and keep track of the scores.
Conclusion
These are the projects that I created during my journey and they really helped me solidify my basics and helped me get a better understanding of writing code for projects that are both developer and client-friendly.
Bonus Project
Following is my first portfolio website, which I built using HTML, CSS, and javascript. It is fully responsive, has 3 colour design, attractive, friendly UI and covers all important sections like the landing section along with about, skills, team and contact sections.
If the article reaches 100+ likes and 50+ comments I will share the source code along with the guide on how to create a PWA using your own HTML, CSS, and javascript website.
