html assignments

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• Português (do Brasil)

Getting started with HTML

• Overview: Introduction to HTML

In this article, we cover the absolute basics of HTML. To get you started, this article defines elements, attributes, and all the other important terms you may have heard. It also explains where these fit into HTML. You will learn how HTML elements are structured, how a typical HTML page is structured, and other important basic language features. Along the way, there will be an opportunity to play with HTML too!

What is HTML?

HTML (HyperText Markup Language) is a markup language that tells web browsers how to structure the web pages you visit. It can be as complicated or as simple as the web developer wants it to be. HTML consists of a series of elements , which you use to enclose, wrap, or mark up different parts of content to make it appear or act in a certain way. The enclosing tags can make content into a hyperlink to connect to another page, italicize words, and so on. For example, consider the following line of text:

If we wanted the text to stand by itself, we could specify that it is a paragraph by enclosing it in a paragraph ( <p> ) element:

Note: Tags in HTML are not case-sensitive. This means they can be written in uppercase or lowercase. For example, a <title> tag could be written as <title> , <TITLE> , <Title> , <TiTlE> , etc., and it will work. However, it is best practice to write all tags in lowercase for consistency and readability.

Anatomy of an HTML element

Let's further explore our paragraph element from the previous section:

The anatomy of our element is:

• The opening tag: This consists of the name of the element (in this example, p for paragraph), wrapped in opening and closing angle brackets. This opening tag marks where the element begins or starts to take effect. In this example, it precedes the start of the paragraph text.
• The content: This is the content of the element. In this example, it is the paragraph text.
• The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This marks where the element ends. Failing to include a closing tag is a common beginner error that can produce peculiar results.

The element is the opening tag, followed by content, followed by the closing tag.

Active learning: creating your first HTML element

Edit the line below in the "Editable code" area by wrapping it with the tags <em> and </em>. To open the element , put the opening tag <em> at the start of the line. To close the element , put the closing tag </em> at the end of the line. Doing this should give the line italic text formatting! See your changes update live in the Output area.

If you make a mistake, you can clear your work using the Reset button. If you get really stuck, press the Show solution button to see the answer.

Nesting elements

Elements can be placed within other elements. This is called nesting . If we wanted to state that our cat is very grumpy, we could wrap the word very in a <strong> element, which means that the word is to have strong(er) text formatting:

There is a right and wrong way to do nesting. In the example above, we opened the p element first, then opened the strong element. For proper nesting, we should close the strong element first, before closing the p .

The following is an example of the wrong way to do nesting:

The tags have to open and close in a way that they are inside or outside one another . With the kind of overlap in the example above, the browser has to guess at your intent. This kind of guessing can result in unexpected results.

Void elements

Not all elements follow the pattern of an opening tag, content, and a closing tag. Some elements consist of a single tag, which is typically used to insert/embed something in the document. Such elements are called void elements . For example, the <img> element embeds an image file onto a page:

This would output the following:

Note: In HTML, there is no requirement to add a / at the end of a void element's tag, for example: <img src="images/cat.jpg" alt="cat" /> . However, it is also a valid syntax, and you may do this when you want your HTML to be valid XML.

Elements can also have attributes. Attributes look like this:

Attributes contain extra information about the element that won't appear in the content. In this example, the class attribute is an identifying name used to target the element with style information.

An attribute should have:

• A space between it and the element name. (For an element with more than one attribute, the attributes should be separated by spaces too.)
• The attribute name, followed by an equal sign.
• An attribute value, wrapped with opening and closing quote marks.

Active learning: Adding attributes to an element

The <img> element can take a number of attributes, including:

The src attribute is a required attribute that specifies the location of the image. For example: src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" .

The alt attribute specifies a text description of the image. For example: alt="The Firefox icon" .

The width attribute specifies the width of the image with the unit being pixels. For example: width="300" .

The height attribute specifies the height of the image with the unit being pixels. For example: height="300" .

Edit the line below in the Input area to turn it into an image.

• Find your favorite image online, right click it, and press Copy Image Link/Address .
• Back in the area below, add the src attribute and fill it with the link from step 1.
• Set the alt attribute.
• Add the width and height attributes.

You will be able to see your changes live in the Output area.

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see the answer.

Boolean attributes

Sometimes you will see attributes written without values. This is entirely acceptable. These are called Boolean attributes. Boolean attributes can only have one value, which is generally the same as the attribute name. For example, consider the disabled attribute, which you can assign to form input elements. (You use this to disable the form input elements so the user can't make entries. The disabled elements typically have a grayed-out appearance.) For example:

As shorthand, it is acceptable to write this as follows:

For reference, the example above also includes a non-disabled form input element. The HTML from the example above produces this result:

Omitting quotes around attribute values

If you look at code for a lot of other sites, you might come across a number of strange markup styles, including attribute values without quotes. This is permitted in certain circumstances, but it can also break your markup in other circumstances. The element in the code snippet below, <a> , is called an anchor. Anchors enclose text and turn them into links. The href attribute specifies the web address the link points to. You can write this basic version below with only the href attribute, like this:

Anchors can also have a title attribute, a description of the linked page. However, as soon as we add the title in the same fashion as the href attribute there are problems:

As written above, the browser misinterprets the markup, mistaking the title attribute for three attributes: a title attribute with the value The , and two Boolean attributes, Mozilla and homepage . Obviously, this is not intended! It will cause errors or unexpected behavior, as you can see in the live example below. Try hovering over the link to view the title text!

Always include the attribute quotes. It avoids such problems, and results in more readable code.

Single or double quotes?

In this article, you will also notice that the attributes are wrapped in double quotes. However, you might see single quotes in some HTML code. This is a matter of style. You can feel free to choose which one you prefer. Both of these lines are equivalent:

Make sure you don't mix single quotes and double quotes. This example (below) shows a kind of mixing of quotes that will go wrong:

However, if you use one type of quote, you can include the other type of quote inside your attribute values:

To use quote marks inside other quote marks of the same type (single quote or double quote), use HTML entities . For example, this will break:

Instead, you need to do this:

Anatomy of an HTML document

Individual HTML elements aren't very useful on their own. Next, let's examine how individual elements combine to form an entire HTML page:

Here we have:

• <!DOCTYPE html> : The doctype. When HTML was young (1991-1992), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML. Doctypes used to look something like this: html <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > More recently, the doctype is a historical artifact that needs to be included for everything else to work right. <!DOCTYPE html> is the shortest string of characters that counts as a valid doctype. That is all you need to know!
• <html></html> : The <html> element. This element wraps all the content on the page. It is sometimes known as the root element.
• <head></head> : The <head> element. This element acts as a container for everything you want to include on the HTML page, that isn't the content the page will show to viewers. This includes keywords and a page description that would appear in search results, CSS to style content, character set declarations, and more. You will learn more about this in the next article of the series.
• <meta charset="utf-8"> : The <meta> element. This element represents metadata that cannot be represented by other HTML meta-related elements, like <base> , <link> , <script> , <style> or <title> . The charset attribute specifies the character encoding for your document as UTF-8, which includes most characters from the vast majority of human written languages. With this setting, the page can now handle any textual content it might contain. There is no reason not to set this, and it can help avoid some problems later.
• <title></title> : The <title> element. This sets the title of the page, which is the title that appears in the browser tab the page is loaded in. The page title is also used to describe the page when it is bookmarked.
• <body></body> : The <body> element. This contains all the content that displays on the page, including text, images, videos, games, playable audio tracks, or whatever else.

Active learning: Adding some features to an HTML document

If you want to experiment with writing some HTML on your local computer, you can:

• Copy the HTML page example listed above.
• Create a new file in your text editor.
• Paste the code into the new text file.
• Save the file as index.html .

Note: You can also find this basic HTML template on the MDN Learning Area GitHub repo .

You can now open this file in a web browser to see what the rendered code looks like. Edit the code and refresh the browser to see what the result is. Initially, the page looks like this:

• Just below the opening tag of the <body> element, add a main title for the document. This should be wrapped inside an <h1> opening tag and </h1> closing tag.
• Edit the paragraph content to include text about a topic that you find interesting.
• Make important words stand out in bold by wrapping them inside a <strong> opening tag and </strong> closing tag.
• Add a link to your paragraph, as explained earlier in the article .
• Add an image to your document. Place it below the paragraph, as explained earlier in the article . Earn bonus points if you manage to link to a different image (either locally on your computer or somewhere else on the web).

Whitespace in HTML

In the examples above, you may have noticed that a lot of whitespace is included in the code. This is optional. These two code snippets are equivalent:

No matter how much whitespace you use inside HTML element content (which can include one or more space characters, but also line breaks), the HTML parser reduces each sequence of whitespace to a single space when rendering the code. So why use so much whitespace? The answer is readability.

It can be easier to understand what is going on in your code if you have it nicely formatted. In our HTML we've got each nested element indented by two spaces more than the one it is sitting inside. It is up to you to choose the style of formatting (how many spaces for each level of indentation, for example), but you should consider formatting it.

Let's have a look at how the browser renders the two paragraphs above with and without whitespace:

Note: Accessing the innerHTML of elements from JavaScript will keep all the whitespace intact. This may return unexpected results if the whitespace is trimmed by the browser.

Entity references: Including special characters in HTML

In HTML, the characters < , > , " , ' , and & are special characters. They are parts of the HTML syntax itself. So how do you include one of these special characters in your text? For example, if you want to use an ampersand or less-than sign, and not have it interpreted as code.

You do this with character references. These are special codes that represent characters, to be used in these exact circumstances. Each character reference starts with an ampersand (&), and ends with a semicolon (;).

The character reference equivalent could be easily remembered because the text it uses can be seen as less than for &lt; , quotation for &quot; and similarly for others. To find more about entity references, see List of XML and HTML character entity references (Wikipedia).

In the example below, there are two paragraphs:

In the live output below, you can see that the first paragraph has gone wrong. The browser interprets the second instance of <p> as starting a new paragraph. The second paragraph looks fine because it has angle brackets with character references.

Note: You don't need to use entity references for any other symbols, as modern browsers will handle the actual symbols just fine as long as your HTML's character encoding is set to UTF-8 .

HTML comments

HTML has a mechanism to write comments in the code. Browsers ignore comments, effectively making comments invisible to the user. The purpose of comments is to allow you to include notes in the code to explain your logic or coding. This is very useful if you return to a code base after being away for long enough that you don't completely remember it. Likewise, comments are invaluable as different people are making changes and updates.

To write an HTML comment, wrap it in the special markers <!-- and --> . For example:

As you can see below, only the first paragraph is displayed in the live output.

You made it to the end of the article! We hope you enjoyed your tour of the basics of HTML.

At this point, you should understand what HTML looks like, and how it works at a basic level. You should also be able to write a few elements and attributes. The subsequent articles of this module go further on some of the topics introduced here, as well as presenting other concepts of the language.

• As you start to learn more about HTML, consider learning the basics of CSS (Cascading Style Sheets). CSS is the language used to style web pages, such as changing fonts or colors or altering the page layout. HTML and CSS work well together, as you will soon discover.
• Applying color to HTML elements using CSS

HTML for Beginners – How to Get Started with Web Development Basics

Have you always been interested in learning HTML but didn't know where or how to start? Well, this guide is for you.

In it, we will look at:

• An introduction to HTML

A Brief History of HTML

Why learn html.

• Prerequisites for learning HTML
• A simple HTML page
• How to get started with HTML

Introduction to HTML

HTML is an abbreviation for HyperText Markup Language.

This acronym is composed of two main parts: HyperText and Markup Language.

What does “HyperText” mean?

HyperText refers to the hyperlinks or simply links that an HTML page may contain. A HyperText can contain a link to a website, web content, or a web page.

What is a “Markup language”?

A markup language is a computer language that consists of easily understood keywords, names, or tags that help format the overall view of a page and the data it contains. In other words, it refers to the way tags are used to define the page layout and elements within the page.

Since we now know what HyperText and Markup Language mean, we can also understand what these terms mean when put together.

What is HTML?

HTML or HyperText Markup Language is a markup language used to describe the structure of a web page. It uses a special syntax or notation to organize and give information about the page to the browser.

HTML consists of a series of elements that tell the browser how to display the content. These elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", and so on. They usually have opening and closing tags that surround and give meaning to each piece of content.

There are different tag options you can use to wrap text to show whether the text is a heading, a paragraph, or a list. Tags look like <h1> (opening tag) and </h1> (closing tag).

Let's see some other examples:

The first version of HTML was written in 1993; since then, many different versions of HTML have been released, allowing developers to create interactive web pages with animated images, sound, and gimmicks of all kinds.

The most widely used version throughout the 2000's was HTML 4.01, which became an official standard in December 1999.

Another version, XHTML, was a rewrite of HTML as an XML language.

In 2014, HTML5 was released, and it took over from previous versions of HTML. This version includes new elements and capabilities added to the language. These new features allow you to create more powerful and complex websites and web apps, while keeping the code easier to read.

HTML is the foundation of all web pages. Without HTML, you would not be able to organize text or add images or videos to your web pages. HTML is the root of everything you need to know to create great-looking web pages!

As the name suggests, hypertext refers to cross-referencing (or linking) between different related sections or webpages on the world-wide-web.

HyperText mark-up language is a standard mark-up language that allows developers to structure, link, and present webpages on the world-wide-web. So it is important to know the structure and layout of the website that you would like to build.

Prerequisites for Learning HTML

HTML is a relatively easy language and does not require any formal education. So basically, there are no prerequisites for learning it.

HTML is text-based computer coding, and anyone can learn and run it, as long as they understand letters and basic symbols. So, all you need is basic computer knowledge and the ability to work with files.

Of course, any knowledge of other programming languages will enhance your abilities with HTML and web development, but this is not a prerequisite for learning HMTL.

What a Simple HTML Page Looks Like

Alright let's see what's going on here:

Note: In HTML, an opening tag begins a section of page content, and a closing tag ends it.

For example, to markup a section of text as a paragraph, you would open the paragraph with an opening paragraph tag, which is "<p>", and close it with a closing paragraph tag, which is "</p>".

In closing tags, the element is always preceded by a forward slash ("/").

How to Get Started with HTML

There are many different online resources that can help you learn HTML. I recommend the following ones:

• freeCodecamp : an interactive and free learning platform that aims to make learning web development possible for anyone. This platform has well-structured content, good exercises to help you grasp the concept, and a supportive community that can help you in case of any difficulties during the course.
• W3Schools : a learning platform that covers all the aspects of web development. It explains HTML tags in a very understandable and in-depth way, which also makes it easier to learn how to use them well.

Learning some of the basics of HTML may not take much time for some people. But getting really good at HTML, like any skill, definitely takes time. You might be able to grasp the basic HTML tags in a few hours, but make sure to take the time to learn how to properly work with them.

My name is Patrick Cyubahiro, I am a software & web developer, UI/UX designer, technical writer, and Community Builder.

I hope you enjoyed reading this article; and if it was helpful to you, feel free to let me know on Twitter: @ Pat_Cyubahiro or via email: ampatrickcyubahiro[at]gmail.com

Thanks for reading and happy learning!

Community Builder, Software & web developer, UI/IX Designer, 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...

Java Tutorial for Beginners

Kids Learn HTML: The Getting Started Guide

• HTML Lab Assignments

HTML Assignment and HTML Examples for Practice

Text formatting, working with image, working with link.

• 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
• 10 HTML Project Ideas & Topics For Beginners [2024]

Top 10 Projects For Beginners To Practice HTML and CSS Skills

• Top 10 Coding Projects For Beginners
• Top 10 Front-End Web Development Projects For Beginners
• JavaScript Project Ideas with Source Code
• 10 Best JavaScript Project Ideas For Beginners in 2024
• Top 5 JavaScript Projects For Beginners on GFG
• 90+ React Projects with Source Code [2024]
• 7 Best React Project Ideas For Beginners in 2024
• 12 Best Full Stack Project Ideas in 2024
• 10 Best Web Development Projects For Your Resume
• 30+ Web Development Projects with Source Code [2024]
• 10 Best Angular Projects Ideas For Beginners
• Top 7 Node.js Project Ideas For Beginners
• 5 Best MERN Projects To Add In Resume
• 10 Best Web Development Project Ideas For Beginners in 2024
• 5 Amazing React Native Project Ideas for Beginners

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.  

1. A Tribute Page

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

2. Webpage Including Form

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

3. Parallax Website

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

4. Landing Page

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.

5. Restaurant Website

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

6. An Event or Conference Webpage

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

7. Music Store Page

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. 

8. Photography Site

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

9. Personal Portfolio

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

10. Technical Documentation

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-Projects
• Web Technologies

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

HTML Projects for Beginners: 10 Easy Starter Ideas

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

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.

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.

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

How to Add an Image & Background Image in HTML

How to Call a JavaScript Function in HTML

How to Embed Google Map in HTML [Step-By-Step Guide]

How to Create a Range Slider in HTML + CSS

How to Create an HTML Tooltip [+ Code Templates]

How to Make an HTML Text Box [Examples]

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

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

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.

Popular Tutorials

Learn python interactively, popular examples.

• Introduction
• What is HTML?

HTML Basics

• 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
• HTML Images
• HTML Italic
• HTML Superscript and Subscript
• HTML Formatting
• HTML Meta Elements
• HTML Favicon
• HTML Form Elements
• HTML Form Action

Semantic HTML

• 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

Graphics & Media

• HTML Canvas

HTML Miscellaneous

• HTML Iframes
• HTML Entities
• HTML Quotations
• HTML File Paths
• HTML Emojis
• HTML Symbols

An HTML Form is a section of the document that collects input from the user. The input from the user is generally sent to a server (Web servers, Mail clients, etc). We use the HTML <form> element to create forms in HTML.

• Example: HTML Form

The HTML <form> element is used to create HTML forms. For example,

Browser Output

A form contains special interactive elements that users use to send the input. They are text inputs, textarea fields, checkboxes, dropdowns, and much more. For example,

To learn more about the various form controls, visit HTML Form Inputs.

• Form Attributes

The HTML <form> element contains several attributes for controlling data submission. They are as follows:

The action attributes define the action to be performed when the form is submitted. It is usually the url for the server where the form data is to be sent.

In the above example, when the form is submitted, the data from the form is sent to /login .

The method attribute defines the HTTP method to be used when the form is submitted. There are 3 possible values for the method attribute:

• post - It is used to send data to a server to update a resource. <form method = "post"> ... </form>
• get : It is used to request data from a specified resource. <form method = "get"> ... </form>
• dialog : This method is used when the form is inside a <dialog> element. Using this method closes the dialog and sends a form-submit event.

To learn more about HTTP methods GET and POST, visit HTML Form Action: POST and GET .

It specifies where to display the response received after the form is submitted. Similar to the target attribute in <a> tags, the target attribute has four possible values.

• _self (default): Load the response into the same browser tab. <form target="_self"> <label for="firstname">Enter your first name:</label> <input type="text" name="firstname"> </form>
• _blank : Load the response into a new browser tab. <form target="_blank"> <label for="firstname">Enter your first name:</label> <input type="text" name="firstname"> </form>
• _parent : Load into the parent frame of the current one. If no parent is available,it loads the response into the same tab. <form target="_parent"> <label for="firstname">Enter your first name:</label> <input type="text" name="firstname"> </form>
• _top : Load the response into the top-level frame. If no parent is available, it loads the response into the same tab. <form target="_top"> <label for="firstname">Enter your first name:</label> <input type="text" name="firstname"> </form>

It specifies how the form data should be encoded for the request. It is only applicable if we use the POST method.

In the above example, data from the form will be encoded in the x-www-form-urlencoded format (which is the default encoding format).

It specifies the name of the form. The name is used in Javascript to reference or access this form.

The above form can be accessed in javascript as:

Although it is possible to use name to access form elements in javascript, it is recommended to use id to access the form elements.

If the novalidate attribute is set, all validations in the form elements are skipped.

In the above example, the form will be submitted even if we enter some invalid value to the email field, such as Hi .

Table of Contents

StarTribune

State sen. nicole mitchell off committee assignments while case under review.

DFL state Sen. Nicole Mitchell, of Woodbury, who was arrested in an alleged burglary this month, will be relieved of her committee work and removed from DFL caucus meetings while her case is under review in the courts and the Senate, DFL Senate Majority Leader Erin Murphy said in a statement Sunday.

"This is a tragic situation, and there are still questions that need to be answered," Murphy said.

Mitchell is, however, expected to participate in votes, DFL Assistant Majority Leader Sen. Nick Frentz told the Star Tribune Sunday morning. There is no rule prohibiting Mitchell from voting while the ethics complaint and legal issues are pending, though Senate Republicans object.

Mitchell is the vice chair of the Senate State and Local Government and Veterans Committee, and serves on the committee for energy, utilities, environment and climate, plus the elections and human services committees.

She was arrested April 22 and charged with felony first-degree burglary after she allegedly broke into her stepmother's house in Detroit Lakes. Police found her dressed in black and a flashlight covered in a black sock nearby.

"I know I did something bad," she allegedly told police, telling them she was trying to take some of her late father's belongings, including his ashes. A backpack found near Mitchell contained a laptop police suggested belonged to her stepmother.

In a Facebook post, Mitchell said she was checking on her stepmother, who she said was experiencing a "decline due to Alzheimer's and associated paranoia."

Following the incident, many have called for Mitchell's resignation, including Republican leadership . Mitchell has said she will not resign.

The hearing for a Senate ethics complaint filed by Republicans is scheduled for May 7.

Senate Minority Leader Mark Johnson said in a statement Sunday that his caucus will not vote alongside Mitchell before a decision from the ethics committee.

Johnson called Mitchell's removal from committees a "half-hearted punishment."

The incident has added intrigue to the final weeks of the legislative session. Mitchell's vote could be crucial for the DFL, which controls the Senate by one seat. The DFL caucus met for more than four hours Saturday.

On KSTP's "At Issue With Tom Hauser" on Sunday morning, Minnesota Republican Party Chair David Hann pointed out contradictions between what Mitchell allegedly said to police and what she posted on social media. He said the Senate needs to decide whether or not Mitchell is qualified to continue to serve before continuing to pass bills.

"The question is really, is she able to serve and be in the state Senate," Hann said. "The problem, I think, is really elevated because it's a one-vote margin of a majority and she is the deciding vote on every piece of legislation that will get passed."

Also on KSTP on Sunday, DFL Chair Ken Martin said Mitchell deserves due process and that he thinks the upcoming Senate ethics decision is the right move. He said if he were in her shoes, he would consider resigning, "to focus on the legal challenges ahead and my family." However, he said it's a choice only Mitchell can make.

"I'm not quite there in the position right now to ask her to resign," Martin said. "I believe this is a decision she alone can make."

Mitchell is out of the Becker County jail on conditional bail and has appeared on video remotely since her arrest.

Star Tribune staff writer Josie Albertson-Grove contributed to this article.

Greta Kaul is the Star Tribune’s Ramsey County reporter.

• Yuen: The bizarre and relatable case of Minnesota state Sen. Nicole Mitchell
• Why late-night options have dwindled in Minneapolis
• Edwards puts in 40 points; Wolves knock out Suns in playoff sweep
• Souhan: Experts made two mistakes when they panned Gobert trade
• Shakopee Mdewakanton tribe applies to put 815 acres in southwest metro into trust

Supporters rally at courthouse as Minnesota State trooper appears for murder hearing

New State Patrol chief opens up about adding women to ranks and fretting over having teen driver at home

Prep Athletes of the Week: Slender pitcher heavy on importance

Blaine reveals plans for major new entertainment district near National Sports Center

Jogger on rural southwestern minnesota road is hit from behind by pickup and killed.

• 911 transcript gives more detail of Sen. Mitchell's alleged burglary Apr. 25
• State Sen. Nicole Mitchell off committee assignments while case under review • East Metro
• Remade Stillwater riverfront could bring new parks, boat launch, picnic space and fishing piers • East Metro
• DFL state senator charged with first-degree burglary at stepmother's home • East Metro
• Brooks: Minnesota state senator's burglary arrest puts private family drama in the election year spotlight • East Metro
• Fired Minneapolis officer Derek Chauvin, wife charged with tax crimes • East Metro

© 2024 StarTribune. All rights reserved.

• Red Sox Acquire Garrett Cooper
• Orioles Option Jackson Holliday
• Wade Miley To Undergo Tommy John Surgery
• Jesus Luzardo Place On Injured List, Will Undergo Testing Due To Elbow Tightness
• White Sox To Select Tommy Pham, Designate Kevin Pillar For Assignment
• Cubs To Place Cody Bellinger On IL With Fractured Rib, Recall Pete Crow-Armstrong
• Hoops Rumors
• Pro Football Rumors
• Pro Hockey Rumors

MLB Trade Rumors

Red Sox Designate Pablo Reyes For Assignment

By Steve Adams | April 29, 2024 at 10:06am CDT

The Red Sox announced Monday morning that they’ve designated infielder Pablo Reyes for assignment. His spot on the roster will go to newly acquired first baseman/outfielder Garrett Cooper , whom the Sox added in a cash deal with the Cubs over the weekend.

Reyes has been with the Sox dating back to last season but is out to a brutal start at the plate, hitting just .183/.234/.217 with a 29.7% strikeout rate in his first 64 plate appearances. It’s a far cry from the .287/.339/.377 slash he posted through 185 trips to the plate with the ’23 Sox, when he punched out in only 11.4% of his turns at the plate. Reyes’ 19 strikeouts on the season are already just two fewer than the 21 he posted in nearly three times as much action last year.

The 30-year-old Reyes has appeared in parts of six big league seasons but never topped last year’s 185 plate appearances. He’s a lifetime .248/.309/.349 hitter in 572 plate appearances between the Pirates, Brewers and Sox. He’s played every position on the diamond with the exception of catcher, including a four-inning cameo on the mound. Reyes has drawn solid ratings at third base, in particular, though his versatility has in a way prevented him from picking up a meaningful sample at any single position; his 289 career frames at the hot corner are the most he’s tallied at any one spot.

Reyes is out of minor league options, so the Sox didn’t have the ability to simply send him down to Triple-A Worcester without first exposing him to waivers. They’ll have a week to trade Reyes, attempt to pass him through outright waivers or release him. He’s previously been outrighted in his career (twice, in fact), which gives him the right to reject a minor league assignment in the event that he does clear waivers.

22 Comments

59 mins ago

Crazy how fast they have already moved on from Kevin Pillar.

57 mins ago

It had to be done, Pablo wasn’t doing the job on offense or defense.

Looking forward to seeing what Grissom can do.

44 mins ago

If you believe the article he’s a ‘newly acquired’ grissom, must be a new and improved version beyond the guy they traded for over the offseason. Maybe with some extra defense built into the glove.

The bat will be welcome for the offense, I’m just curious/worried about the defense/errors.

Grissom produced a healthy dose of errors, even while throwing over to a better 1B target in Atlanta than anything Boston can put on the field.

29 mins ago

GASox – Yeah he does have a reputation for below average defense, but if he can be an average glove with an above average bat I’ll be happy.

Sale has been pitching great! Already made 5 starts, 0.92 WHIP, 33 K’s in 31 innings. He will definitely be pitching against the Sox next week, not sure which day because the Braves have a couple days off before then.

17 mins ago

Unfortunately Houck is slated to go again the Twinkies a couple games before the ATL series, it would’ve been fun to see the two mirror images dueling one another – young vs old, left vs right, both putting up quality starts with similar mirror action on the pitches.

52 seconds ago

GASox – I would have added “ornery vs ornery”. LOL!

Interesting trivia question, who are the only two current Red Sox players to have ever faced Sale in a regular season MLB game? Don’t cheat by looking it up ;O)

15 mins ago

“Newly acquired” references Garrett Cooper, whom they acquired Saturday and have not yet added to the roster.

They’ll need a different move for Vaughn Grissom tomorrow.

Steve – It’s my fault for bringing up Grissom, sometimes my brain jumps ahead.. LOL!

55 mins ago

Looks like dalbec wins out as the remaining 3B depth piece, and, by Tues one of hamilton/valdez are headed down. A bit surprising given Pablo’s positional versatility, but, apparently the team feels improved health issues around the corner.

That 5 game hitting streak seems to have made some impression anyways, as has a possible change to his swing – remember how I’d highlighted his negative 2 degree launch angle and lack of pop infield fly balls,

(Assuming Reyes even gets claimed, (or traded) instead of being outrighted.)

Honestly of the three you’d think Hamilton and Valdez BOTH get sent down just to preserve depth, as well as let them continue to work on defense. But, as I said, maybe Breslow thinks Reyes can pass through waivers right now.

Maybe this is signaling a shift to prioritizing defense a little more as well for the MLB-club infield, one can only hope.

47 mins ago

GASox – I know most defensive stats are BS, but any idea how Pablo could have gotten “solid ratings at 3B” when he has 4 errors in just 78 innings at the position this season? Maybe the ratings are very old?

38 mins ago

Fever – maybe viewed through a lens comparative to Devers?

10 mins ago

I doubt anyone is claiming Reyes. He did okay last year, but every team has a guy like this. Valdez probably gets thru as well, but he is young enough that a bad team should take a flier.

36 mins ago

Pablo Reyes? I’m not buying it. I think it is Pablo Ozuna in disguise trying another trick to get back to MLB. They bust you on age, try the ol’ name change trick.

22 mins ago

Now that you mention it, I’ve never seen them both in the same room at the same time….

35 mins ago

Pablo may go unclaimed and wind up in AAA.

24 mins ago

Suit, very possible. But, I’d assume 2023’s numbers and his utility potential get him a home at least with a nothing to lose club like the White Sox, if not somewhere even better than that.

Right now I’m more curious what the lineup card will look like the next couple days while Yoshida sits again.

Your best defense comes with dalbec at first, and Cooper or Ref handling DH duties.

Cora’s boy Hamilton *should* be the one to go down, and, here’s why:

We’ve already seen Devers and Casas go down at the same time. If dalbec went down, and Devers had any trouble, you need valdez to be an emergency 3B where he played in the minors for HOU. That’d certainly be better than moving ref/cooper/hamilton over there even if you could slide a catcher to 1B in a pinch.

Dalbec sharing dh duties keeps his 5 game hit streak bat in the lineup, and reduces injury risk while fielding, but not hitting or base-running. And I think sitting him and removing those regular ABs undoes some of the progress we’re seeing. What a guy did 3 weeks ago isn’t as important as what he’s doing lately.

So while both hamilton & valdez haven’t gotten things done, one had more emergency value and the other doesn’t.

The fact remains, this club is still very weak at 3B depth.

18 mins ago

GASox – Speaking of Houston, not fair the Sox have to wait until August to play them. I’m not counting them out, they are still only 6 games out of first place and they are getting back some of their injured players.

11 mins ago

Fever – Houston is playing better than their record suggests.

They’re also 0-7 in one-run games this year. Let that sink in. No way that trend continues.

I’ll say 2 things for Pablo: he’s consistently inconsistent, and he’s made a nice career as a utility player who doesn’t play any position particularly well defensively.

21 mins ago

Red Sux gonna Red Sux…

He’ll be back Cora loves him

nooo not our best closer, with a career ERA of 0

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

Forget the beach: How you can experience the real Maldives

I was on a boat in the middle of the Indian Ocean, about to taste real life in the Maldives .

A crew of fishermen from Sun Siyam Iru Veli, located in the Dhaalu Atoll, set up the fishing lines. We were anchored off the shores of the nearby local island Bandidhoo, where people fish tuna for money and smaller reef fish for their tables. 

The task seemed simple enough: bait attached to a hook tied to the end of a fishing line, which I was to hold by hand. As the line dropped to the reef, I was to wait for the feel of a fish nibbling on the bait. Then I’d just pull the line by hand, and voilà: a catch. No poles or spears required. 

Long-line fishing is a generations-old tradition in the Maldives, a way of life for its people. Living in an island nation where not much grows, Maldivians sustain themselves off of fish and coconuts. Not only is it an ancient practice, but long-line fishing is sustainable, taking just a few fish at a time with minimal damage to coral reefs or bycatch. 

I quickly learned that I was not a natural long-line fisher. For the next hour, I mistook the moving current for a gullible fish when I was actually the gullible one. Other times, the fish was stealthy enough to take the bait without me feeling anything at all. 

Learn more: Best travel insurance

Instead, I watched the fishermen work their magic. The line danced in their hands, flying up and down. Sensitive to the slightest movement going on 65 feet underwater, they knew the exact moment to start pulling the line up and win the battle against the fish. 

As the sun set over the water, we caught a total of nine fish, including emperor fish, batfish and humpback snapper. 

Although the rest of the fish went to the fishermen to enjoy at home, one snapper would make a reappearance the following day. For lunch, I enjoyed the red snapper, grilled to perfection and sliced raw into sashimi. 

While the Maldives is renowned as a romantic, luxurious destination where people can enjoy the sunshine, soft white sand and gentle lapping turquoise waters, it’s also packed with history and culture. While everyone should spend some time relaxing at the beach , the atoll nation offers way more for travelers to do – and learn more about life in the Maldives. 

Like most things in the Maldives, most activities are unfortunately pricey, especially since booking through a resort is pretty much your only option.

Long-line fishing is just the beginning. Here are eight other activities in the Maldives beyond simply lounging on the beach.

Go fish, Maldivian-style

Sunset fishing was hands-down my favorite excursion in the Maldives. Watching the fishermen in action was exhilarating, even though I couldn’t get the long line fishing down myself. Partaking in the ancient fishing tradition was a peek into real Maldivian life – and against the most gorgeous of backdrops: the sun setting over the ocean. To pick which fish to eat the next day and how it would be prepared made the experience extra rewarding.  

Check out the marine life

The Maldives is rich in marine biodiversity. Guests can snorkel and dive with whale sharks in southern waters and alongside manta rays in the north. At Sun Siyam Iru Veli, I went on an afternoon snorkeling tour, a 20-minute boat ride from the resort, and swam along the reef, an uninhabited island. Dropping about 100 feet, the reef was overflowing with marine life. I spotted a plethora of tropical reef fish along with three Hawksbill turtles – the most common type in the Maldives – and a white-tip reef shark. 

Even on resort grounds, travelers have plenty of opportunities to easily witness marine life – I spotted a pod of dolphins swim past me on my sunset fishing excursion and baby reef sharks around the shoreline by my villa at Sun Siyam Iru Veli in the mornings. 

Are there blind scuba divers? Here's the accessible way anyone can explore the ocean.

Explore the ocean … at night

Most resorts in the Maldives also have a house reef, where colorful clownfish and triggerfish swim around anemones and soft coral. At Sun Siyam Iru Fushi, guests can request a nighttime snorkeling activity, where they dive in after the sun sets to see the reef in another light, literally. 

The gear was simple. I slipped an orange filter over my snorkel mask, secured with a band, to eliminate the fluorescence caused by my blue light flashlight. This light source would make all the difference, as the soft coral and anemones absorbed the blue light, casting neon greens and reds back. The bright red anemones swayed in the dark and soft coral glowed, showcasing intricate brain-like textures and patterns not noticeable in daylight. 

Help restore some coral

Coral reefs play a critical role in the very existence of the Maldives; without them, the islands would be damaged by strong waves. Maldivians also rely on the fish from reefs for their livelihoods. Guests can participate in coral restoration alongside on-staff marine biologists at multiple Sun Siyam Resorts with coral planting. In this activity, I fastened coral fragments to a metal frame that’s later placed in the ocean to hopefully regrow and thrive. 

Visit a local island 

Sun Siyam Resorts offers travelers the chance to get off the resort island and witness everyday life for Maldivians. Guests can sign up for a local island tour, which takes them to a local fishing village to meet community members and see the school and local shops. I went on a local farm tour, where I got to see how some of the produce, such as papaya, that’s served in the resorts are grown. 

Watersports galore

In the Maldives, the ocean is the main attraction. Siyam World Maldives way offers more than the typical jetskis, paddleboards and kayaks. Guests of all ages can clamber around on the Indian Ocean’s biggest floating waterpark, made up of inflatable obstacles. There are also electric surfboards, kite surfing, banana boats and underwater jetpacks. I rented a seabob, a diving scooter that let me glide up and down underwater like a dolphin at up to 13 miles per hour. It was a strange sensation, but definitely took snorkeling to the next level. 

Visit an uninhabited private island

Over 83% of the Maldives’ 1,192 islands are uninhabited, allowing travelers to bask in unspoiled tropical landscapes. At Sun Siyam Iru Fushi, I was able to enjoy untouched nature and be the only present human there. Sun Siyam Iru Fushi and its sister resort, Siyam World, also share a small private island where only palm trees exist (and a restroom facility, so don’t worry about that). Guests can book the private island for picnics and photoshoots, which willand it’ll be exclusively theirs for the entire time. During the picnic, staff set up a tent for respite from the afternoon sun and served lunch and even champagne. No roughing it here.

Learn more about Maldivian culture

Every Friday night at Sun Siyam Iru Fushi, Maldivian staff share a piece of their culture with guests through traditional song and dance – of course, guests are invited to learn the dance, too. In Boduberu , dancers move energetically to the beat of coconut drums and folk singing. The dancing style is said to have come from African sailors who reached the Maldives many centuries ago, and is typically performed at special occasions and celebrations. The resort also offers cooking classes, where guests can learn how to make traditional Maldivian dishes, and free workshops such as making your own coconut oil, a staple product for cooking in the country. 

Kathleen Wong is a travel reporter for USA TODAY based in Hawaii. You can reach her at [email protected] .

HTML Tutorial

Html graphics, html examples, html references, html introduction.

HTML is the standard markup language for creating Web pages.

What is HTML?

• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

A Simple HTML Document

Example explained.

• The <!DOCTYPE html> declaration defines that this document is an HTML5 document
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the HTML page
• The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
• The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
• The <h1> element defines a large heading
• The <p> element defines a paragraph

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

The HTML element is everything from the start tag to the end tag:

Note: Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!

Advertisement

Web Browsers

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.

A browser does not display the HTML tags, but uses them to determine how to display the document:

HTML Page Structure

Below is a visualization of an HTML page structure:

Note: The content inside the <body> section will be displayed in a browser. The content inside the <title> element will be shown in the browser's title bar or in the page's tab.

HTML History

Since the early days of the World Wide Web, there have been many versions of HTML:

This tutorial follows the latest HTML5 standard.

Video: HTML Introduction

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.

Donna Smallwood Activities Center holds festive Senior Prom: Sun Postings

• Updated: Apr. 29, 2024, 8:09 a.m. |
• Published: Apr. 29, 2024, 8:06 a.m.

Donna Smallwood Activities Center recently restarted its Senior Prom affair at Normandy High School. (Courtesy of Parma City Schools) Courtesy of Parma City Schools

• John Benson, special to cleveland.com

PARMA, Ohio -- The Donna Smallwood Activities Center recently restarted its Senior Prom affair.

The city partnered with the Parma City School District to bring back the pre-pandemic event with roughly 100 sharply-dressed Parma, Parma Heights and Seven Hills senior adults attending the fun affair held at Normandy High School.

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.

HTML Exercises

Steps to create a webpage in html using notepad, program to see difference between paragraphs & normal text with line break, write an html program to display hello world., write a program to create a webpage to print values 1 to 5, write a program to create a webpage to print your city name in red color., write a program to print a paragraph with different font and color..

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

An official website of the United States government

Here’s how you know

Official websites use .gov A .gov website belongs to an official government organization in the United States.

Secure .gov websites use HTTPS A lock ( Lock A locked padlock ) or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

HHS Issues New Rule to Strengthen Nondiscrimination Protections and Advance Civil Rights in Health Care

Download the News Release   Download the News Release - Word

Today, the U.S. Department of Health and Human Services (HHS) Office for Civil Rights (OCR) and the Centers for Medicare & Medicaid Services (CMS) issued a final rule under Section 1557 of the Affordable Care Act (ACA) advancing protections against discrimination in health care. By taking bold action to strengthen protections against discrimination on the basis of race, color, national origin, sex, age, and disability, this rule reduces language access barriers, expands physical and digital accessibility, tackles bias in health technology, and much more.

“Today’s rule is a giant step forward for this country toward a more equitable and inclusive health care system, and means that Americans across the country now have a clear way to act on their rights against discrimination when they go to the doctor, talk with their health plan, or engage with health programs run by HHS,” said Secretary Xavier Becerra. “I am very proud that our Office for Civil Rights is standing up against discrimination, no matter who you are, who you love, your faith or where you live.  Once again, we are reminding Americans we have your back.”

“Section 1557 is critical to making sure that people in all communities have a right to access health care free from discrimination.  Today’s rule exemplifies the Biden-Harris Administration’s ongoing commitment to health equity and patient rights,” said OCR Director Melanie Fontes Rainer. “Traveling across the country, I have heard too many stories of people facing discrimination in their health care. The robust protections of 1557 are needed now more than ever. Whether it’s standing up for LGBTQI+ Americans nationwide, making sure that care is more accessible for people with disabilities or immigrant communities, or protecting patients when using AI in health care, OCR protects Americans’ rights.”

“CMS is steadfast in our commitment to providing access to high-quality, affordable health care coverage for millions of people who represent the vibrant diversity that makes America strong,” said CMS Administrator Chiquita Brooks-LaSure. “Today’s rule is another important step toward our goal of health equity – toward the attainment of the highest level of health for all people, where everyone has a fair and just opportunity to attain their optimal health.”

The rule will restore protections gutted by the prior administration and help increase meaningful access to health care for communities across the country. The 1557 final rule draws on extensive stakeholder engagement, review of over 85,000 comments from the public, the Department’s enforcement experience, and developments in civil rights law. Among other things, the rule:

• Holds HHS’ health programs and activities to the same nondiscrimination standards as recipients of Federal financial assistance.
• For the first time, the Department will consider Medicare Part B payments as a form of Federal financial assistance for purposes of triggering civil rights laws enforced by the Department, ensuring that health care providers and suppliers receiving Part B funds are prohibited from discriminating on the basis of race, color, national origin, age, sex and disability.
• Requires covered health care providers, insurers, grantees, and others, to proactively let people know that language assistance services are available at no cost to patients.
• Requires covered health care providers, insurers, grantees, and others to let people know that accessibility services are available to patients at no cost.
• Clarifies that covered health programs and activities offered via telehealth must also be accessible to individuals with limited English proficiency, and individuals with disabilities.
• Protects against discrimination by codifying that Section 1557’s prohibition against discrimination based on sex includes LGTBQI+ patients.
• Respects federal protections for religious freedom and conscience and makes clear that recipients may simply rely on those protections or seek assurance of them from HHS.
• Respects the clinical judgement of health care providers.
• Protects patients from discriminatory health insurance benefit designs made by insurers.
• Clarifies the application of Section 1557 nondiscrimination requirements to health insurance plans.

Given the increasing use of artificial intelligence (AI) in health programs and activities, the rule clarifies that nondiscrimination in health programs and activities continues to apply to the use of AI, clinical algorithms, predictive analytics, and other tools. This clarification serves as one of the key pillars of HHS’ response to the President’s Executive Order on Safe, Secure, and Trustworthy Development and Use of Artificial Intelligence . Specifically, the rule:

• Applies the nondiscrimination principles under Section 1557 to the use of patient care decision support tools in clinical care.
• Requires those covered by the rule to take steps to identify and mitigate discrimination when they use AI and other forms of decision support tools for care.

Through partnership and enforcement, HHS OCR helps protect access to health care, because all people deserve health care that is safe, culturally competent, and free from discrimination. Learn more about the robust protections of Section 1557 of the ACA at www.HHS.gov/1557 .

This press release provides a summary, not any independent interpretation of Section 1557.  The Final Rule may be viewed or downloaded at: https://www.federalregister.gov/public-inspection/2024-08711/nondiscrimination-in-health-programs-and-activities

Sign Up for Email Updates

Receive the latest updates from the Secretary, Blogs, and News Releases

Subscribe to RSS

Receive latest updates

Related News Releases

Biden-harris administration moves forward with medicare drug price negotiations to lower prescription drug costs for people with medicare, new hhs report shows national uninsured rate reached all-time low in 2023 after record-breaking aca enrollment period, hhs office for civil rights settles complaint with florida health center that failed to provide effective communication for a patient’s caregiver, media inquiries.

For general media inquiries, please contact  [email protected] .