assignments for html

• HTML Lab Assignments

HTML Assignment and HTML Examples for Practice

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

• Password Generator
• HTML Editor
• HTML Encoder
• JSON Beautifier
• CSS Beautifier
• Markdown Convertor
• Find the Closest Tailwind CSS Color
• Phrase encrypt / decrypt
• Browser Feature Detection
• Number convertor
• CSS Maker text shadow
• CSS Maker Text Rotation
• CSS Maker Out Line
• CSS Maker RGB Shadow
• CSS Maker Transform
• CSS Maker Font Face
• Color Picker
• Colors CMYK
• Color mixer
• Color Converter
• Color Contrast Analyzer
• Color Gradient
• String Length Calculator
• MD5 Hash Generator
• Sha256 Hash Generator
• String Reverse
• URL Encoder
• URL Decoder
• Base 64 Encoder
• Base 64 Decoder
• Extra Spaces Remover
• String to Lowercase
• String to Uppercase
• Word Count Calculator
• Empty Lines Remover
• HTML Tags Remover
• Binary to Hex
• Hex to Binary
• Rot13 Transform on a String
• String to Binary
• Duplicate Lines Remover

W3Docs allows you to test your HTML skills with exercises.

You can find different HTML exercises (with answers) provided for each HTML chapter. Solve exercises by editing some code. If you cannot solve the exercise, get a hint, or see the answer.

Count Your Score

Each correct answer will give you 1 point. We will always display your current and total scores.

W3docs Online Quizzes

Test your knowledge with W3docs’ basic quiz made especially for beginners.Pass the test and get a Certificate of achievement!

• The HTML-BASIC checks your knowledge of HTML-BASIC.
• The CSS-BASIC checks your knowledge of CSS-BASIC.
• The JAVASCRIPT-BASIC checks your knowledge of JAVASCRIPT-BASIC.
• The PHP-BASIC checks your knowledge of PHP-BASIC.
• The ES6-BASIC checks your knowledge of ES6-BASIC.
• The JAVA checks your knowledge of JAVA.
• The TS-QUIZ checks your knowledge of TS-QUIZ.
• The ANGULAR checks your knowledge of ANGULAR.
• The REACT checks your knowledge of REACT.
• The SASS checks your knowledge of SASS.
• The VUEJS checks your knowledge of VUEJS.
• The NODE checks your knowledge of NODE.
• The GIT checks your knowledge of GIT.
• The SQL checks your knowledge of SQL.
• The PYTHON-BASICS checks your knowledge of PYTHON-BASICS.
• HTML Basics
• Javascript Basics
• TypeScript Basics
• React Basics
• Angular Basics
• Sass Basics
• Vue.js Basics
• Python Basics
• Java Basics
• NodeJS Basics

• HTML Basics

Basic HTML Exercises about HTML Links, Paragraphs, Layouts, Tags, & Text Formatting

Steps to Create a Webpage in HTML using Notepad

A website is simply a collection of web-pages. A web page or web documents written in HTML (HyperText Markup Language) . These Web pages can be viewed using any web browser and Internet.

Html Language is used to write code and programs to create a webpage. It is easy to create a webpage and you can learn it with few basic steps mentioned below:

HTML Program or page can be created by many HTML or Text Editors. These editors are software that help us writing our code with easy user interface. Today, we will see how to create a html or webpage using Notepad Editor.

Notepad editor is built-in text editor in Windows Computers. You can find similar editors in Mac and Linux Operating system as well.

There are many advanced HTML editor or software are also available. However, we will recommend using default and simple editor like notepad for the beginners. That is always a good way to start learning HTML.

Creating a Simple HTML Page using Notepad Editor

Follow the four steps below to create your first web page with Notepad.

Step 1: Open Notepad (Windows)

Windows 8 or later: Open the Start Screen and Search (Type Notepad)

Windows 7 or previous Windows: Open Start > Programs > Accessories > Notepad

Step 2: Create a New Document

Go to Notepad Menu: File > New

A New blank document will be opened and you can start writing your first HTML Program here.

Step 3: Write Some HTML code or Program

Write some HTML code. If you do not know about HTML Yet, read few chapters in HTML Tutorials Section .

Write your own HTML code or simply copy the following HTML Simple Program into notepad document.

Step 4: Save the HTML Page

Go to Notepad Menu: File > Save (or use short-key CTRL + S)

It will ask you to Save the file on your computer. Give it a name with .html extension and Save it (for example program.html)

Note: HTML page should be saved with .html extension carefully.

Step 5: View the HTML Page using Browser

Web browsers are programs or software that are used to view Webpages/Websites. You can find Internet Explored by default if using Windows Computer machine. You can also download other popular web browsers such as Google Chrome or Firefox. Use any of them.

Now Simply, open the saved HTML file in any browser: Double click on the file or right-click on the file and choose “Open with” option to select other browser.

You HTML File will be opened in web browser and it will show output based on your html program.

Congratulations if you are able to run your first HTML Program.

You can now learn more about HTML Tags and create more HTML web pages. Using these HTML Pages, you can easily create your own website as well.

Program to see difference between paragraphs & normal text with line break

We can write some text in body and it will be displayed in browser. All text will be displayed in single line until it reach browser window border. If you want to add some line break, you can use <br/> tag.

Another option is to use text between paragraph tag. You can use multiple paragraph tags to display multiple text paragraphs.

Different between HTML Paragraph & Regular line break:

Using <br/> tag, it only add a single line break. While using <p> tag it creates a paragraph with extra spacing before and after the paragraph.

Write an HTML program to display hello world.

Description: You need to write an HTML program to display hello world on screen.

Hint : You need to type Hello World inside the body tag.

Write a program to create a webpage to print values 1 to 5

Description: Write a program to create a webpage to print values 1 to 5 on the screen.

Hint: Put values inside the body tag.

Write a program to create a webpage to print your city name in red color.

Description: Write a program to create a webpage to print your city name in red color.

Hint: You need to put the city name inside the body tag and use color attribute to provide the color.

Write a program to print a paragraph with different font and color.

Description: Create a webpage to print a paragraph with 4 – 5 sentences. Each sentence should be in a different font and color.

Hint: Put the paragraph content inside the body tag and paragraph should be enclosed in <p> tag.

• HTML Exercises Categories
• HTML All Exercises & Assignments
• HTML Top Exercises
• HTML Paragraphs

HTML for Beginners – HTML Basics With Code Examples

Welcome to the exciting world of web development! In this beginner's guide, you will learn the fundamentals of HTML, the backbone of every web page.

Imagine a tree: its roots anchor and nourish the entire plant. Similarly, HTML, the root of web development, provides the foundation for every webpage.

Understanding HTML's role is like grasping a tree's roots, it forms the fundamental basis for comprehending how web pages come to life.

By the end of this tutorial, you'll be equipped with the knowledge to kick-start your coding journey.

Table of Contents

What is html, basic structure of an html document, tags and elements, html attributes, html multimedia, best practices.

HTML, which stands for Hypertext Markup Language, is the standard language used for creating and designing the structure of a web page. It allows you to organize content on your website, define its structure, and establish the relationships between different elements.

An HTML document follows a specific structure that acts as the foundation for your web page:

Let's break it down:

<!DOCTYPE html> : defines the document type and version of HTML being used (HTML5 in this case).

<html lang="en"> and </html> : opening and closing tag of the root element that wraps the entire HTML content. The attribute lang="en" defines the language (in this case, USA English)

<head> and </head> : opening and closing tag of the head element contains meta-information <meta > about the HTML document, the page title <title></title> you see in the browser tab, and link <link /> which defines a link between your HTML document and an external resources, like stylesheet, favicon, import and so on.

<body> and </body> : opening and closing body tag encloses all the visible content of a web page, including text, images, links, forms, and other elements that users interact with.

Note : All HTML elements have opening ( < > ) and closing ( </ > ) tags, except for self-closing ( < > or < /> ) tags, which I will explain in more detail later.

Notice this <!-- your web page content goes here --> in the above html basic structure, it's called comments. Comments are used to add explanatory notes that are not displayed when the web page is viewed in a browser. They are useful for documenting your code, providing information to other developers, or temporarily excluding specific parts of the code. You can create comment using this tag <!-- your comment goes here --> .

• Single-line commen t: <!-- This is a single-line comment -->
• Multi-line comment : <!-- This is a multi-line comment. It can span multiple lines. All content within the comment block will be ignored by the browser. -->

HTML uses tags to define different elements on a webpage. Tags are enclosed in angle brackets ( < > ). There are opening ( < > ) and closing ( </ > ) tags, and self-closing ( < > or < /> ) tag. Here are a few examples:

The heading tags <h1> to <h6> are used to define headings or subheadings within a document. These tags represent a hierarchy of headings, with <h1> being the highest level (main heading) and <h6> being the lowest level (lowest subheading level).

Its purpose is to structure and organize the content of a web page, making it more readable and accessible.

The paragraph tag ( <p> your text goes here </p> ) is used to separate blocks of text into distinct paragraphs. It is a block-level element that represents a unit of text or a block of content, and it is commonly used to structure and separate text on a webpage.

The <p> tag is part of the structural markup in HTML and helps in creating well-organized and readable content.

Line Breaks

To create a line break without starting a new paragraph, use the break ( <br> ) tag.

Example 1 - Basic Line Break:

This will render as:

This is the first line. This is the second line.

Example 2 - Line Breaks in Text:

This text contains a line break.

Example 3 - Line Breaks in List:

• Item 2 with a line break

Example 4 - Line Breaks in Address:

Nuel Cas 23 Musa Yar'Dua VI Lagos, Nigeria

Example 5: Line Breaks with Multiple <br> Tags

This is a paragraph with

multiple line breaks.

While break ( <br> ) tag is commonly used for simple line breaks, CSS and block-level elements like <p> and <div> tags are often preferred for more complex layouts.

Overusing <br> tags for layout purposes is discouraged. CSS is generally more suitable for controlling the spacing and layout of elements on a webpage.

A <div> tag, which stands for "division" is one of the most commonly used container elements in HTML. It is a block-level container that is used to group other HTML elements together and apply styles or scripting to them collectively.

Here's an example:

In this example, the <div> element wraps around a paragraph ( <p> ) and an unordered list ( <ul> ). This grouping allows you to apply styles or manipulate these elements together using CSS or JavaScript.

Note : The <div> tag is often used for layout purposes, helping structure the content of a webpage. For more semantic and specific meanings, HTML5 introduced new semantic tags like <section> , <article> , <header> , <footer> , and so on, which provide better clarity about the content's purpose.

Semantic Tags

They are like special labels that tell web browsers and developers what different parts of a webpage are all about. They help make websites easier to understand for both people and computers.

By using these tags, you can make your websites more accessible and easier to find on search engines. Here are some common HTML semantic tags along with examples:

• <header> : The header tag represents introductory content at the beginning of a section or webpage. It typically contains logos, navigation menus, and other introductory elements.

2.   <nav> : Use nav tag to define navigation links within your webpage. It contains links to other pages or sections of the website.

3. <main> : Used to define the main content of a webpage. It helps improve the accessibility and structure of your HTML code, as it clearly identifies the main content area for screen readers and other assistive technologies. It also helps search engines understand the relevance of the content on your page, which can improve your website's Search Engine Optimization (SEO).

4. <section> : Use the section tag when you want to define sections within a webpage. Also, for grouping related content together.

5. <article> :  Use the article tag when you want to define an independent piece of content that can stand alone, such as a blog post, news article, or forum post.

6. <aside> : Use the aside tag when you want to define content that is related to the main content but not part of it, such as sidebars, advertisements, or related links.

7. <footer> : Used to define the footer of a webpage, typically containing copyright information, contact details, or links to related pages.

Lists <li> allow you to organize and structure content in a hierarchical manner. They are two types: ordered <ol> (numbered) and unordered ( <ul> ) (bulleted) lists.

Ordered List: Use <ol> for ordered lists, and <li> for list items.

• Second item

Unordered List: The <ul> tag is used to create an unordered list, where the order of the items doesn't matter, it renders bulleted items. Each item in the list is represented by the <li> (list item) tag.

This will render as:  

Lists can be nested within each other. For example, you can have an ordered list within an unordered list or vice versa.

• Unordered List Item 1
• Unordered List Item 2 1. Ordered List Item 1 2. Ordered List Item 2
• Unordered List Item 3

List items can also have attributes. For example, you might use the type attribute with the <ol> tag to change the numbering style.

A. Item 1 B. Item 2 C. Item 3

The <ul> , <ol> , and <li> tags in HTML are essential for creating organized lists and structuring content on web pages. They provide flexibility in presenting information in both ordered and unordered formats.

The <span> tag is a generic inline (it does not create a line break) container used to group and apply styles to inline elements or text. It is typically used when you want to apply styles or using JavaScript to manipulate specific portions of text within a larger block of content without affecting the overall structure.

Here's an example of how the <span> tag can be used in HTML:

In this example, the word "highlighted" will be displayed in red and bold, as specified by the inline styles applied to the <span> element.

The <link> tag is used to define a link between a document and an external resource. Its primary purpose is to include external resources, such as stylesheets, icons, and other documents. Let's look at the common use cases of the <link> tag:

Linking stylesheet : The most common use of the <link> tag is to link an external CSS (Cascading Style Sheets) file to an HTML document. This allows you to separate the styling of your website from its structure, making it easier to maintain and update.

In this example, the rel attribute specifies the relationship between the HTML document and the linked resource (stylesheet), the type attribute indicates the type of the linked resource ( text/css for stylesheets), and the href attribute specifies the path to the external CSS file.

Note : Linking a CSS file should be done inside the <head> element.

Linking icon :  The <link> tag is also commonly used to link the favicon icon for a webpage, which is the small icon that appears in the browser tab or next to the URL in the address bar.

In this case, the rel attribute is set to "icon" to indicate that it is an icon file, and the href attribute specifies the path to the icon file. The type attribute indicates the type of the linked file, in this case, image/x-icon for icons.

Linking external documents : The <link> tag can be used to link other external documents, such as:

1. Stylesheet for printing: Imagine you have a special design for when someone wants to print your webpage. The <link> tag can connect your webpage to a separate stylesheet designed just for printing. This way, when someone prints your page, it looks nice and tidy.

2. Alternative versions of a document (like translations): Sometimes, you might have different versions of your webpage for different languages or purposes. The <link> tag can connect your webpage to these alternative versions.

3. Feeds for content syndication: Let's say you have a blog, and you want others to easily see your latest posts. The <link> tag can help by connecting your webpage to a feed, which is like a stream of your latest content.

The <link> tag  is like a connector that helps your webpage interact with other files on the internet.

The anchor tag, represented by <a> , is used to create hyperlinks or anchor points within a webpage. It is primarily used to define a hyperlink, allowing users to navigate to another webpage, a different section of the same page, or even an external resource.

The anchor tag uses the href attribute to specify the destination URL (Uniform Resource Locator).

HTML forms are essential for user interaction on websites. They allow users to input data that can be sent to a server for processing. The basic structure of an HTML form involves several key elements:

The <form> tag marks the beginning and end of your form. It acts as a container for various form elements. It commonly houses label, input types, textarea, and button tags.

The <label> tag is used to define a label for an input element. Example:

In a form, different input types serve various purposes. The input ( <input> ) tag defines an interactive element for users to enter data. Commonly used ones are:

Text Input:

Password Input:

Radio Buttons:

Checkboxes:

The <textarea> tag defines a multi-line text input control, commonly used within form elements. Example:

Button (for submitting forms)

The most crucial part of a form is allowing users to submit their input. For this, you can use a button ( <button> ) tag to submit:

The <button> tag creates a clickable button. The type="submit" attribute indicates that clicking this button will submit the form.

• Always include a name attribute in your form elements. It helps identify and process the data on the server.
• Use the placeholder attribute to give users a hint about the expected input.
• Consider the user experience when choosing input types. For instance, use radio buttons for mutually exclusive options.

Here is a code snippet demonstrating usage of a form element:

Self-closing Tags

The <input> or <input /> element above is a self-closing tag, which means it doesn't require a separate closing tag.

There are other self-closing tags in HTML:

• Image ( <img> or <img /> ).
• Line breaks ( <br> or <br /> ).
• External resource link ( <link> or <link /> ).
• Horizontal rule ( <hr> or <hr /> ).
• Meta data ( <meta> or <meta /> ).
• Table column ( <col> or <col /> ).
• Base URL for relative links ( <base> or <base /> ).
• Word break opportunity ( <wbr> or <wbr /> ).
• Area ( <area> or <area /> ) which defines an area inside an image map so the image can have a clickable region.

Note: HTML5 (latest version of HTML) allows you to omit the slash ( / ) at the end of self-closing tags, but including it ensures compatibility with older standards like XHTML and some tools.

This is an additional information or characteristics that you can apply to HTML elements to modify their behavior, appearance, or define certain properties. Attributes are always included in the opening tag of an HTML element and are written as name-value pairs.

The basic syntax for an HTML attribute is:

Here, attribute is the name of the attribute, and "value" is the value assigned to that attribute.

There are many attributes available for various HTML elements, here are few ones:

id Attribute

It provides a unique identifier for an HTML element. It should be unique within the entire HTML document.

"id" attribute helps you uniquely identify and control specific elements on a webpage, just like how each student's ID number helps identify them uniquely in a school.

class Attribute

Used to assign one or more class names to an HTML element. It also helps you organize and style different parts of a webpage by grouping them together.

Here is the syntax for class attribute:

Suppose you want to style multiple paragraphs with the same font and color. Instead of writing the same CSS styles for each paragraph individually, you can assign a common class to all those paragraphs and define the styles for that class in your CSS file. Example:

Note : The "id" attribute and the "class" attribute in HTML serve similar purposes in that they both allow you to uniquely identify elements on a webpage. However, there are key differences between the two:

• Use the "id" attribute when you need to uniquely identify a single element.
• Use the "class" attribute when you want to group multiple elements together and apply styling or functionality to them collectively.

While both attributes can be used for styling, the "id" attribute is more suitable for unique styling, while the "class" attribute is ideal for applying consistent styles to multiple elements.

src (source) Attribute

It specifies the source URL of an image to be displayed. Example:

Note : The alt attribute is used to provide alternative text for an image if the image fails to load. It serves as a descriptive text that is displayed in place of the image, helping users understand the content or purpose of the image even when it's not visible.

href Attribute (for links)

It specifies the URL that the hyperlink points to. Example:

width and height Attribute (for images)

It determines the width and height of an image in pixels. Example:

style Attribute

Allows you to apply inline CSS styles to an HTML element. Example:

disabled Attribute (for form elements)

Allows you to disable user interaction with form element. Example:

type Attribute (for form element and list items)

You can use the type attribute with the <ol> tag to change the numbering style. Example:

Also, you can use type attribute to specify the input type of form element. Say you want to notify the browser that this input is for password, use the code below

name attribute (for form element)

The name attribute provides a unique identifier for each form field. When the form is submitted to the server, the data entered into each field is sent with the corresponding name as a key-value pair. The code snippet below shows that you want the server to identify this input as email.

Note : Understanding and using attributes effectively is essential for controlling the appearance and behavior of elements in your HTML documents.

You may need to integrate various types of media content into web pages, such as images, audio, and video. These media elements enhance the user experience by making web content more engaging and dynamic.

Here are the different types of multimedia you can use in HTML:

Images are the most common type of multimedia in HTML. You can add images to a web page using the <img> tag. Example:

In the above example, src specifies the source URL of the image, alt provides alternative text for accessibility and SEO, and width and height are optional attributes to set the dimensions of the image.

You can embed audio files directly into a web page using the <audio> tag. This allows you to play audio clips, music, or other sound recordings. Example:

In the above example, controls provides play, pause, and volume controls for the user, src specifies the source URL of the audio file, while type specifies the MIME (Multipurpose Internet Mail Extensions) type of the audio file.

The <video> tag is used to embed video files into a web page. This allows you to play videos within the content. Example:

In the above example, controls provides play, pause, and volume controls for the user, width and height specifies the dimensions of the video, src specifies the source URL of the video file, while type specifies the MIME type of the video file.

<iframe> allows you to display content from a different source or page inside a frame on your webpage. This can be useful for embedding videos, maps, web pages, or other external content. Example using <iframe> to embed a video from YouTube:

In the above code snippet, src attribute specifies the URL of the page or content you want to embed. Sizes are controlled using the width and height attributes. title attribute provides a description for the content, which is important for accessibility.

The frameborder attribute controls whether the iframe has a border (0 for no border, 1 for a border), while the allowfullscreen attribute allows the video to be played in full-screen mode.

Note : Replace "VIDEO_ID" with the ID of the YouTube video you want to embed.

• Follow proper HTML document structure:
• Start your HTML document with a <!DOCTYPE html> declaration to ensure browser compatibility and standards compliance.
• Always include the <html> , <head> , and <body> tags in your document.
• Use the <meta charset="UTF-8"> tag to specify the character encoding of your document.
• Define the language of your document using the language ( <html lang="en"> ) attribute.
• Include a descriptive title ( <title> ) tag within the head ( <head> ) section to provide context for the page.

2. Use semantic HTML element:

• Utilize semantic HTML elements like <header> , <nav> , <main> , <section> , <article> , <aside> , and <footer> to provide clarity and structure to your content. Semantic elements improve accessibility, SEO, and maintainability of your code.

3. Comment your code:

• Use comments <!-- --> to document your HTML code, explaining its purpose and functionality. Comments improve code readability and facilitate collaboration among developers.

4. Structure your content with proper tags:

• Use heading tags <h1> to <h6> for defining the hierarchy of your content.
• Utilize paragraph tags <p> to separate blocks of text into distinct paragraphs.
• Employ lists ( <ul> , <ol> , <li> ) to organize and structure content in a hierarchical manner.

5. Group elements with <div> and <span> sparingly:

• Use <div> and <span> tags as needed to group and style elements, but avoid excessive nesting and over-reliance on these elements. Prefer more semantic alternatives where appropriate.

6. Do not overuse line breaks ( <br> ):

• While <br> tags can be useful for simple line breaks, avoid overusing them for layout purposes. Instead, use CSS and block-level elements for more complex layouts to maintain better code readability and maintainability.

7. Always use alternative text for images ( alt attribute):

• Always include descriptive alternative text using the alt attribute for images ( <img> tags). This improves accessibility for users with visual impairments and ensures that content remains understandable even if images fail to load.

8. Optimize forms for user experience (UX):

• Include meaningful name attributes for form elements to identify and process data accurately on the server.
• Utilize appropriate input types ( type attribute) for form fields to enhance user experience and ensure data validation.
• Use the placeholder attribute to provide hints or expected input for form fields.

9. Ensure compatibility with older browsers:

• Your code should undergo compatibility testing across different browsers and devices to ensure consistent rendering and functionality.
• Include appropriate fallbacks for newer HTML features or attributes, this will help maintain compatibility with older browsers.

10. Stay updated with HTML standards:

• Keep yourself updated with the latest HTML standards and best practices to leverage new features, improve performance, and enhance the user experience of your web applications.

By adhering to these best practices, you can create well-structured, accessible, and maintainable HTML code that contributes to the overall quality and usability of your web projects.

If you have read, enjoyed, and desire more of this piece, feel free to reach out to me on X and LinkedIn for further collaboration.

Frontend Developer and Technical Writer

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

Fun HTML Activities for Beginners

Have you ever wanted to build your own website? Today we’re going to show you some fun HTML activities for beginners to help you get a better understanding of HTML coding and get you started building a site of your very own!

These days, there are lots of cool apps out there that make building a simple website quick and easy. But if you want to build something really cool and unique, knowing how to code in HTML is super important!

Learning HTML is important because the internet was created on and continues to rely heavily on HTML code. Automated WYSIWIG (What you See is What You Get) website editors are helpful but they have their limitations. Fortunately, many automated website editors also have the ability to also use custom HTML code. So, if you want more control of your website, learning how to code HTML for yourself is key!

Find out how to build web pages with HTML and CSS in our award-winning online class, Build Your Web , designed by Google, Stanford, and MIT professionals, and led live by an expert.

Discover HTML activities for beginners with this tutorial for kids

Learning HTML sometimes involves a lot of trial and error. Today’s activities will give you a chance to:

• experiment and make mistakes in a safe environment
• explore some key HTML concepts

Here are a few fun activities you can try to get your feet wet in the world of HTML coding!

1. Make your first webpage using HTML!

The first thing you need to know is that websites are built using a coding language called HTML. HTML is a coding language that uses tags. Tags are kind of like boxes. There are lots of kinds of boxes that have different “attributes” like color or size and different boxes can be used to hold different things. Some boxes are even used to hold other boxes. When using boxes to hold things in the real world, it’s important to have a bottom and a cover for the box so it works properly and so that things inside the boxes don’t spill out. HTML tags are the same way.

In this first activity we will customize a pre-built web page to make your first web page! To customize this web page and make it your own, we will be customizing an < h1 > tag and a < p > tag. An < h1 > tag is for making a large heading or title section on your page and the < p > tag is for making paragraphs.

Before experimenting with the tags, keep in mind that every tag needs an opening tag and a closing tag. The opening tag is like the top of a box and the closing tag is like the bottom. The opening and closing tags keep everything contained just like the lid and bottom of a box.

For example, the large heading tag starts like this < h > and ends like this </ h >.

Do you see the “/”? This tells the computer that we are closing the heading tag.

Now that you have the basics, click over to this page and start customizing.

• Start by changing the words inside the < h1 > tag. You can put something like, “Welcome to my first web page!”
• Then, try changing the text in the < p > tag right below your heading. Write a paragraph sharing your favorite outdoor activity. :)
• When you’re ready to test your web page, hit the big green button that says “Run”.

• Be very careful with the opening and closing tags. If you accidentally erase a “<” or the “/” it may make the page render funny. You have to be very precise with your typing.
• HTML doesn’t work the same as a typical text editor like Microsoft Word or Apple Pages or Google Docs. If you press the “Return” button on your keyboard to get a new line, the web browser won’t do as you expect. If you’d like to add a new line after a sentence, you will need to use a line break tag. < br >

So for example if you type this:

The page will render like this:

Hello, I’m Ray. I like to play lacrosse. To render properly, you’ll want to use the line break tag < br > like this:

This will work correctly, too.

2. Dress Up Your Text

In this activity you’ll learn how to make your words in your paragraph stand out by making words bold, or italic , or underlined.

To do this, you will use use the following tags:

< b > for bold text

< i > for italic text

< u > for underlined text

For example:

Will render like this:

Hello! My name is Ray and I like to play lacrosse .

For this activity, you can continue customizing your webpage from the previous activity or click here to start a new webpage :

• Remember, whenever you use an HTML tag, don’t forget to use a closing tag to let the computer know when you want the text effect to stop.
• You can also NEST tags. For example, what if you wanted some text to be both bold AND italic ? You can insert a tag, followed by another tag, followed by the text you want to decorate, followed by the closing tags like this:

The above code will render like this:

The following text will be both bold and italic .

3. Adding links to your page.

No webpage would be complete without links to other pages, right?! So let’s explore creating links.

To create a tag, we will need to use the anchor tag < a >.

Until now, we have only been using simple container tags. A box is a type of container. The tags we have been using so far have contained text. The anchor tag < a > is also a container tag but it is special because it is the first tag that we have encountered so far that has attributes . Attributes can change the personality or actions that can be applied to and by a tag.

The attributes we will be playing with for the anchor tag are href and target.

href stands for “Hypertext REFerence”. We can use the href attribute to reference another location in the webpage or another webpage.

target is used to specify where the href will be displayed.

Attributes are similar to variables and you can set their value using an equal sign “=”.

As an example:

This code will create a link to the USA Lacrosse website that looks like this:

USA Lacrosse

The target value "_blank" tells the web browser to open this link in a new browser window.

For this activity, you can continue customizing your webpage from the previous activity or click here to start a new webpage . Copy the code example above, paste it into your HTML code and change the href attribute to your favorite website. Then change the text inside the < a > tags the same way you changed the text in the < h1 > and < p > tags.

• Be careful with the " symbols. Each attribute should have two. If you forget one, the web browser will get confused.
• Also remember to make sure you have matching < and > brackets for all your tags.

4. Exploring RGB Hex Colors

In this activity you’ll learn how to change colors in HTML using RGB Hexadecimal numbers.

Normally, we count from 0-10 and then move on to 11, 12, 13, 14, etc. In hexadecimal, the numbers go from 0 to 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

So for example, A in hex is the same as 10 in decimal. F in hex is the same as 15 in decimal.

Hexadecimal is useful because it allows us to express the same numerical value with fewer digits or characters. 15 in decimal requires 2 digits while saying the same number with “F” uses only one digit.

HTML uses hex numbers to give you very specific control of your colors. Lots of other programs like Adobe Photoshop and other graphics and video programs use hex numbers for colors as well, so learning hex colors is a very useful skill.

You may be wondering, “What is ‘RGB’? What does that mean?”

RGB stands for Red Green Blue. The first two characters in a six character RGB code give the amount of red. The second two give the amount of green. The last two characters give the amount of blue. So if you have the color code FF0000, that is true red. 00FF00 is all green. 0000FF is all blue.

FFFFFF means all the reds, all the greens, and all the blues, which makes white.

000000 means no reds, no greens, and no blues, which makes black.

You can create all kinds of combinations with the numbers to get a very specific color.

Ready to try playing around with RGB hexadecimal colors? Try it here.

• Be careful not to get confused with the color attribute code and the label. The numbers you want to change are the numbers connected to this code: “background-color:#ff0000;”
• Hit the green “Run” button to run your code
• You can reload the page if you mess up and want to start over

5. Adding color to your text

Now that you know how colors are handled in HTML, let's add some more fun and personality to your plain text. Before, we started off by playing around with HEX color codes. These are great if you want complete control over your color choices. But for your convenience, you can ALSO use CSS (Cascading Style Sheet) color keywords to use “pre-mixed” colors. For a complete list of CSS Color Keywords, check out this link .

For most HTML tags, you can use the style attribute to control different tag properties such as color, size, font, font decoration, etc. In fact, this is the PREFERRED way to style your HTML code because it gives you much more flexibility when you decide you want to give your website a new look. In this activity, we will focus on the style attribute to control the color of the text in a heading and a couple paragraphs.

The style attribute can take several “key/value pair” values. The key is the property you want to change and the value tells the browser how to change that property.

This bit of code will render a small heading like this:

Do you see how the key/value pair is entered inside the "  " marks? The key is color and the value is red.They are separated by a “:”. If you wanted to add another property to change, you can separate the key/values with a semi-colon “;” like this:

This bit of code will render like this:

Ready to give it a try? Click this link and try changing the colors on the < h3 > heading and the two < p > paragraphs.

If you’d like to play around with more text-decoration properties, you can see more options here .

And here are some other ways you can make your text bold or italic.

Get started with HTML activities for beginners

We hope you enjoyed creating your first webpage with HTML! You now know how tags work, how to create headings and paragraphs, how to make your text fancy, and how to change colors. Want to learn more? Check out our tutorial for learning HTML . And join our award-winning live online, small group Build Your Web class , designed by professionals from Google, Stanford, and MIT.

Written by Ray Regno, who earned his B.S. in Computer Science at the University of California San Diego in 2003. Only two years after graduation, Ray left his career as a software engineer to pursue his true passion: inspiring and educating others. For almost two decades Ray has taught students of all ages a wide variety of topics and disciplines including coding, fitness, music, automotive repair, and leadership development.

You Might Also Like...

HTML for Kids: Get Started Guide

Java Tutorial for Beginners

• ▼HTML CSS Exercises, Practice, Solution
• Introduction
• HTML Basic Exercises
• HTML and CSS Exercises
• CSS Properties Exercises
• ▼HTML-CSS Practical Exercises
• HTML-CSS Practical Exercise Part-I
• HTML-CSS Practical Exercise Part-II
• HTML-CSS Practical Exercise Part-III
• More to Come ...

HTML CSS Exercise, Practice and Solution

Sharpen your skills with these html css exercises from w3resource.

Alongside studying HTML and CSS tutorials from w3resource, you need to practice HTML and CSS extensively to hone your Frontend Development skills. Here is a list of exercises we published till now. Subscribe to our RSS feed for more exercises.

HTML Basic Exercises [HTML Tags and their Attributes, Hundreds of exercises]

HTML and CSS [34 exercises]

CSS Properties Exercises [166 exercises]

HTML-CSS Practical Exercise Part-I [15 exercises with solution]

HTML-CSS Practical Exercise Part-II [16-30 exercises with solution]

HTML-CSS Practical Exercise Part-III [31-45 exercises with solution]

See the Pen html css common editor by w3resource ( @w3resource ) on CodePen .

• Weekly Trends and Language Statistics

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

updated Apr 17, 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 then – luckily.

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, you can turn your pure-HTML pages into stunning, modern websites with CSS. And it’s super easy to learn, too!

Here’s how it works:

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:

• Backgrounds
• Fonts and text styling
• Spacings (paddings, margins)
• CSS animations
• Responsiveness (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 build, the more confident you will feel in your skills.

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 2023 Web Development Bootcamp

One of my most recent favorites, The Complete 2023 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

There you go!

When it comes to learning HTML and CSS, practice really makes perfect. I hope you found a few inspirational ideas here to start building your next project right away.

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.

HTML and CSS are easy to learn. You can use them to create really cool, fun projects – even if you are new to coding.

Try these beginner-level HTML and CSS project ideas to improve your front-end web development skills starting now. Do your best to build them without following tutorials.

Remember to add your projects to your portfolio website, too.

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 . I’ll see you there!

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.

If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

To log in and use all the features of Khan Academy, please enable JavaScript in your browser.

Unit 2: Intro to HTML/CSS: Making webpages

About this unit.

Learn how to use HTML and CSS to make webpages. HTML is the markup language that you surround content with, to tell browsers about headings, lists, tables, and more. CSS is the stylesheet language that you style the page with, to tell browsers to change the color, font, layout, and more.

Intro to HTML

• Welcome to the web! (Opens a modal)
• HTML basics (Opens a modal)
• Quick tip: HTML tags (Opens a modal)
• Challenge: Write a Poem (Opens a modal)
• HTML: Text emphasis (Opens a modal)
• Challenge: You can learn text tags (Opens a modal)
• HTML: Lists (Opens a modal)
• Challenge: Wishlist (Opens a modal)
• HTML: Images (Opens a modal)
• Challenge: A picture-perfect trip (Opens a modal)

Intro to CSS

• CSS Basics (Opens a modal)
• Quick tip: Selecting by tag name (Opens a modal)
• Challenge: Colorful creature (Opens a modal)
• CSS: Selecting by id (Opens a modal)
• Challenge: Seasonal ids (Opens a modal)
• CSS: Selecting by class (Opens a modal)
• Challenge: Apples and bananas classes (Opens a modal)
• Project: Travel webpage (Opens a modal)
• Using simple CSS selectors 4 questions Practice

More HTML tags

• HTML links (Opens a modal)
• Challenge: Links for learning (Opens a modal)
• HTML internal links (Opens a modal)
• Challenge: Jump around (Opens a modal)
• HTML tables (Opens a modal)
• Challenge: The dinner table (Opens a modal)
• HTML comments (Opens a modal)
• Project: Recipe book (Opens a modal)

CSS text properties

• CSS Zen Garden (Opens a modal)
• CSS font-family property (Opens a modal)
• Challenge: Fancy font families (Opens a modal)
• CSS font-size property (Opens a modal)
• Challenge: Great big font sizes (Opens a modal)
• CSS font styles and shorthand (Opens a modal)
• Challenge: Famous font formats (Opens a modal)
• More CSS text properties (Opens a modal)
• CSS inheritance (Opens a modal)
• Project: Blog (Opens a modal)
• Using CSS text properties 4 questions Practice

Web development tools

• Using the browser developer tools (Opens a modal)
• Developing webpages outside of Khan Academy (Opens a modal)
• Hosting your website on a server (Opens a modal)
• Hosting your website on Github (Opens a modal)
• CSS grouping elements (Opens a modal)
• Challenge: Group the groupers (Opens a modal)
• CSS width, height, and overflow (Opens a modal)
• Challenge: The overflowing ocean (Opens a modal)
• CSS box model (Opens a modal)
• Challenge: The boxer model (Opens a modal)
• CSS position (Opens a modal)
• Challenge: Position planet (Opens a modal)
• CSS in the wild: Google Maps (Opens a modal)
• CSS floating elements (Opens a modal)
• Challenge: Floating clouds (Opens a modal)
• Planning your webpage (Opens a modal)
• Project: Event invite (Opens a modal)
• Using CSS layout properties 5 questions Practice

More CSS selectors

• Using multiple CSS classes (Opens a modal)
• Challenge: A classy gallery (Opens a modal)
• Combining CSS class and element selectors (Opens a modal)
• Challenge: Classes of elements (Opens a modal)
• CSS descendant selectors (Opens a modal)
• Challenge: Descendants of Khan (Opens a modal)
• Grouping CSS selectors (Opens a modal)
• CSS dynamic pseudo-classes (Opens a modal)
• Challenge: Grouped animals (Opens a modal)
• CSS specificity (Opens a modal)
• CSS specificity rules 4 questions Practice

Other ways to embed CSS

• Using inline CSS styles (Opens a modal)
• Using external stylesheets (Opens a modal)

Further learning

• Webpage design (Opens a modal)
• HTML validation (Opens a modal)
• What to learn next (Opens a modal)
• Validating HTML 4 questions Practice

Popular Tutorials

Learn python interactively, popular examples.

HTML (HyperText Markup Language) is a language used for creating webpages which is the fundamental building block of the Web.

One thing to remember about HTML is that it is a markup language with no programming constructs. Instead, the language provides us with a structure to build web pages.

Using HTML, we can define web page elements such as paragraphs, headings, links, and images. Our HTML tutorials will teach you everything you need to know about HTML5 (modern HTML) step-by-step.

• Introduction

HTML Basics

• Inline Elements
• Head Elements

Semantic HTML

• HTML, CSS & JS
• Graphics & Media
• Why learn HTML?

How to learn HTML?

Html introduction.

• What is HTML?
• Web Design Basics
• HTML Paragraphs
• HTML Headings
• HTML Comments
• HTML Unordered List
• HTML Ordered List
• HTML Description List
• HTML Line Break
• HTML Pre Tag
• HTML Horizontal Line

HTML Inline

• HTML Block and Inline Elements
• HTML Images
• HTML Italic
• HTML Superscript and Subscript
• HTML Formatting
• HTML Meta Elements
• HTML Favicon
• HTML Form Elements
• HTML Form Action
• HTML Semantic HTML
• HTML div Tag
• HTML aside Tag
• HTML section Tag
• HTML footer Tag
• HTML main Tag
• HTML figure and figcaption
• HTML Accessibility

HTML, CSS & JavaScript

• HTML Layout
• HTML Responsive Web Design
• HTML and JavaScript

HTML Graphics & Media

• HTML Canvas

HTML Miscellaneous

• HTML Iframes
• HTML Entities
• HTML Quotations
• HTML File Paths
• HTML Emojis
• HTML Symbols
• HTML is the standard markup language for creating the structure of web pages.
• We can display web page content like paragraphs, lists, images, and links in a structured way using HTML.
• We can only define the structure of a website using HTML. For appearance (color, layout, design), we use CSS. Similarly, JavaScript is used for adding functionality to a web page.
• HTML5 is the latest and major HTML version.

Why Learn HTML?

• HTML is the backbone of all websites; we can use it to create the structure and layout of a webpage. In addition, HTML will allow you to design your own websites and edit existing ones.
• It is a fundamental skill for web development and often a necessary step before learning other languages like CSS and JavaScript. Plus, it's a well-established language with tons of resources available for learning and troubleshooting.
• With HTML, you can better optimize your website's SEO and improve your marketing.
• HTML is easy to learn and use, making it a perfect choice for beginners.
• If you're looking for career opportunities, HTML can open doors in web development, web design, front-end development, and user experience design.
• Programiz HTML Tutorials - Learn everything you need to know about HTML5 step-by-step.
• Mozilla Documentation - Learn modern HTML in-depth (can be a little hard to follow).
• FreeCodeCamp HTML Course - Learn HTML interactively for FREE.

• 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

Top 10 Projects For Beginners To Practice HTML and CSS Skills

Learning to code is always exciting and fun for everyone and when it comes to stepping into the programming world most of the people start with the easiest thing HTML and CSS . Every beginner’s coding journey in frontend starts with these two basic building blocks and you need to be creative when it comes to designing a beautiful application.

Initially, beginners enjoy making buttons, adding the links, adding images, working with layout and a lot of cool stuff in web designing but when it comes to making a project using only HTML and CSS they get stuck and confuse about what they should make to practice all these stuff. Afterall their knowledge is just limited to HTML and CSS. No matter what after learning everything at some point you will realize that making a project is important to practice HTML and CSS skills. You need to check how HTML and CSS work together to design a beautiful frontend application. So the question is what are some beginner-friendly projects you can build to practice everything you have learned…Let’s discuss that.

Table of Content

1. A Tribute Page

2. webpage including form, 3. parallax website, 4. landing page, 5. restaurant website, 6. an event or conference webpage, 7. music store page, 8. photography site, 9. personal portfolio, 10. technical documentation.

The simplest website you can make as a beginner is a tribute page of someone you admire in your life. It requires only basic knowledge of HTML and CSS. Make a webpage writing about that person adding his/her image. On the top of the webpage, add the image and name of the person and below that give layout for the rest of the details. You can use paragraphs, lists, links, images with CSS to give it a descent look. Add a suitable background color and font style on your webpage. Most of the parts you can make using HTML but to give it a better look using a bit of CSS. Take help from the link given below.

• My Tribute Page

Forms are always an essential part of any project and you will be working with a lot of forms in most of the applications so why not practice it earlier and test your knowledge. Once you get familiar with the input field or basic tags in HTML to create a form make a project using all those tags. How to use a text field, checkbox, radio button, date, and other important elements in a single form. You will be learning how to give a proper structure to a webpage while creating a form. Knowledge of HTML / HTML5 is good enough but you can use a bit of CSS to make the project look better. Take help from the links given below.

• Survey Form

A parallax website includes fixed images in the background that you can keep in place and you can scroll down the page to see different parts of the image. With basic knowledge of HTML and CSS, you can give a parallax effect to a website. Using the parallax effect in web designing is really popular and it gives beautiful look and feels to the webpage. Give it a try and divide the whole page into three to four different sections. Set 3-4 background images, align the text for different sections, set margin and padding, add background-position and other CSS elements and properties to create a parallax effect. You can take help from the link given below.

• Parallax Website

A landing page is another good project you can make using HTML and CSS but it requires a solid knowledge of these two building blocks. You will be using lots of creativity while making a landing page. You will practice how to add footer and header, create columns, align-items, divide the sections and a lot of things. You will have to use CSS carefully keeping in mind that different elements do not overlap with each other. You will also take care of color combinations, padding, margin, space between sections, paragraphs, and boxes. Color combinations should go well with each other for different sections or backgrounds.

Showcase your solid knowledge of HTML and CSS creating a beautiful webpage for a restaurant. Making a layout for a restaurant will be a bit complicated than previous project examples. You will be aligning the different food items and drinks using a CSS layout grid. You will be adding prices, images and you need to give it a beautiful look and feel as well using the proper combination of colors, font-style and images. You can add pictures gallery for different food items, you can also add sliding images for a better look. Add links for redirection to internal pages. Make it responsive setting a viewport, using media queries and grid. You can take help from the link given below.

• Restaurant Website

Once you’ve mastered these projects and are ready to expand your knowledge, consider exploring full stack web development . This path combines frontend skills with backend technologies like Node.js, databases, and server management. This Full Stack Development course provides hands-on projects, expert guidance, and a structured learning path to help you become proficient in both frontend and backend web development.

You can make a static page holding an event or conference. People who are interested in attending the conference create a register button for them. Mention different links for speaker, venue and schedule at the top in the header section. Describe the purpose of the conference or the category of people who can get benefit from this conference. Add an introduction and images of the speaker, venue detail and the main purpose of the conference on your webpage. Divide the page into sections, add header and footer showcasing the menu. Use proper background color that can go well with each other for various sections. Choose a descent font style and font color that matches the theme of your web page. It requires HTML/HTML5 and CSS knowledge in depth. You can take help from the link given below.

• Event webpage

If you are a music lover you can make a webpage for it. It requires HTML5 CSS3 knowledge. Add a suitable background image describing the purpose or what the page is all about. In the header section add different menus. Add buttons, links, images and some description about the collection of songs available. At the bottom mention the links for shopping, store, career or contact details. You can also add other features on your webpages such as a trial option, gift cards or subscription. Make it responsive setting viewport or using media queries and grid. You can take help from the link given below.

If you have in-depth knowledge of HTML5 and CSS3, you can make a one-page responsive photography site. Use flexbox and media queries for responsiveness. Add the company name with an image (related to photography) on the top (landing page). Below that showcase your work adding multiple images. Mention the contact detail of the photographer at the bottom (footer). Add a button to view your work. This button will directly bring you down to the images section. You need to take care of the margin, padding, color combination, font-size, font-style, image size and styling of a button. You can take help from the link given below.

• Image gallery

With knowledge of HTML5 and CSS3, you can also create your portfolio. Showcase your work samples and skills in your portfolio with your name and pictures. You can also add your CV there and host your complete portfolio on GitHub account. In your header section mention some menus like about, contact, work or services. At the top add one of your images and introduce yourself there. Below that add some work samples and at last (footer) add contact information or social media account. You can take help from the links given below.

• Simple portfolio
• Portfolio gallery

If you have a little bit of knowledge of Javascript then you can create a webpage of technical documentation. It requires knowledge of HTML, CSS and basic javascript. Divide the whole webpage into two sections. The left side creates a menu with all the topics listed from top to bottom. Right side you need to mention the documentation or description for the topics. The idea is once you click on one of the topics in the left section it should load the content on the right. For click, you can use either javascript or CSS bookmark option. You don’t need to make it too fancy, just give it a simple and descent look, that looks good for technical documentation. You can take help from the links given below.

• Technical Documentation

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples .

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples .

Please Login to comment...

Similar reads.

• Web Technologies
• Web-Projects

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

HTML Projects for Beginners: 10 Easy Starter Ideas

Updated: August 01, 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.

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

How to Add & Change Background Color in HTML

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]

HTML Dialog: How to Create a Dialog Box in HTML

How to Create a Landing Page in HTML & CSS [+ 15 Templates]

HTML Audio Tag: How to Add Audio to Your Website

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

15 Top HTML Projects For Beginners [With Source Code]

Introduction, top html project ideas,  best html projects for beginners, 1. a tribute page, 2. a questionnaire, 3. technical documentation, 4. a landing page, 5. the event or conference web page, intermediate html projects with source code, 6. a website with a parallax effect,  7. your own portfolio, 8. restaurant’s official webpage, 9. music shop page, 10. a photography-related website, advanced html projects with source code, 11. whatsapp web clone, 12. clone of the bbc news website, 13. clone of the popular video-sharing site youtube, 14. netflix clone on the web, 15. the nike website clone, q1: why do we use html in projects, q2: where can i make html projects, q3: where can i run html code, additional resources.

As a web standard, HTML is required for web designers and developers who work on the Internet. Paragraphs, headers, hyperlinks, quotations, and pictures are all elements of HTML. Because it’s not a programming language, it doesn’t perform anything dynamic; it only helps with site structure and layout. The simplest code defines how each website component should be shown. 

Presentational instructions should be kept separate from semantic and structural markup, as advised by software best practices. Web developers cannot construct a website just using HTML. For a website to be aesthetically beautiful and effective, HTML data must be formatted using CSS or Javascript. HTML isn’t a programming language either. Looking for projects that will stand out in your portfolio? Within the following blog sections, you’ll discover various vital HTML projects for developers of all levels.

When it comes to creating your first HTML projects, it is usually an exciting and delightful experience for anybody who has even the smallest interest in computer programming. Newcomers to coding are generally curious about what type of projects they may work on to impress their employers, launch their own development firm, or impress their college peers.

Confused about your next job?

 When it comes to getting started in the coding world, most people choose to start with the most basic methods, HTML and CSS. As a result, when it comes to developing a unique application or website, you can make only static web pages because of thinking outside the box to stand out from the crowd of other developers who are also learning the same skills. In this manner, you may come up with innovative HTML projects!

You are about to embark on one of the most straightforward HTML projects you will ever do. As implied by the name, a tribute page is created to honor someone who has inspired you or to someone you adore and revere. To create a memorial page, you need to be familiar with the fundamentals of HTML. A tribute page is a web page which can be extended to many pages or sections. Make certain that the webpage’s background color is visually pleasing (use earthy tones or pastel colors).

Forms are often included on websites as part of their strategy for collecting client data. A well-designed survey form may assist you in obtaining valuable information about your target consumers, such as their age, work, location, taste and preference, and pain areas, all of which can be useful for your business. You may use this HTML project to test your abilities and knowledge to develop forms and organize a web page. 

You can create a technical documentation page if you have a working grasp of HTML, CSS, and JavaScript. The underlying concept of this project is to develop a technical documentation page where you can click on any subject on the page, and it will load the relevant material on the page. The project is a plain and easy technical documentation website; nothing particularly exciting about it. You must split the website into two sections to complete this HTML homework. You can use backend and fetch data from DB and make it full fledge project

The creation of a landing page demands a basic understanding of HTML and CSS. Making a landing page requires a lot of ingenuity. You will learn how to build a footer and header, construct columns, align objects, and separate sections. You must utilize CSS with caution so that elements do not overlap. You will also deal with color combinations, padding, margins, section, paragraph, and box spacing. Colors should blend effectively in various areas or backgrounds.

Once again, this is a simple project with which you may explore. It will entail the creation of a static page that will present the specifics of an event (conference, webinar, product launch, etc.). This project will need the use of both HTML and CSS.

To make the page seem more organized, break it into smaller sections. Selecting the appropriate font type, font color, and background color for each website portion is essential. Also, be sure to include a registration button to sign up for individuals interested in attending the event.

Rather than having moving graphics in the background, a parallax website has fixed images in the backdrop that you may stay in place while scrolling down the page to view various areas of the image. A newbie well-versed in HTML ideas may create a parallax website in a single day! An essential parallax website has a fixed picture in the backdrop and enables you to scroll up and down the page to view the various elements of that image from different perspectives. Divide the whole page into three to four separate pieces and see how it works for you. Create a parallax effect by using three or four background pictures, aligning the text for separate parts, adjusting margins and padding, and using background position and other CSS elements and attributes. 

Source Code: Parallax Website   

Working knowledge of HTML5 and CSS3 is required to construct a personal portfolio page on your website. Your web page will include the normal information found in a job portfolio, such as your name and picture, projects, special talents, and hobbies. You will complete this project to get credit for it. Additionally, you may include your CV and store the whole portfolio on GitHub using your GitHub account. GitHub accounts are free to use. You may provide a brief description of your professional career and hobbies at the top of the page, along with your picture, in the header section. You might provide a few examples of your work below this description. Finally, you may provide links to your social network profiles in the footer area. 

Source Code: Portfolio Website

To create a successful restaurant website, you must pay close attention to the use of attractive layouts, clean font styles, and an eye-catching color palette. Adding a picture gallery with rotating photographs of various food products to your website will make it even more appealing to visitors. You may also include relevant links on your website to assist your viewers in navigating across the site more effectively. 

Source Code: Restaurant Website

If you are a music enthusiast, you may create a website dedicated to your passion. A music shop website is an excellent place for music enthusiasts to try out new ideas. However, to construct this page, you must be familiar with the intricacies of HTML5 and CSS3. It is necessary to add an acceptable background picture to the music page and a brief explanation of what you will discover on this page before proceeding with the rest of the process. The top area of the website will have many menus that will list songs depending on various characteristics such as genre, year, performer, album, and so forth. 

Source Code: Music Store Website

The concept is to design a responsive one-page photography website. To create this photographic website, you will need to work with HTML5 and CSS3 once again, as you did before. You must pay attention to the margins, padding, colour combinations, font size, font-style, picture size, and button styling while designing a button. 

At this level, the projects will put practically all of the talents you’ve acquired over your career to the test. When compared to amateurs, HTML professionals often have an easier time generating knowledge, but there is still a lot to learn. These tasks are more complicated and require a longer period to accomplish. As a result, you will spend most of your time working on projects requiring full-stack software development and deployment after getting comfortable with the typical web development environment.

In terms of functionality, you will create an electronic program that functions just like a messaging app, such as Whatsapp. While you may personalize it to your liking, you should include text-based communication technology and data administration foundations.

The project story revolves around creating a website that performs in the same way as the original BBC News website. It would be best to take screenshots of the website’s interface, parts and features, and interactive components. There’s even an opportunity for you to express your individuality via the use of color.

The Youtube clone project is largely used to assess participants’ HTML, CSS, and Responsive design abilities. Users should establish channels and post videos, and these functionalities should be available. In addition, be sure to have text sections that allow for comments, as well as a search engine, on your website.

In this project, you will create a visually identical interface to the original while also including interactive components. In addition, you will need to include a search engine with the required criteria. Finally, a separate organization division should oversee the different payment plans and payment choices.

This project makes use of fundamental frameworks. You should include a search engine with filters in the clone and a marketing ambience that matches the original. Make sure you include a secure payment area that keeps consumers’ credit card and bank account information safe. Aesthetics are just as important as functionality for a business structure.

The learning doesn’t stop there. We reviewed some simple HTML project ideas that you may try out in this post, but the learning doesn’t stop there. The possibilities are endless: you may work on various other interactive projects and add complexity to them, merge any of these projects into a single project, and experiment with various tags. Building responsive real-world websites with HTML5 and CSS3 is a wonderful course to supplement your HTML knowledge and abilities. 

Ans: HTML has been utilized in front-end development for so many years that there are no alternative web development languages available on the market. However, HTML gives the Developer all the tags necessary to include anything on the website, such as a table, picture, or hyperlink, etc.

Ans: Create your first web page using Notepad or TextEditor like Sublime, atom etc by following the instructions below.

• Step 1: Open Notepad (PC) on Windows 8 or
• Open TextEdit in the first step (Mac). Next, open the Finder and go to Applications > TextEdit.
• Step 2: Compose a Small Amount of HTML.
• Step 3: Save the HTML Page
• Step 4: Open Your Browser and View the HTML Page.

Ans: The extension “. HTML” is used to store any file containing HTML code. All current browsers – including Google Chrome, Safari, and Mozilla Firefox – recognize and can read HTML files, so all you need to do is open one in your preferred Web browser.

• HTML and HTML5 Interview Questions
• Best HTML IDE
• Difference Between HTML and JavaScript
• HTML5 Features
• Top Features of HTML
• Difference Between HTML and CSS
• Difference Between HTML and XHTML
• Difference Between HTML and XML
• Difference Between HTML and HTML5
• HTML Projects

Previous Post

Top 10 devops projects with source code [2023].

• Applications

Top Applications of Artificial Intelligence

Learn HTML Code, Tags & CSS

HTML For Beginners The Easy Way: Start Learning HTML & CSS Today

Welcome! You’ve Found the Easiest Way to Learn HTML and CSS.

• 1 Welcome! You’ve Found the Easiest Way to Learn HTML and CSS.
• 2.1 What is HTML?
• 2.2 The History of HTML
• 2.3 What are Tags and Attributes?
• 2.4 HTML Editors
• 2.5 Creating Your First HTML Webpage
• 2.6 Adding Content
• 2.7 How To Close an HTML Document
• 2.8 Troubleshooting
• 3.1 Intermediate & Advanced Tutorials
• 3.2 HTML Reference Guides
• 3.3 HTML Attributes Reference Guide
• 3.4 HTML Cheat Sheet
• 3.5 The HTML.com Blog
• 3.6 The HTML.com Guide to Web Hosting
• 4 Improve Your HTML Skills

Whether you are a novice, hoping to delve into the world of web design or an experienced webmaster keen to improve your skills, we’ve got online tutorials tailored to your web design needs .

In a rush? Go straight to our tutorial and start learning HTML now!

Our absolute beginner tutorial will turn you from wannabe to webmaster in just a few hours. Unlike many other HTML tutorials, it’s a step-by-step guide – not a boring long-winded reference.

Our step-by-step guide teaches you the basics of HTML and how to build your first website. That means how to layout an HTML page, how to add text and images, how to add headings and text formatting, and how to use tables.

We’ll get you building your new website in minutes , not hours.

HTML for Absolute Beginners

While many guides on the internet attempt to teach HTML using a lot of mind-boggling theory, this tutorial will instead focus on giving you the practical skills to build your first site .

The aim is to show you ‘how’ to create your first web page without spending the entire tutorial focusing too much on the “why.”

By the end of this tutorial, you will have the know-how to create a basic website and we hope that this will inspire you to delve further into the world of HTML using our follow-on guides.

What is HTML?

Okay, so this is the only bit of mandatory theory. In order to begin to write HTML, it helps if you know what you are writing.

HTML is the language in which most websites are written . HTML is used to create pages and make them functional.

The code used to make them visually appealing is known as CSS and we shall focus on this in a later tutorial. For now, we will focus on teaching you how to build rather than design .

The History of HTML

HTML was first created by Tim Berners-Lee, Robert Cailliau, and others starting in 1989 . It stands for Hyper Text Markup Language.

Hypertext means that the document contains links that allow the reader to jump to other places in the document or to another document altogether. The latest version is known as HTML5 .

A Markup Language is a way that computers speak to each other to control how text is processed and presented. To do this HTML uses two things: tags and attributes .

What are Tags and Attributes?

Tags and attributes are the basis of HTML.

They work together but perform different functions – it is worth investing 2 minutes in differentiating the two .

What Are HTML Tags?

Tags are used to mark up the start of an HTML element and they are usually enclosed in angle brackets. An example of a tag is: <h1> .

Most tags must be opened <h1> and closed </h1> in order to function.

What are HTML Attributes?

Attributes contain additional pieces of information . Attributes take the form of an opening tag and additional info is placed inside .

An example of an attribute is:

<img src="mydog.jpg" alt="A photo of my dog.">

In this instance, the image source (src) and the alt text (alt) are attributes of the <img> tag.

Golden Rules To Remember

• The vast majority of tags must be opened ( <tag> ) and closed ( </tag> ) with the element information such as a title or text resting between the tags.
• When using multiple tags, the tags must be closed in the order in which they were opened . For example: <strong><em>This is really important!</em></strong>

HTML Editors

Now that we’ve gotten the basic theory out of the way. It’s time to learn how to build our first website .

First off, we must ensure that we have the right tools. Most important, we need an HTML editor.

There are many choices on the market. Here are a handful of the most popular:

Sublime Text 3

However, for this tutorial, we will use the Sublime Text 3 as it is free and also offers cross-platform support for Windows, Mac, and Linux users.

• Easily customizable
• Beginner-friendly
• Pleasant color schemes to choose from.
• Can’t print documents or code
• No toolbar or dashboard available.

Another common choice for HTML and other language coders is Notepad ++ . It is a tiny program to download and perform the functions you need for writing clean code.

• Distraction-free interface
• Auto-completion feature
• Plugin options for extended functionalities.
• Can be difficult to get used to for beginners
• No support for Mac.

Komodo Edit

Komodo Edit is one of two editors released by the same label. They offer a simple, open-source editor with a variety of extensions and language support .

It is free to download.

• Easy-to-grasp coding interface
• Available for Mac, Windows, and Linux
• Impressive language support.
• No autocompletion by default
• Visual settings are difficult to find and change.

What To Avoid

Your code’s front-end view varies from browser to browser – you will learn more about this with advanced CSS.

Do not use Microsoft Word or any other word processor when writing HTML code, only an HTML editor or at the very least, your machine’s built-in notepad, is suitable for the task.

Secondly, ensure that you’ve installed a number of different browsers such as Chrome and Firefox in order to preview your upcoming creation.

Creating Your First HTML Webpage

First off, you need to open your HTML editor, where you will find a clean white page on which to write your code.

From there you need to layout your page with the following tags.

Basic Construction of an HTML Page

These tags should be placed underneath each other at the top of every HTML page that you create.

<!DOCTYPE html> — This tag specifies the language you will write on the page. In this case, the language is HTML 5.

<html> — This tag signals that from here on we are going to write in HTML code.

<head> — This is where all the metadata for the page goes — stuff mostly meant for search engines and other computer programs.

<body> — This is where the content of the page goes.

Further Tags

Inside the <head> tag, there is one tag that is always included: <title> , but there are others that are just as important:

Let’s try out a basic <head> section:

Adding Content

Next, we will make <body> tag.

The HTML <body> is where we add the content which is designed for viewing by human eyes.

This includes text, images, tables, forms and everything else that we see on the internet each day.

How to Add HTML Headings To Your Web Page

In HTML, headings are written in the following elements:

As you might have guessed <h1> and <h2> should be used for the most important titles, while the remaining tags should be used for sub-headings and less important text.

Search engine bots use this order when deciphering which information is most important on a page.

Creating Your Heading

Let’s try it out. On a new line in the HTML editor, type:

<h1>Welcome to My Page</h1>

And hit save. We will save this file as “index.html” in a new folder called “my webpage.”

The Moment of Truth : Click the newly saved file and your first ever web page should open in your default browser. It may not be pretty it’s yours… all yours. *Evil laugh*

Well let’s not get carried away; we’ve still got loads of great features that we can add to your page.

How To Add Text In HTML

Adding text to our HTML page is simple using an element opened with the tag <p> which creates a new paragraph . We place all of our regular text inside the element <p> .

When we write text in HTML, we also have a number of other elements we can use to control the text or make it appear in a certain way .

Other Key Elements

They are as follows:

These tags must be opened and closed around the text in question.

Let’s try it out. On a new line in the HTML editor, type the following HTML code:

<p>Welcome to <em>my</em> brand new website. This site will be my <strong>new<strong> home on the web.</p>

Don’t forget to hit save and then refresh the page in your browser to see the results.

How To Add Links In HTML

As you may have noticed, the internet is made up of lots of links .

Almost everything you click on while surfing the web is a link takes you to another page within the website you are visiting or to an external site.

Links are included in an attribute opened by the <a> tag. This element is the first that we’ve met which uses an attribute and so it looks different to previously mentioned tags .

The Anchor Tag

The <a> (or anchor) opening tag is written in the format:

< a href =" https://blogging.com/how-to-start-a-blog/ ">Your Link Text Here </a>

The first part of the attribute points to the page that will open once the link is clicked.

Meanwhile, the second part of the attribute contains the text which will be displayed to a visitor in order to entice them to click on that link.

If you are building your own website then you will most likely host all of your pages on professional web hosting . In this case, internal links on your website will <a href=”mylinkedpage.html”>Link Title Here</a>.

Let’s Create An Anchor Tag

Let’s try it out. Make a duplicate of the code from your current index.html page. Copy / paste it into a new window in your HTML editor.

Save this new page as “page2.html” and ensure that it is saved in the same folder as your index.html page.

On page2.html add the following code:

<a href=" http://www.google.com ">Google</a>

This will create a link to Google on page 2. Hit save and return to your index.html page.

On a new line on index.html add the following code:

<a href="*folder(s)*/page2.html">Page2</a>

Ensure the folder path to the file (page2.html) is correct. Hit save and preview index.html in your browser.

If everything is correct then you will see a link which will take you to your second page . On the second page, there will be a link that will take you to google.com.

How To Add Images In HTML To Your Website

In today’s modern digital world, images are everything. The <img> tag has everything you need to display images on your site. Much like the <a> anchor element, <img> also contains an attribute.

The attribute features information for your computer regarding the source , height , width and alt text of the image.

Styling and Formats

You can also define borders and other styles around the image using the class attribute. However, we shall cover this in a later tutorial.

The file types generally used for image files online are : .jpg, .png, and (less and less) .gif.

Alt text is important to ensure that your site is ranked correctly on search sites and also for visually impaired visitors to your site.

The <img> tag normally is written as follows:

<img src="yourimage.jpg" alt="Describe the image" height="X" width="X">

Let’s try it out.

Create Your Own Image With An Alt Text

Don’t be afraid to play around with the test code – it’s a great way to have fun while learning.

Save an image (.jpg, .png, .gif format) of your choice in the same folder where you’ve saved index.html and page2.html. Call this image “testpic.jpg.”

On a new line in your HTML editor enter the following code :

<img src="testpic.jpg" alt="This is a test image" height="42" width="42">

Hit save and preview the index.html page in your browser.

How To Make an HTML List

In web design, there are 3 different types of lists which you may wish to add to your site.

Ordered List

The first is an <ol> : This is an ordered list of contents. For example:

• Another item
• Another goes here.

Inside the <ol> tag we list each item on the list inside <li> </li> tags.

For example:

Unordered List

The second type of list that you may wish to include is an <ul> unordered list. This is better known as a bullet point list and contains no numbers.

An example of this is:

Definition List

Finally, you may wish to include a definition list <dl> on your page. An example of a <dl> list is as follows:

The code used for the above is as follows:

Let’s try it out. Open index.html and on a new line, enter the following HTML:

Now hit save and check out the results in your browser. If everything worked out then it will display a bullet-pointed table displaying the information above.

How To Add Tables In HTML

Another way to keep your website looking neat and orderly is through the use of a table.

Do not use a table to layout your website . Search engines hate it and it is generally a bad idea. Just… don’t. See our CSS tutorial , instead.

This is definitely the most complicated part of this tutorial, however, learning it will certainly pay off in the long-run.

With this in mind, tables can still be a useful way to present content on your page.

What Does a Table Consist Of?

When drawing a table we must open an element with the <table> opening tag. Inside this tag, we structure the table using the table rows, <tr> , and cells, <td> .

An example of an HTML table is as follows:

This will produce a 2-row table with 3 cells in each row.

Tables can get quite complicated, so be sure to check out our special HTML tables tutorial.

However, watch out for these tags so that you can recognize them and use them as your skills develop.

Here are the tables tags presented in a table – pun totally intended.

Tables, borders, spacing are usually styled using CSS but we will cover this in a later tutorial.

Let’s Make a Table

Go to a new line on the index.html page within your text editor. Enter the following HTML code:

Hit save and preview it in your browser .

Congratulations: You did it!

How To Close an HTML Document

You’ve reached the end of our absolute beginners HTML tutorial .

The final step we need to complete is to close the <body> and <html> tags at the end of each page using the following HTML code:

In this guide, you’ve learned how to create basic HTML web pages.

You’ve also learned to add headings, text, images, links, lists and basic tables to these pages.

What’s Next?

You can now use this knowledge to create your own web pages containing these features and link them together.

We suggest that you further enhance your skills by experimenting with the code you’ve learned using different variables. You may also wish to learn about how to make your pages beautiful using CSS .

The power to create your own website is now in your hands.

Troubleshooting

In case things didn’t work out as intended, simply check your HTML code against the examples below .

Index.html troubleshooting code:

page2.html troubleshooting code:

Our Other HTML Tutorials

Our HTML tutorials teach you how to create a personal website or site for your business, without forcing you to learn unnecessary theory.

Our most popular beginner’s tutorials include:

HTML tables

These tutorials guide you through the process of creating tables for your exact needs. Tables were once the primary means by which pages were laid out.

With the adoption of CSS, this is no longer necessary. And for good reason, because this created pages that were almost impossible to maintain. But for the purpose of display tables, HTML offers all the tools you will need.

There’s a lot more to links than just moving from page to page. In this tutorial, you will learn how to navigate pages and download files .

You’ll also learn how to make your links as user-friendly as possible. Links are the core of HTML so this is important stuff.

Forms are important for marketing as well as creating web applications and more.

This detailed tutorial will guide you from the very basics to the most advanced uses of forms with CSS and JavaScript.

At one time, the font was an HTML tag and it made creating maintainable web pages a nightmare. Now we use CSS to set fonts and their attributes like weight, style, and size.

And by using CSS, you can set the look of your pages consistently with the ability to radically change them by changing just a few lines of code. This tutorial explains all.

With the use of the img tag and CSS, you can do just about anything you want.

But with HTML5, you have the addition of the picture and figure elements. Find out how to do images right with this thorough tutorial.

Intermediate & Advanced Tutorials

We’ve plenty of topics for intermediate and advanced HTML learners, too:

CSS tutorials

CCS, Cascading Style Sheets, allow you to design and ornament your web pages.

This tutorial takes you from the beginning to being fluent in CSS so that you can create complex pages that are easily maintained.

JavaScript is arguably the most important web coding language after HTML. Most websites you visit employ at least a little bit of JavaScript coding.

Along with HTML and CSS, JavaScript makes the trinity of webpage design and construction .

This tutorial assumes you know nothing and gets you going with this essential programming language. It even introduces you to advanced subjects like AJAX and jQuery.

Video: This 3 minute crash course is a great way to start understanding HTML5.

HTML5 has revolutionized webpage markup with things like semantic and multimedia elements . Find out all about the new goodies that are waiting to be explored.

Semantic Markup

This tutorial introduces you to semantic markup that allows you to construct pages so that their structure reveals their content.

This is especially useful as search engines become more and more advanced — allowing them to find users the right information they are looking for.

Logical tags

You may have noticed that few people use the i tag for italics and instead use the em tag.

This is because the i tag is just a formatting tag and thus should really be accomplished with CSS. The em has meaning: the text is emphasized.

Logical tags like em and cite are important in the same way as semantic markup. Find more in this brief discussion.

HTML Reference Guides

Meanwhile, our detailed HTML tags reference lets you find out more about every single HTML tag from <a> to <xmp> .

Each tag reference includes background and examples , which show how to use the tag in question. It’s perfect for when you want to troubleshoot problems while coding HTML.

Below are some of the most common tags — used by nearly every website you encounter:

A tag that puts a button onto a webpage. It must be combined with JavaScript in order to do anything. This page provides all the details you need.

Links are far more powerful than new HTML coders realize. Find out all you need to know to make the greatest use of the a tag.

The link tag can be confusing because it is easy to mix up with “links” (defined with the a tag).

But link is a very powerful tag that allows you to link an HTML document to an outside resource like a CSS file. Find out all you need to know here.

Image Manipulation

Although HTML makes displaying images easy with the img tag, by using some JavaScript, you can change images on the fly .

This tutorial shows you how.

Character Codes

Another great aspect of HTML is its ability to use non-keyboard keys like ® ( &amp;reg; ) and © ( &amp;copy; ).

This reference provides you with the information you need to make full use of these symbols .

Headings are a way to make text stand out by breaking up the page.

Paragraphs determine line spacing.

Create italics text just like in a word processor.

Bold text emphasizes keywords.

The anchor tag is most commonly used to create links in combination with the href attribute.

Unnumbered lists of bullet points use the Unordered List tag.

Each line on a list is enclosed by a List Item tag.

Blockquote tags are used to enclose quotations from people. This tag helps to differentiate the quote from the text around it.

Horizontal Rule

A horizontal rule is a straight line commonly used for dividing areas of a webpage.

Learn the image tag to find out how to code pictures into your page.

The Division tag defines specific layout styles within CSS.

HTML Attributes Reference Guide

The HTML attributes section is designed to allow you to get up close and personal with the HTML attributes that you know and love while introducing you to some advanced attributes along the way.

Our most popular attributes include :

<img src=""> — Learn how to pick the image to display.

<img alt="assignments for html"> — This sets the name of the image for those who can’t see the image for one reason or another.

<a target=""> – Links don’t have to fill the current page. There are other, often better, options.

<a href=""> — The basic link attribute sets where it will transport the user to .

<body background-*=""> — Learn to set a webpage’s background color, image, or more .

<table bordercolor=""> — Find out how to set the border color of your tables.

HTML Cheat Sheet

If you are pretty confident in your HTML abilities but sometimes feel like double-checking your work then look no further than our HTML cheat sheet .

This handy guide will show you everything you need to know about HTML in a super-compact, and easy-to-understand format . It provides information on particular tags and specific attributes in an alphabetized format.

You can bookmark the page for easy retrieval. Or you can print out our PDF so you can keep it by your desk.

The HTML.com Blog

Our blog includes posts covering all corners of the internet.

Why Did The British Government Ban These 10 Websites?

The UK uses an “adult content filter” and censors many respected websites. But what they mean by “adult content” may surprise you.

100+ Places to Post and Share Your Photos Online

Many dozens of places to upload and display your images. It’s often better to host your images away from your website . Here are a number of choices.

Google Calendar: 50 Themes, Hacks & Add-Ons

Learn how to integrate your Google Calendar into your website.

Homebrew Nintendo Wii Hacks & Mods

Learn 100 cool Wii tips and tricks.

The 20 Best Internet Scam Stories

Read all about amazing internet scams that have rocked the world.

What Is Doxxing?

Find out about online privacy and the process of having your personal information released to the world.

The HTML.com Guide to Web Hosting

Keep an eye out for bundles which include site builders and extras – they are out there.

If you’ve already built your website then look no further than the HTML.com guide to web hosting .

We’ll help you find the best hosting provider for your website.

Whether you are searching for a WordPress host, a cheap and cheerful space for your first website, or a dedicated hosting solution, our hosting section has reviews of all the big name hosting providers and a few smaller companies too, including:

This is one of the best hosting companies around with a full range of plans for whatever kind of hosting you need.

The first host to be officially recommended by WordPress . But they are a good host for any website.

One of the most affordable hosting companies around. If you want to keep costs down without losing quality and features, iPage is a good choice.

One of the best all-around hosting companies — well worth checking out.

Improve Your HTML Skills

Now that you’ve gotten started with HTML, you can improve your skills . It’s exciting to see everything you can do with web pages. Check out more of our tutorials and start learning now!

HTML-only Projects For Beginners

Advertisement

Have you learnt some HTML and want to test your knowledge?

Well, you can use you knowledge to build pure HTML projects.

Your aim will be to create a HTML version of these websites. Your version will not look great because you will not be using CSS for now. But, by the end, you will have create a functional website.

Once you learn some CSS, you can come back and style the HTML-only projects.

25 Pure HTML Projects For Beginners

1. tribute page.

Create a tribute page dedicated to a person, historical figure, or role model you admire. Include a brief introduction, key accomplishments or contributions, and notable quotes if applicable. Use HTML headings and paragraphs to organize the content effectively.

View Tribute Page Project

2. YouTube Page

Design a mock YouTube video page. Include a video player (you can embed a YouTube video if you like), a title, video description, and comments section. Structure the content using HTML tags to mimic the layout of a real video page.

View Youtube Page Project

3. Wikipedia Page

Develop a simplified version of a Wikipedia article page. Choose a topic of interest and create sections like “Introduction,” “History,” and “References.” Write informative content about your chosen subject while maintaining a clean and organized structure.

View Wikipedia page project

4. Google Search Page

Replicate the look and structure of Google’s search homepage. Include the Google logo, a search bar, and the “Google Search” and “I’m Feeling Lucky” buttons. Keep the page simple and focused on the search functionality.

5. Google Search Result Page

Building on the previous project, create a mock Google search results page. Include multiple search results with titles, snippets, and links. Use HTML lists or divs to structure the results, and include pagination if you’d like to simulate multiple pages of results.

View Google Search Result Project

6. Personal Website

In your personal website, you can introduce yourself with an “About Me” section. Share a brief biography, your interests, and perhaps a fun fact or two. Create a portfolio section to showcase your work, even if it’s just placeholders for now. Don’t forget to include contact information so others can reach out to you.

7. Online Resume/CV

Your online resume or CV should include essential details such as your education, work experience, and skills. Write concise descriptions of your educational background and work history. Mention any certifications or achievements you’re proud of. Provide your contact information for potential employers or collaborators.

8. Recipe Page

On your recipe page, present your favorite recipes in a structured manner. Include a list of ingredients, step-by-step cooking instructions, and any tips or variations you’d like to share. Add mouth-watering images of the final dishes to make your recipes more enticing.

9. Travel Blog

Create individual posts for your travel blog, each covering a specific trip or adventure. Share your experiences, highlights, and even some challenges you faced during your journeys. Use descriptive language to transport your readers to those destinations. Enhance your posts with images to capture the essence of your travels.

10. Product Page

Imagine you’re promoting a fictional product. Provide a detailed product description, highlighting its unique features and benefits. Include pricing information and high-quality images of the product from different angles. Make it convincing enough for someone to want to “buy” your product.

11. Movie or Book Reviews

If you’re a movie buff or an avid reader, this project is perfect for you. Write thoughtful reviews of your favorite movies or books. Include the title, author or director, a brief summary of the plot, your personal insights, and a rating. Encourage your audience to share their thoughts and recommendations in the comments.

12. Portfolio Gallery

Showcase your artistic talents by creating a portfolio gallery. For each piece of artwork or photograph, provide a title, a brief description or backstory, and any interesting details about your creative process. Use HTML to arrange your gallery neatly and link each image to its dedicated page for more in-depth information.

13. Event Invitation

Design a captivating event invitation webpage. Include event details such as the event name, date, time, and location. Write a warm and inviting message to entice visitors to attend. Consider adding RSVP functionality with a simple HTML form to track responses.

14. FAQ Page

Share your expertise on a specific topic by creating an FAQ page. List common questions and provide clear, concise answers. Use HTML lists to organize the questions and answers for easy readability. Encourage visitors to reach out if they have additional inquiries.

15. Biography Page

Pay tribute to a historical figure or a famous personality by crafting a biography page. Include essential information about their life, contributions, and achievements. Utilize HTML headings and paragraphs to structure the content chronologically. Enhance the page with relevant images and quotes.

16. Simple Survey Form

Create an interactive survey form. Ask questions on a topic of your choice, and include various types of questions, such as multiple-choice, short answer, or yes/no questions. Use HTML form elements to structure the survey. Encourage users to provide feedback or share their opinions.

17. HTML Cheat Sheet

Develop a handy HTML cheat sheet that provides quick references to common HTML tags and their uses. Include explanations and examples for each tag. This resource will be valuable not only for you but also for other learners in the web development community.

18. Weather Report

Design a weather report webpage that displays the current weather conditions for a specific location. While the content will be dynamic and updated regularly (through APIs and JavaScript), focus on creating the layout and structure using HTML. Include elements like temperature, weather conditions, and a brief forecast.

19. Music Lyrics Page

Share the lyrics of your favorite songs on a dedicated webpage. Include the song title, artist, and the complete lyrics. You can also add a brief introduction about why you love the song or any interesting trivia related to it.

20. Timeline

Create a timeline of historical events, your personal achievements, or any chronological data. Use HTML lists to structure the timeline. For each entry, include a date, a short description, and, if applicable, an image or link to more information. Make the timeline visually engaging and easy to navigate.

21. Meme Gallery

Create a collection of your favorite memes or humorous images. Organize them into a gallery format, with each meme displayed on a separate page. Include witty captions or brief descriptions to add context or humor to each meme.

22. Contact Card

Develop a virtual contact card to share your contact information and online presence. Include your full name, email address, phone number, and links to your social media profiles. Write a short and friendly bio to introduce yourself.

23. Local Business Page

Design a webpage for a local business or establishment you admire. Include essential information such as the business name, address, opening hours, and a brief description of their products or services. Highlight any unique features that set the business apart.

24. Holiday Greeting Card

Create an HTML-based holiday greeting card for various occasions like Christmas, New Year, or birthdays. Design a visually appealing card with festive colors and graphics. Add a heartfelt message to convey your wishes and joy.

25. Educational Quiz

Craft an educational quiz on a topic of interest or expertise. Create multiple-choice questions with options and correct answers. Use HTML forms to structure the quiz and allow users to select their answers. Provide immediate feedback on the quiz results.

I have published 100+ blog posts on HTML, CSS, Javascript, React and other related topics. When I am not writing, I enjoy reading, hiking and listening to podcasts.

Share this article on:

Front End Developer Newsletter

Receive a monthly Frontend Web Development newsletter. Never any spam, easily unsubscribe any time.

Red Sox reliever’s FB at 93-94 mph, rehab assignment possible this weekend

• Updated: Aug. 14, 2024, 10:50 p.m.
• | Published: Aug. 14, 2024, 5:54 p.m.

Red Sox' Liam Hendriks could be sent out on a rehab assignment this weekend. (Photo by Maddie Malhotra/Boston Red Sox/Getty Images) Getty Images

• Christopher Smith | [email protected]

BOSTON — Liam Hendriks ’ fastball was up to 93-94 mph during the live batting practice he threw Wednesday here at Fenway Park, manager Alex Cora said.

It marked his third and final scheduled live batting practice before potentially heading out on a rehab assignment. He is making his way back from Tommy John surgery that he underwent last Aug 2.

“The slider was good actually against lefties,” Cora said. “Today he got hit around a little bit but it’s encouraging, man. It’s a good fastball. It’s a different fastball than what we have in the bullpen. I’m not saying he’s going to be a guy that will come here and be the savior of the bullpen but he will contribute. If this happens, he will contribute. We’ll take care of him like we always do with our guys coming from injuries. We still have to be patient but we are almost there.”

Cora said the Red Sox need to see how Hendriks feels Thursday before deciding whether he’ll pitch in a rehab game this weekend.

“Won’t be surprised if he goes on a rehab assignment over the weekend,” Cora said.

The 35-year-old righty won two AL Rivera Reliever awards and earned three All-Star selections while recording 114 saves from 2019-22.

But he has pitched only five innings since the start of 2023. He first battled and overcame Stage 4 non-Hodgkin’s lymphoma in ‘23, then returned to appear in five games before tearing his ulnar collateral ligament.

The Red Sox signed him Feb. 20 for two years and $10 million in guaranteed money with an additional $10 million available in performance bonuses.

“He’s been pushing,” Cora said. “He’s working. He has the will to do it. ... This is nothing for him. He’s been through a lot. You see him on the mound and it’s kind of like significant and ironic that his last live BP to get ready probably to go on the rehab assignment is when we’re having the telethon (for) the Jimmy Fund. Use that as inspiration and I think he’s going to contribute. He’s going to help us.”

Triston Casas not ready yet

Triston Casas will continue his rehab assignment in Triple-A Worcester . Asked if there’s any chance Casas will be activated Thursday in Baltimore, Cora said, “As of now, no.”

The first baseman has a .294/.400/.559/.959 line with one homer and six doubles in nine games (40 plate appearances) on his rehab assignment for the WooSox.

“If the player needs more, he needs more,” Cora said. “I’m not there to feel what he feels. Obviously there’s a few checkpoints that he has in mind. He’s been in touch with the medical staff and (chief baseball officer) Craig (Breslow). He feels like he needs more at-bats. He’ll get more at-bats. At one point, he’s going to be here. It’s just a matter of us being patient.”

Casas is on the 60-day IL with some fractured cartilage which connects his ribcage to his sternum . He hasn’t appeared in a game for the Red Sox since April 20.

Cam Booser placed on 15-day IL

The Red Sox made four roster moves Wednesday, including placing left-handed reliever Cam Booser on the 15-day IL with elbow inflammation .

Booser struggled in Tuesday’s game, allowing a hit and two walks without recording an out.

“After his outing yesterday he came in and he was talking to the trainers and he said that he felt it right away in the first at-bat,” Cora said. “He tried to grind through it. Obviously not good for him, not good for us. But I respect the fact that he tried. In those cases, sometimes when you try to push, it makes it worse for the individual. So just get some treatment. Hopefully, it’s something where he’ll be back sooner rather than later.”

Criswell feeling well

Righty Cooper Criswell is feeling well and could rejoin the Red Sox starting rotation when he’s eligible to return from the COVID-related IL on Friday in Baltimore.

“He felt good in the bullpen,” Cora said. “(Pitching coach Andrew Bailey) feels like he threw the ball well. Energy-wise, he feels good. Strength-wise, too. Hopefully, he joins us in Baltimore.”

If you purchase a product or register for an account through a link on our site, we may receive compensation. By using this site, you consent to our User Agreement and agree that your clicks, interactions, and personal information may be collected, recorded, and/or stored by us and social media and other third-party partners in accordance with our Privacy Policy.

50 Easy and Fun Crafts for Kids That Will Spark Their Imagination

Boost your child's creativity with these DIY projects that'll keep them entertained at home or school.

We've been independently researching and testing products for over 120 years. If you buy through our links, we may earn a commission. Learn more about our review process.

There are skills that kids of all ages can master through crafts – whether it’s enhancing their fine motor skills through gluing or cutting or learning how to problem-solve when things don’t turn out as planned, kids learn through doing. Plus, crafting can give kids a sense of ownership and accomplishment. They can select their own colors and patterns when it comes to painting and add their own flare to their decorating. Most of these crafts can be completed by kids on their own with adult supervision. However, there are some that may require a bit more assistance on your end. The good news? Most of these projects are free and only call for supplies you already have lying around the house.

Whether you have toddlers, tweens or any age in between, these fun crafts are bound to inspire your kids to get creative with everyday materials like popsicle sticks, coffee filters, buttons, beads and more. We’ve also rounded up a few holiday-themed crafts, including Halloween crafts , Earth Day crafts and Valentine's Day crafts .

Put leftover boxes to good use with this DIY book bin craft. All you have to do is cover the box with construction paper and clear packing tape. You can also add a book series logo or write your own design on the front for added personalization. This craft is also a fun way to help kids stay organized and may even encourage more reading.

Get the tutorial at Crafting Cheerfully »

Pipe Cleaner Spider

With very minimal supplies, kids can create their own spider friends. Simply punch holes in a paper plate, wrap pipe cleaners through and design the face with a smile and googly eyes.

Get the tutorial at A Sparkle of Genius »

Origami Hearts

Whether you're celebrating Valentine's Day or your kids just want to practice their cutting and folding skills, these simple paper hearts are an easy way to get them interested in origami crafts. With just thick paper, scissors and their two hands, kids will be able to transform the colored paper of their choice into a cute decorative heart.

Get the tutorial at Alice & Lois »

Bedroom Door Sign

With a small chalkboard, watercolor paint and some ribbon, kids can have fun decorating a sign to hang outside their bedroom door. The best part? They can change their message as often as they want so that the craft lives on even after the main work is completed.

SHOP MINI CHALKBOARDS

Rock Painting

Rock painting is a simple, fun project that combines outdoor activity with crafting. Plus, kids can have complete creative control over what they paint on their rocks. Whether it's a cartoon face or a design of some sort, their rock painting can be put to display in the garden or indoors.

Get the tutorial at Crafty Little Gnome »

Minion Pencils

If your kids love the "Despicable Me" franchise, these minion pencils are the perfect craft for them. With pencils, googly eyes and foam paper, create your own mischievious minion. Draw on facial expressions with a black Sharpie and voila – writing just got more fun.

Get the tutorial at Kid Friendly Things to Do »

Styrofoam Cup Crabs

Perfect for a beach day, these styrofoam cup crabs are easy to make and require little materials. Paint a cup the color of your choice, cut some pipe cleaners for legs and add googly eyes up top.

Get the tutorial at Crafts by Amanda »

Branch Spider Web Wreath

Preparing for Halloween? Try out this wreath made from spider webbing and twigs! Have your kids gather some sticks, cutting or breaking them so that they are between five and ten inches long. Assist them in cutting a wreath shape out of cardboard. It should be around twelve inches in diameter with a five-inch circle cut out from the inside. Hot glue the twigs to the wreath, layering them so that they fill up all of the space on the cardboard. After drying, stretch spider webbing around and tuck in a few fake spiders with hot glue.

SHOP SPIDER WEBBING

Embellished Bow

Here's a quick way to take a basic straw basket to the next level! Kids can embellish bows with iron-on patches and stenciled monograms. Help them create their own bows using a 3" wired ribbon or purchase a large one to design. Then, use fabric glue to attach the decorative patches.

Monster Windsocks

This is a great group project for the kids. Let the kids cut, fold and draw on cardstock to create wide-eyed monster windsocks for the backyard.

Paper Flowers

They'll enjoy making these colorful paper flowers to decorate their bedrooms. They'll first fold dyed cupcake liners in half and cut out petal and fringe shapes. Have them fold a piece of floral wire in half and twist it around the faux flower stamen. Poke the wire through the center of three to four paper liners. Finish it off by wrapping floral tape around the base of the liners and bringing it all the way down the stem.

SHOP CUPCAKE LINERS

Paper Bag Kite

Spring is the perfect time to fly a kite. Luckily, kids can make their own with paper lunch bags. Let them embellish the bags with stickers, washi tape, paint and any other accessories. Then, work on attaching the yarn and streamers so the kite will be ready to fly.

Get the tutorial at Typically Simple »

Carrot Treat Cones

Easter may have passed, but that doesn't mean this carrot treat cone craft should too! To make, you'll need to print out our carrot template . Then gather the essentials: coffee filters, orange paper, double-stick tape, green craft paint, twine, a clothespin, a wire hanger, paper towel and scissors.

• Mix a few drops of green craft paint with water until it reaches the consistency of milk. Soak coffee filters in the paint mixture until fully saturated (you can do this simultaneously).
• Squeeze out excess paint and lay the filters flat to dry on paper towels or hang them from a hanger with a clip or clothespin. Download our template and trace it onto orange paper.
• Cut out and roll the template into a cone shape, adhering the sides with double stick tape. Cut out the center of the painted coffee filters.
• Attach the remaining paper to the inside edge of the cone with double-stick tape. Fill the “carrot” cone with small treats and tie twine around the top to close.

Dinosaur Nightlife Terrarium

Transform mason jars into terrariums fit for mini plastic dinosaurs. It also makes a creative nightlight for kids who are still scared of the dark.

Clay Crab Necklace

If your kids are obsessed with sea creatures, they'll love making and wearing their very own crab necklaces. Plus, the craft only requires clay, twine and an eye hook.

Get the tutorial at Hello Wonderful »

Cardboard Suns

Here's an eco-friendly craft that requires lots of cardboard and creativity. Help your little ones cut, paint and design large and mini cardboard suns to scatter around the backyard.

Get the tutorial at The House That Lars Built »

Paint Marker Candles

Grab some paint markers (or acrylic paint) and watch them draw flowers, swirls and all sorts of cool shapes and designs on taper candles. Use a clean cloth with rubbing alcohol to remove any lint and debris before starting.

SHOP TAPER CANDLES

Toilet Paper Frog

You're sure to have these supplies in your kid's craft box. Grab those discarded toilet paper rolls for kids to paint and turn into frogs. Then, have them transform paper plates into lily pads.

Get the tutorial at The Best Ideas for Kids »

Painted Baskets

It doesn't get more simple than this: Kids can spend time outdoors painting the wood strips of plain wooden baskets to carry their toys in and out of the house.

SHOP ACRYLIC PAINT

Pool Noodle Boats

After making these eye-catching boats, let kids set them afloat in the tub or swimming pool. It's a fun craft to recycle any old pool noodles and paper straws.

Mariah Thomas (she/her) is an assistant editor for Good Housekeeping , where she covers home and lifestyle content. Mariah has more than four years of editorial experience, having written for TLC, Apartment Therapy, Women's Health and Avocado Magazine . She received her master's degree in journalism at the Craig Newmark Graduate School of Journalism and published her first book, Heart and Soul: Poems of Thoughts and Emotions , in 2019. She's also the founder of RTF Community , a platform for creatives of color to connect, learn and showcase their work. 

Laura Millar (she/her) is the assistant editor for Good Housekeeping , where she covers home design. Prior to joining Good Housekeeping in 2024, she wrote for NBC’s TODAY.com where she covered everything from entertainment news to product reviews to pop culture updates.

@media(max-width: 64rem){.css-o9j0dn:before{margin-bottom:0.5rem;margin-right:0.625rem;color:#ffffff;width:1.25rem;bottom:-0.2rem;height:1.25rem;content:'_';display:inline-block;position:relative;line-height:1;background-repeat:no-repeat;}.loaded .css-o9j0dn:before{background-image:url(/_assets/design-tokens/goodhousekeeping/static/images/Clover.5c7a1a0.svg);}}@media(min-width: 48rem){.loaded .css-o9j0dn:before{background-image:url(/_assets/design-tokens/goodhousekeeping/static/images/Clover.5c7a1a0.svg);}} Crafts & DIY Projects

Our Top DIY Spray-Painting Tips

50 Fun Craft Ideas for Adults

How to Make a Homemade Fly Trap

45 Cute Summer Crafts for Kids

You Need to Try This Viral TikTok Plant Hack

How to Refinish Furniture With Paint

The Life-Changing Garland Hack Taking Over TikTok

Banish "I'm Bored!" With These Activities for Kids

90 Easy DIY Christmas Crafts

Cheap and Easy Greenhouse Plans for Your Backyard

25 Easy Napkin Folding Ideas

HTML Tutorial

Html graphics, html examples, html references.

HTML is the standard markup language for Web pages.

With HTML you can create your own Website.

HTML is easy to learn - You will enjoy it!

Easy Learning with HTML "Try it Yourself"

With our "Try it Yourself" editor, you can edit the HTML code and view the result:

Click on the "Try it Yourself" button to see how it works.

In this HTML tutorial, you will find more than 200 examples. With our online "Try it Yourself" editor, you can edit and test each example yourself!

Go to HTML Examples!

Advertisement

HTML Exercises

This HTML tutorial also contains nearly 100 HTML exercises.

Test Yourself With Exercises

Add a "tooltip" to the paragraph below with the text "About W3Schools".

Start the Exercise

HTML Quiz Test

Test your HTML skills with our HTML Quiz!

Start HTML Quiz!

My Learning

Track your progress with the free "My Learning" program here at W3Schools.

Log in to your account, and start earning points!

This is an optional feature. You can study at W3Schools without using My Learning.

At W3Schools you will find complete references about HTML elements, attributes, events, color names, entities, character-sets, URL encoding, language codes, HTTP messages, browser support, and more:

Kickstart your career

Get certified by completing the course

Video: HTML for Beginners

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.

• Marlins Do Not Intend To Trade Sandy Alcantara In Offseason
• Dodgers’ River Ryan To Undergo Tommy John Surgery
• James Paxton Diagnosed With Partially Torn Calf
• Rays Recall Junior Caminero
• Mariners Sign Víctor Robles To Extension
• Dodgers Designate Amed Rosario For Assignment, Activate Mookie Betts
• Hoops Rumors
• Pro Football Rumors
• Pro Hockey Rumors

MLB Trade Rumors

Yankees Designate Enyel De Los Santos For Assignment

By Darragh McDonald | August 14, 2024 at 4:00pm CDT

The Yankees announced today that infielder Oswald Peraza and right-hander Will Warren have been recalled to the active roster. One spot was opened by infielder/outfielder Jazz Chisholm Jr. landing on the 10-day injured list, retroactive to August 13, with a left elbow sprain. That injury and Chisholm’s expected IL placement were both previously reported . The other roster spot was opened by right-hander Enyel De Los Santos being designated for assignment. Additionally, the Yanks added that righty Lou Trivino will begin a rehab assignment with Double-A Somerset.

It’s a very quick turnaround for De Los Santos, 28, who was just acquired prior to the deadline a couple of weeks ago. The Yankees sent outfielder Brandon Lockridge to the Padres in order to acquire De Los Santos and minor league pitcher Thomas Balboni .

It seems that the buyer’s remorse set in very quickly, as things didn’t go well for De Los Santos after swapping his Padre pinstripes for the Yankee variety. After the trade, he tossed 6 1/3 innings over five appearances, allowing 10 earned runs in that time. He struck out five opponents while walking three of them.

The Yankees were rained out on Friday and played a double-header on Saturday, meaning their five starters have each pitched in the past four days. They needed Warren to come up and make a spot start today, which required a corresponding move. The only member of their bullpen that can be optioned is Jake Cousins , who has a 2.25 ERA on the season. Rather than send Cousins down, they have decided to bump De Los Santos off the 40-man roster not too long after trading for him.

Since the deadline has now passed, the Yankees will have no choice but to put De Los Santos on waivers in the coming days. Although his results have clearly been poor since coming to the Bronx, it seems likely that some other club will look beyond that and put in a claim based on his previous work.

From the start of 2022 and up until the trade, the righty actually posted some strong numbers between the Guardians and Padres. He tossed 159 1/3 innings in that time with a 3.50 ERA, 26.4% strikeout rate and 8.5% walk rate.

Meaningful roster upgrades are difficult to come by at this post-deadline part of the calendar, so a club looking for bullpen reinforcements will probably put in a claim. That might not even need to be a contending club, as De Los Santos is making just $1.16MM this year and can be retained via arbitration for two additional seasons.

Waiver priority goes in reverse order of the standings, so the teams with the worst records will have first dibs. Even a team out of contention might take a shot on De Los Santos given those two extra years of control. But if they all pass, some club in a playoff race could benefit with a fresh arm that has had some success in recent seasons, Yankee tenure notwithstanding.

Cutting bait on De Los Santos will cut into the club’s bullpen depth, but they are about to backfill some of that with Trivino. The righty underwent Tommy John surgery in May of last year and missed all of the 2023 season. He hit free agency and the Yanks re-signed him on a one-year deal with a $1.5MM guarantee and a $5MM club option for 2025, plus bonuses and escalators that kick in at 15 appearances this year.

Prior to this lengthy injury layoff, he put up some strong numbers. Most of that came with the Athletics, though he also came over to the Yankees at the 2022 deadline as part of the Frankie Montas trade. Overall, he has 284 2/3 innings under his belt with a 3.86 ERA. His 10.6% walk rate is a bit high but his 24.5% strikeout rate and 47.4% ground ball rate are both strong.

40 Comments

9 hours ago

That trade didn’t work out so well for the Yankees…

Hopefully all the injured relievers start making their way back, to help make that last push to get to the playoffs!

Nope but he was only used in low leverage situations and with Yankees behind in the games.

8 hours ago

White Sox need to claim this guy. Very nice turnaround candidate who can be flipped next year if successful.

7 hours ago

Decent chance the White Sox do since he was good enough to warrant two trades the last year or so. Good shot he can get back to that kind of level.

Great, now we can thankfully have one Yankee wearing the #62 jersey again, hitting coach James Rowson.

Uhhh, thanks for taking Enyel, Cash! Bizarre trade gets bizarrerer…

Gwynny, the D-backs don’t seem to be letting up. Do you want me to go pop the tires on the team bus or something?? Sprinkle banned PEDS on the after-game buffet spread?

How many rattlesnakes do you own and how soon can you… *ahem*… “release” them “into the wild”??? Wink, wink

On the real though Iggy, you can’t worry about what everybody else is doin’, just handle your biz! Cheers mate

6 hours ago

i remember everyone thought it was odd Cleveland dealt him for Barlow…

5 hours ago

I remember getting in an argument with someone in the comment section when the Guardians made that trade over the winter. I was willing to believe that they bought into the improvements Barlow made after the trade deadline last year, and that one year of a potential impact late inning arm was still worth more than three years of a guy who they apparently saw as a middle reliever. I liked Barlow’s peripherals and leverage numbers more too.

Barlow’s been inconsistent for sure, but they still got the better end of that deal.

I remember some Pads fans being upset when he was traded to Philly for Freddie Galvis, Freddie is out of MLB and Eynel managed 3 seasons, 58 innings and a 6.21 ERA for the Phillies

They couldn’t fire Boonie, so some poor soul had to take the fall. Cruel world.

Burn ‘em up, toss ‘em out. Next!

the Yankees have just been absolutely abysmal at the trade deadline the last several years. all those bad contracts and trades have given them little financial room to work with and Cashman always seems intent to just pick at the edges mostly.. they also never seem to add enough depth for what they need.

Yanks had me thinking this year was different with the Leiter and Jazz trades, BUT Jazz has always been very injury prone and they should have known they’d need more options when/if he got hurt–and Leiter clearly wasn’t enough to lean on for bullpen help. I’m actually a big fan of Holmes but there were less flashy high-K guys for sale this year that they just didn’t seem to want to pull the trigger on.

i do like a lot of their options down in AAA on both sides of the ball, even the lesser known guys, but for a playoff run you’d ideally be leaning on known commodities and not unproven rookies. like Warren has a good shot to go out there and pitch a good game tonight, but he’s not someone you’re gonna end up having in your playoff rotation

Do tell us more.

Well tell them because as far as I’m concerned, you’re

I don’t know who this MickeyTheMod guy is, but googling him shows all he types here is about muting other people. What a boring life one must lead…

You can’t even keep the mute button in your back pocket on here, you have to have your finger on at all times otherwise this place is brutal. BRUTAL! Ahahaha!

Toasty: In defense of the Yankees, Effross and Burdi are ready in AAA and fully stretched out, Trevino is on his way back shortly, and Hamilton is throwing to hitters. The pen will be changing very shortly.

Trouty is a northeast guy and grew up as a major Yankees fan and he is the ingredient and spark needed for the Yankees to end their World Series Drought. They could probably acquire him just in exchange for 2 or 3 top prospects plus covering the rest of Trouty’s contract. Bonus points if they also acquire Votto and give him a new contract.

Please do it now, Mr. Cashman sir.

I’d rather give Soto $50 mill/year than that garbage deal.

Trout grew up a Phils fan. He is an Angel for life for better or (more likely) worse,

The last thing the Yankees need is another player who is always hurt. Pass on Trout.

This generation’s Ernie Banks. Except with Trout it was both the annual irrelevance of the club and his injuries. He’s another guy with amazing talent who insisted on playing about 20 lbs. overweight. And he’s paying the price.

12981….You have at various time posted ridiculousness regarding Trout. You like to “present” yourself as some kind of Trout expert….you ain’t.

Trout never has been a NYY fan. He grew up in Millville NJ, born in Vineland Hosp. (same hospital I was born in ….same hosp everyone in that area is born in). Millville, Vineland, Elmer. etc are all South Jersey and that is Phillies country.

Trout grew up a diehard Phillies and Eagles fan. He has season ticket to the Eagles.

Trout’s father, Jeff has recounted this story from December 2009, six months after Trout was drafted by the Angels and had already played in Rookie and Low-A ball for the club.

Jeff recalls hearing Mike scream from his room (Trout lived at home for years in the off-season) in the middle of the night.

“Dad, we got Roy Halladay!” Mike yelled. To which his Dad responded: “the Angels got Halladay?”

“No, the Phillies did!” Mike replied. “Son, you’re a member of the Angels. What’s with this we?!”

You don’t know squat about Mike Trout so put a sock in it already…..geeesh

Hopefully the jays are able to get him. I also want them to suck for the rest of the year and aim for a top 10 pick so I’m torn lol. Last I checked they were 9th in the majors

Queue the overly emotional and logically deficient Yankee fans.

And their odor of weed and Budweiser.

I think he has potential so someone will take a shot.

ELS season went to Hades in a handbasket rather quickly. At the end of April he was looking like the guy the Padres needed in the low and medium leverage situations. Then the bottom fell out when they needed to use him in high leverage situations. He hit NY and it got even worse.

Balboni. That’s a blast from the past name. Yankees need Hamilton and Burdi back ASAP.

4 hours ago

I don’t think he’s related. Definitely not his son, I know all three of them. Great guys.

Peraza, Dominguez, Vivas, and Durbin are some interesting pieces moving forward. I would like to see them all get a chance at the end of the season.

The team is in contention you’re not going to see 4 young guys getting regular playing time. Would be nice to see Peraza get some run at 3rd but we’ll probably park him on the bench and let the ghost of DJ and Oswaldo play 3rd. The Martian seems like the guy with the best shot to get some AB’s if they ever tire of Verdugo…

white sox fans are dismayed by the DFA…

De los Santos looked AWFUL in Monday night’s blowout loss to the worst team since the ‘62 Mets.

I watched the game with a buddy, and we both agreed it was possible the Yanks might cut Enyel.

Someone will inevitably use the phrase depth move and that someone will be instantly muted.

@Slider. I agree with you 100% The time v is now.

His nickname is Enyel De Los Meatball for a reason

12 seconds ago

Where was vaunted new wave Yankee pitching coach ? Turned this kid into dumpster fire. That was 1 of their big deadline acquisitions. No earth shaken moves cause yanks are holding their overrated prospects close to their chest. He’ll sign w/Rays n beat nny later this season.

Leave a Reply Cancel reply

Please login to leave a reply.

Log in Register

• Feeds by Team
• Commenting Policy
• Privacy Policy

MLB Trade Rumors is not affiliated with Major League Baseball, MLB or MLB.com

Username or Email Address

Remember Me

• Election 2024
• Entertainment
• Newsletters
• Photography
• AP Buyline Personal Finance
• AP Buyline Shopping
• Press Releases
• Israel-Hamas War
• Russia-Ukraine War
• Global elections
• Asia Pacific
• Latin America
• Middle East
• Delegate Tracker
• AP & Elections
• 2024 Paris Olympic Games
• Auto Racing
• Movie reviews
• Book reviews
• Financial Markets
• Business Highlights
• Financial wellness
• Artificial Intelligence
• Social Media

Extreme heat is impacting most Americans’ electricity bills, AP-NORC poll finds

FILE - A person wipes sweat from their brow at Badwater Basin in Death Valley National Park, Calif., July 7, 2024. (AP Photo/Ty ONeil, File)

FILE - Terry Tang puts paw booties on “Teddy,” a 7-year-old chow mix, at a park, July 15, 2024, in Phoenix. (AP Photo/Matt York, File)

• Copy Link copied

WASHINGTON (AP) — During the summer, Levena Lindahl closes off entire rooms, covers windows with blackout curtains and budgets to manage the monthly cost of electricity for air conditioning. But even then, the heat finds its way in.

“Going upstairs, it’s like walking into soup. It is so hot,” Lindahl said. “If I walk past my attic upstairs, you can feel the heat radiating through a closed door.”

Lindahl, 37, who lives in North Carolina, said her monthly electricity bills in the summer used to be around $100 years ago, but they’ve since doubled. She blames a gradual warming trend caused by climate change.

Around 7 in 10 Americans say in the last year extreme heat has had an impact on their electricity bills, ranging from minor to major, and most have seen at least a minor impact on their outdoor activities, according to a poll from The Associated Press-NORC Center for Public Affairs Research.

As tens of millions of Americans swelter through another summer of historic heat waves, the survey’s findings reveal how extreme heat is changing people’s lives in big and small ways. The poll found that about 7 in 10 Americans have been personally affected by extremely hot weather or extreme heat waves over the past five years. That makes extreme heat a more common experience than other weather events or natural disasters like wildfires, major droughts and hurricanes, which up to one-third of U.S. adults said they’ve been personally affected by.

Sizable shares of Americans – around 4 in 10 – report that extreme heat has had at least a minor impact on their sleep, pets or exercise routine.

Jim Graham, 54, lives in Phoenix, Arizona, and worries about the safety of his dog’s paws when going on walks outside, especially when it gets above 105 degrees Fahrenheit (40 degrees Celsius). To protect her feet, they head out for walks at 5:30 a.m. “This year it seems hotter than usual,” said Graham. His single-level home has central air conditioning and even setting the thermostat to 80 degrees Fahrenheit (27 degrees Celsius) runs him over $350 a month in electricity bills, a big jump from what he used to pay about a decade ago.

He’s not the only one watching the dollars add up: About 4 in 10 Americans say they’ve had unexpectedly expensive utility bills in the past year because of storms, flood, heat, or wildfires, including nearly half of homeowners.

Like Lindahl, many see a link to climate change. About 7 in 10 U.S. adults who have experienced some type of severe weather events or weather disasters in the last five years say they believe climate change was a contributing factor. Three in 10 think climate change was not a cause.

Last year Earth was 2.66 degrees Fahrenheit (1.48 degrees Celsius) warmer than it was before pre-industrial times, according to the European climate agency Copernicus . Some might perceive that increase as insignificant, but temperatures are unevenly fluctuating across the planet and can be dangerous to human health. Several regions of the U.S. set all-time temperature records this summer, and Las Vegas reached a scorching 120 degrees Fahrenheit (48.9 degrees Celsius) on July 7.

According to the poll, about 1 in 10 Americans say that extreme heat has had a major impact on their sleep in the past year, while about 3 in 10 say it’s had a minor impact and 55% say it’s had no impact. Hispanic Americans are more likely than white Americans to say their sleep has been affected, and lower-income Americans are also more likely than higher-income Americans to report an effect on their sleep.

AP AUDIO: Extreme heat is impacting most Americans’ electricity bills, AP-NORC poll finds

AP correspondent Donna Warder reports on a new poll on how extreme heat is affecting people’s lives.

The effects of extreme heat are more widely reported in the West and South. About half of people living in the West say their sleep has been impacted at least in a minor way by extreme heat, while about 4 in 10 people living in the South say their sleep has been impacted, compared to about 3 in 10 people living in the Midwest and Northeast. People living in the West and South are also more likely than those in the Northeast to say their exercise routines have been affected.

Other aspects of daily life – like jobs and commutes, the timing of events like weddings and reunions, and travel and vacation plans – have been less broadly disrupted, but their impact is disproportionately felt among specific groups of Americans. About one-quarter of Americans say that their travel or vacation plans have been impacted by extreme heat, with Hispanic and Black Americans more likely than white Americans to say this.

Even simply enjoying time outside has become more difficult for some. The poll found that about 6 in 10 Americans say extreme heat has impacted outdoor activities for themselves or their family.

In general, people who don’t believe climate change is happening are less likely to report being affected by various aspects of extreme heat compared to people who do. For instance, about 8 in 10 Americans who believe that climate change is happening say extreme heat has had at least a minor impact on their electricity bills, compared to half of Americans who aren’t sure climate change is happening or don’t think it’s happening.

Mario Cianchetti, 70, is a retired engineer who now lives in Sedona, Arizona. His home has solar panels and heat pumps, which he installed because he was interested in lowering his electricity bills to save money. “When you retire, you’re on a single fixed income. I didn’t want to have to deal with rising energy costs,” said Cianchetti, who identified himself as a political independent.

Cianchetti noted that temperatures feel unusually warm but said installing sustainable technologies in his house was a matter of finance. “It’s not that I don’t believe in climate change, yeah I believe we’re going into a hot cycle here, but I don’t believe that it’s man-caused.”

When it comes to general views of climate change, 70% of U.S. adults say climate change is happening. About 6 in 10 of those who believe climate change is happening say that it’s caused entirely or mostly by human activities, while another 3 in 10 say it’s caused equally by human activities and natural changes to the environment and 12% believe it’s primarily caused by natural environmental change. Nine in 10 Democrats, 7 in 10 independents and about half of Republicans say climate change is happening.

Those numbers are essentially unchanged from when the question was last asked in April and have been steady in recent years, although about half of Americans say they have become more concerned about climate change over the past year.

The poll of 1,143 adults was conducted July 25-29, 2024, using a sample drawn from NORC’s probability-based AmeriSpeak Panel, which is designed to be representative of the U.S. population. The margin of sampling error for all respondents is plus or minus 4.1 percentage points.

O’Malley reported from Philadelphia.

The Associated Press’ climate and environmental coverage receives financial support from multiple private foundations. AP is solely responsible for all content. Find AP’s standards for working with philanthropies, a list of supporters and funded coverage areas at AP.org .

Hurricane Ernesto leaves half of Puerto Rico without power amid flooding: Updates

Ernesto intensified into a Category 1 hurricane Wednesday as it churned north of Puerto Rico, where it unleashed torrential rain and damaging winds that triggered flash flood warnings and cut power to nearly half the island.

As of 11 p.m. ET, Ernesto had left Puerto Rico well behind and was 175 miles northeast of Grand Turk island, according to the National Hurricane Center . The storm was about 690 miles south-southwest of Bermuda, a British island territory, and moving northwest near 16 mph with maximum sustained winds of 80 mph.

Ernesto could become a Category 3 hurricane by Friday before approaching Bermuda on Saturday, according to the NHC. The Bermuda Weather Service issued a hurricane watch.

Forecasters warned of rainfall and flash flooding later in the week with possible hurricane conditions in Bermuda on Saturday. Though Ernesto is expected to remain offshore on the U.S. East Coast, the NHC said swells are forecast to reach the region into the weekend — increasing the risk of life-threatening surf and rip currents.

The storm pummeled Puerto Rico and the Virgin Islands through much of Wednesday, quickly dumping several inches of rain. All told, the U.S. and British Virgin Islands were in line for widespread rainfall of up to 6 inches, while the total for southeastern Puerto Rico could climb to as much as 8 to 10 inches.

Puerto Rico Gov. Pedro Pierluisi said the power outages also left more than 200,000 homes and businesses without water.

On Tuesday, President Joe Biden approved an emergency declaration for Puerto Rico, ordering the federal government to assist in local response efforts. Ahead of the storm, officials in Puerto Rico closed government offices, shuttered schools, activated the National Guard, and opened hundreds of shelters.

Forecasters expect Ernesto to drift for a couple of days along the warm waters of the western Atlantic toward Bermuda before eventually developing into a major hurricane and remaining far east of the continental U.S.

Ernesto: Track where the storm is heading as it barrels towards Puerto Rico

Sign up to get updates about current storms and weather events by location .

Hundreds of thousands left without power in Puerto Rico

As many as 730,000 utility customers — almost exactly half the total in the U.S. territory — were out of power at one point Wednesday after Ernesto brought tropical storm-level winds and heavy rain to the island of more than 3 million American citizens.

By 8 p.m. ET, the blackouts were down to 649,000, still 44% of homes and businesses, according to LUMA Energy, the operator of Puerto Rico’s power grid. The company serves 1.47 million customers.

"We are on the road to reestablish service," said LUMA President Juan Saca, who did not have an estimate for when that might happen across the island but said 1,500 company employees were working at it. By Wednesday evening, more than 60% of customers still didn't have electricity in four of LUMA's seven regions.

Blackouts have been commonplace in Puerto Rico ever since Hurricane Maria destroyed the power grid in 2017.

In Puerto Rico, mudslides and cows wading through neck-high floodwater

The numerous flash-flood warnings across Puerto Rico for most of Wednesday provided an indication of the soaked landscape left behind by Ernesto, but not nearly as vivid as the sight of cows wading through neck-high water.

That was the image captured on video by El Nuevo Dia , Puerto Rico's leading newspaper, which said rising waters in the Gurabo River − in the east-central part of the island − forced the cows to "fight for their lives."

The newspaper also reported that heavy rains caused mudslides and left some municipalities without drinkable water, and numerous roads throughout the island have become impassable because of flooding and fallen trees or other objects, like power lines. More than 80 medical facilities, including at least 20 hospitals, were running on generators because of the outages, El Nuevo Dia reported.

Temperatures of up to 94 degrees and humidity in the low 80s are forecast for San Juan over the next several days and into next week, making for miserable conditions for the hundreds of thousands without power.

Ernesto knocks out power throughout the US Virgin Islands

Two of the three U.S. Virgin Islands – St. John and St. Croix – were completely in the dark Wednesday as officials worked to restore service in the wake of Ernesto.

Daryl Jaschen, the director of the Virgin Islands Territorial Emergency Management Agency, said in a news conference Wednesday that, in addition to the outages, six cell phone towers were knocked offline across the territory.

U.S. Virgin Islands Gov. Albert Bryan Jr. in the same news briefing said "the territory is in good shape" but urged residents and tourists not to venture outside as some rain bands continued lashing the islands.

“There’s a lot of branches on the road, there’s a lot of water coming off of hills on all three islands – and there’s sporadic flooding,” he said.

Storms, stars and our planet: Sign up for USA TODAY's Climate Point newsletter.

Damaging wind gusts, flooding in Puerto Rico and the Virgin Islands

As Ernesto pummeled Puerto Rico early Wednesday morning, officials issued flash flood warnings and the National Hurricane Center reported damaging wind gusts.

By 7 a.m., between 2 and 6 inches of rain had fallen in parts of eastern Puerto Rico, and an additional 2 to 3 inches was projected. "Flash flooding is ongoing or expected to begin shortly," the weather service in San Juan said .

As rain totals climb, the Rio Grande de Loiza and its tributaries "continue to rise, and the flooding risk continues to increase," the weather service said, adding that the rivers would likely overflow.

Meanwhile, St. John and St. Thomas in the U.S. Virgin Islands received between 3 and 5 inches of rain through Wednesday morning, leading the weather service to warn of the potential for "life-threatening flash flooding of creeks and streams, urban areas, highways, streets, and underpasses."

According to the National Weather Service office in San Juan, an 86 mph wind gust was recorded in Culebra, a small island off the eastern coast that's part of Puerto Rico. A National Weather Service crew in Ceiba, in northeastern Puerto Rico, recorded a gust of 74 mph. Winds as high as 75 mph were recorded across the Virgin Islands, the weather service said.

In Bermuda, stocking up as in COVID times

On Bermuda, Jessica Burns said she woke up Wednesday morning to torrential rain and is preparing for much worse this weekend, when Hurricane Ernesto could arrive as a Category 2 storm, according to the Bermuda Weather Service .

Burns, 29, said she was born and raised on the island, but this is her first summer at the helm of the family’s vacation rental business after her mother passed away in November 2023.

Burns, neighbors and staff trimmed loose branches and removed coconuts from trees “to make sure there’s no danger of those coming loose and causing damage,” she said.

Burns said she also loaded up on food, batteries and water. “We’re all going to the grocery store, stocking up like we were during COVID,” she said.

Some vacationers checked out early this week from Burns’ Southern Views Property Rentals, wanting to get out of Ernesto’s way. Other guests are “hunkering down” with staff and were provided an extra night for free to stay safe and dry, she said.

− Claire Thornton

Will Ernesto impact the mainland US?

While Ernesto isn't expected to hit the mainland U.S., authorities have warned of potentially dangerous beach conditions — such as rip currents and rough surf — along the nation's Atlantic coast as the storm churns toward Bermuda.

The U.S. Coast Guard on Monday cautioned recreational boaters, fishermen, beachgoers, and water sports enthusiasts in the U.S. Virgin Islands and Puerto Rico to stay out of the water "due to deteriorating sea state conditions and dangerous rip currents associated with Tropical Storm Ernesto."

Forecasters said strong swells will begin to reach North Carolina beaches by Friday and advised beachgoers to be aware of the risks and dangers.

"The storm may be hundreds of miles out to sea and the weather could look great at beaches along Florida, the Carolinas, even up to New England, but everyone needs to be aware of the risks and dangers at the beach," according to AccuWeather Lead Hurricane Expert Alex DaSilva. "We expect the rip current risk along the Atlantic coast of the U.S. to start later this week along the Southeast and ramp up over the weekend, expanding to the north."

Ernesto fifth named storm in 2024 hurricane season

In a revised forecast issued earlier this month, the federal government called for an "extremely active" Atlantic hurricane season , one that could rank among the busiest on record. The National Oceanic and Atmospheric Administration predicted 17 to 24 named storms with about 8 to 13 becoming hurricane-strength, over the average 14 named storms and seven hurricanes.

In a statement, NOAA head Rick Spinrad said the season started "early and violent" with Hurricane Beryl being the earliest Category 5 hurricane in the Atlantic on record. He added the agency's update signifies that the peak of the hurricane season is near, which typically includes the most impactful storms and hurricanes.

Overall, NOAA says there's a 90% chance of an above-average season, which is among the highest chances ever issued by the agency, lead seasonal hurricane forecaster Matthew Rosencrans told USA TODAY.

Ernesto comes on the heels of deadly Hurricane Debby

Ernesto emerged in the Atlantic as residents and authorities across the eastern U.S. were recovering from former tropical storm Debby.

Debby made landfall last week along Florida's Big Bend region as a Category 1 hurricane before the storm's remnants caused major flooding across much of the Eastern Seaboard, inundating entire neighborhoods as authorities conducted water rescues and evacuations. At least eight deaths have been tied to the storm.

In July, Hurricane Beryl pummeled the Caribbean as a major hurricane before slamming Texas, inflicting massive power blackouts that led to several fatal cases of heatstroke. Beryl has been linked to more than 20 deaths across the U.S. and the Caribbean.

Contributing: Doyle Rice and Dinah Voyles Pulver, USA TODAY; C. A. Bridges, Palm Beach Post; Reuters

• Share full article

Advertisement

Supported by

Advertising Coalition Shuts Down After X, Owned by Elon Musk, Sues

The Global Alliance for Responsible Media will dissolve after Mr. Musk accused the group of orchestrating a boycott.

By Kate Conger and Tiffany Hsu

Reporting from San Francisco

An influential advertising industry group said it would shut down after being sued this week by X, Elon Musk’s social media company, according to an email sent to its members and obtained by The New York Times.

The Global Alliance for Responsible Media, a nonprofit coalition of major advertisers led by the World Federation of Advertisers, told its members it would cease operations two days after Mr. Musk accused the group of orchestrating a boycott against X. The lawsuit claimed that the group, known as GARM, had violated antitrust laws by coordinating with brands to dissuade them from spending money on the social media platform.

While the World Federation of Advertisers denied that GARM’s work had run afoul of the law, it said that the nonprofit did not have the financial resources to continue operating while it fights X in court.

Stephan Loerke, the chief executive of the World Federation of Advertisers, told members in an email that, while he was “confident that the outcome will demonstrate our full adherence to competition rules in all our activities,” GARM would shut down its operations immediately. The World Federation of Advertisers, which is also named in the lawsuit, will remain operational.

“This decision was not made lightly, but GARM is a not-for-profit organization, and its resources are limited,” Mr. Loerke wrote. The email was previously reported by Business Insider .

At X, the news that GARM would shut down was celebrated. “No small group should be able to monopolize what gets monetized,” Linda Yaccarino, X’s chief executive, said in a post . “This is an important acknowledgment and a necessary step in the right direction. I am hopeful that it means ecosystem-wide reform is coming.”

We are having trouble retrieving the article content.

Please enable JavaScript in your browser settings.

Thank you for your patience while we verify access. If you are in Reader mode please exit and  log into  your Times account, or  subscribe  for all of The Times.

Thank you for your patience while we verify access.

Already a subscriber?  Log in .

Want all of The Times?  Subscribe .

• High Schools
• Mitch Albom
• Jeff Seidel
• Shawn Windsor
• Motorsports
• Detroit Marathon
• SportsbookWire

Detroit Tigers' Riley Greene scheduled to begin rehab assignment with Triple-A Toledo

The Detroit Tigers are preparing for the return of Riley Greene .

Greene, an All-Star outfielder who has been sidelined with a right hamstring strain , is scheduled to begin a rehab assignment Thursday with Triple-A Toledo. He was cleared to join the Mud Hens after completing running tests before Tuesday's game at Comerica Park.

The exact date for Greene's return to the Tigers will depend on how he feels and how he performs with the Mud Hens. He hasn't played for the Tigers since July 25.

"It was tough because we don't have much of the season left," Greene said, "and my goal is to finish it strong. Just really working hard and being smart about it. I passed every test. I'm feeling good."

CARP IS BACK: Tigers' Kerry Carpenter returns from back injury after missing more than 2 months

Greene, who turns 24 in late September, is hitting .264 with 17 home runs, 51 walks and 109 strikeouts across 101 games in the 2024 season, posting an .842 OPS. He made the All-Star team for the first time in his third MLB season.

His .842 OPS ranks 23rd and his 11.9% walk rate ranks 13th among 140 qualified hitters this season. When healthy, Greene is one of the best players in baseball.

"I want to do well on the field," Greene said, "but staying on the field is my goal."

[ MUST LISTEN: Make "Days of Roar" your go-to Detroit Tigers podcast, available anywhere you listen to podcasts ( Apple , Spotify ) ]

Greene landed on the injured list in late July after playing five games coming out of the All-Star break. He felt discomfort in his legs and tried to play through the issue, but eventually, he underwent tests that revealed a hamstring strain.

It marked Greene's second leg injury in as many years, as well as his fourth injury in three years. He spent one month on the injured list last season with a left fibula stress reaction .

"I think it was just as important for him mentally as it was for us to put a game plan forward," manger A.J. Hinch said about Greene passing his running tests. "Doing everything at full speed, and even some of his times down to first (base), which probably don't seem like a big deal, they're a big deal for him, mentally, in him knowing that he can go full speed and he's strong enough and he's healed."

AWARD WINNER: Riley Greene named Tigers' winner of Heart and Hustle Award from MLB alumni

As a result of injuries over the years, Greene has been limited to 93 games in 2022, 99 games in 2023 and 101 games so far in 2024. He is likely to get extra reps as the designated hitter down the stretch to ensure he stays healthy through the Sept. 29 finale.

The Mud Hens kickstarted a six-game road series Tuesday against the Charlotte Knights, the Triple-A affiliate of the Chicago White Sox. The series ends Sunday.

Greene will join Toledo for Thursday's game.

He looks forward to playing alongside first baseman Spencer Torkelson — one of his close friends — for the first time since the Tigers demoted Torkelson in early June to the Triple-A level.

"It's going to be good to see him," Greene said of Torkelson, hitting .248 with 10 home runs, 41 walks and 80 strikeouts in 55 games with the Mud Hens. "I'm sure we're going to chop it up and talk about things. Hopefully, we see him up here pretty soon."

Contact Evan Petzold at  [email protected]  or follow him  @EvanPetzold .

Listen to our weekly Tigers show  "Days of Roar"  every Monday afternoon on demand at freep.com,  Apple ,  Spotify  or wherever you listen to podcasts. And catch all of our podcasts and daily voice briefing at  freep.com/podcasts .