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

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

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

Unit 2: Intro to HTML/CSS: Making webpages

About this unit.

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

Intro to HTML

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

Intro to CSS

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

More HTML tags

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

CSS text properties

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

Web development tools

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

More CSS selectors

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

Other ways to embed CSS

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

Further learning

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

Tutorials Class - Logo

  • HTML Basics

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

Steps to Create a Webpage in HTML using Notepad

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

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

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

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

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

Creating a Simple HTML Page using Notepad Editor

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

Step 1: Open Notepad (Windows)

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

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

Step 2: Create a New Document

Go to Notepad Menu: File > New

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

Step 3: Write Some HTML code or Program

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

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

Step 4: Save the HTML Page

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

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

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

Step 5: View the HTML Page using Browser

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

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

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

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

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

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

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

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

Different between HTML Paragraph & Regular line break:

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

Write an HTML program to display hello world.

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

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

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

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

Hint: Put values inside the body tag.

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

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

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

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

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

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

assignment for html

  • HTML Exercises Categories
  • HTML All Exercises & Assignments
  • HTML Top Exercises
  • HTML Paragraphs
  • Skip to main content
  • Skip to search
  • Skip to select language
  • Sign up for free
  • English (US)

HTML basics

  • Overview: Getting started with the web

HTML ( H yper T ext M arkup L anguage) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. As the title suggests, this article will give you a basic understanding of HTML and its functions.

So what is HTML?

HTML is a markup language that defines the structure of your content. HTML consists of a series of elements , which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on. For example, take the following line of content:

If we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it in paragraph tags:

Anatomy of an HTML element

Let's explore this paragraph element a bit further.

paragraph element including opening tag, content reading 'my cat is very grumpy', and a closing tag

The main parts of our element are as follows:

  • The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets . This states where the element begins or starts to take effect — in this case where the paragraph begins.
  • The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.
  • The content: This is the content of the element, which in this case, is just text.
  • The element: The opening tag, the closing tag, and the content together comprise the element.

Elements can also have attributes that look like the following:

Paragraph opening tag with a class attribute highlighted: class=editor-note

Attributes contain extra information about the element that you don't want to appear in the actual content. Here, class is the attribute name and editor-note is the attribute value . The class attribute allows you to give the element a non-unique identifier that can be used to target it (and any other elements with the same class value) with style information and other things. Some attributes have no value, such as required .

Attributes that set a value always have:

  • A space between it and the element name (or the previous attribute, if the element already has one or more attributes).
  • The attribute name followed by an equal sign.
  • The attribute value wrapped by opening and closing quotation marks.

Note: Simple attribute values that don't contain ASCII whitespace (or any of the characters " ' ` = < > ) can remain unquoted, but it is recommended that you quote all attribute values, as it makes the code more consistent and understandable.

Nesting elements

You can put elements inside other elements too — 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 be strongly emphasized:

You do however need to make sure that your elements are properly nested. In the example above, we opened the <p> element first, then the <strong> element; therefore, we have to close the <strong> element first, then the <p> element. The following is incorrect:

The elements have to open and close correctly so that they are clearly inside or outside one another. If they overlap as shown above, then your web browser will try to make the best guess at what you were trying to say, which can lead to unexpected results. So don't do it!

Void elements

Some elements have no content and are called void elements . Take the <img> element that we already have in our HTML page:

This contains two attributes, but there is no closing </img> tag and no inner content. This is because an image element doesn't wrap content to affect it. Its purpose is to embed an image in the HTML page in the place it appears.

Anatomy of an HTML document

That wraps up the basics of individual HTML elements, but they aren't handy on their own. Now we'll look at how individual elements are combined to form an entire HTML page. Let's revisit the code we put into our index.html example (which we first met in the Dealing with files article):

Here, we have the following:

  • <!DOCTYPE html> — doctype . It is a required preamble. In the mists of time, when HTML was young (around 1991/92), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. However, these days, they don't do much and are basically just needed to make sure your document behaves correctly. That's all you need to know for now.
  • <html></html> — the <html> element. This element wraps all the content on the entire page and is sometimes known as the root element. It also includes the lang attribute, setting the primary language of the document.
  • <head></head> — the <head> element. This element acts as a container for all the stuff you want to include on the HTML page that isn't the content you are showing to your page's viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more.
  • <meta charset="utf-8"> — This element sets the character set your document should use to UTF-8 which includes most characters from the vast majority of written languages. Essentially, it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later on.
  • <meta name="viewport" content="width=device-width"> — This viewport element ensures the page renders at the width of viewport, preventing mobile browsers from rendering pages wider than the viewport and then shrinking them down.
  • <title></title> — the <title> element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark/favorite it.
  • <body></body> — the <body> element. This contains all the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.

Let's turn our attention to the <img> element again:

As we said before, it embeds an image into our page in the position it appears. It does this via the src (source) attribute, which contains the path to our image file.

We have also included an alt (alternative) attribute. In the alt attribute , you specify descriptive text for users who cannot see the image, possibly because of the following reasons:

  • They are visually impaired. Users with significant visual impairments often use tools called screen readers to read out the alt text to them.
  • Something has gone wrong causing the image not to display. For example, try deliberately changing the path inside your src attribute to make it incorrect. If you save and reload the page, you should see something like this in place of the image:

The words: my test image

The keywords for alt text are "descriptive text". The alt text you write should provide the reader with enough information to have a good idea of what the image conveys. In this example, our current text of "My test image" is no good at all. A much better alternative for our Firefox logo would be "The Firefox logo: a flaming fox surrounding the Earth."

Try coming up with some better alt text for your image now.

Note: Find out more about accessibility in our accessibility learning module .

Marking up text

This section will cover some essential HTML elements you'll use for marking up the text.

Heading elements allow you to specify that certain parts of your content are headings — or subheadings. In the same way that a book has the main title, chapter titles, and subtitles, an HTML document can too. HTML contains 6 heading levels, <h1> - <h6> , although you'll commonly only use 3 to 4 at most:

Note: Anything in HTML between <!-- and --> is an HTML comment . The browser ignores comments as it renders the code. In other words, they are not visible on the page - just in the code. HTML comments are a way for you to write helpful notes about your code or logic.

Now try adding a suitable title to your HTML page just above your <img> element.

Note: You'll see that your heading level 1 has an implicit style. Don't use heading elements to make text bigger or bold, because they are used for accessibility and other reasons such as SEO . Try to create a meaningful sequence of headings on your pages, without skipping levels.

As explained above, <p> elements are for containing paragraphs of text; you'll use these frequently when marking up regular text content:

Add your sample text (you should have it from What will your website look like? ) into one or a few paragraphs, placed directly below your <img> element.

A lot of the web's content is lists and HTML has special elements for these. Marking up lists always consists of at least 2 elements. The most common list types are ordered and unordered lists:

  • Unordered lists are for lists where the order of the items doesn't matter, such as a shopping list. These are wrapped in a <ul> element.
  • Ordered lists are for lists where the order of the items does matter, such as a recipe. These are wrapped in an <ol> element.

Each item inside the lists is put inside an <li> (list item) element.

For example, if we wanted to turn the part of the following paragraph fragment into a list

We could modify the markup to this

Try adding an ordered or unordered list to your example page.

Links are very important — they are what makes the web a web! To add a link, we need to use a simple element — <a> — "a" being the short form for "anchor". To make text within your paragraph into a link, follow these steps:

  • Choose some text. We chose the text "Mozilla Manifesto".
  • Wrap the text in an <a> element, as shown below: html < a > Mozilla Manifesto </ a >
  • Give the <a> element an href attribute, as shown below: html < a href = " " > Mozilla Manifesto </ a >
  • Fill in the value of this attribute with the web address that you want the link to point to: html < a href = " https://www.mozilla.org/en-US/about/manifesto/ " > Mozilla Manifesto </ a >

You might get unexpected results if you omit the https:// or http:// part, called the protocol , at the beginning of the web address. After making a link, click it to make sure it is sending you where you wanted it to.

Note: href might appear like a rather obscure choice for an attribute name at first. If you are having trouble remembering it, remember that it stands for h ypertext ref erence .

Add a link to your page now, if you haven't already done so.

If you have followed all the instructions in this article, you should end up with a page that looks like the one below (you can also view it here ):

A web page screenshot showing a Firefox logo, a heading saying Mozilla is cool, and two paragraphs of filler text

If you get stuck, you can always compare your work with our finished example code on GitHub.

Here, we have only really scratched the surface of HTML. To find out more, go to our Learning HTML topic.

Programming Tricks

  • HTML Lab Assignments

HTML Assignment and HTML Examples for Practice

Text formatting, working with image, working with link.

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

Patrick Cyubahiro

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

_l2KHAg0A

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

Introduction to HTML and CSS

Foundations course, introduction.

So here it is: it’s time to actually start making things . This section will teach you the basics of HTML and CSS, the two foundational building blocks of pretty much everything on the web.

Lesson overview

This section contains a general overview of topics that you will learn in this lesson.

  • Get a basic overview of HTML, CSS and how they work together.

HTML and CSS

HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great!

Many great resources out there keep referring to HTML and CSS as programming languages , but if you want to get technical, labeling them as such is not quite accurate, because they are only concerned with presenting information. They are not used to program any logic. JavaScript, which you will be learning in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. The following lessons focus on giving you the tools you need to be successful once you get to the JavaScript content as you continue through our curriculum!

  • Read HTML vs CSS vs JavaScript . It’s a quick overview of the relationship between HTML, CSS, and JavaScript.

Knowledge check

This section contains questions for you to check your understanding of this lesson on your own. If you’re having trouble answering a question, click it and review the material it links to.

  • What do HTML and CSS stand for?
  • Between HTML and CSS, which would you use for putting paragraphs of text on a webpage?
  • Between HTML and CSS, which would you use for changing the font and background color of a button?
  • What is the difference between HTML, CSS and JavaScript?

Additional resources

This section contains helpful links to related content. It isn’t required, so consider it supplemental.

This FreeCodeCamp article goes into a little more depth than the assigned one. It covers things we’ll be teaching explicitly in later lessons though, so don’t worry about memorizing any of the details.

Bookmark DevDocs.io . Read the “Welcome” message. Massive API documentation collection that even works offline. An essential collection of reference material for everything covered and more. (Maintained by FreeCodeCamp )

Support us!

The odin project is funded by the community. join us in empowering learners around the globe by supporting the odin project.

HTML Projects for Beginners: 10 Easy Starter Ideas

Danielle Richardson Ellis

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. 

woman learning html projects for beginners

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.

Streamline Your Coding: 25 HTML & CSS Hacks [Free Guide]

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.

html projects for beginners: wireframe example

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.

25 html and css coding hacks

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.

coding-hacks

Don't forget to share this post!

Related articles.

How to Add an Image & Background Image in HTML

How to Add an Image & Background Image in HTML

How to Call a JavaScript Function in HTML

How to Call a JavaScript Function in HTML

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

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

How to Create a Range Slider in HTML + CSS

How to Create a Range Slider in HTML + CSS

How to Create an HTML Tooltip [+ Code Templates]

How to Create an HTML Tooltip [+ Code Templates]

How to Make an HTML Text Box [Examples]

How to Make an HTML Text Box [Examples]

How to Set Up an HTML Redirect on Your Website

How to Set Up an HTML Redirect on Your Website

How to Create Radio Buttons in HTML [+ Examples]

How to Create Radio Buttons in HTML [+ Examples]

HTML br Tag: The Dos and Don'ts of Adding an HTML Line Break

HTML br Tag: The Dos and Don'ts of Adding an HTML Line Break

5 Easy Ways to Insert Spaces in HTML

5 Easy Ways to Insert Spaces in HTML

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)

assignment for html

updated Dec 4, 2023

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 first HTML WWW website ever built

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 .

learning to code working on laptop

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!

HTML and CSS projects for beginners with source code – Mikke Goes Coding

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>

HTML web page structure example

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?

Beetroot Base HTML Page

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 .

Switch landing page template – HTML and CSS projects for beginners

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:

Apple iPhone product landing page 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.

Restaurant website example project with HTML and CSS

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 HTML and CSS – Udemy

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 – Udemy

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)

Modern HTML & CSS From The Beginning (Including Sass) – Udemy

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

The Complete 2023 Web Development Bootcamp – Udemy

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 – 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)

Responsive Web Design Curriculum – 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!

Happy coding! – Mikke

Share this post with others:

About mikke.

assignment for html

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.

Learn to code for free - 15 coding tips for beginners – Free ebook

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:

View in Browser

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

assignment for html

COLOR PICKER

colorpicker

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.

DevPractical

HTML-only Projects For Beginners

Advertisement

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

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

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

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

25 Pure HTML Projects For Beginners

1. tribute page.

Tribute page screenshot

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

View Tribute Page Project

2. YouTube Page

Youtube page screenshot

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

View Youtube Page Project

3. Wikipedia Page

Wikipedia page screenshot

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

View Wikipedia page project

4. Google Search Page

Google search page

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

5. Google Search Result Page

Google search result page

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

View Google Search Result Project

6. Personal Website

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

7. Online Resume/CV

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

8. Recipe Page

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

9. Travel Blog

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

10. Product Page

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

11. Movie or Book Reviews

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

12. Portfolio Gallery

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

13. Event Invitation

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

14. FAQ Page

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

15. Biography Page

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

16. Simple Survey Form

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

17. HTML Cheat Sheet

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

18. Weather Report

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

19. Music Lyrics Page

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

20. Timeline

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

21. Meme Gallery

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

22. Contact Card

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

23. Local Business Page

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

24. Holiday Greeting Card

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

25. Educational Quiz

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

author's bio photo

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

Share this article on:

Front End Developer Newsletter

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

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.

A sample form

  • Example: HTML Form

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

Browser Output

A simple HTML  form

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,

HTML form with multiple types of form elements

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

  • White Sox Close To Signing Tommy Pham To Minor League Contract
  • Spencer Strider Undergoes Season-Ending Internal Brace Surgery
  • Daniel Bard To Undergo Season-Ending Flexor Tendon Surgery
  • Ohtani’s Former Interpreter Charged With Bank Fraud Due To Theft Of Over $16MM
  • Jeferson Quero To Undergo Season-Ending Shoulder Surgery
  • Yoán Moncada To Miss Three To Six Months Due To Adductor Strain
  • Hoops Rumors
  • Pro Football Rumors
  • Pro Hockey Rumors

MLB Trade Rumors

Orioles Designate Tony Kemp For Assignment

By Steve Adams | April 10, 2024 at 9:12am CDT

The Orioles announced this morning that veteran infielder/outfielder Tony Kemp has been designated for assignment. His spot on the roster will go to the game’s No. 1 overall prospect, Jackson Holliday , whose previously reported promotion to the majors has now been officially announced by the team.

The veteran Kemp only signed with the O’s two weeks ago. He spent spring training with the Reds but was granted his release after he didn’t make the roster. He signed a big league deal with Baltimore on March 26 but went 0-for-10 with a walk and a strikeout in his limited time on Baltimore’s roster.

From 2020-22, the now-32-year-old Kemp was a solid contributor with the A’s. He split time between second base and left field, turning in a .252/.341/.361 slash (105 wRC+). Kemp lacks power but has superlative contact skills and keen plate discipline, evidenced by 12.5% strikeout rate and 10.5% walk rate during that three-year stretch (and by his career 10.1% walk rate and 13.3% strikeout rate).

The 2023 season was one of Kemp’s worst since debuting with the Astros back in 2016, however. He played 124 games with the A’s and picked up 419 plate appearances but mustered only a .209/.303/.304 slash (77 wRC+). Kemp struck out in a career-low 9.5% of his plate appearances and swiped a career-high 15 bases (in 19 attempts), but those silver linings don’t outweigh his broader-reaching struggles at the dish.

In 2247 career plate appearances at the MLB level, Kemp is a .237/.324/.351 hitter. He’s drawn roughly average defensive grades in left field and has typically been an average or better defender at second base, though metrics like Defensive Runs Saved (-9) and Outs Above Average (0) were down on his glovework in last year’s sample of 410 innings at the position.

The Orioles will have a week to trade Kemp, place him on outright waivers or release him. For veterans of this status, a release is most common, though it’s possible a team in need of some infield depth could look at the affordable nature of Kemp’s $1MM contract with the O’s and work out a small trade (likely for cash).

60 Comments

' src=

Now we just need to get Urias off this roster and we’ll be ready to roll

' src=

He’s playing like his days are numbered.

' src=

I feel like he’s playing his way INTO his days being numbered.

' src=

I’d wager Hays is the more likely to get DFA’d next now even though he has more cache being the longer-tenured player.

The next guy up from Norfolk would probably be Kjerstad given his unreal stats this year and having gotten his cup of coffee already late last year. Mayo and Norby are both raking in AAA but I figure they’ll be more late summer/fall call-ups.

Urias’ bat is off to a slow start for sure but he’s made some slick defensive plays and some in the clutch (like the force out to home in that one game against PIT).

' src=

Hays wouldn’t make it through waivers. There’s no way.

' src=

Then trade him for pitching. Kjerstad is too good not to be I. The MLB playing every day.

Oh, I agree…another team would absolutely claim Hays. Then again, Urias would also almost certainly be claimed.

I just think Hays is the more logical fit as the DFA to free up a spot for Kjerstad (and more playing time for Cowser too). Urias is already accustomed to platoon play and bringing solid IF defense.

' src=

Hays doesn’t get near DFA territory. He’s coming off a 2.5 WAR season, had a 114 OPS+, and 5 DRS. He’s making $6million this year and still has one more year before free agency. You may see a trade, but I doubt it. He plays excellent defense and has a good bat. It’s April 10. We all need to calm down.

Brother, I assure you…I’m calm. I was just responding to the OP’s comment that Urias is the next on the block. I just don’t see how the stats lead to that conclusion. Urias has been much more productive than Hays on average and is already accustomed to a platoon role.

I just don’t see how Urias would be next on the block except emotionally.

' src=

Hays would clear waivers. At 6.3 million no team would bite. They would wait for the Orioles to release him after he cleared waivers and sign him for the minimum. But the Orioles aren’t releasing him.

I don’t think Urías has been more productive than Hays by any metric offensively , unless we’re only considering the 10 games so far in 2024. They’re both incredible defensively.

Hays is 28 to Urías’ 31 and he’s controllable

I don’t think this would even be a conversation if not for more of the prospects are OFers than infielders, save Mayo.

I don’t think either are likely to get DFA’d but Urías would be up first. Mateo can play in the outfield but he’s more of an infield utility player and that makes Urías redundant.

I would think that the likelihood, in order is that

1) Hays short side platoons with Cowser 2) Hays gets traded 3) Hays gets optioned to Norfolk until there’s an OF injury on the big club

' src=

CALM DOWN!?.CALM DOWN!? That’s not what we do here!

' src=

I don’t think a team at this point is willing to pay him 6m so he might make it, if not, the potential of the young guys is better than his solid but far from spectacular production.

' src=

I am acting on behalf of the CLE front office here, and we’d like to send Scott Barlow to BAL in exchange for Hays.

' src=

Who plays lf defensively at that level? You need a cf in lf at Camden yards. Only cowser fits that criteria.

' src=

I think you’d find a team willing to take on what’s left of the $6.3MM for Hays fairly easily.

I mean cmon guys. We’re talking about a solid OF who has had a few bad weeks. I don’t see anyway that he’s on the roster next season and could play his way into a non tender then, but I think you’d find an interested team at his current price point.

Urías is cheap (cheaper) and controllable too

There’s plenty of smart MLB teams with a need that would take those guys on for no prospect capital if they found their way to waivers.

' src=

No way would he clear. 6.3 million for a above average defensive outfield with a little pop and speed? But I agree they aren’t releasing him.

' src=

Hays DFA is absolute nonsense.

The Orioles don’t have to DFA Hays. He still has an option. So the Orioles could merely option him to Norfolk if they so desire. Doubt they would do that. If the Orioles were to DFA Hays, which they aren’t, he would clear waivers. 6.3 million salary, no team would take that on, they would just wait for him to be released. But Hays isn’t going anywhere.

' src=

Since he has an option, they won’t release him. They don’t need to put him thru waivers. If some one wants him, he comes with his contract.

' src=

Hays isn’t going anywhere.

' src=

That’s ridiculous. Hays is a proven bat and one of the best defensive outfielders in baseball. Ya all need to relax and not judge a veteran after he’s played 7 games.

Also stop acting like battering a terrible AAA team in Charlotte has anything to do with what guys will do in the majors. Look what happened last night when the Tides faced a real pitching prospect.

All these guys everybody wants to DFA started for a team that won 101 games – but you all want a team with no veterans. Calm down and let Elias do his job.

You should want the best players on your team regardless of age. Kjerstad is elite and needs to play. Why develop all this elite talent if you don’t intend to use it for some slightly above average players?

' src=

Hays has an option remaining.

' src=

Hays also has 2 options left

' src=

I’ll take a wager of any amount that Hays doesn’t get dfa’d

' src=

Poor fella. He’ll find a spot somewhere else, but it likely won’t be on a team of Baltimore’s caliber.

Agreed. Kemp seems like a solid dude and I got the sense from the other players’ body language that he’s a good clubhouse presence. I’d figure the O’s knew he’d be tradable given they gave him a guaranteed contract too given he was likely to get DFA’d for one of the O’s IFs that are tearing up AAA.

Also, he got robbed on that one challenge…should have been a hit but I think replay review is hesitant to overturn those because the “was it a double/did the runner score?” aspects are impossible to determine with replay.

' src=

Sugarland skeeters?

Seriously if your team doesn’t have a better option than Tony Kemp you’re in trouble.

Maybe the Marlins perhaps.

' src=

Drasco, Chris Getz is waving his arms furiously trying to get Mike Elias’ attention… With Moncada out indefinitely, Kemp is a better bench piece than anybody in the minors (assuming they won’t start Montgomery’s clock until after the Super Two cutoff).

I mean, it is still pissing in the wind, but…

@just_thinkin

Question though, are you saying an Urias DFA wouldn’t be nonsense? If so, would you care to elaborate?

For what it’s worth, Urias has actually been much more productive than Hays on average. For a quick stat, Hays has put up about 8.5 bWAR on about 2000 plate appearances where Urias has put up about 7.5bWAR in a little over half as many plate appearances.

Hays is a good, solid player and a veteran presence…but saying Urias should get the DFA first might be a bit of “voting with the heart rather than the head” thinking from what I can see via the stats and positional fit.

I think what a lot of people are missing is that the O’s don’t have many RH bats.

Hays and Urias both provide value for that and the defense. I don’t think Rubinstein is counting coins in the cushion either.

I think Hays may be the more valuable positional fit being a RH OF’er.

Stowers and Kjerstad are both lefties. Other than trying to stick Coby Mayo in a corner OF slot—-there’s not much knocking on the door .

If Urias goes—we have both Norby & Mayo for either 2b or 3B as depth.

Though we would obviously be taking a huge defensive downgrade.

' src=

Kemp is an example of a player who I wonder if he has what it takes to get to 10 years service time.

Seems incredibly doubtful since a player has to have 173 days on the active roster for it to equate to a year.

' src=

He made that good play yesterday, maybe the Sox works sign him.

(I’m not sure if he’s an actual upgrade, I’m just sick of watching Valdez and Hamilton play defense).

' src=

Yeah, he made the Premier Plays of the game, how can you do that to someone that accomplished that?

' src=

I think Bloom acquired both and that guy had no clue about defense at all!

' src=

Scuffling utility player that’s on the downswing of his career? Minimum salary?

BAH GOD, THAT’S – THAT’S JERRY REINSDORF’S MUSIC!

But he isn’t Cuban.

' src=

End of an era

' src=

Kemp has been a replacement level player throughout his career, except for the 2021 season when he somehow put up an .800 OPS. For that “production” he’s earned nearly ten million dollars. Not a bad parlay.

He’ll probably catch on somewhere, on his way to being an infield coach.

' src=

The amount of positional depth they have is insane. Feels wrong to congratulate a team for tanking all those years, but we’ll see if it pays off eventually.

' src=

104 wins last year says it already is paying off. Once they add more pitching, they just feel like a dynasty waiting to happen. I know nothing’s guaranteed..but I can’t remember ever seeing a team with this many young studs in 40 years of watching baseball.

Dynasty is a strong word especially in MLB. Granted, most of those players are under controll for what? 6 years. You either need to get creative like ATL or have the money like a Houston.

' src=

I would say the Orioles have proven their rebuild worked already. Winning 101 games and the division in the toughest in baseball points that out pretty well. If they don’t do anything better than that I would bet the reason would be because they didn’t support this team by bringing in outside help to fill in the weak points. They went out and got an ace from the Brewers so good there. They probably need to upgrade 3B and didn’t there.

I certainly wouldn’t predict a dynasty. That’s just setting yourself up for failure. You have to let this play out a lot more.

Braves have done a nice job locking down their young guys but they’re certainly spending a bunch of money.

They’ll be paying lux taxes this year.

See Astros.

' src=

Terrible contract for Holliday. WAY underpaid.

If he were a free agent, he’d get at least $100 million.

It is immoral that the Orioles’ greedy owners are keeping all that money that should be going into Holliday’s pocket and that they haven’t yet offered him a deal that he feel accurately reflects his worth.

' src=

Takes two to tango. Orioles FO vs Scott Boras. Oof.

Jackson’s signing bonus was 8 plus mil. A record at the time for a high school draftee. Not chump change.

A fraction of his market value

I expect the A’s might come a-callin’ for Kemp as long as he’s willing to work for food – specifically what the vendors have left after the game. And that’s not bad considering the Guardians’ “work for food” contracts provide 3 packs of ramen daily.

' src=

Where is that one A’s fan who thought he was the worst player in ML history?

' src=

100% he ends back with the A’s

' src=

Let’s not get carried away with the DFAs for Urais(GG 2022) and Hays(AS 2023). Both are above average MLB players. They both know they aren’t playing for their jobs, but their next job. Still steel sharpens steel.

' src=

I could see numerous teams that could use an outfielder like Hays and a player like Urias who has a gold glove in his resume. In today’s game neither of them have bad contracts. Teams will try to get them for nothing and why not?

Great win for O’s. But wait Jackson didn’t go 4 for 4? Is it harder to hit in the majors? Who knew.

Btw – excited about Jackson – just saying people need to calm down a bit with all the DFA talk.

Leave a Reply Cancel reply

Please login to leave a reply.

Log in Register

assignment for html

  • Feeds by Team
  • Commenting Policy
  • Privacy Policy

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

FOX Sports Engage Network

Username or Email Address

Remember Me

free hit counter

Rays outfielder Josh Lowe set to start rehab assignment Thursday

  • Marc Topkin Times staff

ST. PETERSBURG — Outfielder Josh Lowe’s return to the lineup is starting to come into view for the Rays.

Manager Kevin Cash said Lowe, the team’s most productive left-handed hitter last season, is slated to begin a rehab assignment Thursday with Triple-A Durham.

And he might not need too much time there.

“It’s kind of all just how he feels,” Cash said. “(Sunday), he said he feels really good. It’s going to take him a minute to get his timing going. But if he feels good, that’s most important.”

Lowe initially was sidelined in late February, after playing in two spring games, due to left hip inflammation. He was working toward a March 17 return to the lineup with he strained his right oblique.

He started playing in extended spring games last week. Assuming he gets through a Tuesday game with no issues, he will join Durham Wednesday in Worcester, Massachusetts, and play on Thursday. A return to the Rays before the end of April seems possible and would add much-needed left-handed power, plus speed, to the lineup.

Another lefty hitter expected to play a key role, Jonathan Aranda, also is progressing toward a return.

Aranda had two pins in his fractured right ring finger removed Monday and is expected to start taking swings in the next few days.

“He felt like he was going to be pretty much full-go to start ramping up,” Cash said. “He’s been throwing. He felt like he would be able to swing pretty pain-free. So if that’s the case, we’ll start working to get him built up.”

Cash said Aranda, who was injured March 19, will go through the standard progression of batting cage drills, starting with hitting balls off a tee, and work toward taking batting practice on the field before starting a rehab assignment.

“So, still a ways away,” Cash said, “but (moving) in the right direction.”

Hey, it’s you guys again

Starters have different ways of dealing with facing the same team in consecutive outings. Expect Rays right-hander Aaron Civale to take a cerebral approach in making adjustments Tuesday against the Angels.

“He’s a unique mind in terms of how he approaches his starts,” pitching coach Kyle Snyder said Monday. “This is a unique situation, (playing) out of division and you’re facing a team twice in a row.

“But he is very good at kind of reverse-engineering things that have happened. And being able to act on those, whether it’s the second time through (the order in a game) or the second time he faces a team in a week. And it’s pretty impressive the lengths that he goes through in terms of preparing himself and his ability to realize how to keep guys in between (and off-balance). He’s going to lean on some of what he was successful in doing that last time, and then probably just try to apply that.”

Stay updated on Tampa Bay’s sports scene

Subscribe to our free Sports Today newsletter

You’re all signed up!

Want more of our free, weekly newsletters in your inbox? Let’s get started.

Civale worked five innings April 9 at Angel Stadium, allowing a two-run homer to Mike Trout, as well as an unearned run. He walked one and struck out four.

Jackie Robinson Day reflections

The Angels’ Ron Washington, one of two current Black managers in the majors, said celebrating Jackie Robinson Day, as was done throughout Major League Baseball on Monday, is very important: “It means everything, because I don’t think I’ll be sitting here managing and talking to you (reporters) if it wasn’t for Jackie Robinson breaking that barrier.” ... All players and coaches wore No. 42 in Robinson’s honor.

NFL free-agent receiver Marquez Valdes-Scantling, a St. Petersburg native and product of Lakewood High and USF, threw out the first pitch, which was more than a little bit outside. … The Rays Baseball Foundation and Rowdies Soccer Fund on Monday announced $25,000 Racial Equity Grants to the Helen Gordon Davis Centre for Women, James B. Sanderlin Neighborhood Family Center, Sing Out and Read, and Where Love Grows Inc. as part of their annual contribution “to support organizations committed to ending systemic racism.”

Sign up for the Sports Today newsletter to get daily updates on the Bucs, Rays, Lightning and college football across Florida.

Never miss out on the latest with your favorite Tampa Bay sports teams. Follow our coverage on Instagram , X and Facebook .

Marc Topkin is a sports reporter covering the Tampa Bay Rays. Reach him at [email protected].

MORE FOR YOU

  • Advertisement

ONLY AVAILABLE FOR SUBSCRIBERS

The Tampa Bay Times e-Newspaper is a digital replica of the printed paper seven days a week that is available to read on desktop, mobile, and our app for subscribers only. To enjoy the e-Newspaper every day, please subscribe.

  • 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

HTML Introduction

  • HTML Editors
  • HTML Basics
  • HTML Comments
  • HTML Elements
  • HTML Headings
  • HTML Paragraphs
  • HTML Text Formatting
  • HTML Quotations
  • HTML Colors
  • HTML Links Hyperlinks
  • HTML Images
  • HTML Favicon
  • HTML Tables
  • HTML Ordered Lists
  • HTML Unordered Lists
  • HTML Description Lists
  • HTML Block and Inline Elements
  • HTML Iframes
  • HTML File Paths
  • HTML Layout
  • HTML Computer Code Elements
  • HTML5 Semantics
  • HTML Entities
  • HTML Symbols
  • HTML Emojis
  • HTML Charsets
  • HTML URL Encoding
  • HTML Responsive Web Design

HTML Graphics

  • SVG Tutorial

HTML Tutorial References

  • HTML Tags - A to Z List
  • HTML Attributes Complete Reference
  • HTML Global Attributes
  • HTML5 Complete Reference
  • HTML5 MathML Complete Reference
  • HTML DOM Complete Reference
  • HTML DOM Audio/Video Complete Reference
  • SVG Element Complete Reference
  • SVG Attribute Complete Reference
  • SVG Property Complete Reference
  • HTML Canvas Complete Reference
  • HTML Exercises, Practice Questions and Solutions

HTML stands for HyperText Markup Language . It is the standard markup language used to create web pages. HTML is a combination of Hypertext and Markup language. Hypertext defines the link between web pages. A markup language is used to define the text document within the tag to define the structure of web pages.

This language is used to annotate (make notes for the computer) text so that a machine can understand it and manipulate text accordingly. Most markup languages (e.g. HTML) are human-readable. The language uses tags to define what manipulation has to be done on the text.

Table of Content

What is HTML?

Features of html, html elements and tags, html page structure, web browsers.

  • Why learn HTML? 

Advantages of HTML

Disadvantages of html.

HTML stands for HyperText Markup Language and it is used to create webpages. It uses HTML tags and attributes to describe the structure and formatting of a web page.

HTML consists of various elements, that are responsible for telling search engines how to display page content. For example, headings, lists, images, links, and more.

HTML Example

  • It is easy to learn and easy to use.
  • It is platform-independent.
  • Images, videos, and audio can be added to a web page.
  • Hypertext can be added to the text.
  • It is a markup language.

HTML uses predefined tags and elements that tell the browser how to display the content. HTML elements include an opening tag, some content, and a closing tag.

Remember to include closing tags. If omitted, the browser applies the effect of the opening tag until the end of the page.

opening and closing tag HTML

The basic structure of an HTML page is shown below. It contains the essential building-block elements (i.e. doctype declaration, HTML, head, title, and body elements) upon which all web pages are created.

HTML page structure

  • <!DOCTYPE html> – This is the document type declaration (not technically a tag). It declares a document as being an HTML document. The doctype declaration is not case-sensitive.
  • <html> – This is called the HTML root element. All other elements are contained within it.
  • <head> – The head tag contains the “behind the scenes” elements for a webpage. Elements within the head aren’t visible on the front end of a webpage. HTML elements used inside the <head> element include: 
  • <style> – This HTML tag allows us to insert styling into our web pages and make them appealing to look at with the help of CSS.
  • <title> – The title is what is displayed on the top of your browser when you visit a website and contains the title of the webpage that you are viewing.
  • <base> – It specifies the base URL for all relative URL’s in a document.
  • <noscript> – Defines a section of HTML that is inserted when the scripting has been turned off in the user’s browser.
  • <script> – This tag is used to add functionality to the website with the help of JavaScript.
  • <meta> – This tag encloses the metadata of the website that must be loaded every time the website is visited. For eg:- the metadata charset allows you to use the standard UTF-8 encoding on your website. This in turn allows the users to view your webpage in the language of their choice. It is a self-closing tag.
  • <link> – The ‘link’ tag is used to tie together HTML, CSS, and JavaScript. It is self-closing.
  • <body> – The body tag is used to enclose all the visible content of a webpage. In other words, the body content is what the browser will show on the front end.

An HTML document can be created using an HTML text editor . Save the text file using the “ .html” or “ .htm” extension. Once saved as an HTML document, the file can be opened as a webpage in the browser.

Note: Basic/built-in text editors are Notepad (Windows) and TextEdit (MacOS) . Other advanced text editors include Sublime Text, Visual Studio Code, Froala , etc.

This example illustrates the basic structure of HTML code. 

HTML output

Unlike other programming languages, HTML does not show output on the compiler.

Web browsers show the results of an HTML code. It reads HTML files and determines how to show content with the help of HTML tags.

Any web browser ( Google, Safari, Mozilla Firefox , etc) can be used to open a . HTML file and view the results.

Why learn HTML?

  • It is a simple markup language. Its implementation is easy.
  • It is used to create a website.
  • Helps in developing fundamentals about web programming.
  • Boost professional career.

HTML History

HTML is a markup language used by the browser to manipulate text, images, and other content, in order to display it in the required format. HTML was created by Tim Berners-Lee in 1991 . The first-ever version of HTML was HTML 1.0 , but the first standard version was HTML 2.0 , published in 1995.

Currently, we are using HTML5 , which is the latest and most recent version of HTML.

HTML History

  • HTML is used to build websites.
  • It is supported by all browsers.
  • It can be integrated with other languages like CSS , JavaScript , etc.
  • HTML can only create static web pages. For dynamic web pages, other languages have to be used.
  • A large amount of code has to be written to create a simple web page.
  • The security feature is not good.

HTML is a very important language as it is widely used in creating websites. Most of the websites are built using HTML5 (the latest version of HTML). HTML mainly contains tags and attributes that determine the formatting and structure of a website.

This introduction to HTML gives a brief overview of what HTML is and teaches HTML basics. This guide will help you understand the workings of HTML and explain it with examples.

To learn more about HTML, visit the HTML Tutorial Page.

Master The Art of Web Development with Full Stack Web Development

Frequently Asked Questions about HTML Introduction

What are the basics of html.

HTML basics include understanding the syntax, elements/tags, attributes, structure and formatting of HTML file.

What are the 5 uses of HTML?

5 key uses of HTML are: Creating web page. Integrating CSS and JavaScript Accessing web content Semantic markup Cross-platform compatibility

What is HTML syntax?

HTML syntax means the set of rules and regulation that defines how HTML code is structured and written.

What is the main concept of HTML?

HTML is a global markup language for web. You can create any a webpage using HTML and any browser can open that HTML file.

Please Login to comment...

Similar reads.

author

  • HTML-Basics
  • Web Technologies
  • What are Tiktok AI Avatars?
  • Poe Introduces A Price-per-message Revenue Model For AI Bot Creators
  • Truecaller For Web Now Available For Android Users In India
  • Google Introduces New AI-powered Vids App
  • 30 OOPs Interview Questions and Answers (2024)

Improve your Coding Skills with Practice

 alt=

What kind of Experience do you want to share?

  • Share full article

Advertisement

Supported by

current events conversation

What Students Are Saying About Why School Absences Have ‘Exploded’

Chronic absenteeism has increased in American schools since the Covid-19 pandemic. We asked teenagers what they make of the trend.

Students walk through an outdoor breezeway at the Patti Welder Middle School in Victoria.

By The Learning Network

Nationally, an estimated 26 percent of public school students were considered chronically absent last school year, up from 15 percent before the Covid-19 pandemic, according to the most recent data, from 40 states and Washington, D.C., compiled by the conservative-leaning American Enterprise Institute.

The increases have occurred in districts big and small, and across income and race.

In “​ Why School Absences Have ‘Exploded’ Almost Everywhere ,” Sarah Mervosh and Francesca Paris explain:

The trends suggest that something fundamental has shifted in American childhood and the culture of school, in ways that may be long lasting. What was once a deeply ingrained habit — wake up, catch the bus, report to class — is now something far more tenuous. “Our relationship with school became optional,” said Katie Rosanbalm, a psychologist and associate research professor with the Center for Child and Family Policy at Duke University.

In a related Student Opinion question , we asked teenagers if that explanation resonated with them. Had their relationship to school — and school attendance — changed since the pandemic? And if so, what did they make of this shift?

Many students said, yes, school feels different now. Why? They pointed to remote learning changing their routines, an increase in anxiety and a decrease in motivation, the ease of making up schoolwork online and much more. Read their responses in full below.

Thank you to everyone who participated in the conversation on our writing prompts this week, including students from Central Bucks South High School in Warrington, Pa .; Norwood High School in Norwood, Mass.; and West Salem High School in Salem, Ore.

Please note: Student comments have been lightly edited for length, but otherwise appear as they were originally submitted.

Remote learning made students comfortable with missing school.

I believe that there are two main contributors to missing school too much. The first is online school. Myself included. It was very easy to simply leave the call after taking attendance and the teacher wouldn’t realize. Skipping class was easy and you could still get high grades. Transitioning back to real school, kids still held that true. They knew that they could miss school and still do well because covid taught that to them. The second reason is punishment. When you miss school, nothing happens. Class goes on and you have a little extra homework the next day but that’s it. What is the issue with missing class is a very common thought and it’s true. There is very minimal downside to missing school. When I had surgery, I missed a full week of school and within a day and a half, I was fully caught up again. Missing school has just become all too easy.

— Xavier, Pennsylvania

2020 was when our lives completely changed for the worst. We all had to stay inside and stay separate from each other. It was terrible, not being able to talk to my friends, and seeing the death toll on news constantly rise. However, after a year into the pandemic, I believe students realized the power they now had, including me. Now that I am a highschooler, I am going to admit that sometimes I would just mute my class and do whatever I wanted. School became shorter and easier to pass than ever before. That’s why when we all transitioned back into school, it was weird. We all still wanted to get through class the “easy way,” yet now that we were back, it wasn’t possible. This is why we started increasing our absences. The threat of absence has become weak, students are not as afraid to stay out of school. Furthermore the threat of being infected gave just one more reason to be out of school, for the sake of “preventing others from getting sick,” when in reality you feel fine. That is most likely why the absences in school had an exponential increase.

— Joshua, Pennsylvania

Students feel like expectations are lower than they were before the pandemic.

As a student in high school, I’ve come to realize the horrible state our attendance has been in since the pandemic. The reason can be simplified into one idea: laziness. We are lazy, willing to do only enough to get by, no more, no less. If a student doesn’t need to come to a class to obtain the grade they wish to achieve, then they won’t show up. Classes are not challenging enough to make students feel that they are worth going to. My mom is used to getting texts from me during the school day, begging to be excused from a class where “we’re doing nothing” or, “I already finished the work,” which is true, yet I abuse the opportunity to miss class because I know there will be no greater coincidence, I will still be getting an A. Due to my laziness, I would rather be at home taking a nap than sitting in a class with no greater impact on my life.

— Clara, Salem, Oregon

Since the pandemic, schooling has been focused on getting students caught up to where we’re supposed to be. Consequently, more allowances are made for students who don’t do assignments or don’t even show up. And with the switch to all online because of the pandemic, things have never shifted back. If a student misses a day or even a week, they can easily see what they missed and do it and submit it from home. With this option giving them the exact same grade as it would if they actually went to school, it’s no wonder why students are choosing to stay at home or skipping class. Additionally, the pandemic had heightened anxiety levels in students, specifically social anxiety, making them less likely to show up. The allowances made by the school district for students has created a space for students to be lazy and get away with it. This is fostering a negative impact on student work ethic not only now, but also in the future when this generation will be entering the work force.

— Emma, West Salem High School

The period of school shutdowns got students out of their school routines.

When I think back to virtual learning, my brain automatically goes to how stress free it was. I was in sixth grade when Covid first hit and going through a period of my life where I was extremely anxious at school. I believe that this break is exactly what I needed at the time. However, I do believe that in the long run, this online learning time period got a lot of people into the routine of not having a routine. A lot of people at my school would turn their camera off and fall asleep or go on their phones during online learning. I believe that there were times that I did this as well. I also think that this mindset carried through into the grades where I did not have an online/hybrid option. In eighth and ninth grade, I happened to stay home sick, go into school late, or leave early a lot. I think this is due to me not taking school as seriously due to the grading methods that were being used and how some of my teachers were not grading harshly. Now that I am a sophomore in high school, I think I have finally gotten back into the routine of actual schooling and not staying home sick unless I actually feel extremely sick.

— Madison, Pennsylvania

Before the pandemic and as I was growing up, I was the kind of student that wanted perfect attendance. For some odd reason, it made me feel like a better student if I never missed a day. This included turning my parents down when they offered me to go on trips, even though I was only in fourth grade and the work that I would have missed wouldn’t have made an impact in my academic career. However, after the pandemic school began to feel optional. We felt what it was like to fall out of the routine that going to school was and were never able to fully recover from it. I think that having experienced attending school from your bed, in your pajamas has played a major role in the current trend of students receiving more absences. For me, it made me realize that the “0” next to your number of absences didn’t matter as much as I had once thought. As a now highschooler, the school days are long and every class requires an abundance of work and undivided attention that whenever there is a substitute or not much going on, it is easy to decide to leave school. With senior year approaching, everything’s purpose is college and the fact that colleges aren’t able to see how many absences a student has when they apply, does play a role in the increasing number of absences.

— Ava, Miami Country Day School

Because assignments and other materials are online, students find they can keep up with their classes even if they don’t attend school.

Schools have adjusted rules so much that it makes school feel optional. Don’t want to attend class publicly? Take online classes. Don’t want to take “required” state testing? Opt out. Before, school seemed strict, we didn’t have the option to opt out of tests, we didn’t think of taking online school. Yet now, schools make it so easy to skip because everything is simply online. Our assignments, lectures, and teachers are all online. There are no longer requirements in school. What’s the point of attending if we can graduate without taking state testing or attending advisory — also a requirement, yet I no longer have an advisory because my counselors said I don’t need to take it to graduate. It’s confusing. Students have been enabled for over 4 years now since quarantine started. School doesn’t feel mandatory, it’s optional. I’m currently enrolled into 2 AP classes, so I try my best not to miss school. But it’s inevitable, I get sick, I have family situations or maybe I simply don’t feel like attending school. But I see people skip school like nothing. “I didn’t feel like going” is a constant statement I hear. Not many students have the motivation to attend, and simply don’t go because they have a comfort in their head that they can graduate while missing multiple days of school nearly everyday.

— Olivia, Salem, OR

Current absenteeism rates have significantly impacted my learning experience for the past few years. Since the pandemic, there has been a noticeable shift in the perception of the value of education and whether or not attendance is an important factor in a student’s academic success. In the years following 2020, I found myself struggling to make it to class everyday due to my new found efficiency of working at home with my computer. I felt that even if I was not in class personally, I would be able to keep up with my work easily as it was all online regardless. Due to this I would go on trips or skip class purely because I was under the impression that I would be able to continue achieving virtually.

— Ruby, RFHS

Before the pandemic, my attendance was stable but after the pandemic, my absences were piling on. It was difficult to get back in the rhythm of in person school when I had already done a whole year online, but now my attendance in school is definitely getting better. On the other hand, students in my school tend to miss school and it is a rare sight to see a full class. Some students go as far as showing up to class once a week and just do the classwork online. After the pandemic, schools went from paperwork to all online, which is a big reason why students miss all the time, knowing that school work can just be done at home. It has definitely affected students’ grades and goals in life, but hopefully in the future, absences can lower back down.

— Emily, Atrisco Heritage Academy High School

Going to school, and finding the motivation to have as good an attendance record as possible, now feels like more of a struggle.

As students, we’ve developed a comfort in staying in bed during school without having to get ourselves ready to go outside. We had the ability to wake up five minutes before “school” started to get on our zoom calls. Now, we must wake up an hour and a half prior, and make breakfast and pack lunch, before driving to school. The process is tenuous as the article states, but because we’ve accustomed to a different lifestyle, it just makes this one seem like so much more work. I, myself have noticed my difference in attendance after COVID-19. I used to be very obsessed with perfect attendance, but I had 11 absences in my sophomore year, right after coming back from online school. Nowadays, I’m more lenient on myself when it comes to taking a mental health day, because the process can be overwhelming. School is very important, so of course I try to always come in, but sometimes it can be hard. I have not noticed this trend in the world, as well as with myself until this article. It’s enlightening to know that this had not only an effect on me, but all over the country. Hopefully the rates of absenteeism will decrease as time goes on, because we are the future.

— Anisha, New Jersey

Before virtual learning, I never made much of a habit of not turning in work or showing up for class. It was so much easier then but since virtual learning, it had become incredibly difficult for me to focus as well as keep up motivation to continue school. It was easy to skip and nobody really said much about it so it easily became a bad habit. That bad habit eventually leaked into normal school as well and it always sounds so much easier to break out of than it actually is.

— Tayy, NRHS

As the average high school class skipper (only sometimes), in my personal experience, missing out on classes hasn’t really been because of mental health concerns, but more of just lasting laziness from the pandemic. I feel as though I was relatively hard working in middle school/elementary but after a few years off with only half effort assignments, I have grown to become more sluggish and reluctant when it comes to more advanced work while in school. And it makes the option of missing out on classes because of my own reluctance a lot more appealing.

— Luke, Bali, Indonesia

My schedule during the week is get up, get ready for school, go to school, go home, do homework, go to sleep and then I repeat that everyday for 5 days. As much as I don’t want to dread going to school, it’s exhausting having the same schedule repeated everyday of the week. While in school, you have assignments assigned nearly everyday. I feel as though school has had a change in its meaning because of the COVID-19 pandemic. While in quarantine, we were looking at a screen for the whole day and lacked motivation to get assignments done. When we shifted to in person school again, it didn’t change. I now look at school as a task that I need to complete to shape my future. I need to have all my assignments perfect and turned in on time. The meaning of school has turned into a draining task rather than a place that you look forward to going to.

— Jamisan, Salem, Oregon

Some students face challenges in attending class that may have nothing to do with the pandemic.

I don’t believe that students are skipping because it is so easy to catch up and pass, despite their absences. In fact, I know that a lot of people who skip aren’t passing most of their classes. They do this because their parents don’t hold them accountable, and there is always something deeper going on in that student’s life that makes it that much harder for them to find the motivation to go to class. I don’t think making the classes harder will hold students more accountable, but in fact deter them from going to class at all. If a student is aware that they are failing and doesn’t understand the concept of the class, and the class proceeds to become harder, they are going to quickly become unmotivated to go to class in the first place, feeling out of place compared to the other — passing — students in the class. While I don’t have a solution for this problem, myself, I feel that the problem is much broader than we suspect, and the answer will be a much deeper journey to find.

— Kylie, West Salem HS

Schools can do more to get students back in class.

I attend a French school in London and attendance is closely monitored. Absences have to be justified by your parents or you could get into trouble. I think it’s important to attend school as we did before Covid - because as well as learning the curriculum, it is crucial to socialise with your friends and classmates, which is good for your mental health … I wonder if social media could be a factor? If students did not have access to social media or the internet, would they prefer to be in school with their friends? This increase in absenteeism could affect students’ chances of getting into University when they come to finish school or even their opportunities later in life. Students need to be reminded of this more and more perhaps. School helps you to learn not just about facts but also helps to build your emotional quotient & social intelligence — which are all valuable for life.

— Alexandre 14, London

As a current high school junior, my experiences with skipping have been minimal at best, however, I feel strongly that the reason behind skipping is pretty simple. Students don’t care as much about school and the system encourages it. When faced with the choice of sitting in a class and learning about the Patagorian theorem or hanging out with friends, many students are now choosing the latter. The lack of care or effort being put forth in school doesn’t even affect their grades! This is due to certain classes having minimal grades set at 50%, which is 10% away from a pass. This system is actively encouraging people to put minimal effort into a class just to get a pass and graduate. Removing courses like this would certainly raise the importance of getting the work done. Another solution to this problem would be having attendance as a grade, if your grade depends on you being in classes then most would show up. If you have to show up to class to pass then more students would be inclined to do so. The emphasis is on not bending the knee to people who don’t want to show up to class, not giving them a minimal 50%, we should mark attendance for a passing grade, and letting them fail. If we keep letting students skip with minimal consequences then their attitudes won’t change and thus hinder our students’ growth.

— Henry, Salem, OR

Learn more about Current Events Conversation here and find all of our posts in this column .

  • Grand Rapids/Muskegon
  • Saginaw/Bay City
  • All Michigan

Astros re-sign former Detroit Tigers reliever to minor league deal

  • Updated: Apr. 15, 2024, 12:58 p.m. |
  • Published: Apr. 15, 2024, 12:15 p.m.

Miguel Diaz

Detroit Tigers right-handed pitcher Miguel Diaz jokes with teammates before a workout on Feb. 14, 2024, at the team's facility in Lakeland, Fla. (Photo by Evan Woodbery, MLive.com) Evan Woodbery, MLive.com

After being designated for assignment by the Detroit Tigers, Miguel Diaz has found a new opportunity.

The 29-year-old pitcher was resigned to a minor league contract by the Houston Astros, days after the Astros also designated him for assignment. The transaction was first reported by Athletic reporter Chandler Rome.

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.

IMAGES

  1. HTML/CSS

    assignment for html

  2. HTML Practical Assignment, HTML Assignments for Students With Code

    assignment for html

  3. HTML Lists, CSS Boxes, JS Control Flow

    assignment for html

  4. PPT

    assignment for html

  5. CS 110 Assignment 6

    assignment for html

  6. 2 html and css assignment no 21 on web technology

    assignment for html

VIDEO

  1. | Assignment 1|

  2. Week 4 coding assignment

  3. Assignments

  4. C-Cube Coding Class

  5. CSS Grid

  6. Build A Quiz Website Using HTML, CSS & JavaScript (Part 2)

COMMENTS

  1. HTML Exercises

    Learn the basics of HTML in a fun and engaging video tutorial. Templates. We have created a bunch of responsive website templates you can use - for free! Web Hosting. Host your own website, and share it to the world with W3Schools Spaces. Create a Server. Create your own server using Python, PHP, React.js, Node.js, Java, C#, etc. ...

  2. HTML Exercises, Practice Questions and Solutions

    Embark on your HTML learning journey by accessing our online practice portal. Choose exercises suited to your skill level, dive into coding challenges, and receive immediate feedback to reinforce your understanding. Our user-friendly platform makes learning HTML engaging and personalized, allowing you to develop your skills effectively.

  3. HTML All Exercises & Assignments

    HTML All Exercises & Assignments - Tutorials ClassIf you are seeking HTML assignment help, you can find a variety of exercises and solutions on this webpage. You can practice HTML basics, tags, attributes, forms, tables, and more. Learn HTML by doing these assignments and improve your web development skills.

  4. Getting started with HTML

    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.

  5. Intro to HTML/CSS: Making webpages

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

  6. HTML Basics

    HTML Basics is a web page that teaches you the fundamentals of HTML, such as tags, attributes, elements, and formatting. You can also practice your skills with programs, exercises, and assignments that have solutions and explanations. Whether you are a student or a beginner, HTML Basics can help you learn and master HTML quickly and easily.

  7. HTML basics

    HTML is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way.The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on.

  8. Learn HTML

    HTML is the standard markup language for creating the structure of web pages. We can display web page content like paragraphs, lists, images, and links in a structured way using HTML. We can only define the structure of a website using HTML. For appearance (color, layout, design), we use CSS. Similarly, JavaScript is used for adding ...

  9. HTML Assignment| HTML Exercise and Examples

    HTML Assignment and HTML Examples for Practice. UNIT - 1 Text Formatting Assignment 1 Assignment 2 Assignment 3 Assignment 4 Assignment 5- India. UNIT - 2 Working with Image Assignment 1 Assignment 2 Assignment 3 Assignment 4 - Running Animals. UNIT - 3 Working with Link

  10. Learn HTML Basics for Beginners in Just 15 Minutes

    How to create an HTML document. First, let's open Visual Studio Code (or your favorite code editor). In the folder of your choice, create a new file and name it index.html. In the index.html file, type ! (exclamation mark) and press enter.

  11. HTML for Beginners

    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 ...

  12. Practice Projects in HTML & CSS

    Challenge Project: Build a Website Design System. HTML & CSS • Web Development • Web Design Build a style guide for your web projects, including custom fonts, colors, text styles, and more. Less guidance, 180 min. Practice Project.

  13. HTML Basics (with examples)

    HTML (HyperText Markup Language) is a markup language used to structure and organize the content on a web page. HTML Basics (With Examples). HTML (HyperText Markup Language) is a markup language used to structure and organize the content on a web page. It uses various tags to define the different elements on a page, such as headings, paragraphs, and links.

  14. Introduction to HTML and CSS

    HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS ...

  15. HTML Tutorial

    Learn how to create and style web pages with HTML, the standard markup language for the web. W3Schools HTML Tutorial offers easy and interactive examples, exercises, quizzes, and references to help you master HTML. Whether you are a beginner or a professional, you will find something useful in this tutorial.

  16. HTML Projects for Beginners: 10 Easy Starter Ideas

    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.

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

    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.

  18. Introduction to 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 ...

  19. HTML CSS Exercises: Practice and Solution

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

  20. Top 10 Projects For Beginners To Practice HTML and CSS Skills

    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.

  21. HTML-only Projects For Beginners · DevPractical

    25 Pure HTML Projects For Beginners. 1. Tribute Page. Create a tribute page dedicated to a person, historical figure, or role model you admire. Include a brief introduction, key accomplishments or contributions, and notable quotes if applicable. Use HTML headings and paragraphs to organize the content effectively. View Tribute Page Project.

  22. HTML Form (With Examples)

    The form is a document section that collects user input and sends it to the server. 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 element to create forms in HTML. Example: HTML Form The HTML element is used to create HTML forms.

  23. Orioles Designate Tony Kemp For Assignment

    The Orioles announced this morning that veteran infielder/outfielder Tony Kemp has been designated for assignment. His spot on the roster will go to the game's No. 1 overall prospect, Jackson ...

  24. Rays outfielder Josh Lowe set to start rehab assignment Thursday

    Manager Kevin Cash said Lowe, the team's most productive left-handed hitter last season, is slated to begin a rehab assignment Thursday with Triple-A Durham. And he might not need too much time ...

  25. HTML Introduction

    HTML Introduction. HTML stands for HyperText Markup Language. It is the standard markup language used to create web pages. HTML is a combination of Hypertext and Markup language. Hypertext defines the link between web pages. A markup language is used to define the text document within the tag to define the structure of web pages.

  26. 2024 Texas Motor Speedway pit stall assignments

    See where your favorite Cup Series driver will pit during Sunday's race at Texas Motor Speedway (3:30 p.m. ET, FS1).

  27. Teachers are using AI to grade essays. Students are using AI to write

    Teachers are turning to AI tools and platforms — such as ChatGPT, Writable, Grammarly and EssayGrader — to assist with grading papers, writing feedback, developing lesson plans and creating ...

  28. What Students Are Saying About Why School Absences Have 'Exploded'

    Consequently, more allowances are made for students who don't do assignments or don't even show up. And with the switch to all online because of the pandemic, things have never shifted back.

  29. Astros re-sign former Detroit Tigers reliever to minor league deal

    After being designated for assignment by the Detroit Tigers, Miguel Diaz has found a new opportunity. The 29-year-old pitcher was resigned to a minor league contract by the Houston Astros, days ...