html web page design assignment

32 HTML And CSS Projects For Beginners (With Source Code)

updated Aug 20, 2024

If you want to feel confident in your front-end web developer skills, the easiest solution is to start building your own HTML and CSS projects from scratch.

As with any other skill, practicing on simple, realistic projects helps you build your skills and confidence step-by-step.

But if you are new to HTML and CSS, you may be wondering:

Where can I find ideas for beginner-level HTML and CSS projects?

Even if you are just starting out with HTML and CSS, there are some fun and easy projects you can create.

Whether you are new to learning web development or have some experience under your belt, this guide is the perfect place to start improving your skills.

In this article, I’ll walk you through 32 fun HTML and CSS coding projects that are easy to follow. We will start with beginner-level projects and then move on to more demanding ones.

If you want to become a professional front-end developer, the projects below will help you expand your portfolio.

When it’s time to apply for your first entry-level job, you can showcase your skills to potential employers with a portfolio packed with real-life project examples.

Let’s get started!

Please note: This post contains affiliate links to products I use and recommend. I may receive a small commission if you purchase through one of my links, at no additional cost to you. Thank you for your support!

What are HTML and CSS?

HTML and CSS are the most fundamental languages for front-end web development.

Learning them will allow you to:

• Build stunning websites
• Start a coding blog
• Make money freelancing

Let’s take a quick look at both of them next:

What is HTML?

HTML or HyperText Markup Language is the standard markup language for all web pages worldwide.

It’s not a “typical” programming language like Python or Java since it doesn’t contain any programming logic. HTML can’t perform data manipulations or calculations, for example.

Instead, HTML allows you to create and format the fundamental structure and content of a web page.

You will use HTML to create:

• Page layouts (header, body, footer, sidebar)
• Paragraphs and headings
• Input fields
• Checkboxes and radio buttons
• Embedded media

Thus, HTML only allows you to determine the structure of a web page and place individual content elements within it.

For more details, check out my post on what HTML is and how it works .

You can’t format the look and feel of your web page with HTML, though.

Your HTML web page will look dull and boring. Sort of like this:

The example above is the first web page every built for the WWW , by the way.

This is how websites used to look in the ’90s. But we’ve come a long way since.

To make your HTML content visually appealing and professional-looking, you need another language: CSS. Let’s look at that next.

What is CSS?

CSS or Cascading Style Sheets is a style sheet language that allows you to adjust the design and feel of your HTML content.

Thus, CSS allows you to turn your pure-HTML pages into stunning, modern websites. And it’s easy to learn, too!

CSS allows you to target individual HTML elements and apply different styling rules to them.

For example, here’s a CSS rule that targets H2 headings, their font-size property, and sets it to a value of 24px:

You can use CSS to adjust:

• Page layouts and sections
• Backgrounds
• Fonts and text styling
• Spacings (paddings, margins)
• Borders and shadows
• CSS animations
• Responsiveness (with media queries)

If you want to create stunning websites and become a front-end web developer, CSS is one of the first tools you must learn and master.

For more details, check out my post on what CSS is and how it works .

Why build HTML and CSS projects?

Practicing on realistic, hands-on projects is the best way to learn how to create something useful and meaningful with HTML and CSS.

The more projects you finish, the more confidence you build.

To build a web page from scratch you need a basic understanding of how HTML works. You should be comfortable with writing the necessary HTML code to create a page without copying a boilerplate or following a tutorial.

Thus, if you want to become a front-end web developer , building HTML and CSS projects will teach you how to use these two languages in real life.

Therefore, practising your skills with the projects in this article will give you a competitive edge against anyone who’s simply following tutorials and copy-pasting other people’s code.

Finally, building HTML and CSS projects helps you build a professional portfolio of real-world projects.

When it’s time to start applying for your first job, you will have 10 to 20 cool projects to showcase your skills to potential employers. Not bad!

32 HTML and CSS projects: Table of contents

Here’s an overview of the HTML and CSS projects we’ll go through:

Beginner project: CSS radio buttons

Beginner project: css toggle buttons, beginner project: hamburger menu, beginner project: pure css sidebar toggle menu, beginner project: animated css menu, beginner project: custom checkboxes, beginner project: pure css select dropdown, beginner project: modal/popup without javascript, beginner project: animated gradient ghost button, beginner project: css image slider, basic html & css website layout, tribute page, survey page with html forms, sign-up page / log-in page, job application form page, landing page, product landing page, interactive navigation bar, responsive website header, restaurant menu, restaurant website, parallax website, custom 404 error page, personal portfolio website, blog post layout.

• Photography website

Music store website

Discussion forum website.

• Event or conference website

Technical documentation website

Online recipe book, website clone.

Share this post with others!

This quick project is a great example of what you can do with pure CSS to style radio buttons or checkboxes:

See the Pen CSS radio buttons by Angela Velasquez ( @AngelaVelasquez ) on CodePen .

☝️ back to top ☝️

This HTML and CSS project teaches you how to create custom CSS toggle buttons from scratch:

See the Pen Pure CSS Toggle Buttons | ON-OFF Switches by Himalaya Singh ( @himalayasingh ) on CodePen .

Every website needs a menu, right?

This hamburger menu is beautiful and clean, and you can build it with just HTML and CSS:

See the Pen Pure CSS Hamburger fold-out menu by Erik Terwan ( @erikterwan ) on CodePen .

Placing your website navigation inside a sidebar toggle is an easy way to clean up the overall look and feel of your design.

Here’s a modern-looking solution to a pure-CSS sidebar toggle menu:

See the Pen PURE CSS SIDEBAR TOGGLE MENU by Jelena Jovanovic ( @plavookac ) on CodePen .

If you want to build a more dynamic, interactive website navigation, try this animated CSS menu:

See the Pen Animate menu CSS by Joël Lesenne ( @joellesenne ) on CodePen .

Styling your checkboxes to match the overall design is an easy way to elevate the look and feel of your website.

Here’s an easy HTML and CSS practice project to achieve that:

See the Pen Pure CSS custom checkboxes by Glen Cheney ( @Vestride ) on CodePen .

Standard select dropdowns often look dull and boring. Here’s a quick CSS project to learn how to create beautiful select dropdowns easily:

See the Pen Pure CSS Select by Raúl Barrera ( @raubaca ) on CodePen .

Modals and popups often use JavaScript, but here’s a pure HTML and CSS solution to creating dynamic, interactive modals and popups:

See the Pen Pure css popup box by Prakash ( @imprakash ) on CodePen .

Ghost buttons can look great if they fit the overall look and feel of your website.

Here’s an easy project to practice creating stunning, dynamic ghost buttons for your next website project:

See the Pen Animated Gradient Ghost Button Concept by Arsen Zbidniakov ( @ARS ) on CodePen .

This image slider with navigation buttons and dots is a fantastic HTML and CSS project to practice your front-end web development skills:

See the Pen CSS image slider w/ next/prev btns & nav dots by Avi Kohn ( @AMKohn ) on CodePen .

Now, before you start building full-scale web pages with HTML and CSS, you want to set up your basic HTML and CSS website layout first.

The idea is to divide your page into logical HTML sections. That way, you can start filling those sections with the right elements and content faster.

For example, you can break up the body of your page into multiple parts:

• Header: <header>
• Navigation: <nav>
• Content: <article>
• Sidebar: <aside>
• Footer: <footer>

Depending on your project, you can fill the article area with a blog post, photos, or other content you need to present.

This layout project will serve as a starting point for all your future HTML and CSS projects, so don’t skip it.

Having a template like this will speed up your next projects, because you won’t have to start from scratch.

Here are two tutorials that will walk you through the steps of creating a basic website layout using HTML and CSS:

• https://www.w3schools.com/html/html_layout.asp
• https://www.w3schools.com/css/css_website_layout.asp

Building a tribute page is fantastic HTML and CSS practice for beginners.

What should your tribute page be about?

Anything you like!

Build a tribute page about something you love spending time with.

Here are a few examples:

• a person you like
• your favorite food
• a travel destination
• your home town

My first HTML-only tribute page was for beetroots. Yes, beetroots. I mean, why not?

HTML and CSS concepts you will practice:

• HTML page structure
• basic HTML elements: headings, paragraphs, lists
• embedding images with HTML
• CSS fundamentals: fonts and colors
• CSS paddings, margins, and borders

Here’s a helpful tutorial for building a HTML and CSS tribute page .

Whether you want to become a full-time web developer or a freelance web designer, you will use HTML forms in almost every project.

Forms allow you to build:

• Contact forms
• Login forms
• Sign up forms
• Survey forms

Building a survey page allows you to practice HTML input tags, form layouts, radio buttons, checkboxes, and more.

Pick any topic you like and come up with 10 pieces of information you want to collect from respondents.

Perhaps an employee evaluation form? Or a customer satisfaction form?

• form elements: input fields, dropdowns, radio buttons, labels
• styling for forms and buttons

Here’s an example survey form project for inspiration:

See the Pen Good Vibes Form by Laurence ( @laurencenairne ) on CodePen .

Let’s practice those HTML forms a bit more, shall we?

For this project, you will build a sign-up or log-in page with the necessary input fields for a username and a password.

Because we can create a user profile on almost every website, forms are absolutely essential for allowing people to set their usernames and passwords.

Your forms will collect inputs from users and a separate back-end program will know how to store and process that data.

Creating a clean and clear sign-up page can be surprisingly difficult. The more you learn about HTML and CSS, the more content you want to create to showcase your skills. But the thing is: a sign-up page needs to be as clean and easy-to-use as possible.

Thus, the biggest challenge with this project is to keep it simple, clear, and light.

Here’s an example project to get started with:

See the Pen Learn HTML Forms by Building a Registration Form by Noel ( @WaterNic10 ) on CodePen .

For more inspiration, check out these 50+ sign-up forms built with HTML and CSS .

Using a HTML form is the best way to collect information from job applicants.

You can also generate and format a job description at the top of the page.

Then, create a simple job application form below to collect at least 10 pieces of information.

Use these HTML elements, for example:

• Text fields
• Email fields
• Radio buttons

Here’s an example job application page you can build with HTML and CSS:

See the Pen Simple Job Application Form Example by Getform ( @getform ) on CodePen .

One of your first HTML and CSS projects should be a simple landing page.

Your landing page can focus on a local business, an event, or a product launch, for example.

Landing pages play an important role for new businesses, marketing campaigns, and product launches. As a front-end developer, you will be asked to create them for clients.

For this project, create a simple HTML file and style it with CSS. Be sure to include a headline, some text about the company or its services, and a call-to-action (CTA) button.

Make sure that your landing page is clean and clear and that it’s easy to read.

If you build a landing page for a new product, highlight the product’s key benefits and features.

To get started, follow this freeCodeCamp tutorial to build a simple landing page . You will need JavaScript for a few features. If you are not familiar with JavaScript, leave those features out for now and come back to them later.

For more inspiration, check out these HTML landing page templates .

A product landing page is a page that you build to promote a specific product or service.

For example, if you want to sell your ebook about how to use CSS to build an animated website, then you would create a product landing page for it.

Your product landing page can be very simple to start with. When your skills improve, add some complexity depending on what kind of information you need to present.

One of the most iconic product landing pages is the iPhone product page by Apple, for example:

Of course, the iPhone landing page is technically complex, so you won’t build it as your first project. But still, it’s a good place to find inspiration and new ideas.

The best way to design your first product landing page is to create a simple wireframe first. Sketch your page layout on paper before you start building it.

Wireframes help you maintain a clear overview of your HTML sections and elements.

To get started, browse through these product landing page examples for some inspiration .

Building an interactive navigation bar will teach you how to create an animated menu with dropdowns using HTML and CSS.

This is another great project for beginners, because it will teach you how to create menus using HTML and CSS. You’ll also learn how to style them with different colors, fonts, and effects.

You’ll also learn how to use anchors and pseudo-classes to create the menu navigation, as well as how to create the dropdown menus from scratch.

If you aren’t familiar with CSS media queries yet, building a responsive navigation bar is a smart way to learn and practice them.

CSS media queries allow you to create a responsive navigation menu that changes its size and layout depending on screen width.

To get started, check out this tutorial on how to build an interactive navigation bar with HTML and CSS .

One of the best ways to practice your HTML and CSS skills is to create custom website headers. This is a great project to add to your portfolio website, as it will show off your skills and help you attract new clients.

There are a number of different ways that you can create a stylish and responsive website header. One option is to use a premade CSS framework such as Bootstrap or Foundation. Alternatively, you can create your own custom styles by hand.

No matter which option you choose, be sure to make your header mobile-friendly by using media queries. This will ensure that your header looks great on all devices, regardless of their screen size or resolution.

To get started, check out this simple example for a responsive HTML and CSS header .

If you’re looking to get into web development, one of the best HTML and CSS projects you can build is a simple restaurant menu.

Align the different foods and drinks using a CSS layout grid.

Add prices, images, and other elements you need to give it a professional, clean look and feel.

Choose a suitable color palette, fonts, and stock photos.

You can also add photos or a gallery for individual dishes. If you want to add an image slider, you can create one with HTML and CSS, too.

Here’s an example of a very simple restaurant menu project:

See the Pen Simple CSS restaurant menu by Viszked Tamas Andras ( @ViszkY ) on CodePen .

Once you’ve built your restaurant menu with, it’s time to tackle a more complex HTML and CSS project.

Building a real-life restaurant website is a fun way to practice a ton of HTML and CSS topics.

Not only will you learn the basics of creating a beautiful, professional web page, but you also get a chance to practice responsive web design, too.

And if you’re looking to land your first front-end web developer job, having a well-designed business website in your portfolio will help you stand out from the crowd.

Make sure your website matches the restaurant’s menu and target clientele. A fine-dining place on Manhattan will have a different website than a simple (but delicious!) diner in rural Wisconsin.

Here are a few key details to include on your restaurant website:

• Clear navigation bar
• Restaurant details
• Menu for food and drinks
• Location and directions
• Contact details
• Upcoming events

To get started, check out this free tutorial on how to build a restaurant website with HTML and CSS .

To build a parallax website, you will include fixed background images that stay in place when you scroll down the page.

Although the parallax look isn’t as popular or modern as it was a few years back, web designers still use the effect a lot.

The easiest way to build a parallax HTML and CSS project is to start with a fixed background image for the entire page.

After that, you can experiment with parallax effects for individual sections.

Create 3-5 sections for your page, fill them with content, and set a fixed background image for 1-2 sections of your choice.

Word of warning: Don’t overdo it. Parallax effects can be distracting, so only use them as a subtle accent where suitable.

Here’s an example project with HTML and CSS source code:

See the Pen CSS-Only Parallax Effect by Yago Estévez ( @yagoestevez ) on CodePen .

404 error pages are usually boring and generic, right?

But when a visitor can’t find what they’re searching for, you don’t want them to leave your website.

Instead, you should build a custom 404 error page that’s helpful and valuable, and even fun and entertaining.

A great 404 page can make users smile and – more importantly – help them find what they are looking for. Your visitors will appreciate your effort, trust me.

For some inspiration, check out these custom 404 page examples .

Any web developer will tell you that having a strong portfolio is essential to landing your first job.

Your portfolio is a chance to show off your skills and demonstrate your expertise in front-end web development.

And while there are many ways to create a portfolio website, building one from scratch using HTML and CSS will give you tons of valuable practice.

Your first version can be a single-page portfolio. As your skills improve, continue adding new pages, content, and features. Make this your pet project!

Remember to let your personality shine through, too. It will help you stand out from the crowd of other developers who are vying for the same jobs.

Introduce yourself and share a few details about your experience and future plans.

Employers and clients want to see how you can help them solve problems. Thus, present your services and emphasize the solutions you can deliver with your skills.

Add your CV and share a link to your GitHub account to showcase your most relevant work samples.

Make sure to embed a few key projects directly on your portfolio website, too.

Finally, let your visitors know how to get in touch with you easily. If you want, you can add links to your social media accounts, too.

In this project, you’ll create a simple blog post page using HTML and CSS.

You’ll need to design the layout of the page, add a title, a featured image, and of course add some content to your dummy blog post.

You can also add a sidebar with a few helpful links and widgets, like:

• An author bio with a photo
• Links to social media profiles
• List of most recent blog posts
• List of blog post categories

Once your HTML structure and content are in place, it’s time to style everything with CSS.

Photography website with a gallery

If you’re a photographer or just enjoy taking pictures, then this project is for you.

Build a simple photo gallery website using HTML and CSS to practice your web design skills.

Start with the basic HTML structure of the page, and figure out a cool layout grid for the photos. You will need to embed the photos and style everything beautiful with CSS.

My tip: Use CSS Flexbox and media queries to create a responsive galleries that look great on all devices.

Here’s a full tutorial for building a gallery website with HTML and CSS:

If you love music, why not practice your HTML and CSS skills by building a music store web page?

Before you start, make a thorough plan about your website structure. What’s the purpose of your music store? What genres will you cover?

Pick a suitable color palette, choose your fonts, and any background images you want to use.

My tip: If you feature album cover images, keep your colors and fonts as clean and simple as possible. You don’t want to overpower the album covers with a busy web page with tons of different colors and mismatching fonts.

Create a user-friendly menu and navigation inside the header. Fill the footer with helpful links for your store, career page, contact details, and newsletter form, for example.

Building a music store website with HTML and CSS is a great opportunity to practice your skills while you are still learning.

Start with very basic features, and add new ones as your skills improve. For example, you can add media queries to make your website responsive.

A forum is a great way to create a community around a topic or interest, and it’s also a great way to practice your coding skills.

In this project, you’ll create a simple forum website using HTML and CSS.

You’ll need to design the layout of the site, add categories and forums, and set up some initial content.

Of course, you should start with creating the basic layout and structure with HTML first. You will need a navigation bar, at least one sidebar, and an area for the main content.

To make your discussion forum website more interesting, add new content and remember to interlink related threads to make the site feel more realistic.

Event or conference web page

Creating a web page for an event is a fun HTML and CSS project for beginners.

You can either pick a real event and build a better landing page than the real one, or come up with an imaginary conference, for example.

Make sure to include these elements:

• Register button
• Venue details
• Dates and schedule
• Speakers and key people
• Directions (how to get there)
• Accommodation details

Divide the landing page into sections, and create a header and a footer with menus and quick links.

Come up with a suitable color palette, pick your fonts, and keep your design clean and clear.

Every programming language, software, device and gadget has a technical documentation for helpful information and support.

Creating a technical documentation website with just HTML and CSS allows you to build a multi-page site with hierarchies, links, and breadcrumbs.

The main idea is to create a multi-page website where you have a sidebar menu on the left, and the content on the right.

The left-hand side contains a vertical menu with all the topics your documentation covers.

The right-hand side presents the description and all the details for each individual topic.

For simplicity, start with the homepage and 2–3 subpages first. Come up with a clean layout and make sure your links are working properly.

Then, start expanding the website with additional sub-pages, content, and elements.

• HTML hyperlinks and buttons

Creating an online recipe book as an HTML and CSS project requires a similar setup than the previous project example.

You will need to create a homepage that serves as a directory for all your recipes. Then, create a separate subpage for each recipe.

If you want to challenge yourself, add recipe categories and create separate directory pages for each of them.

• embedding recipe photos

One of the best ways to practice HTML and CSS is to clone an existing web page from scratch.

Use your browser’s inspecting tools to get an idea of how the page is built.

As with any HTML and CSS project, start by creating the basic page template with:

Then, divide your page into sections, rows, and columns.

Finally, fill your page with individual elements like headings, paragraphs, and images.

Once the HTML content is in place, use CSS to style your page.

Start with something simple, like the PayPal login page.

Then move on to more demanding cloning projects, such as a news website. Try the BBC homepage, for example.

Where to learn HTML and CSS?

There are no prerequisites required for you to learn HTML and CSS.

Both languages are easy to learn for beginners, and you can start building real-life projects almost right away.

Here are a few courses to check out if you want to learn HTML and CSS online at your own pace:

1: Build Responsive Real World Websites with HTML5 and CSS3

Build Responsive Real World Websites with HTML5 and CSS3 was my first online web development course focused 100% on HTML and CSS.

You don’t need any coding or web development experience for this course. But if you have watched some online tutorials but you’re not sure how to create a full-scale website by yourself, you are going to love it.

2: The Complete Web Developer Course 2.0

The Complete Web Developer Course 2.0 changed my life back when I started learning web development.

This course takes you from zero to knowing the basics of all fundamental, popular web development tools. You’ll learn:

• HTML and CSS
• JavaScript and jQuery
• and much more

3: Modern HTML & CSS From The Beginning (Including Sass)

I’m a big fan of Brad Traversy, and I really can’t recommend his Modern HTML & CSS From The Beginning course enough.

Even if you have never built a website with HTML and CSS before, this course will teach you all the basics you need to know.

4: The Complete 2024 Web Development Bootcamp

One of my most recent favorites, The Complete 2024 Web Development Bootcamp by Dr. Angela Yu is one of the best web development courses for beginners I’ve come across.

If you’re not quite sure what area or language to specialize in, this course is the perfect place to try a handful of tools and programming languages on a budget.

5: Learn HTML (Codecademy)

Learn HTML is a free beginner-level course that walks you through the fundamentals with interactive online lessons.

Codecademy also offers a plethora of other web development courses. Check out their full course catalog here .

6: Responsive Web Design (freeCodeCamp)

The Responsive Web Design certification on FreeCodeCamp is great for learning all the basics of web development from scratch for free.

You start with HTML and CSS to get the hang of front-end web dev fundamentals. Then, you start learning new tools and technologies to add to your toolkit, one by one.

Also, check out these roundups with helpful web development courses:

• 27 Best Web Development Courses (Free and Paid)
• 20+ Web Development Books for Beginners
• 120+ Free Places to Learn to Code (With No Experience)
• 100+ Web Development Tools and Resources

Final thoughts: HTML and CSS project ideas for beginners

When it comes to learning HTML and CSS, practice makes perfect. Did you find a few inspirational ideas here to start building your next project?

Learning HTML and CSS may seem intimidating at first. But when you break it down into small, less-intimidating projects, it’s really not as hard as you might think.

Try these beginner-level HTML and CSS project ideas to improve your front-end web development skills. Remember to add your projects to your portfolio website .

It’s possible to learn how to code on your own, and it’s possible to land your first developer job without any formal education or traditional CS degree.

It all boils down to knowing how to apply your skills by building an awesome portfolio of projects like the ones above.

So, which project will you build first? Let me know in the comments below!

Once you feel comfortable with HTML and CSS, it’s time to start learning and practising JavaScript .

To get started, check out my guide with 20+ fun JavaScript projects ideas for beginners .

Share this post with others:

About mikke.

Hi, I’m Mikke! I’m a blogger, freelance web developer, and online business nerd. Join me here on MikkeGoes.com to learn how to code for free , build a professional portfolio website , launch a tech side hustle , and make money coding . When I’m not blogging, you will find me sipping strong coffee and biking around town in Berlin. Learn how I taught myself tech skills and became a web dev entrepreneur here . And come say hi on Twitter !

Leave a reply:

Download 15 tips for learning how to code:.

GET THE TIPS NOW

Sign up now to get my free guide to teach yourself how to code from scratch. If you are interested in learning tech skills, these tips are perfect for getting started faster.

• HTML Lab Assignments

Mastering the Basics: HTML Lab Practical Assignment

Welcome to the HTML Lab Practical! 🚀 This hands-on assignment is designed to put your HTML skills to the test and give you a real-world experience of building a webpage from scratch.

The Objective

In this lab, you will create a fully functional personal webpage using nothing but pure HTML. By the end of this exercise, you'll have a deeper understanding of how web pages are structured and how different HTML elements work together to bring content to life.

• HTML Structure: Use the appropriate HTML tags like header, nav, main, and footer to organize your content. Implement semantic elements for better readability and SEO.
• Text Formatting: Include headings, paragraphs, and text formatting tags (bold, italic, etc.) to structure your content properly.
• Multimedia: Insert images and embed videos that enhance your webpage. Use the img tag for images and iframe for embedded content like YouTube videos.
• Links and Lists: Make your webpage interactive by adding internal and external hyperlinks. Include both ordered and unordered lists to present information clearly.
• Tables: Create a table to display information in a structured manner. This could be a timetable, price list, or any other relevant data.
• Forms: Build a simple contact form with text fields, radio buttons, checkboxes, and a submit button.

Practical Learning Outcomes:

By completing this practical, you will:

• Grasp the importance of HTML structure for web development.
• Understand how to integrate multimedia and other elements.
• Learn how to organize content effectively using lists and tables.
• Get familiar with creating and handling web forms.

Why This Matters:

HTML is the foundation of every webpage you visit on the internet. It's a powerful, fundamental skill that every aspiring web developer must master. Whether you're building a simple blog, an e-commerce site, or the next big social platform, HTML is the first step to making it happen.

This lab assignment isn't just about theory—it's about taking action and seeing the results of your coding efforts in real time. So dive in, experiment, and don't be afraid to get creative!

HTML Assignment and HTML Examples for Practice

Text formatting, working with image, working with link, frame set & iframe.

HTML beginner's tutorial: Build a webpage from scratch with HTML

If you are a web dev novice and want to get started with the exciting world of web design, you’ve probably heard of HTML , which is the foundation of every web page online. Any successful web developer or designer must have a strong understanding of HTML.

Today, we will go through a beginner’s tutorial on HTML and build a web page step-by-step. Most web development tutorials talk about CSS and JavaScript right away, but we want to make sure you have a solid understanding of HTML before moving onto the next steps.

We will discuss the basics of HTML that you’ll use throughout your web dev career. No prerequisite knowledge of programming is required, but to be most successful with this article, a basic understanding of programming is helpful. For a quick introduction or refresher, check out The Absolute Beginner’s Guide to Programming.

Today we will cover:

• What is HTML?

Key HTML terms and formatting

• How to build your own web page with HTML

What to learn next

Hyper Text Markup Language (HTML) is the markup language we use to make webpages. It is the basis of every website that you encounter on the internet. Think of HTML as the bricks that you need to build anything for the web. Once we write our HTML code, we can add other languages to the page, such as CSS and JavaScript, to add interactivity, style, and more.

Imagine a document that you would create in a word processor. That document will usually use different font sizes to indicate sections of the text, such as headers, main content, footers, table of contents, etc. HTML is the process of building that document and setting the sizes of our text.

HTML provides a website’s structure and layout. We define that structure using various elements. But in order for a browser to appear how we want it, it must be explicitly told what each piece of content is. HTML is how we communicate and tell a computer how to render. The computer can interpret our HTML elements and translate them onto the screen.

Explore HTML on your own. You can view the HTML source code of any website by right clicking on a rendered page and selecting “View Source”. This will open a page that details the HTML foundations of that site. Try it out with this article!

Now that we know what HTML is, let’s briefly introduce a few key terms before moving onto a step-by-step guide. You will use these basics throughout your entire web dev career!

Tags and elements

An element is an individual component of an HTML document that represents the semantics of that page. For example, the title element translates to the title of a page.

Semantics refers to the meaning of a particular element. Syntax refers to the structure of a programming language.

To create an element, we use tags . Think of these as descriptors for each piece of content you want on your page. Most tags are quite self-explanatory.

• <p> : used to describe a paragraph
• <img> : add an image
• <h1> : set the text to the largest size heading
• <a> : an anchor will create a hyperlink to other HTML files

To use tags, we wrap the content between an opening and closing tag. The closing tag uses the forward slash / , while the opening tag does not. HTML tags are case not sensitive so <P> is the same as <p> .

You can nest HTML elements when you want to apply multiple tags. Say you wanted to make a paragraph that is also bold. You could write the following HTML code:

Attributes and hyperlinks

HTML attributes provide additional information about our elements. Think of these like properties of an element. Attributes are placed in the opening tag, use the = sign, and wrap the attribute value in quotation marks " " .

Attributes can do all sorts of things to our elements such as embed images, add color, declare the language of a page, or add a title. For example, we can add color to our text using the following format.

Note: You can add color using Hex color codes (for specific colors) or one of the 140 text color names built-into HTML.

One of the most common uses of attribute is hyperlinking . We can connect any HTML page to another HTML page using an anchor tag. The href attribute will create a connection between the two sites.

Headings and lists

Headings are how we specify the difference between the main header and sub-headers. The HTML standard has six text heading elements, appropriately named h1 (the largest) through h6 (the smallest).

Note: Headers are used to represent text semantically. This is different than specifying font size. We use CSS to change font size.

If we want to list items, either as a bulleted of numbered list, we use the <li> tag. We can either create an unordered list (bulleted) or an ordered list (numbered).

• Unordered lists begins with the <ul> tag and the nested <li> tags for teach item.
• Ordered lists begins with the <ol> tag and the nested <li> tags for teach item.

Add images: <img> tag

We can add images to our webpage using the <img> tag. We need to add a src attribute that contains a file path to that image. You will also include an alt attribute, which provides an alternative text description in case the image does not load.

In the example below, we also defined two class attributes. The class attribute is used to identify specific elements with an identifier. This makes it possible to use an elements in a later part of our code. An element can have multiple class values, such as a title and a caption, as we use below.

Note: The image tag does not use a closing tag.

HTML tables

We can add tables to a webpage by translating a table’s data into row and columns. Each row/column pair will have a piece of data associated with it called a table cell . So, how do we build a table in HTML?

First, we declare an HTML table using the <table> tag. Then, we add rows to our table with the <tr> tag. From there, we specify the cells with the <td> tag.

Take a look at this example below, but note that the table is not stylized at all. It will only list the data as it is provided. If we want to add style to the table (background color, padding, borders, etc.), we must use the language CSS.

Formatting an HTML document

Now that we know the terms of HTML, let’s discuss the basics of formatting. We will look at a basic HTML file before discussing each part below.

The first line, <DOCTYPE! html> , is called the doctype declaration. This indicates to browser what HTML version the file is written in. This file indicates that it is written in HTML5.

On the second line, we write the opening <html> tag to indicate the root element. From there, we branch off into other elements in a tree-like structure. To properly define an HTML file, we must place <head> and <body> elements within that root.

• The <head> element contains supporting information about the file. We call this metadata. There must be a <title> to providing a title to the page directly underneath the <head> element.
• The <body> element contains the main content of our file that will be rendered by a browser. There can be only one <body> element. Most of the HTML code you write will exist here.
• Within the body element, we then branch off to our highest-level heading <h1> and a paragraph <p> .

As you can see from this example, some elements are inline while others are block-level . Block-level HTML elements take the full width of a webpage and start on a new line. Some of these elements include headings, lists, and paragraphs. Inline elements do not take the full width and are in-line with text content. Some examples include anchors, images, and bolded text.

Become a frontend developer for free.

This is the ideal place to start your journey as a front-end developer with 6 curated modules. With no prior knowledge needed, you will gain a mastery of HTML, CSS, and JavaScript, allowing you to put together beautiful, functional websites and web apps yourself.

Become a Front End Developer

How to build your own webpage with HTML

Alright, now we know the basic terms of HTML and how to format an HTML file properly. But how do you actually make a webpage? Let’s go through a step-by-step guide to learn how it’s done. We will be making a simple “About Me” webpage that includes the following:

• Title with your name
• Description of yourself in a paragraph
• List of your skills
• Hyperlink to a website you like (or a personal website)
• Table of your work experience

1. Download and open an HTML editor

Webpages are created using HTML editors. Think of this like a word processor but specifically for creating HTML files. There are many options for text editors that vary in complexity and robustness. If you’re just getting started, I recommend using simple text editor like TextEdit (Mac), Notepad (PC), or Atom. Most text editors are free to download.

Here, we will use Educative’s build-in text editor widget where you can explore HTML without downloading anything. You can also follow along with your own editor of choice.

2. Write a basic HTML file

Once you open your editor, start a new file and write the basics structure of an HTML page. Try writing the basic structure yourself in the code widget below using what we learned above. The answer can be found below if you get stuck. You should include:

• Document type declaration
• A page title called “My HTML Webpage: (Your name)”
• A header ( h1 ) called “About Me: (Your name)”
• Paragraph with 1-2 sentences about you
• Proper closing tags

3. Hyperlink to a website you like (or personal website)

Now, let’s add a link to your personal website or a website of your choosing. Copy the code you wrote from above and continue adding to it below. Try it yourself before checking the solution. We will add this just below your personal description. It should include:

• The title of the page you are linking to
• The URL to link to that site

4. Add a list of your skills

Now, let’s add an unordered list of your skills. Copy what code you have from above and continue adding this next step of HTML code. Try writing the code yourself in the code widget below using what we learned above. The answer can be found below if you get stuck. You should include:

• A header ( h3 ) called “My Skills”
• A bulleted list of 5 skills
• Proper closing tags for the list

5. Add a table of your work experience

Now, let’s add a table of your work experience. Copy what code you have from above and continue adding this next step of HTML code. Try writing the code yourself in the code widget below using what we learned above. The answer can be found below if you get stuck. You should include:

• Column headers: Employer, Job Title, Years
• 3 former jobs with each of the above columns filled in

6. Finish and save your webpage

Once you complete all these steps, you’ll want to save the HTML file on your computer. Select File > Save as in the Notepad or other text editor menu. Name the file your_name.html and set the encoding to UTF-8 (preferred for HTML files).

Once you save the file you can open it in your browser by right clicking on the file, clicking Open with , and selecting your browser. You will see your basic HTML page!

Congrats! You’ve officially made a simply webpage on your own. You’re well on your way to becoming a frontend web developer. There’s still a ton to learn, but HTML is a really important stepping stone. The next steps in your web dev journey are:

• Advanced HTML
• CSS (for adding style)
• JavaScript (for interactivity)
• Libraries and frameworks (prewritten code)
• Advanced web dev concepts

To get you started with these concepts, Educative has created a learning path to walk you through all the skills necessary to become a professional web developer. Our Become a Front End Developer Learning Path offer 6 curated modules. You’ll learn how to add style to a webpage, the basics of JavaScript, and even how to deploy your own website!

Happy learning!

Continue reading about web development

• A Beginner’s Guide to Web Development
• JavaScript Snake Game Tutorial: build a simple, interactive game
• Animate CSS code: create a panda animation with HTML & CSS

Learn in-demand tech skills in half the time

Mock Interview

Skill Paths

Assessments

Learn to Code

Tech Interview Prep

Generative AI

Data Science

Machine Learning

GitHub Students Scholarship

Early Access Courses

For Individuals

Try for Free

Gift a Subscription

Become an Author

Become an Affiliate

Earn Referral Credits

Cheatsheets

Frequently Asked Questions

Privacy Policy

Cookie Policy

Terms of Service

Business Terms of Service

Data Processing Agreement

Copyright © 2024 Educative, Inc. All rights reserved.

Practice Projects in HTML & CSS

Solidify concepts with guided practice., animal fun facts, animated company logo, birthday party, black lives matter, cake o'clock, challenge project: build a website design system, challenge project: build your own cheat sheet.

The HTML Handbook – Learn HTML for Beginners

Introduction

Welcome! I wrote this book to help you quickly learn HTML and get familiar with the advanced HTML topics.

HTML, a shorthand for Hyper Text Markup Language, is one of the most fundamental building blocks of the Web.

HTML was officially born in 1993 and since then it evolved into its current state, moving from simple text documents to powering rich Web Applications.

This handbook is aimed at a vast audience.

First, the beginner. I explain HTML from zero in a succinct but comprehensive way, so you can use this book to learn HTML from the basics.

Then, the professional. HTML is often considered like a secondary thing to learn. It might be given for granted.

Yet lots of things are obscure to many people. Me included. I wrote this handbook to help my understanding of the topic, because when I need to explain something, I better make sure I first know the thing inside out.

Even if you don't write HTML in your day to day work, knowing how HTML works can help save you some headaches when you need to understand it from time to time, for example while tweaking a web page.

You can reach me on Twitter @flaviocopes .

My website is flaviocopes.com .

Note: you can download a PDF / ePub / Mobi version of this book so you can read it offline.

• HTML Basics
• The document heading
• The document body
• Tags that interact with text
• Container tags and page structure HTML
• Multimedia tags: audio and video
• Accessibility

HTML is the foundation of the marvel called the Web.

There is an incredible power underneath this rather simple and limited set of rules, which lets us -- developers, makers, designers, writers, and tinkerers -- craft documents, apps, and experiences for people all around the globe.

My first HTML book came out in 1997 and was called "HTML Unleashed". A big, lots-of-pages, long tome.

20+ years have passed, and HTML is still the foundation of the Web, with minimal changes from back then.

Sure, we got more semantic tags, presentational HTML is no longer a thing, and CSS has taken care of the design of things.

HTML's success is based on one thing: simplicity .

It resisted being hijacked into an XML dialect via XHTML, when eventually people realized that thing was way, way too complex.

It did so because of another feature it provides us: forgiveness . There are some rules, right, but after you learn those, you have a lot of freedom.

Browsers learned to be resilient and to always try to do their best when parsing and presenting HTML to the users.

And the whole Web platform did one thing right: it never broke backward compatibility. Pretty incredibly, we can go back to HTML documents written in 1991, and they look pretty much as they looked back then.

We even know what the first web page was. It's this: http://info.cern.ch/hypertext/WWW/TheProject.html

And you can see the source of the page, thanks to another big feature of the Web and HTML: we can inspect the HTML of any web page .

Don't take this for granted. I don't know any other platform that gives us this ability.

The exceptional Developer Tools built into any browser let us inspect and take inspiration from HTML written by anyone in the world.

If you are new to HTML this book aims to help you get started. If you are a seasoned Web Developer this book will improve your knowledge.

I learned so much while writing it, even though I've been working with the Web for 20+ years, and I'm sure you'll find something new, too.

Or you'll re-learn something old you forgot.

In any case, the goal of the book is to be useful to you, and I hope it succeeds.

HTML BASICS

HTML is a standard defined by the WHATWG , an acronym for Web Hypertext Application Technology Working Group, an organization formed by people working on the most popular web browser. This means it's basically controlled by Google, Mozilla, Apple and Microsoft.

In the past the W3C (World Wide Web Consortium) was the organization in charge of creating the HTML standard.

The control informally moved from W3C to WHATWG when it became clear that the W3C push towards XHTML was not a good idea.

If you've never heard of XHTML, here's a short story. In the early 2000s, we all believed the future of the Web was XML (seriously). So HTML moved from being an SGML-based authoring language to an XML markup language.

It was a big change. We had to know, and respect, more rules. Stricter rules.

Eventually browser vendors realized this was not the right path for the Web, and they pushed back, creating what is now known as HTML5.

W3C did not really agree on giving up control of HTML, and for years we had 2 competing standards, each one aiming to be the official one. Eventually on 28 May 2019 it was made official by W3C that the "true" HTML version was the one published by WHATWG.

I mentioned HTML5. Let me explain this little story. I know, it's kind of confusing up to now, as with many things in life when many actors are involved, yet it's also fascinating.

We had HTML version 1 in 1993. Here's the original RFC .

HTML 2 followed in 1995.

We got HTML 3 in January 1997, and HTML 4 in December 1997.

Busy times!

20+ years went by, we had this entire XHTML thing, and eventually we got to this HTML5 "thing", which is not really just HTML any more.

HTML5 is a term that now defines a whole set of technologies, which includes HTML but adds a lot of APIs and standards like WebGL, SVG and more.

The key thing to understand here is this: there is no such thing (any more) as an HTML version now. It's a living standard. Like CSS, which is called "3", but in reality is a bunch of independent modules developed separately. Like JavaScript, where we have one new edition each year, but nowadays, the only thing that matters is which individual features are implemented by the engine.

Yes we call it HTML5, but HTML4 is from 1997. That's a long time for anything, let alone for the web.

This is where the standard now "lives": https://html.spec.whatwg.org/multipage .

HTML is the markup language we use to structure content that we consume on the Web.

HTML is served to the browser in different ways.

• It can be generated by a server-side application that builds it depending on the request or the session data, for example a Rails or Laravel or Django application.
• It can be generated by a JavaScript client-side application that generates HTML on the fly.
• In the simplest case, it can be stored in a file and served to the browser by a Web server.

Let's dive into this last case. Although in practice it's probably the least popular way to generate HTML, it's still essential to know the basic building blocks.

By convention, an HTML file is saved with a .html or .htm extension.

Inside this file, we organize the content using tags .

Tags wrap the content, and each tag gives a special meaning to the text it wraps.

Let's make a few examples.

This HTML snippet creates a paragraph using the p tag:

This HTML snippet creates a list of items using the ul tag, which means unordered list , and the li tags, which mean list item :

When an HTML page is served by the browser, the tags are interpreted, and the browser renders the elements according to the rules that define their visual appearance.

Some of those rules are built-in, such as how a list renders or how a link is underlined in blue.

Some other rules are set by you with CSS.

HTML is not presentational. It's not concerned with how things look . Instead, it's concerned with what things mean .

It's up to the browser to determine how things look, with the directives defined by who builds the page, with the CSS language.

Now, those two examples I made are HTML snippets taken outside of a page context.

HTML page structure

Let's make an example of a proper HTML page.

Things start with the Document Type Declaration (aka doctype ), a way to tell the browser this is an HTML page, and which version of HTML we are using.

Modern HTML uses this doctype:

Then we have the html element, which has an opening and closing tag:

Most tags come in pairs with an opening tag and a closing tag. The closing tag is written the same as the opening tag, but with a / :

There are a few self-closing tags, which means they don't need a separate closing tag as they don't contain anything in them .

The html starting tag is used at the beginning of the document, right after the document type declaration.

The html ending tag is the last thing present in an HTML document.

Inside the html element we have 2 elements: head and body :

Inside head we will have tags that are essential to creating a web page, like the title, the metadata, and internal or external CSS and JavaScript. Mostly things that do not directly appear on the page, but only help the browser (or bots like the Google search bot) display it properly.

Inside body we will have the content of the page. The visible stuff .

Tags vs elements

I mentioned tags and elements. What's the difference?

Elements have a starting tag and a closing tag. In this example, we use the p starting and closing tags to create a p element:

So, an element constitutes the whole package :

• starting tag
• text content (and possibly other elements)
• closing tag

If an element has doesn't have a closing tag, it is only written with the starting tag, and it cannot contain any text content.

That said, I might use the tag or element term in the book meaning the same thing, except if I explicitly mention starting tag or ending tag.

The starting tag of an element can have special snippets of information we can attach, called attributes .

Attributes have the key="value" syntax:

You can also use single quotes, but using double quotes in HTML is a nice convention.

We can have many of them:

and some attributes are boolean, meaning you only need the key:

The class and id attributes are two of the most common you will find used.

They have a special meaning, and they are useful both in CSS and JavaScript.

The difference between the two is that an id is unique in the context of a web page; it cannot be duplicated.

Classes, on the other hand, can appear multiple times on multiple elements.

Plus, an id is just one value. class can hold multiple values, separated by a space:

It's common to use the dash - to separate words in a class value, but it's just a convention.

Those are just two of the possible attributes you can have. Some attributes are only used for one tag. They are highly specialized.

Other attributes can be used in a more general way. You just saw id and class , but we have other ones too, like style which can be used to insert inline CSS rules on an element.

Case insensitive

HTML is case insensitive. Tags can be written in all caps, or lowercase. In the early days, caps were the norm. Today lowercase is the norm. It is a convention.

You usually write like this:

not like this:

White space

Pretty important. In HTML, even if you add multiple white spaces into a line, it's collapsed by the browser's CSS engine.

For example the rendering of this paragraph:

is the same as this:

and the same as this:

Using the white-space CSS property you can change how things behave. You can find more information on how CSS processes white space in the CSS Spec

I typically favor

Nested tags should be indented with 2 or 4 characters, depending on your preference:

Note: this "white space is not relevant" feature means that if you want to add additional space, it can make you pretty mad. I suggest you use CSS to make more space when needed.

Note: in special cases, you can use the &nbsp; HTML entity (an acronym that means non-breaking space ) - more on HTML entities later on. I think this should not be abused. CSS is always preferred to alter the visual presentation.

THE DOCUMENT HEADING

The head tag contains special tags that define the document properties.

It's always written before the body tag, right after the opening html tag:

We never use attributes on this tag. And we don't write content in it.

It's just a container for other tags. Inside it we can have a wide variety of tags, depending on what you need to do:

The title tag

The title tag determines the page title. The title is displayed in the browser, and it's especially important as it's one of the key factors for Search Engine Optimization (SEO).

The script tag

This tag is used to add JavaScript into the page.

You can include it inline, using an opening tag, the JavaScript code and then the closing tag:

Or you can load an external JavaScript file by using the src attribute:

The type attribute by default is set to text/javascript , so it's completely optional.

There is something pretty important to know about this tag.

Sometimes this tag is used at the bottom of the page, just before the closing </body> tag. Why? For performance reasons.

Loading scripts by default blocks the rendering of the page until the script is parsed and loaded.

By putting it at the bottom of the page, the script is loaded and executed after the whole page is already parsed and loaded, giving a better experience to the user over keeping it in the head tag.

My opinion is that this is now bad practice. Let script live in the head tag.

In modern JavaScript we have an alternative this is more performant than keeping the script at the bottom of the page -- the defer attribute. This is an example that loads a file.js file, relative to the current URL:

This is the scenario that triggers the faster path to a fast-loading page, and fast-loading JavaScript.

Note: the async attribute is similar, but in my opinion a worse option than defer . I describe why, in more detail, on page https://flaviocopes.com/javascript-async-defer/

The noscript tag

This tag is used to detect when scripts are disabled in the browser.

Note: users can choose to disable JavaScript scripts in the browser settings. Or the browser might not support them by default.

It is used differently depending on whether it's put in the document head or in the document body.

We're talking about the document head now, so let's first introduce this usage.

In this case, the noscript tag can only contain other tags:

to alter the resources served by the page, or the meta information, if scripts are disabled.

In this example I set an element with the no-script-alert class to display if scripts are disabled, as it was display: none by default:

Let's solve the other case: if put in the body, it can contain content, like paragraphs and other tags, which are rendered in the UI.

The link tag

The link tag is used to set relationships between a document and other resources.

It's mainly used to link an external CSS file to be loaded.

This element has no closing tag.

The media attribute allows the loading of different stylesheets depending on the device capabilities:

We can also link to resources other than stylesheets.

For example we can associate an RSS feed using

Or we can associate a favicon using:

This tag was also used for multi-page content, to indicate the previous and next page using rel="prev" and rel="next" . Mostly for Google. As of 2019, Google announced it does not use this tag any more because it can find the correct page structure without it.

The style tag

This tag can be used to add styles into the document, rather than loading an external stylesheet.

As with the link tag, you can use the media attribute to use that CSS only on the specified medium:

The base tag

This tag is used to set a base URL for all relative URLs contained in the page.

The meta tag

Meta tags perform a variety of tasks and they are very, very important.

Especially for SEO.

meta elements only have the starting tag.

The most basic one is the description meta tag:

This might be used by Google to generate the page description in its result pages, if it finds it better describes the page than the on-page content (don't ask me how).

The charset meta tag is used to set the page character encoding. utf-8 in most cases:

The robots meta tag instructs the Search Engine bots whether to index a page or not:

Or if they should follow links or not:

You can set nofollow on individual links, too. This is how you can set nofollow globally.

You can combine them:

The default behavior is index, follow .

You can use other properties, including nosnippet , noarchive , noimageindex and more.

You can also just tell Google instead of targeting all search engines:

And other search engines might have their own meta tag, too.

Speaking of which, we can tell Google to disable some features. This prevents the translate functionality in the search engine results:

The viewport meta tag is used to tell the browser to set the page width based on the device width.

See more about this tag .

Another rather popular meta tag is the http-equiv="refresh" one. This line tells the browser to wait 3 seconds, then redirect to that other page:

Using 0 instead of 3 will redirect as soon as possible.

This is not a full reference; Other less-used meta tags exist.

After this document heading introduction, we can start diving into the document body.

THE DOCUMENT BODY

After the closing head tag, we can only have one thing in an HTML document: the body element.

Just like the head and html tags, we can only have one body tag in one page.

Inside the body tag we have all the tags that define the content of the page.

Technically, the start and ending tags are optional. But I consider it a good practice to add them. Just for clarity.

In the next chapters we'll define the variety of tags you can use inside the page body.

But before, we must introduce a difference between block elements and inline elements.

Block elements vs inline elements

Visual elements, the ones defined in the page body, can be generally classified in 2 categories:

• block elements ( p , div , heading elements, lists and list items, ...)
• inline elements ( a , span , img , ...)

What is the difference?

Block elements, when positioned in the page, do not allow other elements next to them. To the left, or to the right.

Inline elements instead can sit next to other inline elements.

The difference also lies in the visual properties we can edit using CSS. We can alter the width/height, margin, padding and border of block elements. We can't do that for inline elements.

Note that using CSS we can change the default for each element, setting a p tag to be inline, for example, or a span to be a block element.

Another difference is that inline elements can be contained in block elements. The reverse is not true.

Some block elements can contain other block elements, but it depends. The p tag for example does not allow such option.

TAGS THAT INTERACT WITH TEXT

This tag defines a paragraph of text.

It's a block element.

Inside it, we can add any inline element we like, like span or a .

We cannot add block elements.

We cannot nest a p element into another one.

By default browsers style a paragraph with a margin on top and at the bottom. 16px in Chrome, but the exact value might vary between browsers.

This causes two consecutive paragraphs to be spaced, replicating what we think of a "paragraph" in printed text.

The span tag

This is an inline tag that can be used to create a section in a paragraph that can be targeted using CSS:

This tag represents a line break. It's an inline element, and does not need a closing tag.

We use it to create a new line inside a p tag, without creating a new paragraph.

And compared to creating a new paragraph, it does not add additional spacing.

The heading tags

HTML provides us 6 heading tags. From most important to least important, we have h1 , h2 , h3 , h4 , h5 , h6 .

Typically a page will have one h1 element, which is the page title. Then you might have one or more h2 elements depending on the page content.

Headings, especially the heading organization, are also essential for SEO, and search engines use them in various ways.

The browser by default will render the h1 tag bigger, and will make the elements size smaller as the number near h increases:

All headings are block elements. They cannot contain other elements, just text.

The strong tag

This tag is used to mark the text inside it as strong . This is pretty important, it's not a visual hint, but a semantic hint. Depending on the medium used, its interpretation will vary.

Browsers by default make the text in this tag bold .

This tag is used to mark the text inside it as emphasized . Like with strong , it's not a visual hint but a semantic hint.

Browsers by default make the text in this italic .

The blockquote HTML tag is useful to insert citations in the text.

Browsers by default apply a margin to the blockquote element. Chrome applies a 40px left and right margin, and a 10px top and bottom margin.

The q HTML tag is used for inline quotes.

Horizontal line

Not really based on text, but the hr tag is often used inside a page. It means horizontal rule , and it adds a horizontal line in the page.

Useful to separate sections in the page.

Code blocks

The code tag is especially useful to show code, because browsers give it a monospaced font.

That's typically the only thing that browsers do. This is the CSS applied by Chrome:

This tag is typically wrapped in a pre tag, because the code element ignores whitespace and line breaks. Like the p tag.

Chrome gives pre this default styling:

which prevents white space collapsing and makes it a block element.

We have 3 types of lists:

• unordered lists
• ordered lists
• definition lists

Unordered lists are created using the ul tag. Each item in the list is created with the li tag:

Ordered lists are similar, just made with the ol tag:

The difference between the two is that ordered lists have a number before each item:

Definition lists are a bit different. You have a term, and its definition:

This is how browsers typically render them:

I must say you rarely see them in the wild, for sure not much as ul and ol , but sometimes they might be useful.

Other text tags

There is a number of tags with presentational purposes:

• the mark tag
• the ins tag
• the del tag
• the sup tag
• the sub tag
• the small tag

This is an example of the visual rendering of them which is applied by default by browsers:

You might wonder, how is b different than strong ? And how i is different than em ?

The difference lies in the semantic meaning. While b and i are a direct hint at the browser to make a piece of text bold or italic, strong and em give the text a special meaning, and it's up to the browser to give the styling. Which happens to be exactly the same as b and i , by default. Although you can change that using CSS.

There are a number of other, less used tags related to text. I just mentioned the ones that I see used the most.

Links are defined using the a tag. The link destination is set via its href attribute.

Between the starting and closing tag we have the link text.

The above example is an absolute URL. Links also work with relative URLs:

In this case, when clicking the link the user is moved to the /test URL on the current origin.

Be careful with the / character. If omitted, instead of starting from the origin, the browser will just add the test string to the current URL.

Example, I'm on the page https://flaviocopes.com/axios/ and I have these links:

• /test once clicked brings me to https://flaviocopes.com/test
• test once clicked brings me to https://flaviocopes.com/axios/test

Link tags can include other things inside them, not just text. For example, images:

or any other elements, except other <a> tags.

If you want to open the link in a new tab, you can use the target attribute:

CONTAINER TAGS AND PAGE STRUCTURE HTML

Container tags.

HTML provides a set of container tags. Those tags can contain an unspecified set of other tags.

and it can be confusing to understand the difference between them.

Let's see when to use each one of them.

The article tag identifies a thing that can be independent from other things in a page.

For example a list of blog posts in the homepage.

Or a list of links.

We're not limited to lists: an article can be the main element in a page.

Inside an article tag we should have a title ( h1 - h6 ) and

Represents a section of a document. Each section has a heading tag ( h1 - h6 ), then the section body .

It's useful to break a long article into different sections .

Shouldn't be used as a generic container element. div is made for this.

div is the generic container element:

You often add a class or id attribute to this element, to allow it to be styled using CSS.

We use div in any place where we need a container but the existing tags are not suited.

Tags related to page

This tag is used to create the markup that defines the page navigation. Into this we typically add an ul or ol list:

The aside tag is used to add a piece of content that is related to the main content.

A box where to add a quote, for example. Or a sidebar.

Using aside is a signal that the things it contains are not part of the regular flow of the section it lives into.

The header tag represents a part of the page that is the introduction. It can for example contain one or more heading tag ( h1 - h6 ), the tagline for the article, an image.

The main tag represents the main part of a page:

The footer tag is used to determine the footer of an article, or the footer of the page:

Forms are the way you can interact with a page, or an app, built with Web technologies.

You have a set of controls, and when you submit the form, either with a click to a "submit" button or programmatically, the browser will send the data to the server.

By default this data sending causes the page to reload after the data is sent, but using JavaScript you can alter this behavior (not going to explain how in this book).

A form is created using the form tag:

By default forms are submitted using the GET HTTP method. Which has its drawbacks, and usually you want to use POST.

You can set the form to use POST when submitted by using the method attribute:

The form is submitted, either using GET or POST, to the same URL where it resides.

So if the form is in the https://flaviocopes.com/contacts page, pressing the "submit" button will make a request to that same URL.

Which might result in nothing happening.

You need something server-side to handle the request, and typically you "listen" for those form submit events on a dedicated URL.

You can specify the URL via the action parameter:

This will cause the browser to submit the form data using POST to the /new-contact URL on the same origin.

If the origin (protocol + domain + port) is https://flaviocopes.com (port 80 is the default), this means the form data will be sent to https://flaviocopes.com/new-contact .

I talked about data. Which data?

Data is provided by users via the set of controls that are available on the Web platform:

• input boxes (single line text)
• text areas (multiline text)
• select boxes (choose one option from a drop-down menu)
• radio buttons (choose one option from a list always visible)
• checkboxes (choose zero, one or more option)
• file uploads

Let's introduce each one of them in the following form fields overview.

The input tag

The input field is one of the most widely used form elements. It's also a very versatile element, and it can completely change behavior based on the type attribute.

The default behavior is to be a single-line text input control:

Equivalent to using:

As with all the other fields that follow, you need to give the field a name in order for its content to be sent to the server when the form is submitted:

The placeholder attribute is used to have some text showing up, in light gray, when the field is empty. Useful to add a hint to the user for what to type in:

Using type="email" will validate client-side (in the browser) an email for correctness (semantic correctness, not ensuring the email address is existing) before submitting.

Using type="password" will make every key entered appear as an asterisk (*) or dot, useful for fields that host a password.

You can have an input element accept only numbers:

You can specify a minimum and maximum value accepted:

The step attribute helps identify the steps between different values. For example this accepts a value between 10 and 50, at steps of 5:

Hidden field

Fields can be hidden from the user. They will still be sent to the server upon the form submit:

This is commonly used to store values like a CSRF token, used for security and user identification, or even to detect robots sending spam, using special techniques.

It can also just be used to identify a form and its action.

Setting a default value

All those fields accept a predefined value. If the user does not change it, this will be the value sent to the server:

If you set a placeholder, that value will appear if the user clears the input field value:

Form submit

The type="submit" field is a button that, once pressed by the user, submits the form:

The value attribute sets the text on the button, which if missing shows the "Submit" text:

Form validation

Browsers provide client-side validation functionality to forms.

You can set fields as required, ensuring they are filled, and enforce a specific format for the input of each field.

Let's see both options.

Set fields as required

The required attribute helps you with validation. If the field is not set, client-side validation fails and the browser does not submit the form:

Enforce a specific format

I described the type="email" field above. It automatically validates the email address according to a format set in the specification.

In the type="number" field, I mentioned the min and max attribute to limit values entered to an interval.

You can do more.

You can enforce a specific format on any field.

The pattern attribute gives you the ability to set a regular expression to validate the value against.

I recommend reading my Regular Expressions Guide at flaviocopes.com/javascript-regular-expressions/ .

pattern=" https://.* "

Other fields

File uploads.

You can load files from your local computer and send them to the server using a type="file" input element:

You can attach multiple files:

You can specify one or more file types allowed using the accept attribute. This accepts images:

You can use a specific MIME type, like application/json or set a file extension like .pdf . Or set multiple file extensions, like this:

The type="button" input fields can be used to add additional buttons to the form, that are not submit buttons:

They are used to programmatically do something, using JavaScript.

There is a special field rendered as a button, whose special action is to clear the entire form and bring back the state of the fields to the initial one:

Radio buttons

Radio buttons are used to create a set of choices, of which one is pressed and all the others are disabled.

The name comes from old car radios that had this kind of interface.

You define a set of type="radio" inputs, all with the same name attribute, and different value attribute:

Once the form is submitted, the color data property will have one single value.

There's always one element checked. The first item is the one checked by default.

You can set the value that's pre-selected using the checked attribute. You can use it only once per radio inputs group.

Similar to radio boxes, but they allow multiple values to be chosen, or none at all.

You define a set of type="checkbox" inputs, all with the same name attribute, and different value attribute:

All those checkboxes will be unchecked by default. Use the checked attribute to enable them on page load.

Since this input field allows multiple values, upon form submit the value(s) will be sent to the server as an array.

Date and time

We have a few input types to accept date values.

The type="date" input field allows the user to enter a date, and shows a date picker if needed:

The type="time" input field allows the user to enter a time, and shows a time picker if needed:

The type="month" input field allows the user to enter a month and a year:

The type="week" input field allows the user to enter a week and a year:

All those fields allow to limit the range and the step between each value. I recommend checking MDN for the little details on their usage.

The type="datetime-local" field lets you choose a date and a time.

Here is a page to test them all: https://codepen.io/flaviocopes/pen/ZdWQPm

Color picker

You can let users pick a color using the type="color" element:

You set a default value using the value attribute:

The browser will take care of showing a color picker to the user.

This input element shows a slider element. People can use it to move from a starting value to an ending value:

You can provide an optional step:

The type="tel" input field is used to enter a phone number:

The main selling point for using tel over text is on mobile, where the device can choose to show a numeric keyboard.

Specify a pattern attribute for additional validation:

The type="url" field is used to enter a URL.

You can validate it using the pattern attribute:

The textarea tag

The textarea element allows users to enter multi-line text. Compared to input , it requires an ending tag:

You can set the dimensions using CSS, but also using the rows and cols attributes:

As with the other form tags, the name attribute determines the name in the data sent to the server:

The select tag

This tag is used to create a drop-down menu.

The user can choose one of the options available.

Each option is created using the option tag. You add a name to the select, and a value to each option:

You can set an option disabled:

You can have one empty option:

Options can be grouped using the optgroup tag. Each option group has a label attribute:

In the early days of the web tables were a very important part of building layouts.

Later on they were replaced by CSS and its layout capabilities, and today we have powerful tools like CSS Flexbox and CSS Grid to build layouts. Tables are now used just for, guess what, building tables!

The table tag

You define a table using the table tag:

Inside the table we'll define the data. We reason in terms of rows, which means we add rows into a table (not columns). We'll define columns inside a row.

A row is added using the tr tag, and that's the only thing we can add into a table element:

This is a table with 3 rows.

The first row can take the role of the header.

Column headers

The table header contains the name of a column, typically in a bold font.

Think about an Excel / Google Sheets document. The top A-B-C-D... header.

We define the header using the th tag:

The table content

The content of the table is defined using td tags, inside the other tr elements:

This is how browsers render it, if you don't add any CSS styling:

Adding this CSS:

makes the table look more like a proper table:

Span columns and rows

A row can decide to span over 2 or more columns, using the colspan attribute:

Or it can span over 2 or more rows, using the rowspan attribute:

Row headings

Before I explained how you can have column headings, using the th tag inside the first tr tag of the table.

You can add a th tag as the first element inside a tr that's not the first tr of the table, to have row headings:

More tags to organize the table

You can add 3 more tags into a table, to have it more organized.

This is best when using big tables. And to properly define a header and a footer, too.

Those tags are

They wrap the tr tags to clearly define the different sections of the table. Here's an example:

Table caption

A table should have a caption tag that describes its content. That tag should be put immediately after the opening table tag:

MULTIMEDIA TAGS: AUDIO AND VIDEO

In this section I want to show you the audio and video tags.

The audio tag

This tag allows you to embed audio content in your HTML pages.

This element can stream audio, maybe using a microphone via getUserMedia() , or it can play an audio source which you reference using the src attribute:

By default the browser does not show any controls for this element. Which means the audio will play only if set to autoplay (more on this later) and the user can't see how to stop it or control the volume or move through the track.

To show the built-in controls, you can add the controls attribute:

Controls can have a custom skin.

You can specify the MIME type of the audio file using the type attribute. If not set, the browser will try to automatically determine it:

An audio file by default does not play automatically. Add the autoplay attribute to play the audio automatically:

Note: mobile browsers don't allow autoplay

The loop attribute restarts the audio playing at 0:00 if set; otherwise, if not present, the audio stops at the end of the file:

You can also play an audio file muted using the muted attribute (not really sure what's the usefulness of this):

Using JavaScript you can listen for various events happening on an audio element, the most basic of which are:

• play when the file starts playing
• pause when the audio playing was paused
• playing when the audio is resumed from a pause
• ended when the end of the audio file was reached

The video tag

This tag allows you to embed video content in your HTML pages.

This element can stream video, using a webcam via getUserMedia() or WebRTC , or it can play a video source which you reference using the src attribute:

By default the browser does not show any controls for this element, just the video.

Which means the video will play only if set to autoplay (more on this later) and the user can't see how to stop it, pause it, control the volume or skip to a specific position in the video.

You can specify the MIME type of the video file using the type attribute. If not set, the browser will try to automatically determine it:

A video file by default does not play automatically. Add the autoplay attribute to play the video automatically:

Some browsers also require the muted attribute to autoplay. The video autoplays only if muted:

The loop attribute restarts the video playing at 0:00 if set; otherwise, if not present, the video stops at the end of the file:

You can set an image to be the poster image:

If not present, the browser will display the first frame of the video as soon as it's available.

You can set the width and height attributes to set the space that the element will take so that the browser can account for it and it does not change the layout when it's finally loaded. It takes a numeric value, expressed in pixels.

Using JavaScript you can listen for various events happening on an video element, the most basic of which are:

• pause when the video was paused
• playing when the video is resumed from a pause
• ended when the end of the video file was reached

The iframe tag allows us to embed content coming from other origins (other sites) into our web page.

Technically, an iframe creates a new nested browsing context. This means that anything in the iframe does not interfere with the parent page, and vice versa. JavaScript and CSS do not "leak" to/from iframes.

Many sites use iframes to perform various things. You might be familiar with Codepen, Glitch or other sites that allow you to code in one part of the page, and you see the result in a box. That's an iframe.

You create one this way:

You can load an absolute URL, too:

You can set a set of width and height parameters (or set them using CSS) otherwise the iframe will use the defaults, a 300x150 pixels box:

The srcdoc attribute lets you specify some inline HTML to show. It's an alternative to src , but recent and not supported in Edge 18 and lower, and in IE:

The sandbox attribute allows us to limit the operations allowed in the iframes.

If we omit it, everything is allowed:

If we set it to "", nothing is allowed:

We can select what to allow by adding options in the sandbox attribute. You can allow multiple ones by adding a space in between. Here's an incomplete list of the options you can use:

• allow-forms : allow to submit forms
• allow-modals allow to open modals windows, including calling alert() in JavaScript
• allow-orientation-lock allow to lock the screen orientation
• allow-popups allow popups, using window.open() and target="_blank" links
• allow-same-origin treat the resource being loaded as same origin
• allow-scripts lets the loaded iframe run scripts (but not create popups).
• allow-top-navigation gives access to the iframe to the top level browsing context

Currently experimental and only supported by Chromium-based browsers, this is the future of resource sharing between the parent window and the iframe.

It's similar to the sandbox attribute, but lets us allow specific features, including:

• accelerometer gives access to the Sensors API Accelerometer interface
• ambient-light-sensor gives access to the Sensors API AmbientLightSensor interface
• autoplay allows to autoplay video and audio files
• camera allows to access the camera from the getUserMedia API
• display-capture allows to access the screen content using the getDisplayMedia API
• fullscreen allows to access fullscreen mode
• geolocation allows to access the Geolocation API
• gyroscope gives access to the Sensors API Gyroscope interface
• magnetometer gives access to the Sensors API Magnetometer interface
• microphone gives access to the device microphone using the getUserMedia API
• midi allows access to the Web MIDI API
• payment gives access to the Payment Request API
• speaker allows access to playing audio through the device speakers
• usb gives access to the WebUSB API.
• vibrate gives access to the Vibration API
• vr gives access to the WebVR API

When loading an iframe, the browser sends it important information about who is loading it in the Referer header (notice the single r , a typo we must live with).

The misspelling of referrer originated in the original proposal by computer scientist Phillip Hallam-Baker to incorporate the field into the HTTP specification. The misspelling was set in stone by the time of its incorporation into the Request for Comments standards document RFC 1945

The referrerpolicy attribute lets us set the referrer to send to the iframe when loading it. The referrer is an HTTP header that lets the page know who is loading it. These are the allowed values:

• no-referrer-when-downgrade it's the default, and does not send the referrer when the current page is loaded over HTTPS and the iframe loads on the HTTP protocol
• no-referrer does not send the referrer header
• origin the referrer is sent, and only contains the origin (port, protocol, domain), not the origin + path which is the default
• origin-when-cross-origin when loading from the same origin (port, protocol, domain) in the iframe, the referrer is sent in its complete form (origin + path). Otherwise only the origin is sent
• same-origin the referrer is sent only when loading from the same origin (port, protocol, domain) in the iframe
• strict-origin sends the origin as the referrer if the current page is loaded over HTTPS and the iframe also loads on the HTTPS protocol. Sends nothing if the iframe is loaded over HTTP
• strict-origin-when-cross-origin sends the origin + path as the referrer when working on the same origin. Sends the origin as the referrer if the current page is loaded over HTTPS and the iframe also loads on the HTTPS protocol. Sends nothing if the iframe is loaded over HTTP
• unsafe-url : sends the origin + path as the referrer even when loading resources from HTTP and the current page is loaded over HTTPS

Images can be displayed using the img tag.

This tag accepts a src attribute, which we use to set the image source:

We can use a wide set of images. The most common ones are PNG, JPEG, GIF, SVG and more recently WebP.

The HTML standard requires an alt attribute to be present, to describe the image. This is used by screen readers and also by search engine bots:

You can set the width and height attributes to set the space that the element will take, so that the browser can account for it and it does not change the layout when it's fully loaded. It takes a numeric value, expressed in pixels.

The figure tag

The figure tag is often used along with the img tag.

figure is a semantic tag often used when you want to display an image with a caption. You use it like this:

The figcaption tag wraps the caption text.

Responsive images using srcset

The srcset attribute allows you to set responsive images that the browser can use depending on the pixel density or window width, according to your preferences. This way, it can only download the resources it needs to render the page, without downloading a bigger image if it's on a mobile device, for example.

Here's an example, where we give 4 additional images for 4 different screen sizes:

In the srcset we use the w measure to indicate the window width.

Since we do so, we also need to use the sizes attribute:

In this example the (max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px string in the sizes attribute describes the size of the image in relation to the viewport, with multiple conditions separated by a semicolon.

The media condition max-width: 500px sets the size of the image in correlation to the viewport width. In short, if the window size is < 500px, it renders the image at 100% of the window size.

If the window size is bigger but < 900px , it renders the image at 50% of the window size.

And if even bigger, it renders the image at 800px.

The vw unit of measure can be new to you, and in short we can say that 1 vw is 1% of the window width, so 100vw is 100% of the window width.

A useful website to generate the srcset and progressively smaller images is https://responsivebreakpoints.com/ .

The picture tag

HTML also gives us the picture tag, which does a very similar job to srcset , and the differences are very subtle.

You use picture when instead of just serving a smaller version of a file, you completely want to change it. Or serve a different image format.

The best use case I found is when serving a WebP image, which is a format still not widely supported. In the picture tag you specify a list of images, and they will be used in order, so in the next example, browsers that support WebP will use the first image, and fallback to JPG if not:

The source tag defines one (or more) formats for the images. The img tag is the fallback in case the browser is very old and does not support the picture tag.

In the source tag inside picture you can add a media attribute to set media queries.

The example that follows kind of works like the above example with srcset :

But that's not its use case, because as you can see it's much more verbose.

The picture tag is recent but is now supported by all the major browsers except Opera Mini and IE (all versions).

ACCESSIBILITY

It's important we design our HTML with accessibility in mind.

Having accessible HTML means that people with disabilities can use the Web. There are totally blind or visually impaired users, people with hearing loss issues and a multitude of other different disabilities.

Unfortunately this topic does not take the importance it needs, and it doesn't seem as cool as others.

What if a person can't see your page, but still wants to consume its content? First, how do they do that? They can't use the mouse, they use something called a screen reader . You don't have to imagine that. You can try one now: Google provides the free ChromeVox Chrome Extension . Accessibility must also take care of allowing tools to easily select elements or navigate through the pages.

Web pages and Web apps are not always built with accessibility as one of their first goals, and maybe version 1 is released not accessible but it's possible to make a web page accessible after the fact. Sooner is better, but it's never too late.

It's important and in my country, websites built by the government or other public organizations must be accessible.

What does this mean to make an HTML accessible? Let me illustrate the main things you need to think about.

Note: there are several other things to take care about, which might go in the CSS topic, like colors, contrast and fonts. Or how to make SVG images accessible . I don't talk about them here.

Use semantic HTML

Semantic HTML is very important and it's one of the main things you need to take care of. Let me illustrate a few common scenarios.

It's important to use the correct structure for heading tags. The most important is h1 , and you use higher numbers for less important ones, but all the same-level headings should have the same meaning (think about it like a tree structure)

Use strong and em instead of b and i . Visually they look the same, but the first 2 have more meaning associated with them. b and i are more visual elements.

Lists are important. A screen reader can detect a list and provide an overview, then let the user choose to get into the list or not.

A table should have a caption tag that describes its content:

Use alt attributes for images

All images must have an alt tag describing the image content. It's not just a good practice, it's required by the HTML standard and your HTML without it is not validated.

It's also good for search engines, if that's an incentive for you to add it.

Use the role attribute

The role attribute lets you assign specific roles to the various elements in your page.

You can assign lots of different roles: complementary, list, listitem, main, navigation, region, tab, alert, application, article, banner, button, cell, checkbox, contentinfo, dialog, document, feed, figure, form, grid, gridcell, heading, img, listbox, row, rowgroup, search, switch, table, tabpanel, textbox, timer.

It's a lot and for the full reference of each of them I give you this MDN link . But you don't need to assign a role to every element in the page. Screen readers can infer from the HTML tag in most cases. For example you don't need to add a role tag to semantic tags like nav , button , form .

Let's take the nav tag example. You can use it to define the page navigation like this:

If you were forced to use a div tag instead of nav , you'd use the navigation role:

So here you got a practical example: role is used to assign a meaningful value when the tag does not convey the meaning already.

Use the tabindex attribute

The tabindex attribute allows you to change the order of how pressing the Tab key selects "selectable" elements. By defaults only links and form elements are "selectable" by navigation using the Tab key (and you don't need to set tabindex on them).

Adding tabindex="0" makes an element selectable:

Using tabindex="-1" instead removes an element from this tab-based navigation, and it can be pretty useful.

Use the aria attributes

ARIA is an acronym that means Accessible Rich Internet Applications and defines semantics that can be applied to elements.

This attribute is used to add a string to describe an element.

I use this attribute on my blog sidebar, where I have an input box for search without an explicit label, as it has a placeholder attribute.

aria-labelledby

This attribute sets a correlation between the current element and the one that labels it.

If you know how an input element can be associated to a label element, that's similar.

We pass the item id that describes the current element.

aria-describedby

This attribute lets us associate an element with another element that serves as description.

Use aria-hidden to hide content

I like a minimalistic design in my sites. My blog for example is mostly just content, with some links in the sidebar. But some things in the sidebar are just visual elements that don't add up to the experience of a person that can't see the page. Like my logo picture, or the dark/bright theme selector.

Adding the aria-hidden="true" attribute will tell screen readers to ignore that element.

Where to learn more

This is just an introduction to the topic. To learn more, I recommend these resources:

• https://www.w3.org/TR/WCAG20/
• https://webaim.org
• https://developers.google.com/web/fundamentals/accessibility/

You reached the end of the HTML Handbook.

Click here to get a PDF / ePub / Mobi version of this book to read offline !

Read more posts .

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

HTML Projects for Beginners: 10 Easy Starter Ideas

Updated: September 24, 2024

Published: December 11, 2023

Are you eager to level up your HTML skills? Embarking on HTML projects for beginners is an excellent way to start. As someone who once stood where you are now, I can confidently say that the journey from HTML novice to proficiency is both thrilling and immensely rewarding. It's not just about learning a language; it’s about creating and bringing your ideas to life. 

In my early days of exploring web development, HTML was the cornerstone that laid the foundation for my career. Now, with several years of experience in web development and a passion for being a resource for beginners, I understand the importance of starting with practical, easy-to-follow projects.

In this blog, I'm excited to share with you a curated list of HTML projects that are perfect for beginners. These projects are designed not only to increase your understanding of HTML but also to spark your creativity and enthusiasm for web development.

Table of Contents

• Understanding the Basics
• Project 1: Personal Portfolio Page
• Project 2: Simple Blog Layout
• Project 3: Landing Page
• Project 4: eCommerce Page
• Project 5: Recipe Page
• Project 6: Technical Documentation
• Project 7: Small Business Homepage
• Project 8: Simple Survey Form
• Project 9: Event Invitation Page
• Project 10: Parallax Website

The Road Ahead in Web Development

Free Guide: 25 HTML & CSS Coding Hacks

Tangible tips and coding templates from experts to help you code better and faster.

• Coding to Convention
• Being Browser-Friendly
• Minimizing Bugs
• Optimizing Performance

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.

Understanding the Basics: What is HTML?

Before I dive into the exciting world of HTML projects, I want to share why grasping the basics of HTML is crucial. HTML , which stands for HyperText Markup Language, is the foundational building block of the web. It’s not a programming language, but a markup language that I use to define the structure and layout of a web page through various elements and tags.

To me, HTML is like creating a framework for web content, similar to how an architect designs a building's blueprint. You would use tags to mark up text, insert images, create links, and lay out web pages in a format that browsers can understand and display. These tags , the basic units of HTML, help differentiate between headings, paragraphs, lists, and other content types, giving the web its versatile and user-friendly nature.

Every web developer starts somewhere, and for many, including myself, that starting point is HTML. It's a language that empowers me to create, experiment, and develop various digital experiences . So, as we embark on these beginner projects, remember that you're not just learning a new skill. You are stepping into a world full of endless possibilities and opportunities.

10 HTML Projects for Beginners: Your Journey Starts Here

As a web developer passionate about teaching, I‘m thrilled to guide you through this series. This section is crafted to progressively enhance your skills, offering a blend of creativity and learning. I’ve seen firsthand how these projects can transform beginners into confident creators, and I‘m excited to see the unique and innovative web experiences you’ll bring to life. Let's embark on this adventure together, turning code into compelling digital stories!

Project 1: Creating a Personal Portfolio Page

One of the best ways to start your HTML journey is by creating a personal portfolio page. This project allows you to introduce yourself to the world of web development while learning the basics of HTML. It’s not just about coding; it’s about telling your story through the web.

The objective here is to craft a web page that effectively portrays your personal and professional persona. This includes detailing your biography, showcasing your skills, and possibly even including a portfolio of work or projects you've completed. This page will be a cornerstone in establishing your online presence and can evolve as you progress in your career.

See the Pen HTML Project 1 by HubSpot ( @hubspot ) on CodePen .

• Showcase and Evolve : I'm selecting projects that best represent my abilities, and I plan to continually update my portfolio as I develop new skills.
• Simplicity and Clarity : My focus is on creating a clear, user-friendly layout that makes navigating my story and achievements effortless for visitors.

Project 2: Building a Simple Blog Layout

After creating a personal portfolio, the next step in your HTML journey is to build a simple blog layout. This project will introduce you to more complex structures and how to organize content effectively on a webpage.

The goal of this project is to create a basic blog layout that includes a header, a main content area for blog posts, and a footer. This layout serves as the foundation for any blog, providing a clear structure for presenting articles or posts.

See the Pen HTML Project 2 by HubSpot ( @hubspot ) on CodePen .

• Consistency is Key : In designing the blog, I'm focusing on maintaining a consistent style throughout the page to ensure a cohesive look.
• Content First : My layout will prioritize readability and easy navigation, making the content the star of the show.

Project 3: Designing a Landing Page

For the third project, let's shift gears and focus on creating a landing page. A landing page is a pivotal element in web design, often serving as the first point of contact between a business or individual and their audience. This project will help you learn how to design an effective and visually appealing landing page.

The objective is to create a single-page layout that introduces a product, service, or individual, with a focus on encouraging visitor engagement, such as signing up for a newsletter, downloading a guide, or learning more about a service.

See the Pen HTML Project 3 by HubSpot ( @hubspot ) on CodePen .

• Clear Call to Action : I'm ensuring that my landing page has a clear and compelling call to action (CTA) that stands out and guides visitors towards the desired engagement.
• Visual Appeal and Simplicity : My focus is on combining visual appeal with simplicity, making sure the design is not only attractive but also easy to navigate and understand.

Project 4: Crafting an eCommerce Page

Creating an eCommerce page is an excellent project for web developers looking to dive into the world of online retail. This project focuses on designing a web page that showcases products, includes product descriptions, prices, and a shopping cart.

The aim is to build a user-friendly and visually appealing eCommerce page that displays products effectively, providing customers with essential information and a seamless shopping experience. The page should include product images, descriptions, prices, and add-to-cart buttons.

See the Pen HTML Project 4 by HubSpot ( @hubspot ) on CodePen .

• Clarity and Accessibility : In designing the eCommerce page, my priority is to ensure that information is clear and accessible, making the shopping process straightforward for customers.
• Engaging Product Presentation : I'll focus on presenting each product attractively, with high-quality images and concise, informative descriptions that entice and inform.

Project 5: Developing a Recipe Page

One of the best ways to enhance your HTML and CSS skills is by creating a recipe page. This project is not only about structuring content but also about making it visually appealing. A recipe page is a delightful way to combine your love for cooking with web development, allowing you to share your favorite recipes in a creative and engaging format.

The aim of this project is to design a web page that effectively displays a recipe, making it easy and enjoyable to read. This includes organizing the recipe into clear sections such as ingredients and instructions, and styling the page to make it visually appealing. The recipe page you create can serve as a template for future culinary postings or a personal collection of your favorite recipes.

See the Pen HTML Project 5 by HubSpot ( @hubspot ) on CodePen .

• Clarity and Simplicity : My focus is on presenting the recipe in an organized manner, ensuring that the ingredients and instructions are easy to distinguish and follow.
• Engaging Visuals : I plan to use appealing images and a thoughtful layout, making the page not just informative but also a delight to the eyes.

50 Free Coding Templates

Free code snippet templates for HTML, CSS, and JavaScript -- Plus access to GitHub.

• Navigation Menus & Breadcrumbs Templates
• Button Transition Templates
• CSS Effects Templates

Project 6: Creating a Technical Documentation 

Implementing a responsive navigation menu is a crucial skill in web development, enhancing user experience on various devices. This project focuses on creating a navigation menu that adjusts to different screen sizes, ensuring your website is accessible and user-friendly across all devices.

The goal is to create a navigation menu that adapts to different screen sizes. This includes a traditional horizontal menu for larger screens and a collapsible " hamburger " menu for smaller screens. Understanding responsive design principles and how to apply them using HTML and CSS is key in this project.

See the Pen HTML Project 6 by HubSpot ( @hubspot ) on CodePen .

• Flexibility is Key : I'm focusing on building a navigation menu that's flexible and adapts smoothly across various devices.
• Simplicity in Design : Keeping the design simple and intuitive is crucial, especially for the mobile version, to ensure ease of navigation.

Project 7: Building a Small Business Homepage 

Creating a homepage for a small business is a fantastic project for applying web development skills in a real-world context. This project involves designing a welcoming and informative landing page for a small business, focusing on user engagement and business promotion.

The aim is to create a homepage that effectively represents a small business, providing key information such as services offered, business hours, location, and contact details. The design should be professional, inviting, and aligned with the business's branding.

See the Pen HTML Project 7 by HubSpot ( @hubspot ) on CodePen .

• Clarity and Accessibility : My priority is ensuring that key information is presented clearly and is easily accessible to visitors.
• Brand Consistency : I plan to incorporate design elements that are in line with the business's branding, creating a cohesive and professional online presence.

Project 8: Setting Up a Simple Survey Form

Creating a simple survey form is a valuable project for practicing form handling in HTML and CSS. It's a fundamental skill in web development, essential for gathering user feedback, conducting research, or learning more about your audience.

The objective of this project is to create a user-friendly survey form that collects various types of information from users. The form will include different types of input fields, such as text boxes, radio buttons, checkboxes, and a submit button. The focus is on creating a clear, accessible, and easy-to-use form layout.

See the Pen HTML Project 8 by HubSpot ( @hubspot ) on CodePen .

• Simplicity in Design : I'm aiming for a design that's straightforward and intuitive, ensuring that filling out the form is hassle-free for users.
• Responsive Layout : Ensuring the form is responsive and accessible on different devices is a key consideration in its design.

Project 9: Creating an Event Invitation Page

Designing an event invitation page is a fantastic way to combine creativity with technical skills. This project involves creating a web page that serves as an online invitation for an event, such as a conference, workshop, or party.

The aim is to create a visually appealing and informative event invitation page. This page should include details about the event like the date, time, venue, and a brief description. The focus is on using HTML and CSS to present this information in an engaging and organized manner.

See the Pen HTML Project 9 by HubSpot ( @hubspot ) on CodePen .

• Visual Impact : I'm aiming for a design that captures the essence of the event, making the page immediately engaging.
• Clear Information Hierarchy : Organizing the event details in a clear and logical manner is crucial for effective communication.

Project 10: Building a Parallax Website

Creating a parallax website involves implementing a visual effect where background images move slower than foreground images, creating an illusion of depth and immersion. It's a popular technique for modern, interactive web design.

The objective of this project is to create a website with a parallax scrolling effect. This will be achieved using HTML and CSS, specifically focusing on background image positioning and scroll behavior. The key is to create a visually engaging and dynamic user experience.

See the Pen HTML Project 10 by HubSpot ( @hubspot ) on CodePen .

• Balance in Motion : While implementing parallax effects, I'll ensure the motion is smooth and not overwhelming, to maintain a pleasant user experience.
• Optimized Performance : I'll be mindful of optimizing images and code to ensure the parallax effect doesn't hinder the site's performance.

As we reach the end of our journey through various web development projects, it's clear that the field of web development is constantly evolving, presenting both challenges and opportunities. From creating basic HTML pages to designing dynamic, interactive websites, the skills acquired are just the beginning of a much broader and exciting landscape.

Embracing New Technologies: The future of web development is tied to the ongoing advancements in technologies. Frameworks like React, Angular, and Vue.js are changing how we build interactive user interfaces. Meanwhile, advancements in CSS, like Flexbox and Grid, have revolutionized layout design, making it more efficient and responsive.

Focus on User Experience: As technology progresses, the emphasis on user experience (UX) will become even more crucial. The success of a website increasingly depends on how well it engages users, provides value, and creates meaningful interactions. Web developers must continuously learn about the latest UX trends and apply them to their work.

The Rise of Mobile-First Development: With the increasing use of smartphones for internet access, mobile-first design is no longer an option but a necessity. This approach involves designing websites for smaller screens first and then scaling up to larger screens, ensuring a seamless experience across all devices.

Web Accessibility and Inclusivity: Making the web accessible to everyone, including people with disabilities, is a growing focus. This includes following best practices and guidelines for web accessibility, ensuring that websites are usable by everyone, regardless of their abilities or disabilities.

Performance and Optimization: As users become more demanding about performance, optimizing websites for speed and efficiency will continue to be a priority. This includes minimizing load times, optimizing images and assets, and writing efficient code.

Emerging Trends: The integration of artificial intelligence and machine learning in web development is on the rise, offering new ways to personalize user experiences and automate tasks. Additionally, the development of Progressive Web Apps (PWAs) is blurring the lines between web and mobile apps, offering offline capabilities and improved performance.

Continuous Learning: The only constant in web development is change. Continuous learning and adaptation are key to staying relevant in this field. Whether it's learning new programming languages, frameworks, or design principles, the ability to evolve with the industry is critical for any web developer.

As you continue on your path in web development, remember that each project is a step towards mastering this ever-changing discipline. Embrace the challenges, stay curious, and keep building, for the road ahead in web development is as exciting as it is limitless.

Don't forget to share this post!

Related articles.

5 Easy Ways to Insert Spaces in HTML

How to Add & Change Background Color in HTML

How to Add CSS to HTML: Understanding Inline, Internal & External CSS

How to Make an HTML Text Box [Examples]

HTML Comments: How to Write Them and Why I Think You Should Use Them

The Ultimate Guide to HTML for Beginners: How to Write, Learn & Use It

4 Steps to Add a Clickable Telephone Link in HTML

How to Create an HTML Dropdown Menu [+ Examples]

Onchange Event in HTML: How to Use It [+Examples]

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

{{ activeMenu.name }}

• Python Courses
• JavaScript Courses
• Artificial Intelligence Courses
• Data Science Courses
• React Courses
• Ethical Hacking Courses
• View All Courses

Fresh Articles

• Python Projects
• JavaScript Projects
• Java Projects
• HTML Projects
• C++ Projects
• PHP Projects
• View All Projects

• Python Certifications
• JavaScript Certifications
• Linux Certifications
• Data Science Certifications
• Data Analytics Certifications
• Cybersecurity Certifications
• View All Certifications

• IDEs & Editors
• Web Development
• Frameworks & Libraries
• View All Programming
• View All Development

• App Development
• Game Development
• Courses, Books, & Certifications
• Data Science
• Data Analytics
• Artificial Intelligence (AI)
• Machine Learning (ML)
• View All Data, Analysis, & AI

• Networking & Security
• Cloud, DevOps, & Systems
• Recommendations
• Crypto, Web3, & Blockchain
• User-Submitted Tutorials
• View All Blog Content

• Python Online Compiler
• JavaScript Online Compiler
• HTML & CSS Online Compiler
• Certifications
• Programming
• Development
• Data, Analysis, & AI
• Online Python Compiler
• Online JavaScript Compiler
• Online HTML Compiler

Don't have an account? Sign up

Forgot your password?

Already have an account? Login

Have you read our submission guidelines?

Go back to Sign In

10 Best HTML Projects Beginner to Pro in 2024 [With Code]

If I wanted to help my younger self learn HTML, I'd say build as many HTML projects as possible!

That's exactly why I wrote this article: to share 10 HTML projects to help beginners like you. I've even designed the first 6 as step-by-step tutorials.

I'm also regularly adding new HTML projects, so make sure you bookmark this page and check back for the latest HTML projects to grow your skills. So, if you’re ready, let’s dive in and start building with HTML!

• HTML Projects for Beginners

If you’re really new to the topic of HTML and web development, this is the best place to start!

I built several HTML projects for beginners, each designed to get slightly more challenging as you work through the list.

The idea here is to help you stretch yourself by layering your new HTML skills with each successive project. I started with simple elements. These are easy for HTML beginners to understand. Then I added more complex concepts as I progressed. 

Note that I'm using lots of CSS in these beginner projects to boost your web design skills. You can use my HTML compiler to add CSS. Just enter the code and click "run" to see it in real time in your browser.

If you don’t already know, it’s almost unheard of in 2024 to see an HTML page without some form of CSS styling. Check out any good web development course to see just what I mean!

For these HTML projects, rather than using inline styles, we’ll be getting you familiar with external CSS stylesheets, as this is a far cleaner and more professional approach.

If you get stuck at any point while building these HTML projects, consider checking out an HTML cheat sheet for some quick help.

Let’s dive into these beginner projects!

1. Personal Bio Page

The first project on my list is a personal HTML bio page . 

I really like this beginner's project because it offers a robust introduction to essential web development skills for beginners, focusing on structuring content and basic styling. 

I've also designed this to be a step-by-step tutorial, which is ideal if you're brand new to web development or HTML.

By building this HTML project, you can expect to improve your skills in the following areas:

• Creating Sections: Using HTML5 semantic tags like <header>, <section>, and <footer> to organize content logically.
• Embedding Media: Incorporating elements like images to enhance the visual appeal of the page.
• The CSS Box Model: Understanding and applying CSS properties such as padding, borders, and margins to adjust the layout.

If you’re new to web development, this project is a fantastic starting point, as it lays a solid foundation and prepares you for more complex projects by building upon the skills you develop here.

By tackling this project, you will get hands-on experience with:

• Using <header> and <footer> tags for a structured HTML5 layout.
• Employing <section> tags to group content semantically.
• Embedding a professional image to introduce yourself visually.
• Applying various CSS styles to manage the layout with padding and margins and to enhance the typography by adjusting the font family and colors.

Overall, this is a really engaging way to reinforce foundational web development skills while producing a functional and attractive personal webpage.

For me, this project is not just about learning to code; it's also about creating a valuable tool for your professional portfolio. Remember, I'm including my HTML source code on the project page. That way, you'll be able to copy and paste my work before you customize it with your own information.

Build This HTML Project Here

2. Recipe Page

Moving on to the second HTML project for beginners in our list, let’s build a recipe page . 

I really like this because it’s a solid introduction to new concepts for beginners, including some more HTML5 semantic tags. 

• Working with lists: Creating ordered (numbered) and unordered (bulleted) lists to display ingredients and steps.
• Styling lists: Changing list styles and using images as list items.
• Embedding images: Using images to make content more visually appealing.
• The CSS Box Model: Manipulating padding, borders, and margins to adjust layout.

If you’re still new to web development, this is a great way to level up your foundational skills. It’s also a great idea to tackle this after project #1, as it’s a nice follow-on from the skills you need for the personal bio page. 

By tackling this project, you will get some hands-on experience with:

• Using <header> and <footer> tags for a semantic HTML5 structure.
• Utilizing <section> elements to semantically group content.
• Create a list of ingredients with an unordered list and the <ul> tag.
• Outline the recipe steps with an ordered list and the <ol> tag.
• Embed an image to showcase the final product.
• Apply various CSS styles to adjust the layout with padding and margins, and improve typography by changing the font family and colors. 

I really like this HTML project, as it’s a fun and engaging way to reinforce the skills you picked up in the first project while adding more elements and styles to your growing toolkit. 

It’s also a really practical exercise because displaying lists and images in a user-friendly format is a common task in web development.

3. Animated Business Card

The third project on our list is an excellent way to boost your HTML and CSS skills by developing a solid understanding of CSS positioning with a one-page website. It's an animated business card .

I really like this beginner's project because it offers a robust introduction to essential web development skills for beginners, focusing on structuring content, basic styling, and introductory animations.

As I said, this is a definite step up in difficulty, but the end result is well worth it!

But don’t worry; if you get lost or stuck at any point, check out our CSS cheat sheet for some extra help.

• Creating Sections: Using HTML to organize content logically within a compact business card format.
• Embedding Media: Incorporating elements like images and using CSS for visual effects to enhance the professional appeal of the card.
• CSS Animations: Introducing basic animations to make interactive elements that engage viewers.
• Using CSS for a structured and stylized presentation of your professional details.
• Employing CSS for layout adjustments and animations to make the business card dynamic.

Overall, this is a really engaging way to reinforce foundational web development skills while producing a functional and attractive digital business card.

• Intermediate HTML Projects for Improvers

If you already have some experience with HTML and web development, you might want to dive into these intermediate HTML projects for improvers.

If you’re not sure whether you’re at that stage, rewind a few steps and check out our beginner projects as they build the skills you need to tackle these harder challenges.

The idea of this article is to make each project slightly more challenging as you work through the list in sequence.

As we move on to these more challenging projects, we’ll be using HTML and CSS alongside CSS frameworks and JavaScript to add interactivity to our pages.

Cool, let’s dive in!

4. Interactive Photo Gallery

This is the first intermediate HTML project on our list, and it’s now time to push your boundaries!

For this HTML project, we’re going to mix in a little bit of JavaScript to create an interactive photo gallery that’s ideal for a photography website.

Yep, your website will allow users to click on thumbnails in an album to view a larger version of an image.

While I know this article is about HTML, as you become more experienced and skilled, you need to know how to integrate JavaScript with HTML .

I don’t make the rules; this is just how things are with modern web development!

But don’t worry, this is only going to be a light sprinkling of JS. If you want to level up your skills in that area, I’d definitely consider a JavaScript course .

I really like this project for anyoine looking to advance their web development skills, as it delves deeper into structuring complex content and enhancing interactivity through CSS and JavaScript.

I've designed this to be a step-by-step tutorial, which is ideal if you're familiar with basic HTML and CSS but new to integrating JavaScript in your projects.

• Creating Dynamic Sections: Using HTML5 semantic tags like <header>, <section>, and <footer> to organize content logically, enhanced by JavaScript functionality.
• Embedding and Managing Media: Incorporating elements like images within a responsive layout and managing their display with JavaScript-driven filters.
• Advanced CSS Techniques: Understanding and applying complex CSS properties such as Flexbox and Grid to create sophisticated layouts. Delving deeper into responsive design principles to ensure your gallery looks great on any device.

If you’re looking to elevate your web development skills, this project is a fantastic choice as it builds upon basic concepts and introduces more complex interactions and designs.

• Using <header> and <footer> tags for a structured HTML5 layout that frames your gallery.
• Employing <section> tags to group gallery content semantically and dynamically.
• Embedding images and creating a modal view component to interactively display them in detail.
• Applying various CSS styles to manage the layout with advanced techniques like CSS Grid, as well as enhancing the overall aesthetics with modern typography and transitions.

Overall, this is an engaging way to reinforce and expand your web development skills while producing a functional and attractive interactive photo gallery.

For me, this project is not just about learning to code; it's also about creating a valuable and dynamic feature for your professional portfolio or personal website.

5. Product Landing Page

The next HTML project on my list is a product landing page . You’ll also be using the popular CSS framework Bootstrap. 

Note that I’ve chosen to use the Bootstrap framework because it’s a widely used tool in web development. We’ll also be using the CDN version rather than installing it locally.

I really like this intermediate project because it offers a robust introduction to essential web development skills for beginners, focusing on structuring content and utilizing the Bootstrap framework for styling.

• Creating Sections : Using HTML5 semantic tags like header, section, and footer to organize content logically.
• Embedding Media : Incorporating elements like images to enhance the visual appeal of the page.
• Bootstrap Classes : Understanding and applying Bootstrap classes to create a responsive and visually appealing layout with minimal effort.
• Using header and footer tags for a structured HTML5 layout.
• Employing section tags to group content semantically.
• Embedding images and media to showcase your product visually.
• Applying Bootstrap styles to manage the layout with the grid system and utility classes, enhancing typography and colors for a professional look.

Overall, this is a really engaging way to reinforce foundational web development skills while producing a functional and attractive product landing page.

Plus, it's a great way to learn about CSS frameworks with the ever-popular Bootstrap, which is ideal for enhancing your professional portfolio and your resume.

6. Professional Portfolio Page

Do you want to become a web developer? 

Well, you need a professional portfolio!

It’s fairly common to use your GitHub account as a CV of your work, but why don’t we build our own page for it?

That’s what this project is all about, and we’ll be using HTML and CSS to create a personal portfolio page to highlight your various projects and skills. 

I've also designed this to be a step-by-step tutorial, which is ideal if you're looking to enhance your web development skills and create a polished portfolio.

• Creating Sections: Using HTML5 semantic tags like `<header>`, `<section>`, and `<footer>` to organize content logically.
• Using Bootstrap: Incorporating Bootstrap components like cards and tables to enhance the visual appeal and functionality of the page.
• Responsive Design: Applying responsive design principles to ensure your portfolio looks great on any device.

If you’re advancing in web development, this project is a fantastic step, as it builds on foundational skills and prepares you for more complex projects by introducing new concepts and techniques.

• Embedding professional images to showcase your work visually.
• Applying various Bootstrap and CSS styles to manage the layout with padding and margins and to enhance the typography by adjusting the font family and colors.
• Overall, this is a really engaging way to reinforce intermediate web development skills while producing a functional and attractive professional portfolio page.

For me, this project is not just about learning to code; it's also about creating a valuable tool for showcasing your professional skills and accomplishments.

7. Interactive Quiz App

This is the last of our intermediate HTML projects, and it’s a great chance to extend yourself before tackling the more advanced projects we’ve provided.

The main goal here is to create a dynamic and interactive quiz. 

We’ll be presenting the user with a series of questions, and we’ll be providing immediate feedback on their answers. To do this, we’ll be using some JavaScript.

We’ll also be using Bootstrap in this project. The further you go in web development, the more you’ll see CSS frameworks being used, so it doesn’t hurt to get even more practice. 

Without a doubt, this HTML project is another step up in complexity, so let’s look at the different skills you’ll be using to tackle it:

• HTML5: Structuring the quiz page content with semantic HTML5.
• JavaScript: Using JS to manage the quiz logic, event handling, and DOM manipulation.
• Bootstrap: Using Bootstrap components for a polished UI with modals and buttons.
• CSS: Styling the quiz interface and layout while including a responsive design.

So, while it may seem quite simple, this project is a great chance to test out the skills you’ve honed in the previous projects in a new way.

If I had to pick one stand-out feature of this project, it’s probably the greater use of JavaScript to provide immediate user feedback.

We’ll also be using JS to handle user input, validate answers, and keep their score.

As we move on to the more advanced HTML projects, you’ll see that we have no choice but to make greater use of JavaScript.

The TL-DR is that when you reach a certain level, the natural extension is to include interactivity. And right now, JavaScript is the best and most popular way to do this.

Let’s take a look at the HTML, CSS, and JavaScript source code for our quiz app.

You’ll notice that the HTML code itself is not very long! That’s because we’re using JavaScript to dynamically output questions one by one.

This is quite similar to the Single Page Application (SPA) approach that you tend to see when building with React. Just check out any React course to see what I mean.

Overall, if you have your heart set on becoming a pro web developer, this is good to know! 

You’ll also see that our CSS file is relatively short, as we’re relying a lot on Bootstrap for its default styling. This is not uncommon when building with a CSS framework.

Finally, the JS source code is definitely the longest we’ve included so far!

Don’t be daunted by this, as it’s not super technical or complicated. Overall, we have some event listeners, a function to serve up questions, and a function to process a user's answer.

Note also that right now, I’ve only added one question. You might want to add to this!

Similarly, as I’ve said throughout, now’s also the time to experiment with this code and to test yourself.

Try something different with Bootstrap, see if you can improve the JS code, and make some changes to the HTML. Whatever you do, just have fun with it!

These projects are designed to help you learn new skills and showcase them, but they’re also designed to let you try new things and express yourself as a web developer.

So have fun, and get creative!

HTML Source Code:

Try it by entering the code into the HTML editor below:

CSS Source Code:

You can add both HTML and CSS in the editor below:

JavaScript Source Code:

Put it all together with this JavaScript compiler.

How did you find that? 

By the end of this HTML project, you should be feeling ready to make the leap to our advanced HTML projects, as you’ll have even more hands-on experience!

Let’s now recap the skills you had to use in this project:

• Using HTML5 to create a semantic structure.
• Using Bootstrap to quickly develop a responsive interface while adding buttons and modals.
• Writing more challenging JavaScript for quiz logic, navigation, and answer validation.
• Using JavaScript to interact with DOM-based user events and to update the UI in real time.

You’re now ready to dive into our final three advanced HTML projects, where we take all of the skills you’ve learned so far to the next level! Let’s go!

• Advanced HTML Projects

In this section, I’ve put together three advanced HTML projects designed to test and stretch you, regardless of your skill level and experience.

That said, these are best suited to those who have already tackled the intermediate projects on our list or are more experienced web development professionals.

As I mentioned earlier, each project in this article has been designed to be more challenging than the last.

So, if at any point you feel like you’re stuck or out of your depth, rewind a few steps and try an earlier project to build your skills. You can then return to these advanced HTML projects.

Given that these have been designed to be the most difficult HTML projects, we’ll be using HTML, CSS, CSS frameworks, JavaScript, and external API calls.

If you’re ready, let’s get started!

8. Interactive Event Page

In this advanced HTML project, we’re going to test ourselves by mixing HTML, CSS, JavaScript, and an external API to create an event page for a tech conference.

Yep, we’re going to be using the Google Maps API to create an interactive map for users to see where our conference is located. Pretty cool, I know!

So, while you might have thought, huh, this is a basic task, an event or conference page is actually a really engaging HTML project as it combines various real-world web dev skills.

In particular, integrating with an external API like Google Maps is great practice for real-world projects, as this is the type of thing you’d need to do all the time.

And yes, I know we’re using JavaScript again in this project, but trust me, you need to learn JavaScript to be a pro web developer with HTML.

We’ll also be using Bootstrap again here to create a responsive design, as this is often essential for event attendees who want to access information on different device types.

So, get ready to use the following skills in this HTML project:

• HTML5: Use semantic elements to structure the webpage.
• CSS3 & Bootstrap: Use Bootstrap's grid system and components to create a pro layout.
• Google Maps API: Integrate Google Maps to display the event location.
• JavaScript: Create an interactive Google Map in an external JS file.
• Form Handling: Create a registration form to allow users to sign up for the event.

Just like before, we’ll only be using a very small amount of simple JavaScript in this project.

Also, super important but remember to replace the API Key placeholder text with your own Google Maps API key in the script tag for the Google Maps API call.

If you’re new to this, you need to do the following:

• Setup a Google Cloud Platform (GCP) Account
• Create a new project
• Enable Billing on your project
• Enable the Google Maps Platform APIs
• Create an API Key

It’s all fairly standard stuff for working with GCP, but if you are still learning web development or you haven’t worked in the cloud before, it could be new to you.

Then again, I’m hoping that you’ll be excited to take on new challenges like this, as it’s a great way to add real-world, marketable web development skills to your portfolio! 

Let’s now take a look at the HTML, CSS, and JavaScript source code for this cool project.

You’ll notice that our CSS file is not as short as the last time we used BootStrap, but that’s just because we wanted to override some of the default styles.

As always, please experiment with this code! There’s so much you can do here, whether that’s altering the navbar, altering the section layout, or playing with the CSS styling.

Also, have a play with the GPS coordinates in the JS file to see how the map changes.

Use it with this HTML Editor to see how it looks:

Add CSS after you add your HTML to the compiler below to see how it looks:

Add the HTML and CSS codes to each tab in the editor below, then click the JS button to add your JavaScript code.

By the end of this project, you should be feeling like a real web developer!

That said, if you’re starting to feel more confident in your skills, maybe consider including some more JavaScript to add interactivity to the schedule and speakers' sections.

Equally, check out some more Bootstrap components, like modals for the speaker bios or session details.

The possibilities for tinkering are endless, and they’re a great way to make a project your own and showcase your skills in your HTML portfolio.

Let’s now recap the skills you’ll have used by building this HTML project:

• Using Bootstrap to create a responsive and accessible layout for an event page.
• Implementing the grid with Bootstrap.
• Integrating with the Google Maps API to provide location details.
• Collect user data with a registration form.

9. Music Player App

This is a really fun project if you like music! That’s right, we’re going to build our own HTML music player.

Sure, we’re not going to be competing with Spotify, but this advanced HTML project is an excellent way to level up your existing skills when dealing with multimedia.

The goal here is to create a functional and stylish interface for our music player. We’ll also include a playlist to list songs and controls for play, pause, next, and previous.

Let’s take a look at the skills we’ll need to use to build our music player:

• HTML5 Audio: Control audio playback with JavaScript and the<audio> element.
• Custom Audio Controls: Create and style audio controls rather than relying on default browser controls.
• CSS3 Animations and Transitions: Use CSS to animate the play/pause button and the progress bar.
• JavaScript Event Handling: Use JavaScript to handle play, pause, and track change events and update the UI.
• Responsive Design: Ensure the music player is usable across different screen sizes.

You’ve probably noticed that we’re using JavaScript again here. This is going to be a recurring theme from this point onward.

Trust me; you just have to get comfortable with JS if you want to be a pro HTML developer. Like peanut butter and jelly, they are very often found together!

And seeing as we’re working on advanced projects, the JS code in this project is the longest we’ve used so far.

But don’t let this put you off, as it’s fairly straightforward when you get to grips with basic JavaScript.

Let’s now take a look at the source code for this project.

Remember to change the paths to your MP3 files in both the HTML and JS code, and as always, have fun playing around with this code.

In particular, see what happens when you make changes to the JS functionality. You might also want to try out a different color scheme or overall user interface to match your personality.

I’ve said it many times in this article, but the best way to learn how these projects work is to get stuck in, make changes, break things, and then fix them. 

It really is amazing how much you can learn by trying to deconstruct a project.

Try it with the HTML compiler:

Try it now with the CSS editor:

Try it with the JavaScript compiler:

By the end of this advanced HTML project, you’ll have built a truly portfolio-worthy piece that showcases your ability to work with multimedia on the web.

Let’s recap the skills you will have used to make this all happen:

• Using the HTML5 <audio> element and controlling it with JavaScript
• Developing a set of custom control elements for the audio player with a unique UI.
• Applying CSS animations to enhance the player interface.
• Managed user interactions such as play, pause, and track selection with JavaScript.
• Designed a music player that is fully functional and attractive on mobile and desktop.

10. Weather Forecast App

We’ve now made it to the final HTML project on our list, which just so happens to be the most challenging project we’ve included so far!

But what are we building, I hear you ask? We’re going to create a weather forecast app! 

This will allow a user to enter a city, which we’ll then use to fetch and display a weather forecast for them.

The final product may look simple, but this is a deceptively challenging project, as we’ll be interacting with an external weather API to fetch and parse the weather data.

As you’ve probably already guessed, this project is going to blend HTML with CSS, JavaScript, and the CSS framework Bootstrap.

I really wanted to tie in everything we’ve done so far for the grand finale, including a brand-new external API provider!

Let’s take a look at the skills we’ll be using to create our HTML weather app: 

• Fetching API Data: Making HTTPS requests to external APIs to fetch weather data.
• Asynchronous JavaScript: Using async and await to handle asynchronous API requests.
• DOM Manipulation: Updating HTML dynamically weather data using JavaScript.
• Bootstrap Grid System: Use Bootstrap's responsive grid system to present forecast data.
• Event Handling: Capture user input and manage click events to trigger data fetching and UI updates.
• Error Handling: Implement error handling for API requests and manage network issues or user errors.

The first thing you should notice is that we’re including error handling to ensure our project is professional. 

This is ideal if you want to add this project to your portfolio, as it shows you know how to think and code like a professional web developer.

When it comes to the standout feature of this project, it has to be the external API integration to fetch weather data. This is super fun and really rewarding. 

Of course, you’ll need to sign up with OpenWeatherMap to get your own API key , but this is really straightforward.

Simply sign up for the free account, verify your email, and you’ll receive your API key to use within a couple of hours. 

Then remember to add this to the JS code instead of the placeholder, and you will be all set.

Let’s now dive into the HTML, CSS, and JavaScript source code for our final HTML project.

You’ll notice that it uses a lot of JavaScript. 

As I mentioned earlier, we cannot avoid it at this point, especially if we want to include dynamic and interactive content.

This is particularly important for the weather data fetching, which is all handled within the JS code.

We simply collect the city and country of interest and send this data in our API request to fetch weather forecast data.

This is a simple RESTful API request to OpenWeatherMap to collect the forecast data.

Depending on how confident you feel, this might all sound very complicated.

But once you’ve looked at the code, you’ll see it’s nothing more than an HTTP request and some string manipulation.

Of course, we also have some asynchronous code processing and error handling, but again, these are fairly standard once you get to grips with JavaScript, so don't be afraid of them!

The final step involves using Bootstrap to neatly package the weather data into a card component, which is dynamically rendered within the HTML.

You’ll see that we’ve barely used any CSS in this example as we’ve chosen to depend on Bootstrap.

That said, I highly recommend and encourage you to make changes to the styling and to experiment with all of the code.

This is especially important if you feel like you’re out of your comfort zone, as it will help you to truly understand what is happening under the hood!

Maybe add some elements we haven’t used yet, like radio buttons or checkboxes? Perhaps you can add a survey form to get user feedback?

Try It Yourself »

Add all of it to the JavaScript compiler to complete the HTML project.

Huge congrats on making it this far and completing this advanced HTML project. Your portfolio will most definitely thank you!

You should now have a solid understanding of how to create interactive web applications that can respond to user input and display real-time data from external sources. 

This skill set is a cornerstone of modern web development, which is ideal if you have aspirations to become a professional web developer.

Let’s now recap the skills and hands-on experience you’ve gained in this project:

• Integrating with third-party APIs to fetch real-time data.
• Managing asynchronous operations and network requests in JavaScript.
• Dynamically updating the DOM based on user input and fetched data.
• Creating responsive layouts with Bootstrap that adapt to different screen sizes.
• Developing a user-friendly interface that provides interactive feedback for user actions.
• What Is HTML?

Created in 1993 by Tim Berners-Lee, HTML (HyperText Markup Language) is the standard markup language for creating web pages and web applications. But what is a markup language? Well, this just means that HTML uses tags to mark up content and provide structure for web pages.

Despite being around for three decades, HTML is always evolving, and the most current version is HTML5, which was released in 2014. This was a big step forward for HTML, as it introduced new features like semantic tags and audio and video support.

In 2024, HTML is one of the key components of the modern Internet, and it tends to be used alongside web dev technologies like CSS and JavaScript. With this combination, web developers can create rich and interactive web pages, web applications, and other web development projects . 

The exponential rise in mobile devices and increasing importance for accessibility has also helped HTML to remain relevant, as proper use of HTML tags and attributes can make websites accessible to all users while also making them easy to view on all types of devices.

Key Features of HTML

Let’s take a quick look at some of the key features of HTML.

• HTML documents are saved with .html or .htm file extensions.
• HTML is closely related to other web technologies like CSS and JavaScript, with CSS styling and formatting HTML content and JavaScript adding interactivity and dynamic behavior.
• HTML tags are defined by angled brackets (< >) to define the structure and content of web pages. They can also contain attributes or additional information about the tag.
• HTML elements are the building blocks of a web page. These are defined by a start tag, content, and end tag, with common examples being paragraph <p> tags and more complex elements like images and videos via <img> and <video> tags.
• HTML attributes are extra bits of information that you can add to HTML elements to modify behavior or provide additional information.
• HTML is platform-independent , meaning you can use it on any device or operating system, and popular web browsers like Chrome, Firefox, Safari, and Edge can render content.
• HTML nesting allows one HTML element to be placed inside another, creating a hierarchical element structure ideal for grouping related content and providing additional structure. 
• HTML has built-in accessibility features to ensure web content is accessible to all users, including support for screen readers, magnifiers, and text descriptions for images and media.
• HTML uses semantic markup elements to add meaning and structure to web content, with common examples of semantic tags being <header> and <footer> . This can also be useful for SEO, allowing search engines to understand web page structure better.

Why Build Projects with HTML?

Whether you’re looking to start a career in web development or enhance your portfolio, these HTML projects are perfect for leveling up your skills, and you can do it all by following along in our online HTML compiler .

Plus, to help you build your skills, I’ve designed these HTML projects to be more challenging as you make your way through the list. This is great for leveling up and building your portfolio.

These HTML projects also include complementary skills for modern web development, like CSS frameworks, JavaScript, and external APIs from Google Maps and more. 

• Why Learn HTML In 2024?

HTML is perhaps the original gateway language for newcomers to web development and programming in general.

Let’s take a look at some of the most compelling reasons to learn HTML in 2024.

• The foundation of web development: HTML provides structure and content for web pages, making it essential for creating any type of website or web app.
• Easy to learn: HTML has a simple syntax and structure, meaning that basic HTML knowledge allows you to quickly build your own web pages.
• Web accessibility: Learning to create accessible HTML code will help make the web a more inclusive place.
• Stepping stone to other web technologies: A solid foundation in HTML is ideal for learning other web dev skills and programming languages like CSS and JavaScript.
• Career opportunities: Whether for web development, marketing, content creation, and more, HTML skills are in demand in various industries and sectors. You can even earn HTML certifications to enhance your resume when applying for new career opportunities.
• Wrapping Up

And there we have it! If you've taken the time to build these 10 HTML projects, you should be feeling much more competent and confident with HTML.

You'll also have a burgeoning HTML portfolio that's packed full of interesting and practical HTML projects, each demonstrating your dedication and abilities.

Did you notice that by tackling each of the HTML projects I’ve created in sequence, you were challenging yourself more and more as you made your way through the list?

Which one was your favorite? I'll confess that I really enjoyed making all of them, especially the weather app!

My motivation with these HTML projects was to guide you through the nuances of HTML development while giving you hands-on experience that you'd usually only get when taking an HTML course.

Here at hackr.io , we're huge fans of project-based learning, so I hope these HTML projects have bolstered your confidence and sparked a deeper interest in web development with HTML.

With new projects regularly added to this page, be sure to check back often for new opportunities to refine your HTML skills and expand your portfolio.

And remember, you can do all this using our online HTML compiler , so get creative, have fun, and happy coding!

• Frequently Asked Questions

1. Where Can I Create an HTML Project?

The easiest way to create and work on HTML CSS projects is to create a .html or .htm file and then edit this in a simple text editor like Notepad. However, working on HTML projects in a fully-featured code editor, like Sublime Text or Visual Studio Code, is often easier.

2. How Do I Practice HTML and CSS Projects?

If you’re a beginner, the best way to practice HTML website projects is to check out the first half of our list and work through the HTML CSS projects for beginners. When you’re confident in your skills, try some of the more advanced HTML projects. Alternatively, if you’re an experienced dev, try any of our advanced HTML projects.

3. Is HTML Easy for Beginners?

Absolutely, HTML is easy for beginners to learn because of its simple syntax and structure, which makes it easy to quickly build your own websites. It’s also a great stepping stone for other languages, like JavaScript, often used with HTML for front-end development.

4. Why Do We Use HTML in Projects?

HTML is used in projects because it provides structure to static pages and dynamic web pages, it separates content and presentation via CSS, it has accessibility features, it has cross-platform compatibility, and it is ideal for SEO due to semantic tags.

5. Where Can I Run HTML Code?

You can run HTML code by opening your .html file with any popular web browser app, like Chrome, Firefox, Edge, Safari, etc. Alternatively, you can use online code editors to create and view HTML pages or set up a local web server on your own computer with something like Apache HTTP server.

1. Stack Overflow. Stack Overflow Developer Survey 2023: Most Popular Technologies [Internet]. Stack Overflow; [date unknown; cited 2024 Jan 15]. Available from: https://survey.stackoverflow.co/2023/#technology-most-popular-technologies

2. Bureau of Labor Statistics, U.S. Department of Labor. Occupational Employment and Wages, May 2022, 15-1254 Web Developers and Digital Interface Designers [Internet]. [updated 2021 Mar 31; cited 2024 Jan 15]. Available from: https://www.bls.gov/oes/current/oes151254.htm

3. Google Developers. Get an API Key for Google Maps JavaScript API [Internet]. Google; [date unknown; cited 2024 Jan 15]. Available from: https://developers.google.com/maps/documentation/javascript/get-api-key

4. OpenWeather. How to start [Internet]. OpenWeather; [date unknown; cited 2024 Jan 15]. Available from: https://openweathermap.org/appid

Technical Editor for Hackr.io | 15+ Years in Python, Java, SQL, C++, C#, JavaScript, Ruby, PHP, .NET, MATLAB, HTML & CSS, and more... 10+ Years in Networking, Cloud, APIs, Linux | 5+ Years in Data Science | 2x PhDs in Structural & Blast Engineering

Subscribe to our Newsletter for Articles, News, & Jobs.

Disclosure: Hackr.io is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.

In this article

• PHP vs HTML: What is the Difference? Programming Languages HTML PHP Web Development
• Margin vs Padding in HTML and CSS: Differences and How to Use Web Development Programming Skills Web Design
• 50+ Top HTML Interview Questions and Answers HTML Web Development Career Development Interview Questions

Please login to leave comments

Always be in the loop.

Get news once a week, and don't worry — no spam.

{{ errors }}

{{ message }}

• Help center
• We ❤️ Feedback
• Advertise / Partner
• Write for us
• Privacy Policy
• Cookie Policy
• Change Privacy Settings
• Disclosure Policy
• Terms and Conditions
• Refund Policy

Disclosure: This page may contain affliate links, meaning when you click the links and make a purchase, we receive a commission.

Learning Web Design, 4th Edition by Jennifer Robbins

Get full access to Learning Web Design, 4th Edition and 60K+ other titles, with a free 10-day trial of O'Reilly.

There are also live events, courses curated by job role, and more.

Chapter 4. Creating a Simple Page: (HTML Overview)

An introduction to elements and attributes

A Web Page, Step by Step

Step 2: give the document structure, step 5: change the look with a style sheet.

Troubleshooting broken web pages

Part I provided a general overview of the web design environment. Now that we’ve covered the big concepts, it’s time to roll up our sleeves and start creating a real web page. It will be an extremely simple page, but even the most complicated pages are based on the principles described here.

In this chapter, we’ll create a web page step by step so you can get a feel for what it’s like to mark up a document with HTML tags. The exercises allow you to work along.

This is what I want you to get out of this chapter:

Get a feel for how markup works, including an understanding of elements and attributes.

See how browsers interpret HTML documents.

Learn the basic structure of an HTML document.

Get a first glimpse of a style sheet in action.

Don’t worry about learning the specific text elements or style sheet rules at this point; we’ll get to those in the following chapters. For now, just pay attention to the process, the overall structure of the document, and the new terminology.

You got a look at an HTML document in Chapter 2 , but now you’ll get to create one yourself and play around with it in the browser. The demonstration in this chapter has five steps that cover the basics of page production.

Step 1: Start with content.  As a starting point, we’ll write up raw text content and see what browsers do with it.

Step 2: Give the document structure.  You’ll learn about HTML element syntax and the elements that give a document its structure.

Step 3: Identify text elements.   You’ll describe the content using the appropriate text elements and learn about the proper way to use HTML.

Step 4: Add an image.  By adding an image to the page, you’ll learn about attributes and empty elements.

Step 5: Change the page appearance with a style sheet.  This exercise gives you a taste of formatting content with Cascading Style Sheets.

By the time we’re finished, you will have written the source document for the page shown in Figure 4-1 . It’s not very fancy, but you have to start somewhere.

We’ll be checking our work in a browser frequently throughout this demonstration—probably more than you would in real life. But because this is an introduction to HTML, it is helpful to see the cause and effect of each small change to the source file along the way.

Before We Begin, Launch a Text Editor

In this chapter and throughout the book, we’ll be writing out HTML documents by hand, so the first thing we need to do is launch a text editor. The text editor that is provided with your operating system, such as Notepad (Windows) or TextEdit (Macintosh), will do for these purposes. Other text editors are fine as long as you can save plain-text files with the .html extension. If you have a WYSIWYG web-authoring tool such as Dreamweaver, set it aside for now. I want you to get a feel for marking up a document manually (see the sidebar HTML the Hard Way ).

I stand by my method of teaching HTML the old-fashioned way— by hand . There’s no better way to truly understand how markup works than typing it out, one tag at a time, then opening your page in a browser. It doesn’t take long to develop a feel for marking up documents properly.

Although you may choose to use a web-authoring tool down the line, understanding HTML will make using your tools easier and more efficient. In addition, you will be glad that you can look at a source file and understand what you’re seeing. It is also crucial for troubleshooting broken pages or fine-tuning the default formatting that web tools produce.

And for what it’s worth, professional web developers tend to mark up content manually because it gives them better control over the code and allows them to make deliberate decisions about what elements are used.

This section shows how to open new documents in Notepad and TextEdit. Even if you’ve used these programs before, skim through for some special settings that will make the exercises go more smoothly. We’ll start with Notepad; Mac users can jump ahead.

Creating a new document in Notepad (Windows)

These are the steps to creating a new document in Notepad on Windows 7 ( Figure 4-2 ):

Open the Start menu and navigate to Notepad (in Accessories). 1

Click on Notepad to open a new document window, and you’re ready to start typing. 2

Next, we’ll make the extensions visible. This step is not required to make HTML documents, but it will help make the file types clearer at a glance. Select “Folder Options...” from the Tools menu 3 and select the View tab 4 . Find “Hide extensions for known file types” and uncheck that option. 5 Click OK to save the preference, and the file extensions will now be visible.

In Windows 7, hit the ALT key to reveal the menu to access Tools and Folder Options. In Windows Vista, it is labeled “Folder and Search Options.”

Creating a new document in TextEdit (Mac OS X)

By default, TextEdit creates “rich text” documents—that is, documents that have hidden style formatting instructions for making text bold, setting font size, and so on. You can tell that TextEdit is in rich-text mode when it has a formatting toolbar at the top of the window (plain-text mode does not). HTML documents need to be plain-text documents, so we’ll need to change the format, as shown in this example ( Figure 4-3 ).

Use the Finder to look in the Applications folder for TextEdit. When you’ve found it, double-click the name or icon to launch the application.

TextEdit opens a new document. The text-formatting menu at the top shows that you are in Rich Text mode. Here’s how you change it.

Open the Preferences dialog box from the TextEdit menu.

There are three settings you need to adjust:

On the “New Document” tab, select “Plain text”.

On the “Open and Save” tab, select “Ignore rich text commands in HTML files” and turn off “Append ‘.txt’ extensions to plain text files”.

When you are done, click the red button in the top-left corner.

When you create a new document, the formatting menu will no longer be there and you can save your text as an HTML document. You can always convert a document back to rich text by selecting Format → Make Rich Text when you are not using TextEdit for HTML.

Step 1: Start with Content

Now that we have our new document, it’s time to get typing. A web page always starts with content, so that’s where we begin our demonstration. Exercise 4-1 | Entering content walks you through entering the raw text content and saving the document in a new folder.

It is important that you follow these rules and conventions when naming your files:

Use proper suffixes for your files. HTML and XHTML files must end with .html . Web graphics must be labeled according to their file format: .gif , .png , or .jpg ( .jpeg is also acceptable).

Never use character spaces within filenames. It is common to use an underline character or hyphen to visually separate words within filenames, such as robbins_bio.html or robbins-bio.html .

Avoid special characters such as ? , % , # , / , : , ; , • , etc. Limit filenames to letters, numbers, underscores, hyphens, and periods.

Filenames may be case-sensitive, depending on your server configuration. Consistently using all lowercase letters in filenames, although not necessary, is one way to make your filenames easier to manage.

Keep filenames short. Short names keep the character count and file size of your HTML file in check. If you really must give the file a long, multiword name, you can separate words with hyphens, such as a-long-document-title.html , to improve readability.

Self-imposed conventions. It is helpful to develop a consistent naming scheme for huge sites—for instance, always using lowercase with hyphens between words. This takes some of the guesswork out of remembering what you named a file when you go to link to it later.

Type the content below for the home page into the new document in your text editor. Copy it exactly as you see it here, keeping the line breaks the same for the sake of playing along. The raw text for this exercise is available online at www.learningwebdesign.com/4e/materials/ .

Select “Save” or “Save as” from the File menu to get the Save As dialog box ( Figure 4-4 ). The first thing you need to do is create a new folder that will contain all of the files for the site (in other words, it’s the local root folder).

Windows: Click the folder icon at the top to create the new folder.

Mac: Click the “New Folder” button.

Name the new folder bistro , and save the text file as index.html in it. Windows users, you will also need to choose “All Files” after “Save as type” to prevent Notepad from adding a “.txt” extension to your filename. The filename needs to end in .html to be recognized by the browser as a web document. See the sidebar Naming Conventions for more tips on naming files.

Just for kicks, let’s take a look at index.html in a browser. Launch your favorite browser (I’m using Google Chrome) and choose “Open” or “Open File” from the File menu. Navigate to index.html , and then select the document to open it in the browser. You should see something like the page shown in Figure 4-5 . We’ll talk about the results in the following section.

Some information in the source document will be ignored when it is viewed in a browser, including:

Multiple (white) spaces.  When a browser encounters more than one consecutive blank character space, it displays a single space. So if the document contains:

the browser displays:

long, long ago

Line breaks (carriage returns).  Browsers convert carriage returns to white spaces, so following the earlier “ignore multiple white spaces rule,” line breaks have no effect on formatting the page. Text and elements wrap continuously until a new block element, such as a heading ( h1 ) or paragraph ( p ), or the line break element ( br ) is encountered in the flow of the document text.

Tabs.  Tabs are also converted to character spaces, so guess what? Useless.

Unrecognized markup.  Browsers are instructed to ignore any tag they don’t understand or that was specified incorrectly. Depending on the element and the browser, this can have varied results. The browser may display nothing at all, or it may display the contents of the tag as though it were normal text.

Text in comments.  Browsers will not display text between the special <!-- and --> tags used to denote a comment. See the Adding Hidden Comments sidebar later in this chapter.

Learning from step 1

Our content isn’t looking so good ( Figure 4-5 ). The text is all run together—that’s not how it looked in the original document. There are a couple of things to be learned here. The first thing that is apparent is that the browser ignores line breaks in the source document. The sidebar What Browsers Ignore lists other information in the source that is not displayed in the browser window.

Second, we see that simply typing in some content and naming the document .html is not enough. While the browser can display the text from the file, we haven’t indicated the structure of the content. That’s where HTML comes in. We’ll use markup to add structure: first to the HTML document itself (coming up in Step 2), then to the page’s content (Step 3). Once the browser knows the structure of the content, it can display the page in a more meaningful way.

We have our content saved in an .html document—now we’re ready to start marking it up.

Introducing...HTML elements

Back in Chapter 2 , you saw examples of HTML elements with an opening tag ( <p> for a paragraph, for example) and closing tag ( </p> ). Before we start adding tags to our document, let’s look at the anatomy of an HTML element (its syntax ) and firm up some important terminology. A generic container element is labeled in Figure 4-6 .

An element consists of both the content and its markup.

Elements are identified by tags in the text source. A tag consists of the element name (usually an abbreviation of a longer descriptive name) within angle brackets ( < > ). The browser knows that any text within brackets is hidden and not displayed in the browser window.

The element name appears in the opening tag (also called a start tag ) and again in the closing (or end ) tag preceded by a slash ( / ). The closing tag works something like an “off” switch for the element. Be careful not to use the similar backslash character in end tags (see the tip Introducing...HTML elements ).

The tags added around content are referred to as the markup . It is important to note that an element consists of both the content and its markup (the start and end tags). Not all elements have content, however. Some are empty by definition, such as the img element used to add an image to the page. We’ll talk about empty elements a little later in this chapter.

One last thing...capitalization. In HTML, the capitalization of element names is not important. So <img> , <Img> , and <IMG> are all the same as far as the browser is concerned. However, in XHTML (the stricter version of HTML) all element names must be all lowercase in order to be valid. Many web developers have come to like the orderliness of the stricter XHTML markup rules and stick with all lowercase, as I will do in this book.

Slash vs. Backslash

HTML tags and URLs use the slash character (/). The slash character is found under the question mark (?) on the standard QWERTY keyboard.

It is easy to confuse the slash with the backslash character (\), which is found under the bar character (|). The backslash key will not work in tags or URLs, so be careful not to use it.

Basic document structure

Figure 4-7 shows the recommended minimal skeleton of an HTML5 document. I say “recommended” because the only element that is required in HTML is the title . But I feel it is better, particularly for beginners, to explicitly organize documents with the proper structural markup. And if you are writing in the stricter XHTML, all of the following elements except meta must be included in order to be valid. Let’s take a look at what’s going on in Figure 4-7 .

I don’t want to confuse things, but the first line in the example isn’t an element at all; it is a document type declaration (also called DOCTYPE declaration ) that identifies this document as an HTML5 document. I have a lot more to say about DOCTYPE declarations in Chapter 10 , but for this discussion, suffice it to say that including it lets modern browsers know they should interpret the document as written according to the HTML5 specification.

The entire document is contained within an html element. The html element is called the root element because it contains all the elements in the document, and it may not be contained within any other element. It is used for both HTML and XHTML documents.

Within the html element, the document is divided into a head and a body . The head element contains descriptive information about the document itself, such as its title, the style sheet(s) it uses, scripts, and other types of “meta” information.

The meta elements within the head element provide information about the document itself. A meta element can be used to provide all sorts of information, but in this case, it specifies the character encoding (the standardized collection of letters, numbers, and symbols) used in the document. I don’t want to go into too much detail on this right now, but know that there are many good reasons for specifying the charset in every document, so I have included it as part of the minimal document structure.

Prior to HTML5, the syntax for specifying the character set with the meta element was a bit more elaborate. If you are writing your documents in HTML 4.01 or XHTML 1.0, your meta element should look like this:

Also in the head is the mandatory title element. According to the HTML specification, every document must contain a descriptive title.

Finally, the body element contains everything that we want to show up in the browser window.

Are you ready to add some structure to the Black Goose Bistro home page? Open the index.html document and move on to Exercise 4-2 | Adding basic structure .

Open the newly created document, index.html , if it isn’t open already.

Start by adding the HTML5 DOCTYPE declaration:

Put the entire document in an HTML root element by adding an <html> start tag at the very beginning and an </html> end tag at the end of the text.

Next, create the document head that contains the title for the page. Insert <head> and </head> tags before the content. Within the head element, add information about the character encoding <meta charset="utf-8"> , and the title, “Black Goose Bistro”, surrounded by opening and closing <title> tags.

The correct terminology is to say that the title element is nested within the head element. We’ll talk about nesting more in later chapters.

Finally, define the body of the document by wrapping the content in <body> and </body> tags. When you are done, the source document should look like this (the markup is shown in color to make it stand out):

Save the document in the bistro directory, so that it overwrites the old version. Open the file in the browser or hit “refresh” or “reload” if it is open already. Figure 4-8 shows how it should look now.

Not much has changed after structuring the document, except that the browser now displays the title of the document in the top bar or tab. If someone were to bookmark this page, that title would be added to his Bookmarks or Favorites list as well (see the sidebar Don’t Forget a Good Title ). But the content still runs together because we haven’t given the browser any indication of how it should be structured. We’ll take care of that next.

Step 3: Identify Text Elements

With a little markup experience under your belt, it should be a no-brainer to add the markup that identifies headings and subheads ( h1 and h2 ), paragraphs ( p ), and emphasized text ( em ) to our content, as we’ll do in Exercise 4-3 | Defining text elements . However, before we begin, I want to take a moment to talk about what we’re doing and not doing when marking up content with HTML.

Introducing...semantic markup

The purpose of HTML is to add meaning and structure to the content. It is not intended to provide instructions for how the content should look (its presentation).

Your job when marking up content is to choose the HTML element that provides the most meaningful description of the content at hand. In the biz, we call this semantic markup . For example, the most important heading at the beginning of the document should be marked up as an h1 because it is the most important heading on the page. Don’t worry about what it looks like in the browser...you can easily change that with a style sheet. The important thing is that you choose elements based on what makes the most sense for the content.

Not only is a title element required for every document, it is quite useful as well. The title is what is displayed in a user’s Bookmarks or Favorites list and on tabs in desktop browsers. Descriptive titles are also a key tool for improving accessibility, as they are the first thing a person hears when using a screen reader. Search engines rely heavily on document titles as well. For these reasons, it’s important to provide thoughtful and descriptive titles for all your documents and avoid vague titles, such as “Welcome” or “My Page.” You may also want to keep the length of your titles in check so they are able to display in the browser’s title area. Another best practice is to put the part of the title with more specific information first (for example, the page description ahead of the company name) so that the page title is visible when multiple tabs are lined up in the browser window.

In addition to adding meaning to content, the markup gives the document structure. The way elements follow each other or nest within one another creates relationships between the elements. You can think of it as an outline (its technical name is the DOM , for Document Object Model ). The underlying document hierarchy is important because it gives browsers cues on how to handle the content. It is also the foundation upon which we add presentation instructions with style sheets and behaviors with JavaScript. We’ll talk about document structure more in Part III , when we discuss Cascading Style Sheets, and in Part IV in the JavaScript overview.

Although HTML was intended to be used strictly for meaning and structure since its creation, that mission was somewhat thwarted in the early years of the Web. With no style sheet system in place, HTML was extended to give authors ways to change the appearance of fonts, colors, and alignment using markup alone. Those presentational extras are still out there, so you may run across them if you view the source of older sites or a site made with old tools. In this book, however, we’ll focus on using HTML the right way, in keeping with the contemporary standards-based, semantic approach to web design.

OK, enough lecturing. It’s time to get to work on that content in Exercise 4-3 | Defining text elements .

Open the document index.html in your text editor, if it isn’t open already.

The first line of text, “Black Goose Bistro,” is the main heading for the page, so we’ll mark it up as a Heading Level 1 ( h1 ) element. Put the opening tag, <h1> , at the beginning of the line and the closing tag, </h1> , after it, like this:

Our page also has three subheads. Mark them up as Heading Level 2 ( h2 ) elements in a similar manner. I’ll do the first one here; you do the same for “Catering” and “Location and Hours”.

Each h2 element is followed by a brief paragraph of text, so let’s mark those up as paragraph ( p ) elements in a similar manner. Here’s the first one; you do the rest.

Finally, in the Catering section, I want to emphasize that visitors should just leave the cooking to us. To make text emphasized, mark it up in an emphasis element ( em ) element, as shown here.

Now that we’ve marked up the document, let’s save it as we did before, and open (or refresh) the page in the browser. You should see a page that looks much like the one in Figure 4-9 . If it doesn’t, check your markup to be sure that you aren’t missing any angle brackets or a slash in a closing tag.

Now we’re getting somewhere. With the elements properly identified, the browser can now display the text in a more meaningful manner. There are a few significant things to note about what’s happening in Figure 4-9 .

Block and inline elements

Although it may seem like stating the obvious, it is worth pointing out that the heading and paragraph elements start on new lines and do not run together as they did before. That is because by default, headings and paragraphs display as block elements . Browsers treat block elements as though they are in little rectangular boxes, stacked up in the page. Each block element begins on a new line, and some space is also usually added above and below the entire element by default. In Figure 4-10 , the edges of the block elements are outlined in red.

By contrast, look at the text we marked up as emphasized ( em ). It does not start a new line, but rather stays in the flow of the paragraph. That is because the em element is an inline element . Inline elements do not start new lines; they just go with the flow. In Figure 4-10 , the inline em element is outlined in light blue.

You can leave notes in the source document for yourself and others by marking them up as comments . Anything you put between comment tags ( <!-- --> ) will not display in the browser and will not have any effect on the rest of the source.

Comments are useful for labeling and organizing long documents, particularly when they are shared by a team of developers. In this example, comments are used to point out the section of the source that contains the navigation.

Bear in mind that although the browser will not display comments in the web page, readers can see them if they “view source,” so be sure that the comments you leave are appropriate for everyone. It’s probably a good idea just to strip out notes to your fellow developers before the site is published. It cuts some bytes off the file size as well.

Default styles

The other thing that you will notice about the marked-up page in Figure 4-9 and Figure 4-10 is that the browser makes an attempt to give the page some visual hierarchy by making the first-level heading the biggest and boldest thing on the page, with the second-level headings slightly smaller, and so on.

How does the browser determine what an h1 should look like? It uses a style sheet! All browsers have their own built-in style sheets (called user agent style sheets in the spec) that describe the default rendering of elements. The default rendering is similar from browser to browser (for example, h1 s are always big and bold), but there are some variations (long quotes may or may not be indented).

If you think the h1 is too big and clunky as the browser renders it, just change it with a style sheet rule. Resist the urge to mark up the heading with another element just to get it to look better, for example, using an h3 instead of an h1 so it isn’t as large. In the days before ubiquitous style sheet support, elements were abused in just that way. Now that there are style sheets for controlling the design, you should always choose elements based on how accurately they describe the content, and don’t worry about the browser’s default rendering.

We’ll fix the presentation of the page with style sheets in a moment, but first, let’s add an image to the page.

Step 4: Add an Image

What fun is a web page with no image? In Exercise 4-4 | Adding an image , we’ll add an image to the page using the img element. Images will be discussed in more detail in Chapter 7 , but for now, it gives us an opportunity to introduce two more basic markup concepts: empty elements and attributes.

Empty elements

So far, nearly all of the elements we’ve used in the Black Goose Bistro home page have followed the syntax shown in Figure 4-6 : a bit of text content surrounded by start and end tags.

A handful of elements, however, do not have text content because they are used to provide a simple directive. These elements are said to be empty . The image element ( img ) is an example of such an element; it tells the browser to get an image file from the server and insert it at that spot in the flow of the text. Other empty elements include the line break ( br ), thematic breaks ( hr ), and elements that provide information about a document but don’t affect its displayed content, such as the meta element that we used earlier.

Figure 4-11 shows the very simple syntax of an empty element (compare to Figure 4-6 ). If you are writing an XHTML document, the syntax is slightly different (see the sidebar Empty Elements in XHTML ).

In XHTML, all elements, including empty elements, must be closed (or terminated , to use the proper term). Empty elements are terminated by adding a trailing slash preceded by a space before the closing bracket, like so: <img /> , <br /> , <meta /> , and <hr /> . Here is the line break example using XHTML syntax.

Let’s get back to adding an image with the empty img element. Obviously, an <img> tag is not very useful by itself—there’s no way to know which image to use. That’s where attributes come in. Attributes are instructions that clarify or modify an element. For the img element, the src (short for “source”) attribute is required, and specifies the location (URL) of the image file.

The syntax for an attribute is as follows:

Attributes go after the element name, separated by a space. In non-empty elements, attributes go in the opening tag only:

You can also put more than one attribute in an element in any order. Just keep them separated with spaces.

For another way to look at it, Figure 4-12 shows an img element with its required attributes labeled.

Here’s what you need to know about attributes:

Attributes go after the element name in the opening tag only, never in the end tag.

There may be several attributes applied to an element, separated by spaces in the opening tag. Their order is not important.

Most attributes take values, which follow an equals sign (=). In HTML, some attribute values can be reduced to single descriptive words—for example, the checked attribute, which makes a checkbox checked when a form loads. In XHTML, however, all attributes must have explicit values ( checked="checked" ). You may hear this type of attribute called a Boolean attribute because it describes a feature that is either on or off.

A value might be a number, a word, a string of text, a URL, or a measurement, depending on the purpose of the attribute. You’ll see examples of all of these throughout this book.

Some values don’t have to be in quotation marks in HTML, but XHTML requires them. Many developers like the consistency and tidiness of quotation marks even when authoring HTML. Either single or double quotation marks are acceptable as long as they are used consistently; however, double quotation marks are the convention. Note that quotation marks in HTML files need to be straight (”) not curly (”).

Some attributes are required, such as the src and alt attributes in the img element.

The attribute names available for each element are defined in the HTML specifications; in other words, you can’t make up an attribute for an element.

Now you should be more than ready to try your hand at adding the img element with its attributes to the Black Goose Bistro page in the next exercise. We’ll throw a few line breaks in there as well.

If you’re working along, the first thing you’ll need to do is get a copy of the image file on your hard drive so you can see it in place when you open the file locally. The image file is provided in the materials for this chapter. You can also get the image file by saving it right from the sample web page online at www.learningwebdesign.com/4e/materials/chapter04/bistro . Right-click (or Ctrl-click on a Mac) on the goose image and select “Save to disk” (or similar) from the pop-up menu as shown in Figure 4-13 . Name the file blackgoose.png . Be sure to save it in the bistro folder with index.html .

Once you have the image, insert it at the beginning of the first-level heading by typing in the img element and its attributes as shown here:

The src attribute provides the name of the image file that should be inserted, and the alt attribute provides text that should be displayed if the image is not available. Both of these attributes are required in every img element.

I’d like the image to appear above the title, so let’s add a line break ( br ) after the img element to start the headline text on a new line.

Let’s break up the last paragraph into three lines for better clarity. Drop a <br> tag at the spots you’d like the line breaks to occur. Try to match the screenshot in Figure 4-14 .

Now save index.html and open or refresh it in the browser window. The page should look like the one shown in Figure 4-14 . If it doesn’t, check to make sure that the image file, blackgoose.png , is in the same directory as index.html . If it is, then check to make sure that you aren’t missing any characters, such as a closing quote or bracket, in the img element markup.

Add line breaks (br) to the Location and Hours section so your page matches the example in Figure 4-14 .

Depending on the content and purpose of your website, you may decide that the browser’s default rendering of your document is perfectly adequate. However, I think I’d like to pretty up the Black Goose Bistro home page a bit to make a good first impression on potential patrons. “Prettying up” is just my way of saying that I’d like to change its presentation, which is the job of Cascading Style Sheets (CSS).

In Exercise 4-5 | Adding a style sheet , we’ll change the appearance of the text elements and the page background using some simple style sheet rules. Don’t worry about understanding them all right now; we’ll get into CSS in more detail in Part III . But I want to at least give you a taste of what it means to add a “layer” of presentation onto the structure we’ve created with our markup.

Open index.html if it isn’t open already.

We’re going to use the style element to apply a very simple embedded style sheet to the page. (This is just one of the ways to add a style sheet; the others are covered in Chapter 11 .)

The style element is placed inside the head of the document. Start by adding the style element to the document as shown here:

Now, type the following style rules within the style element just as you see them here. Don’t worry if you don’t know exactly what is going on (although it is fairly intuitive). You’ll learn all about style rules in Part III .

Now it’s time to save the file and take a look at it in the browser. It should look like the page in Figure 4-15 . If it doesn’t, go over the style sheet code to make sure you didn’t miss a semicolon or a curly bracket.

We’re finished with the Black Goose Bistro page. Not only have you written your first web page, complete with a style sheet, but you’ve also learned about elements, attributes, empty elements, block and inline elements, the basic structure of an HTML document, and the correct use of markup along the way. Not bad for one chapter!

When Good Pages Go Bad

The previous demonstration went smoothly, but it’s easy for small things to go wrong when typing out HTML markup by hand. Unfortunately, one missed character can break a whole page. I’m going to break my page on purpose so we can see what happens.

What if I had forgotten to type the slash ( / ) in the closing emphasis tag ( </em> )? With just one character out of place ( Figure 4-16 ), the remainder of the document displays in emphasized (italic) text. That’s because without that slash, there’s nothing telling the browser to turn “off” the emphasized formatting, so it just keeps going.

Omitting the slash in the closing tag (or even omitting the closing tag itself) for block elements, such as headings or paragraphs, may not be so dramatic. Browsers interpret the start of a new block element to mean that the previous block element is finished.

I’ve fixed the slash, but this time, let’s see what would have happened if I had accidentally omitted a bracket from the end of the first <h2> tag ( Figure 4-17 ).

See how the headline is missing? That’s because without the closing tag bracket, the browser assumes that all the following text—all the way up to the next closing bracket ( > ) it finds—is part of the <h2> opening tag. Browsers don’t display any text within a tag, so my heading disappeared. The browser just ignored the foreign-looking element name and moved on to the next element.

Making mistakes in your first HTML documents and fixing them is a great way to learn. If you write your first pages perfectly, I’d recommend fiddling with the code as I have here to see how the browser reacts to various changes. This can be extremely useful in troubleshooting pages later. I’ve listed some common problems in the sidebar Having Problems? Note that these problems are not specific to beginners. Little stuff like this goes wrong all the time, even for the pros.

Validating Your Documents

One way that professional web developers catch errors in their markup is to validate their documents. What does that mean? To validate a document is to check your markup to make sure that you have abided by all the rules of whatever version of HTML you are using (there are more than one, as we’ll discuss in Chapter 10 ). Documents that are error-free are said to be valid. It is strongly recommended that you validate your documents, especially for professional sites. Valid documents are more consistent on a variety of browsers, they display more quickly, and they are more accessible.

Right now, browsers don’t require documents to be valid (in other words, they’ll do their best to display them, errors and all), but any time you stray from the standard you introduce unpredictability in the way the page is displayed or handled by alternative devices.

So how do you make sure your document is valid? You could check it yourself or ask a friend, but humans make mistakes, and you aren’t really expected to memorize every minute rule in the specifications. Instead, you use a validator , software that checks your source against the HTML version you specify. These are some of the things validators check for:

The inclusion of a DOCTYPE declaration. Without it the validator doesn’t know which version of HTML or XHTML to validate against.

An indication of the character encoding for the document.

The inclusion of required rules and attributes.

Non-standard elements.

Mismatched tags.

Nesting errors.

Typos and other minor errors.

Developers use a number of helpful tools for checking and correcting errors in HTML documents. The W3C offers a free online validator at validator.w3.org . For HTML5 documents, use the online validator located at html5.validator.nu . Browser developer tools like the Firebug plug-in for Firefox or the built-in developer tools in Safari and Chrome also have validators so you can check your work on the fly. If you use Dreamweaver to create your sites, there is a validator built into that as well.

The following are some typical problems that crop up when you are creating web pages and viewing them in a browser:

It could be you didn’t save your document before reloading, or you may have saved it in a different directory.

This could happen if you are missing a closing bracket ( > ) or a quotation mark within a tag. This is a common error when you’re writing HTML by hand.

The broken graphic could mean a couple of things. First, it might mean that the browser is not finding the graphic. Make sure that the URL to the image file is correct. (We’ll discuss URLs further in Chapter 6 .) Make sure that the image file is actually in the directory you’ve specified. If the file is there, make sure it is in one of the formats that web browsers can display (GIF, JPEG, or PNG) and that it is named with the proper suffix ( .gif , .jpeg or .jpg , or .png , respectively).

Test Yourself

Now is a good time to make sure you understand the basics of markup. Use what you’ve learned in this chapter to answer the following questions. Answers are in Appendix A .

What is the difference between a tag and an element?

Write out the recommended minimal structure of an HTML5 document.

Indicate whether each of these filenames is an acceptable name for a web document by circling “Yes” or “No.” If it is not acceptable, provide the reason why.

All of the following markup examples are incorrect. Describe what is wrong with each one, and then write it correctly.

<img "birthday.jpg">

<i>Congratulations!<i>

<a href="file.html">linked text</a href="file.html">

<p>This is a new paragraph<\p>

How would you mark up this comment in an HTML document so that it doesn’t display in the browser window?

Element Review: Document Structure

This chapter introduced the elements that establish the structure of the document. The remaining elements introduced in the exercises will be treated in more depth in the following chapters.

Get Learning Web Design, 4th Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Don’t leave empty-handed

Get Mark Richards’s Software Architecture Patterns ebook to better understand how to design components—and how they should interact.

It’s yours, free.

Check it out now on O’Reilly

Dive in for free with a 10-day trial of the O’Reilly learning platform—then explore all the other resources our members count on to build skills and solve problems every day.

50 HTML, CSS, and JavaScript Projects with Source Code for Beginners

By Faraz - Last Updated: September 04, 2024

Dive into the world of web development with these 50 beginner-friendly HTML, CSS, and JavaScript projects. Explore source code, step-by-step guides, and practical examples to kickstart your coding journey.

In today's fast-paced digital world, web development is a highly sought-after skill. Whether you're looking to build your own website, enhance your resume, or embark on a new career path, learning HTML, CSS, and JavaScript is a great place to start. To help beginners get a hands-on experience, we've compiled a list of 50 beginner-friendly projects with complete source code. These projects will not only bolster your coding skills but also boost your confidence in creating interactive and visually appealing web pages.

Table of Contents

Introduction to HTML, CSS, and JavaScript

HTML, CSS, and JavaScript are the three core technologies for building web pages and web applications. HTML (Hypertext Markup Language) is used for structuring web content, CSS (Cascading Style Sheets) is used for styling and layout, and JavaScript adds interactivity and functionality to web pages.

Setting Up Your Development Environment

Before diving into the projects, it's essential to set up your development environment. Make sure you have a code editor like Visual Studio Code or Sublime Text installed. You'll also need a web browser for testing your projects, and it's highly recommended to use Google Chrome with its developer tools.

1. Digital Clock

If you're just starting your journey into web development, creating a digital clock is a fantastic project to get your hands dirty with HTML, CSS, and JavaScript. You'll learn how to display real-time data, format it elegantly, and make it interactive. This project will introduce you to the basics of JavaScript's Date object and how to manipulate the DOM to update the clock's display in real-time.

2. Pulse Search Bar

Creating a pulse search bar is a visually appealing project that combines HTML and CSS. You'll learn how to use CSS animations to create a subtle pulsing effect.

3. Social Media Icons

In this project, you'll explore the world of iconography using HTML and CSS to create a set of beautiful social media icons. This is a great opportunity to learn how to use CSS for styling and positioning elements to achieve the desired look and feel. You can also practice linking these icons to your social media profiles.

4. Drop-Down Menu

A drop-down menu is a fundamental component of web design. By building one from scratch, you'll gain valuable experience in HTML and CSS to create a navigation menu that can expand and collapse as needed. This project lays the foundation for more complex navigation systems in the future.

5. Simple Calculator

Want to add some interactivity to your website? Build a simple calculator using HTML, CSS, and JavaScript. This project will teach you how to capture user input, perform calculations, and display the results on your web page. It's a great way to start working with user interactions and basic JavaScript functions.

6. Login Page

Creating a login page is an essential skill for any web developer. With this project, you'll learn how to design a clean and user-friendly login interface using HTML and CSS. Additionally, you can explore JavaScript for form validation and user authentication in the future.

7. Sign Up Form

Continuing from the login page, designing a sign-up form is another crucial web development skill. You'll delve into form elements, validation techniques, and user-friendly interfaces. This project will expand your HTML and CSS skills while preparing you for more complex forms in the future.

8. Animated Search Box

Elevate your search bar game by creating an animated search box with HTML and CSS. This project will teach you how to make your website more dynamic and engaging, with a search bar that expands and contracts smoothly, providing an improved user experience.

9. Dark/Light Mode Switch

Adding a dark/light mode switch to your website is not only trendy but also functional. With this project, you'll explore how to use HTML, CSS, and JavaScript to allow users to switch between different color themes. It's a great way to learn about user preferences and customization options in web development.

10. Breadcrumb

A breadcrumb navigation trail is essential for guiding users through a website's hierarchy. In this project, you'll learn how to create a breadcrumb trail using HTML and CSS. This will help users easily navigate your website and understand its structure.

11. Carousel Sliders

Creating a carousel slider is a fantastic way to enhance your website's visual appeal. Using HTML and CSS, you can build an interactive image slider that allows users to browse through multiple images or content items.

12. Glitch Effect Text

If you want to add a touch of creativity to your website, consider implementing a glitch effect text. This project involves HTML and CSS to create text that appears to glitch or distort, giving your site a unique and eye-catching aesthetic.

13. Sound Bars

Incorporating soundbars into your website allows you to explore the world of audio visualization.

14. Loaders

Loaders are essential elements to keep users engaged while content is loading. By creating loaders with HTML and CSS, you'll learn how to provide feedback to users and enhance their overall experience on your website.

15. Radio Button

Radio buttons are a fundamental part of form design. In this project, you'll dive into HTML and CSS to create radio button elements and learn how to style them to fit your website's aesthetics. You can also explore JavaScript to make them interactive.

16. Blog Card Grid

Building a blog card grid is a great way to display articles or posts on your website. With HTML and CSS, you'll create an attractive grid layout for showcasing content. This project will teach you responsive design techniques and the art of presenting information effectively.

A well-designed footer can provide important information and links to users. Using HTML and CSS, you can create a stylish and functional footer that complements the overall design of your website. This project will also introduce you to layout concepts for organizing content at the bottom of web pages.

The navigation bar (navbar) is a critical element of web design. With this project, you'll learn how to create a responsive navbar using HTML and CSS. You can also explore JavaScript to add interactive features, such as dropdown menus or smooth scrolling navigation.

19. Sidebar

Sidebars are a common feature in many websites, providing additional navigation or information. Using HTML, CSS, and JavaScript, you can create a sidebar that complements your website's layout and functionality. This project will enhance your skills in layout design and organization.

20. Sort HTML Table

Learn how to make your website more user-friendly by allowing users to sort data in an HTML table. With HTML, CSS, and JavaScript, you'll create a sortable table that empowers users to arrange data according to their preferences, enhancing the usability of your site.

21. Switch Button

Adding a switch button to your website can be a great way to give users control over specific features or settings. Using HTML and CSS, you can create a customizable switch button that toggles between different states.

22. Tab Bar

Tabs are a common UI pattern for organizing content. With HTML and CSS, you can build a tab bar that allows users to switch between different sections or categories of information on your website.

23. Submit Button

Designing an attractive and responsive submit button is crucial for web forms. This project focuses on HTML and CSS, teaching you how to style submit buttons effectively and ensure they look appealing across various devices and browsers.

24. To Do List

A to-do list is a practical project that introduces you to HTML and CSS for creating a dynamic task management system. You'll learn how to add, edit, and remove tasks, providing valuable experience in handling user data and interactions.

25. Hamburger Menu

Hamburger menus are a popular choice for mobile navigation. Using HTML, CSS, and JavaScript, you can create a responsive hamburger menu that expands to reveal navigation options when clicked. This project will improve your skills in designing mobile-friendly interfaces.

26. Accordion

Accordions are a great way to present information in a compact and organized manner. With HTML, CSS, and JavaScript, you can build an accordion that expands and collapses sections to display content when users interact with it.

27. Coffee Landing Page

Creating a landing page for a coffee shop is an exciting project that combines your HTML and CSS skills to design an appealing and informative page.

28. Login and Sign-Up Form

Expanding on the login and sign-up form projects, you can create a combined login and registration system. This project allows users to choose between logging in or signing up, streamlining the user experience on your website.

29. Card Design

Card design is a versatile skill in web development. With HTML and CSS, you can create stylish cards for showcasing various types of content, such as articles, products, or profiles. This project will sharpen your abilities in layout and design.

30. Glow Button

Glowing buttons can add a touch of interactivity and elegance to your website. Using HTML and CSS, you can create buttons that illuminate or change color when hovered over.

31. Modal Popup Window

Modal popup windows are commonly used for displaying additional information or user interactions without navigating away from the current page. Using HTML and CSS, you can create modal windows that appear when triggered and can be closed by users.

32. Split Text

Splitting text into creative and visually appealing elements is a fascinating design technique. With HTML and CSS, you can split text into individual characters, words, or lines and animate them in unique ways.

33. Product Showcase Carousel

Showcasing products effectively is crucial for e-commerce websites. Using HTML, CSS, and JavaScript, you can create a product showcase carousel that allows users to browse through featured items. This project will teach you how to design and implement interactive product displays.

34. Drag and Drop File

Implementing drag-and-drop functionality can greatly enhance user experiences on your website. With HTML, CSS, and JavaScript, you can create a file upload interface that allows users to drag and drop files for uploading. This project delves into handling file input and user interactions.

35. 404 Not Found Page

Even error pages can be creatively designed. With HTML and CSS, you can create a custom 404 Not Found page that not only informs users of a broken link but also keeps them engaged with your website's branding and navigation options. This project demonstrates your ability to design user-friendly error pages.

36. Animated Product Page

Taking your product pages to the next level, you can create an animated product page that provides detailed information and visualizations of products. Using HTML and CSS, this project enhances your skills in product presentation and user interaction.

37. Netflix Clone

Creating a Netflix clone is a challenging but rewarding project for web developers. While it may involve more advanced concepts, it offers a comprehensive learning experience in HTML and CSS.

38. Google Clone

Building a Google clone is another ambitious project that covers a wide range of web development skills. You'll create a simplified version of the Google search engine.

39. Dropdown Menu

Expanding on the drop-down menu project, you can explore more advanced dropdown menu designs with CSS and JavaScript. This project allows you to create multi-level dropdowns, mega menus, or dynamic content-driven menus, enhancing your navigation menu development skills.

40. Music Player

Developing a music player is a captivating project that combines HTML, CSS, and JavaScript to create an interactive audio player. You'll learn how to play, pause, skip tracks, and display album art. This project offers hands-on experience with media elements and user interface design for music applications.

41. Profile Card

Designing profile cards is a useful skill for displaying user information on social media, forums, or networking sites. With HTML and CSS, you can create stylish and customizable profile cards. This project will refine your layout and styling abilities.

42. Portfolio Template

Building a portfolio website is a fantastic way to showcase your work as a web developer. With HTML, CSS, and JavaScript, you can create a personalized portfolio template to display your projects, skills, and contact information. This project will serve as a reflection of your abilities and a valuable asset for your career.

43. Copy Text to Clipboard

Implementing a "Copy to Clipboard" feature on your website can greatly enhance user convenience. Using HTML, CSS, and JavaScript, you can create a button or icon that allows users to easily copy text or code snippets to their clipboard. This project delves into the clipboard API and user interface design for enhanced usability.

44. Hotel Landing Page

Creating a hotel landing page is an engaging project that combines your HTML, CSS, and JavaScript skills to design an attractive and informative page for a hotel or resort. You can include details about rooms, amenities, booking options, and more, enhancing your web design and layout abilities.

45. Ice Cream Shop Landing Page

Designing a landing page for an ice cream shop is a sweet and visually appealing project. Using HTML, CSS, and JavaScript, you can create an enticing page that showcases delicious ice cream flavors, specials, and location information. This project encourages creativity in web design.

46. Blog Cards with Bootstrap

Bootstrap is a popular front-end framework that simplifies web development. With this project, you can create stylish blog cards using Bootstrap's components and CSS. It's a great opportunity to learn how to leverage frameworks to streamline your development process.

47. Pizza Shop Website

Building a website for a pizza shop is a fun project that combines your HTML, CSS, and JavaScript skills to create a mouthwatering online presence. You can include menu items, ordering options, delivery information, and more, honing your web development abilities.

48. Password Validation Form

Enhance your form-building skills by creating a password validation form. With HTML, CSS, and JavaScript, you can design a form that enforces strong password requirements and provides real-time feedback to users. This project reinforces the importance of data validation and user experience.

49. Text to Voice

Adding text-to-voice functionality to your website can make it more accessible and user-friendly. Using HTML, CSS, and JavaScript, you can create a feature that converts text content into speech, benefiting users with visual impairments or those who prefer audio content. This project explores the Web Speech API and inclusive design principles.

50. Circular Grid

A circular grid with an amazing hover effect is a design element that consists of a grid of circular elements arranged in a circular pattern, with some sort of hover effect applied to each element. The hover effect could be something like a change in color, a change in size, or the display of additional content when the element has hovered over with the mouse.

Bonus: Pricing Table

A pricing table is an essential element of any website that offers products or services for sale. It provides a clear and concise comparison of the different options available to the customer, allowing them to make an informed decision about which option best suits their needs.

Bonus: Search Filter

A search filter is a vital tool for any website offering a wide range of products, services, or content. It enables users to quickly narrow down their options based on specific criteria, making it easier to find exactly what they are looking for. By providing a clear and efficient way to sift through large amounts of information, search filters enhance user experience and satisfaction.

Bonus: Sticky Notes

If you're looking to build a useful and interactive web application, creating a sticky notes app is a perfect choice. This project will help you get familiar with HTML, CSS, and JavaScript by allowing you to implement features like adding, editing, and removing notes. You'll gain hands-on experience with DOM manipulation, local storage for saving notes, and styling elements to create a neat, user-friendly interface. This project will enhance your skills in handling user inputs and managing application state.

Bonus: CRUD Application

If you're new to web development, building a simple CRUD (Create, Read, Update, Delete) application is a great way to understand how web apps work. This project will teach you the basics of handling user data, storing it, displaying it, and allowing users to update or delete it. You'll work with HTML forms, style them with CSS, and use JavaScript to make everything function smoothly. This project will give you a solid foundation for creating interactive and dynamic web pages.

In conclusion, embarking on a journey of web development through these 50 HTML, CSS, and JavaScript projects for beginners has been an enriching experience. Each project has provided valuable insights and practical skills, equipping you with a versatile toolkit for creating dynamic and visually appealing websites and web applications.

Starting with projects like the digital clock and pulse search bar, you gained a solid foundation in the core technologies of the web. As you progressed through more complex tasks such as building a Netflix clone or a Google clone, you honed your skills in layout design, user interfaces, and even API integration.

From interactive forms like login pages and sign-up forms to creative elements like glitch text effects and sound bars, you've explored the diverse facets of web development, each project contributing to your growth as a developer.

Additionally, you've learned the significance of responsive design, accessibility, and user experience through projects like dark/light mode switches, copy-to-clipboard functionality, and text-to-voice conversion.

Remember that web development is dynamic, and your projects are stepping stones to even greater proficiency. Whether you're building personal projects, contributing to open-source initiatives, or pursuing a career in web development, the knowledge and experience gained from these projects will continue to serve you well.

As you move forward, continue exploring, experimenting, and challenging yourself with new projects and technologies. The world of web development is ever-evolving, and your skills will grow with it. Embrace the excitement of creating, innovating, and making the web a better place, one project at a time.

That’s a wrap!

Thank you for taking the time to read this article! I hope you found it informative and enjoyable. If you did, please consider sharing it with your friends and followers. Your support helps me continue creating content like this.

Stay updated with our latest content by signing up for our email newsletter ! Be the first to know about new articles and exciting updates directly in your inbox. Don't miss out—subscribe today!

If you'd like to support my work directly, you can buy me a coffee . Your generosity is greatly appreciated and helps me keep bringing you high-quality articles.

Thanks! Faraz 😊

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox, latest post.

Create Tag Based Filter Using HTML, CSS, and JavaScript

Learn to create a tag-based filter using HTML, CSS, and JavaScript. Step-by-step instructions for building a modern, responsive filter system.

Create a Recording Toggle Switch Using HTML, CSS, and JavaScript

September 24, 2024

Income Calculator Using HTML, CSS, and JavaScript (Source Code)

Swinging Pinned Photo Gallery with Scroll Animation using HTML, CSS, and JavaScript

September 17, 2024

Create an Hourglass Timer Loader using HTML and CSS

September 13, 2024

Learn how to create a recording toggle button using HTML, CSS, and JavaScript with easy steps. Build a simple and responsive toggle switch for your web projects.

Create Animated Logout Button Using HTML and CSS

August 08, 2024

Create Fortnite Buttons Using HTML and CSS - Step-by-Step Guide

June 05, 2024

How to Create a Scroll Down Button: HTML, CSS, JavaScript Tutorial

March 17, 2024

How to Create a Trending Animated Button Using HTML and CSS

March 15, 2024

Create Dice Rolling Game using HTML, CSS, and JavaScript

Learn how to create a dice rolling game using HTML, CSS, and JavaScript. Follow our easy-to-understand guide with clear instructions and code examples.

Create a Breakout Game with HTML, CSS, and JavaScript | Step-by-Step Guide

July 14, 2024

Create a Whack-a-Mole Game with HTML, CSS, and JavaScript | Step-by-Step Guide

June 12, 2024

Create Your Own Bubble Shooter Game with HTML and JavaScript

May 01, 2024

Build a Number Guessing Game using HTML, CSS, and JavaScript | Source Code

April 01, 2024

Tooltip Hover to Preview Image with Tailwind CSS

Learn how to create a tooltip hover effect to preview images using Tailwind CSS. Follow our simple steps to add this interactive feature to your website.

Create Image Color Extractor Tool using HTML, CSS, JavaScript, and Vibrant.js

January 23, 2024

Build a Responsive Screen Distance Measure with HTML, CSS, and JavaScript

January 04, 2024

Crafting Custom Alarm and Clock Interfaces using HTML, CSS, and JavaScript

November 30, 2023

Detect User's Browser, Screen Resolution, OS, and More with JavaScript using UAParser.js Library

October 30, 2023

Create Sticky Bottom Navbar using HTML and CSS

Learn how to create a sticky bottom navbar using HTML and CSS with this easy-to-follow guide.

Creating a Responsive Footer with Tailwind CSS (Source Code)

February 25, 2024

Crafting a Responsive HTML and CSS Footer (Source Code)

November 11, 2023

Create an Animated Footer with HTML and CSS (Source Code)

October 17, 2023

Bootstrap Footer Template for Every Website Style

March 08, 2023

• HTML Tutorial
• HTML Exercises
• HTML Attributes
• Global Attributes
• Event Attributes
• HTML Interview Questions
• DOM Audio/Video
• HTML Examples
• Color Picker
• A to Z Guide
• HTML Formatter

How to build a Website using HTML?

Building a website using HTML ( Hypertext Markup Language ) is the foundation of web development. HTML allows you to structure content, define headings, paragraphs, lists, and links, and create visually appealing web pages.

In this guide, we’ll learn the fundamentals of How to build a Website using HTML with all the key components like elements, tags, file structure, etc.

Table of Content

Set Up Your HTML document

Building html website, basic html website.

To create a website, the first step is to create an HTML document. You can create this document in any text editor, even on Notepad. Therefore, any text editor can be used to make an HTML file. All you need to do is add the extension “.html” or “.htm”. Let’s create the first basic HTML program.

To create an HTML document follow the following steps:

Step 1: Open your text editor such as Notepad Sublime Text , etc.

Step 2: Write the code given below in the text editor.

Step 3: Save this file with the .html/.htm extension.

Step 4: Open that file with any browser. The output will be displayed.

So this is how we create a simple HTML document.

To create a website using HTML, we need to learn about the various tags and attributes available. HTML tags are instructions that are enclosed in angle brackets. By using these tags, we can design a visually appealing webpage.

Essential HTML Tags:

• Use these tags to create headings of different sizes.
• <h1>  is the largest heading, while  <h5>  is the smallest.
• Make text appear bold using these tags.
• Use  <i>  for italics.
• <em>  provides semantic emphasis on important text.
• Define an ordered list (numerical or alphabetical).
• Each list item starts with  <li> .

5. Unordered List ( <ul> ):

• Display elements in bullet form.
• Use  <li>  for each list item.

6. Image Tag: If we need to add an image to our website we need to use the following syntax.

<img src=”filename” alt=”name / bit about image”>

• img : Tells browser that we want to add an image.
• src : Tells source of image for eg image from desktop or a website.
• alt : This attribute is used to describe an image. If the image is not able to download in a web browser due to some reason then alt is shown.

7. Anchor Tag: This tag is mainly used to connect one website to another.

<a href=”https://www.geeksforgeeks.org/c-plus-plus/?ref=shm”> Click Here to Learn C++</a>

Note: Nesting is possible in HTML, which means that we can write one tag between another tag. 

Example: In this example we providing steps to make spread cookies, including preheating, mixing ingredients, shaping dough, baking, and serving. Ordered list structured with steps. Page title “Steps To Form Spread Cookies.”

Example : Here, we create a simple website of GeeksforGeeks. 

build a Website using HTML Example Output

Additional Tips

• Combine HTML with CSS (Cascading Style Sheets) to style your website.
• Apply colors, fonts, margins, and positioning to enhance the visual appeal.
• Use media queries and flexible layouts to ensure your website looks great on various devices.

Building a website in HTML is foundational for web development. Experimenting with HTML elements and CSS styles allows you to create visually appealing and functional sites. Stay updated on design trends for user-friendly websites tailored to your needs.

FAQs on Build a Website using HTML

1. what is html, and why is it important for web development.

HTML (Hypertext Markup Language) is the standard language for creating web pages. It defines the structure and content of a webpage, including headings, paragraphs, lists, and links.

2. How do I create headings of different sizes in HTML?

Use header tags (<h1> to <h5>). <h1> represents the largest heading, while <h5> is the smallest.

3. Can I make text bold or italic in HTML?

Yes! Use <strong> or <b> for bold text and <i> or <em> for italics.

4. What’s the next step after mastering basic HTML?

Explore CSS (Cascading Style Sheets) for styling, responsive design, and advanced topics like HTML5 forms and APIs.

Similar Reads

• Web Technologies
• HTML-Questions

Please Login to comment...

• How to Underline in Discord
• How to Block Someone on Discord
• How to Report Someone on Discord
• How to add Bots to Discord Servers
• GeeksforGeeks Practice - Leading Online Coding Platform

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

HTML Tutorial

Html graphics, html examples, html references, html layout elements and techniques.

Websites often display content in multiple columns (like a magazine or a newspaper).

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

HTML Layout Elements

HTML has several semantic elements that define the different parts of a web page:

HTML Layout Techniques

There are four different techniques to create multicolumn layouts. Each technique has its pros and cons:

• CSS framework
• CSS float property
• CSS flexbox

Advertisement

CSS Frameworks

If you want to create your layout fast, you can use a CSS framework, like W3.CSS or Bootstrap .

Ever heard about W3Schools Spaces ? Here you can create your website from scratch or use a template, and host it for free.

* no credit card required

CSS Float Layout

It is common to do entire web layouts using the CSS float property. Float is easy to learn - you just need to remember how the float and clear properties work. Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility. Learn more about float in our CSS Float and Clear chapter.

CSS Flexbox Layout

Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

Learn more about flexbox in our CSS Flexbox chapter.

CSS Grid Layout

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

Learn more about CSS grids in our CSS Grid Intro chapter.

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.