Your challenge is to build out this landing page and get it looking as close to the design as possible.

This project focuses mostly on HTML, CSS and layouts with CSS.

You can use any tools you like to help you complete this project. So if you've got something you'd like to practice, feel free to give it a go.

Your users should be able to:
- View the optimal layout for the site depending on their device's screen size.
- See hover states for all interactive elements on the page.

Don't forget to share your submissions with the community to get feedback. All the best.

A photo gallery website. This will test your HTML and CSS skills. All the designs are available inside the project.

Multiverse HTML5 Photo Gallery

Your challenge is to create a real-time chat application using Node.js. This project will hone your backend development skills and give you hands-on experience with WebSocket for real-time two-way communication between the client and the server. You'll build a Node.js server that can handle WebSocket connections and broadcast messages to all connected clients. The app should allow users to:

- Join a common chat room or create private rooms.
- Send and receive messages in real-time.

This project will primarily involve Node.js and additional libraries such as Express for setting up the server and socket.io for managing WebSocket connections. Remember to write clean and maintainable code, and consider security best practices to protect user data and prevent common vulnerabilities.

Once you complete your chat app, you can share it with the community to get feedback and suggestions for improvement. Good luck and happy coding!


Building a chat app with Node.js. This will test your WebSocket programming abilities and how you can write real-time communication code.

Chat App with Node.js

The Quote Generator App is a neat project that uses the basics of web: HTML, CSS, and JavaScript. With HTML, we set up where everything goes, like the spot for the quote and the button to get a new one. CSS makes everything look good, with a clean style that's easy to read and works on phones, tablets, and computers. JavaScript is the magic that makes everything work. When you click the Generate button, JavaScript asks the `quotable.io` API for a new quote and author and then shows it to you without having to refresh the page.

When you finish making the Quote Generator App, you'll be better at web development. You'll learn how to get information from an API and use JavaScript to show that info right away. You'll also get to practice making a website that looks good on any screen, big or small. In the end, you'll have a cool app that not only adds to your collection of projects but also shows off your skills in connecting to outside services and making websites that people can interact with.

Dynamically fetch and display quotes from an API at the click of a button

Quote Generator App

Your objective is to construct a web application that allows users to exercise their typing abilities. The challenge lies in the dynamic nature of the application: the text for typing is never static; it refreshes upon each new session, thereby infusing an element of unpredictability that will surely captivate and challenge users.

The significance of this project cannot be overstated. It affords you a golden opportunity to delve into the intricacies of the Document Object Model (DOM), a foundational concept that is integral to the creation and manipulation of dynamic web content. By participating in this project, your proficiency in JavaScript will not merely be enhanced; it will be put into practice in real-world situations, bridging the gap between theoretical knowledge and practical application.

As you advance through the project, you will refine your skills in DOM manipulation, exploring the myriad ways to dynamically create, modify and interact with HTML elements. Furthermore, you will master the art of event handling, capturing the essence of interactivity by responding to user inputs in a seamless fashion. The continuous generation of content and its subsequent manipulation will offer an unfiltered glimpse into updating elements in real time, fostering a robust learning experience.

The culmination of your efforts will be a sophisticated, interactive typing speed tester that not only provides a platform for measuring typing efficiency but also imbues you with a profound understanding of JavaScript's role within the DOM.

Build a typing speed tracking app with frontend web technologies.

Typing Speed Tracker

This interactive project invites you to build an Image Editor using HTML, CSS, and JavaScript. It's designed for those with basic knowledge of HTML and CSS, and intermediate skills in JavaScript. The project is unique as it extensively uses iframes, encouraging you to step out of your comfort zone and dive deep into learning and problem-solving.

The Image Editor project aims to help you overcome common challenges in web development, such as syntax, logic, and structure issues. You'll learn to break down tasks into smaller steps, think in terms of functions, and test complex logic. The project emphasizes the importance of clarity, teaching you how to approach problems and think critically.

By the end of this project, you'll have a better understanding of iframes, DOM Manipulation, and other web development concepts. You'll also gain practical experience in building a functional Image Editor. This project is more than just a learning experience; it's a stepping stone towards becoming a skilled web developer, ready to tackle real-world challenges with confidence.

Build image editor for ads using HTML, CSS, JavaScript

Advertisement Editor

The Face Detection Web Application project helps you explore the world of facial analysis using web technologies. By working on this project, you will gain hands-on experience in integrating face detection models, such as the Tiny Face Detector, facial landmarks, and expression recognition, into a web app. They will learn how to load these models and utilize them to analyze facial features and emotions in real-time.

Throughout the development process, you will work on handling video streams, creating a dynamic canvas, and visualizing the detection results. By overcoming these challenges, you will enhance their problem-solving skills and deepen their understanding of web development concepts. On completing this, you will have a functional face detection application that showcases your ability to use Video APIs for facial analysis.

Build a simple face detection app in the browser using tensorflow

Face Detection App

Building a calculator application is an engaging project that allows you to deepen your knowledge in HTML, CSS, and JavaScript, with a focus on interactivity. To start, structure the calculator interface using HTML by creating buttons, a display area, and other necessary elements. Then, apply your styling skills with CSS to make the calculator visually appealing and user-friendly. Experiment with different layouts, color schemes, and animations to enhance the overall user experience.

Using JavaScript to handle button clicks, perform calculations, and update the display in real-time. Implement features like button click effects, smooth transitions, and instant feedback on user inputs to make your calculator interactive and responsive. As you work on the calculator's logic, you'll encounter challenges related to handling different mathematical operations, managing user inputs, and ensuring accurate calculations. This project not only provides practical insights into processing and displaying user inputs dynamically but also hones your problem-solving skills, a crucial asset for any software engineer.

Build an interactive calculator application using HTML, CSS, and JavaScript

Calculator App

Your challenge is to build out a Tesla's Landing Pages and get it to look as close to the design as possible.

This project focuses on your React and CSS skills, but you can use any tools you like to help you complete the project. So if you've got something you'd like to practice, feel free to give it a go.

The website should have

-  6 landing pages for each product apart from the default landing page

- the website should have mobile responsive 

- the website should have a mobile menu in the form sidebar

All the designs can be found in the `designs` folder and the assets in the `public` folder. The default boilerplate code is based on Vite and React. If you want to use a different framework, feel free to change the files and install your own framework. 

### Get involved with the community

Join our [discord server](https://discord.gg/codedamn) and explore the [community forum](https://codedamn.com/forum) to share your feedback with others. Ask questions, help others and learn in public to make the best use of codedamn.

Also check out the [frontend learning path](https://codedamn.com/learning-paths/fullstack) to learn how to build such projects completely on your own.

Build the tesla clone website with smooth transitions and scroll snaps

Tesla Landing Page Clone

Your challenge is to create a vibrant and user-friendly color palette generator application using React. This project will sharpen your frontend development skills and give you practical experience with React. You'll build a React application that leverages the power of TailwindCSS for styling, React Hooks for state management, and React Router for navigation. The app will enable users to:

Generate random color palettes using a custom hex code generator function that you will implement.

Save their favorite color palettes to localStorage, ensuring their data persists across sessions.

View a list of saved palettes and select any palette to see it in more detail.

Delete palettes from their saved list when they are no longer needed.

This project will primarily involve React and its ecosystem, with TailwindCSS for utility-first styling to make your app responsive and aesthetically pleasing. You'll also create custom hooks to interact with the browser's localStorage, allowing for the persistent state without the need for a backend. The random hex code generator function will be a key feature, providing users with fresh and inspiring color combinations at the click of a button.

Make sure to showcase your project to the community for feedback and suggestions. This will not only help you improve your project but also demonstrate your growing skills as a front-end developer. Good luck, and enjoy the creative process of coding your color palette generator!

Build a color palette generator app with modern frontend web development technologies.

Color Palette Project

This project involves building a URL shortening service using Node.js. It allows users to enter long URLs and generates shortened aliases that redirect to the original URLs.

By working on this project, you'll gain practical experience in building a backend application that handles URL shortening functionality. You'll learn how to create RESTful APIs using Express.js, store and retrieve data from a database, and handle URL redirection. You'll also learn how to handle error cases, validate user inputs, and ensure the uniqueness of generated short aliases.

A Node.js project that implements a URL shortening service using Express.js and SQlite

URL Shortner App

This project involves creating a user-friendly interface that displays weather information of a selected city, including location, temperature, and wind speed. You'll employ HTML to structure your content, CSS for styling to ensure an engaging user experience, and JavaScript to add interactivity, handling user inputs and updating data without needing to refresh the page. 

This project is an excellent opportunity to solidify your understanding of web technologies fetch data from a production-ready API and produce a tool that can be used in everyday life. This project is a great chance to get hands-on, pulling data from a ready-to-use API, and creating something useful for daily life.

An interactive weather app that displays temperature, wind speed, and humidity

Weather App

Country Explorer is a web application that allows users to explore and learn about countries around the world. Built using React.js, a popular JavaScript library for building user interfaces, and utilizing React Router for seamless navigation. With the power of Tailwind CSS, a utility-first CSS framework, Country Explorer boasts a modern and visually appealing design that enhances the overall browsing experience.

The application offers a list of countries, along with essential details such as population, capital, region, subregion, languages, and currencies. Users can easily search for specific countries and filter them based on regions, making it convenient to find the information by filtering.

Build a react app to browse, filter, and explore all the nations of the world with react-router and tailwind CSS

Country Explorer

This project focuses on implementing JSON Web Token (JWT) based authentication in a Node.js application using the Express.js framework. It provides a secure and stateless approach to handle user authentication and authorization. The project involves creating routes for user registration, login, and protected resources that require authentication. You'll also learn how to securely store user credentials, hash passwords, and handle user sessions using JWTs.

A Node.js project implementing JSON Web Token (JWT) based authentication using Express.js

JWT Authentication

In this project your task is to develop a functional quiz app using basic html, css & javascript. You'll be given a set of questions in a json format for the quiz content. Your task to build the app which gives the option to choose an option and reactively display the correct answer if the wrong answer as selected.

As a beginner, this project will help you understand working and manipulation DOM elements. You would properly understand managing different states of DOM elements manually in a functional manner.

Build a simple quiz app with answer validation

Quiz App

This project involves creating a color generation tool using HTML and CSS. It allows users to explore and generate various color combinations using an intuitive interface.
By working on this project, you'll gain hands-on experience in manipulating colors using CSS and dynamically updating the user interface. You'll learn how to create color palettes, adjust color values, and provide a visually appealing way to display generated colors.

A simple color generation project using HTML and CSS

Color Generator App

In this project your task is to build a YouTube clone along with it's features to understand the various concepts of application developing using APIs for building Multi-Page Apps that have very sophisticated user interfaces. You would be making using of fetchAPI.js and react-router throughout the project to reach the required outcome. All the best!

Build the essence of YouTube and it's features using the API

YouTube Clone

Your objective is to create a dynamic e-commerce website. This endeavor will call upon your skills with React, guide you through the aesthetic decisions with Tailwind CSS, and introduce the seamless transitions of React Router to provide users with a truly interactive online shopping journey.

We're setting out to hone your React skills, as you gain practical experience with this influential library for crafting impressive user interfaces. 

Understanding the importance of navigation in web applications, you'll employ React Router to facilitate smooth and efficient browsing within your store. This includes setting up routes and layouts that mimic the flow of a real-world shopping experience. Furthermore, you'll be tasked with constructing a dynamic product listing that pulls information from an external API, breathing life into your product catalog.

But the details matter. You'll create individual product pages, so customers can explore every aspect of the items they're interested in. And no e-commerce site would be complete without a streamlined cart system, allowing for the addition and removal of products without fuss.

Before we dive in, be sure you're comfortable with the basics of HTML, CSS, and JavaScript. A proficiency in React.js is vital since we'll be delving deep into its capabilities. And while not a must, familiarity with Tailwind CSS will come in handy for dressing up the user interface

Building a basic ecommerce store app with HTML, CSS, JS and React.

E-Commerce Store

In this project, you embark on an exhilarating journey to develop a mesmerizing Tesla landing page inspired by the brand's ethos of innovation and sustainability. Through HTML, CSS, and JavaScript, you'll construct an immersive web experience highlighting Tesla's electric vehicles, solar products, and cutting-edge technology. The project delves into the intricacies of user-centric design, responsive layouts, and interactive elements to create a seamless and engaging user journey. From structuring the page elements to incorporating animations and ensuring cross-device compatibility, you'll master the art of modern web development while paying homage to Tesla's pioneering spirit. Join us as we blend creativity, functionality, and aesthetics to craft a dynamic digital showcase for one of the world's most innovative brands.

Furthermore, this project provides a hands-on opportunity to explore industry-standard design principles and development techniques. You'll delve into the nuances of color theory, typography, and layout design to create visually striking and cohesive web interfaces. By integrating user feedback mechanisms and usability testing methodologies, you'll refine the user experience and optimize engagement metrics. Through collaborative brainstorming sessions and iterative design cycles, you'll gain insights into the iterative nature of web development and the importance of continuous improvement in digital product design.

In essence, this project serves as a comprehensive exploration of web development fundamentals and design best practices within the context of a real-world application. Whether you're a seasoned developer seeking to refine your skills or an aspiring designer looking to break into the field, this project offers a rich learning experience and an opportunity to create impactful digital experiences that resonate with audiences worldwide. Join us as we embark on this exciting journey to reimagine the future of web design and technology through the lens of Tesla's visionary innovation.

Create a captivating Tesla landing page showcasing electric vehicles, solar products, and innovative technology. Harness HTML, CSS, and JavaScript skills to craft a dynamic, responsive, and visually stunning web experience.

Tesla Landing Page

The Job Listings Project is a chance for you to build a web app that makes job searching easier. You'll use web development tools to make a website that gets job data from the internet and shows it to users in a neat way. You'll also add filters so users can search for jobs based on things like location, skills, and type of job. Plus, you'll make it so users can save their search settings for later.

As you build the project, you'll work on making the website look good and easy to use on different devices like phones and computers. You'll think about how to arrange things on the screen and make it simple for users to find what they need. This project will let you practice using the latest web technologies and design ideas to create a job search website that people will enjoy using.

Build a dynamic job listings application along with criteria based filtering using TailwindCSS & JavaScript

Job Listing App

In this Project, you have to recreate the popular word-guessing game using HTML, CSS, and JavaScript. You'll build a web-based game where players try to guess a hidden five-letter word. The project involves creating a simple interface that displays the game grid, keyboard, and other important parts. You'll use JavaScript to make the game work, including checking words, keeping track of guesses, and telling the player how they did.

While working on the project, you'll use CSS to design how the game looks. You'll pick colors, fonts, and layouts that make the game easy to play. You'll also ensure the game works well on different screen sizes. By using your HTML, CSS, and JavaScript skills together, you'll make a game that challenges players to guess the hidden word in as few tries as possible.

Building a word guessing game using JavaScript

Wordle Clone

This project focuses on implementing session-based authentication in a Node.js application using the Express.js framework. It provides a secure and efficient way to handle user authentication and manage user sessions.

The project involves creating routes for user registration, login, and logout, as well as protecting certain routes that require authentication. You'll also learn how to handle password hashing and securely store user information in a database.

Additionally, you'll explore best practices for session management, such as setting session expiration times, securely storing session data, and handling session persistence across server restarts.

A Node.js project demonstrating session-based authentication using Express.js

Session Authentication

The project aims to create an interactive web application that allows users to engage with the OpenAI GPT-3.5 Turbo model. Users can input questions, and the application generates responses in a chat-like format, leveraging the power of GPT-3.5 Turbo for natural language processing.

The application is built using React for the user interface and integrates with the OpenAI API. It includes features such as real-time interaction, a cool-down mechanism to prevent abuse, and error handling for API requests.

Build a Chat Interface using Open AI's API

ChatGPT Clone

The Blog Application is a platform that allows writers to create, publish, and manage their blog articles. It provides features such as adding new articles using a markdown editor, deleting existing articles, and editing articles with the help of TypeScript.

The application converts markdown text to HTML, ensuring the content is readable for the readers. It is built using technologies like Express, SQLite3, React, React Router DOM, and Material-UI, creating a functional blogging environment. The project aims to integrate various tools and libraries to provide a user-friendly experience for both writers and readers.

A simple CRUD app for managing blogs with a markdown editor

Blog App

This project involves creating a basic text editor using HTML, CSS, and JavaScript. The text editor provides a user-friendly interface that allows users to input and edit text.
By working on this project, you will learn how to manipulate text using JavaScript, update the user interface dynamically, and implement common text formatting features. The text editor can be a useful tool for everyday writing tasks and serves as a foundation for more advanced text manipulation projects in the future.

A simple text editor with basic formatting and analysis features

Build Projects And Learn Coding

Explore hundreds of free coding projects and complete them to get hands-on learning experience. Use them as your portfolio projects to get a job, or as a proof of work.

Suggest a project