10 projects ideas to build as a beginner web developer (HTML, CSS and JavaScript only)

This is a great project to build if you want to learn more about how to get data from the user and save it on your website

You'll also practice more working with Local Storage and saving an entire list of items there

The border-radius property can have multiple values changed. Preview how the shape looks while changing these values and copy the resulting CSS to your clipboard.

This is a perfect project for learning CSS manipulation with JavaScript and understanding how the border-radius property works.

User Stories:

• User can see a box which has a border-radius property applied to it
• User can change the 4 border-radius values that are applied to the box (top-left, top-right, bottom-left, bottom-right)
• User can copy the resulting CSS to the clipboard

Bonus Features:

• User can change all 8 possible values of the border-radius in order to create a complex shape
• User can select different units (px, em, rem, %)
• User can preset common border-radius patterns
• User can generate random border-radius values
• User can save favorite combinations

What you'll learn:

• CSS border-radius property
• DOM manipulation with JavaScript
• Real-time preview updates
• Clipboard API
• Event handling
• CSS units and values

This project will teach you how to use Classes when working in the DOM and how to format your data in a way that looks nice

It will also teach you how to use CSS Grid in practice

The use of color plays a major role in an application's User Interface and User Experience (UI/UX). ColorCycle seeks to help developers better understand RGB colors by making small changes to a colored box over time.

This app draws a box filled with a user specified color and makes small changes over time also based on user input. It cycles through changes to the originally specified color, allowing users to experience the visual impact of different changes to individual parts of an RGB color specification.

User Stories:

• User can specify a starting fill color as a six hexadecimal standard CSS color code in three individual components of two digits each - red, blue, and green
• User can specify an increment value for each color component that will be added to that component every .25 second
• User can see the box containing the fill color change every .25 seconds
• User can only change the color components and their increments when the app is stopped
• User can start and stop the fill operation using a button whose name changes to 'Start' when stopped and 'Stop' when started
• User will receive a warning if something other than hexadecimal digits are entered for the color components

Bonus Features:

• User can change the time interval between color changes
• User can specify the color encoding format used from RGB to another format like HSL
• User can save favorite color combinations
• User can export the color cycle as a CSS animation

What you'll learn:

• RGB color manipulation
• Hexadecimal number systems
• JavaScript timers and intervals
• Form validation
• Real-time visual updates
• Color theory basics

CSV (Comma Separated Values) and JSON (JavaScript Object Notation) are both popular data formats. This converter helps transform data between these formats, which is a common need in web development and data processing.

This project teaches you about data formats, parsing algorithms, and building useful developer tools.

User Stories:

• User can paste CSV data into a text area
• User can click a 'Convert' button to transform CSV to JSON
• User can see the converted JSON in another text area
• User can copy the JSON output to clipboard
• User can see error messages for invalid CSV data
• User can clear both input and output areas

Bonus Features:

• User can upload CSV files from their computer
• User can download the JSON output as a file
• User can customize the JSON structure (array of objects vs nested objects)
• User can handle different CSV delimiters (comma, semicolon, tab)
• User can preview data in a table format before conversion
• User can convert JSON back to CSV
• User can handle special characters and escape sequences
• User can validate and format the JSON output
• User can process large CSV files efficiently

What you'll learn:

• CSV parsing algorithms and edge cases
• JSON structure and formatting
• File upload and download functionality
• Text processing and string manipulation
• Error handling for data validation
• Regular expressions for parsing
• Clipboard API usage
• Data format conversion techniques

This is a simple app where users can search for emojis and then copy them into the clipboard.

It could be a simple input field to look up inside an emoji list, and the result can be shown with a simple button to copy the emoji into the clipboard

It's important for Web Developers to understand the basics of manipulating images since rich web applications rely on images to add value to the user interface and user experience (UI/UX).

FlipImage explores one aspect of image manipulation - image rotation. This app displays a square pane containing a single image presented in a 2x2 matrix.

User Stories:

• User can see a pane containing a single image repeated in a 2x2 matrix
• User can flip any one of the images vertically or horizontally using a set of up, down, left, and right arrows next to the image
• User can see smooth animations when flipping images

Bonus Features:

• User can change the default image by entering the URL of a different image in an input field
• User can display the new image by clicking a 'Display' button next to the input field
• User can see an error message if the new image's URL is not found
• User can rotate the images in 90-degree increments
• User can reset all images to their original state
• User can apply multiple transformations simultaneously
• User can upload their own images from their device
• User can save the transformed image

What you'll learn:

• CSS transforms and animations
• Image manipulation with CSS
• Matrix operations for image transformations
• Event handling for interactive controls
• File input and image loading
• Error handling for image loading
• CSS transition and animation properties
• DOM manipulation for dynamic content

Web apps acquire data in many ways - through user input, APIs, files, databases, and sometimes by "scraping" websites. The GitHub Status app introduces you to retrieving and displaying real-time status information from external services.

This project teaches you how to work with status APIs and create monitoring dashboards for services you depend on.

User Stories:

• User can see the current status for GitHub Git operations, API Requests, Operational Issues, PRs, Dashboard, Projects, Operational Notifications, Operational Gists, and Operational GitHub Pages as a list in the main app window
• User can retrieve the most recent status from the GitHub Status website by clicking a 'Get Status' button
• User can see when the status was last updated

Bonus Features:

• User can see any of the GitHub components that are not in 'Operational' status highlighted by a different color, background animation, or any other technique to make it stand out
• User can see historical incident data
• User can set up notifications for status changes
• User can see response time metrics
• User can view status for other services (Twitter, AWS, etc.)
• User can see uptime percentages
• User can subscribe to status updates
• User can see maintenance schedules

What you'll learn:

• Working with status and monitoring APIs
• Real-time data fetching and updates
• Visual indicators for system status
• Error handling for service monitoring
• JSON data parsing and display
• Creating dashboard interfaces
• Working with external service APIs
• Polling for status updates

This is an awesome project to start with as a JavaScript newbie.

It contains a little bit of JavaScript but enough to get you some confidence

You can also use this website yourself after you build it

Lorem Ipsum is simply dummy text of the printing and typesetting industry. This app generates passages of lorem ipsum text suitable for use as placeholder copy in web pages, graphics, and more.

This is a great project for beginners to learn about text manipulation, user input handling, and creating useful developer tools.

User Stories:

• User can type into an input field the number of paragraphs of lorem ipsum to be generated
• User can see the generated paragraphs of lorem ipsum and is able to copy them
• User can specify the number of words per paragraph
• User can choose between different types of placeholder text

Bonus Features:

• User can choose different lorem ipsum variations (lorem ipsum, hipster ipsum, bacon ipsum, etc.)
• User can generate text in different formats (paragraphs, sentences, words)
• User can control the length of sentences and paragraphs
• User can add HTML tags to the generated text
• User can save frequently used configurations
• User can export text in different formats (plain text, HTML, markdown)

What you'll learn:

• String manipulation and generation
• User input validation
• Clipboard API
• Text formatting
• Random text generation algorithms
• Creating utility tools for developers

Create and store your notes for later purpose! This is a fundamental project for learning CRUD operations, local storage, and building practical applications.

This project teaches you the basics of data persistence in web applications and is a stepping stone to more complex applications.

User Stories:

• User can create a note
• User can edit a note
• User can delete a note
• When closing the browser window the notes will be stored and when the User returns, the data will be retrieved
• User can search through their notes
• User can organize notes by categories or tags

Bonus Features:

• User can create and edit a note in Markdown format. On save it will convert Markdown to HTML
• User can see the date when they created the note
• User can set reminders for notes
• User can export notes to different formats (txt, pdf, etc.)
• User can sync notes across devices
• User can add images to notes
• User can organize notes in folders
• User can pin important notes to the top

What you'll learn:

• LocalStorage API for data persistence
• CRUD operations (Create, Read, Update, Delete)
• DOM manipulation
• Event handling
• Data validation
• Search functionality
• Markdown parsing (bonus)
• Date and time handling

This project will teach you:

• how to generate a random number
• how to get data from the user and compare that data with the one you generated
• how to restart everything after the number of tries goes to 0

This is an interesting app that will give you the opportunity to manipulate timers and some interesting concepts in javascript!

User stories to implement :

• Enter a time
• Start timer
• Alert when the time is over
• Bonus : As a user, I can customize the length of each pomodoro.

Practice and test your knowledge by answering questions in a quiz application. As a developer you can create a quiz application for testing coding skills of other developers (HTML, CSS, JavaScript, Python, PHP, etc...).

This project is excellent for learning state management, user interaction patterns, and creating engaging user experiences.

User Stories:

• User can start the quiz by pressing a button
• User can see a question with 4 possible answers
• After selecting an answer, display the next question to the User. Do this until the quiz is finished
• At the end, the User can see the following statistics:
  • Time it took to finish the quiz
  • How many correct answers they got
  • A message showing if they passed or failed the quiz

Bonus Features:

• User can share the result of a quiz on social media
• Add multiple quizzes to the application. User can select which one to take
• User can create an account and have all the scores saved in their dashboard
• User can complete a quiz multiple times
• User can see detailed explanations for correct/incorrect answers
• User can pause and resume the quiz
• User can skip questions (with penalties)
• Different difficulty levels with scoring adjustments

What you'll learn:

• State management in JavaScript
• Timer functionality
• Score calculation algorithms
• User interface design for engagement
• Data structures for quiz questions
• Progress tracking
• Local storage for saving progress
• API integration (for trivia questions)

Generate a random meal from an API to discover new recipes and cooking ideas. This project is perfect for learning API integration and working with external data sources.

This project teaches you the fundamentals of making API calls and displaying dynamic content from external sources.

User Stories:

• User can click a button that will get a random meal from an external API
• The app should display: Recipe name, Ingredients, Instructions and a Picture of the meal
• By clicking the button again, another meal will be generated
• User can see a loading indicator while fetching the meal

Bonus Features:

• The app should display a YouTube Video for the recipe
• User can search for meals by name or ingredient
• User can filter meals by category (breakfast, lunch, dinner)
• User can save favorite meals to a list
• User can see nutritional information if available
• User can generate meal plans for the week
• User can share meals on social media
• User can print recipe cards

What you'll learn:

• Making HTTP requests to external APIs
• Working with JSON data
• Handling asynchronous operations with fetch API
• Error handling for network requests
• Displaying dynamic content from APIs
• Loading states and user feedback
• Working with media content (images, videos)
• API documentation and integration

Generate random numbers between specified ranges. This simple but practical project is perfect for learning basic programming concepts and can be used for games, testing, or any application that needs random values.

User Stories:

• User can set a minimum and maximum value for the range
• User can generate a random number within the specified range
• User can see the generated number displayed clearly
• User can generate multiple numbers at once
• User can copy the generated number to clipboard

Bonus Features:

• User can generate random decimal numbers
• User can exclude certain numbers from the range
• User can generate multiple random numbers at once
• User can see a history of previously generated numbers
• User can save frequently used ranges
• User can generate numbers with specific patterns (even, odd, prime)
• User can export generated numbers to a file
• User can visualize the distribution of generated numbers

What you'll learn:

• Math.random() function and random number generation
• Input validation and range checking
• User interface design
• Event handling
• Basic statistics and distribution
• Data visualization (for bonus features)

Create a digital cookbook to store and organize your favorite recipes. This project teaches you about data organization, search functionality, and creating practical applications for everyday use.

User Stories:

• User can add new recipes with ingredients and instructions
• User can view a list of all saved recipes
• User can click on a recipe to view its full details
• User can edit existing recipes
• User can delete recipes they no longer want
• User can search for recipes by name or ingredient

Bonus Features:

• User can categorize recipes by meal type (breakfast, lunch, dinner, dessert)
• User can rate recipes and see ratings
• User can add photos to recipes
• User can scale recipe quantities up or down
• User can create shopping lists from recipe ingredients
• User can mark recipes as favorites
• User can share recipes with others
• User can import recipes from URLs
• User can track nutritional information
• User can plan weekly meals

What you'll learn:

• CRUD operations (Create, Read, Update, Delete)
• Data modeling for structured content
• Search and filtering algorithms
• Local storage for data persistence
• Form handling and validation
• Image upload and handling
• User interface design for content management

Learn about number systems and algorithms by building a converter that transforms Roman numerals to decimal numbers and back. This project teaches you about different number systems and conversion algorithms.

Roman numerals are still used today in various contexts, making this a practical and educational project.

User Stories:

• User can enter a Roman numeral and see the decimal equivalent
• User can enter a decimal number and see the Roman numeral equivalent
• User can see error messages for invalid Roman numerals
• User can see error messages for numbers outside the valid range (1-3999)
• User can clear the input and start over

Bonus Features:

• User can see a reference chart of Roman numeral rules
• User can practice with random Roman numeral quizzes
• User can see the step-by-step conversion process
• User can handle both uppercase and lowercase input
• User can convert ranges of numbers at once
• User can see historical context about Roman numerals
• User can export conversion results
• User can work with larger numbers using extended notation

What you'll learn:

• Number system conversion algorithms
• String parsing and validation
• Regular expressions for input validation
• Mathematical operations and logic
• Algorithm optimization
• Historical number systems
• Input sanitization and error handling
• User interface design for calculators

This is a project everyone recommends to build because it ensures you learn the fundamentals. From how to manipulate the DOM to how to work with Local Storage, this is the project that can teach you the most!

you will learn :

• How to create new tasks
• How to validate fields
• Filtering tasks (completed, active, ...) by learning filter and reduce
• And especially understanding the fundamentals of JavaScript.

This is an awesome project to build if you want to learn more about APIs and how to work with them

You'll learn how to get the data you want from an API and display that on your website

The app should accept a set of manual entries of weight measurements taken at different dates

• It can plot a graph
• It can allow to track multiple entities, for example more than one person weight
• Persist them on the local storage