how to create a web page html code

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

Getting started with HTML

• Overview: Introduction to HTML

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

What is HTML?

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

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

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

Anatomy of an HTML element

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

The anatomy of our element is:

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

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

Active learning: creating your first HTML element

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

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

Nesting elements

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

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

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

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

Void elements

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

This would output the following:

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

Elements can also have attributes. Attributes look like this:

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

An attribute should have:

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

Active learning: Adding attributes to an element

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

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

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

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

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

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

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

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

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

Boolean attributes

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

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

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

Omitting quotes around attribute values

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

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

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

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

Single or double quotes?

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

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

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

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

Instead, you need to do this:

Anatomy of an HTML document

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

Here we have:

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

Active learning: Adding some features to an HTML document

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

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

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

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

In this exercise, you can edit the code locally on your computer, as described previously, or you can edit it in the sample window below (the editable sample window represents just the contents of the <body> element, in this case). Sharpen your skills by implementing the following tasks:

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

Whitespace in HTML

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

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

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

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

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

Entity references: Including special characters in HTML

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

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

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

In the example below, there are two paragraphs:

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

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

HTML comments

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

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

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

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

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

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

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

Become a Software Engineer in Months, Not Years

From your first line of code, to your first day on the job — Educative has you covered. Join 2M+ developers learning in-demand programming skills.

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

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

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

Today we will cover:

• What is HTML?

Key HTML terms and formatting

• How to build your own web page with HTML

What to learn next

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

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

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

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

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

Tags and elements

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

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

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

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

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

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

Attributes and hyperlinks

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

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

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

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

Headings and lists

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

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

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

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

Add images: <img> tag

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

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

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

HTML tables

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

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

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

Formatting an HTML document

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

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

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

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

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

Become a frontend developer for free.

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

Become a Front End Developer

How to build your own webpage with HTML

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

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

1. Download and open an HTML editor

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

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

2. Write a basic HTML file

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

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

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

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

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

4. Add a list of your skills

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

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

5. Add a table of your work experience

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

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

6. Finish and save your webpage

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

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

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

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

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

Happy learning!

Continue reading about web development

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

Learn in-demand tech skills in half the time

Mock Interview

Skill Paths

Assessments

Learn to Code

Tech Interview Prep

Generative AI

Data Science

Machine Learning

GitHub Students Scholarship

Early Access Courses

For Individuals

Try for Free

Gift a Subscription

Become an Author

Become an Affiliate

Earn Referral Credits

Cheatsheets

Frequently Asked Questions

Privacy Policy

Cookie Policy

Terms of Service

Business Terms of Service

Data Processing Agreement

Copyright © 2024 Educative, Inc. All rights reserved.

• PRO Courses Guides New Tech Help Pro Expert Videos About wikiHow Pro Upgrade Sign In
• EDIT Edit this Article
• EXPLORE Tech Help Pro About Us Random Article Quizzes Request a New Article Community Dashboard This Or That Game Popular Categories Arts and Entertainment Artwork Books Movies Computers and Electronics Computers Phone Skills Technology Hacks Health Men's Health Mental Health Women's Health Relationships Dating Love Relationship Issues Hobbies and Crafts Crafts Drawing Games Education & Communication Communication Skills Personal Development Studying Personal Care and Style Fashion Hair Care Personal Hygiene Youth Personal Care School Stuff Dating All Categories Arts and Entertainment Finance and Business Home and Garden Relationship Quizzes Cars & Other Vehicles Food and Entertaining Personal Care and Style Sports and Fitness Computers and Electronics Health Pets and Animals Travel Education & Communication Hobbies and Crafts Philosophy and Religion Work World Family Life Holidays and Traditions Relationships Youth
• Browse Articles
• Learn Something New
• Quizzes Hot
• This Or That Game
• Train Your Brain
• Explore More
• Support wikiHow
• About wikiHow
• Log in / Sign up
• Computers and Electronics
• Website and Blog Creation
• Markup Languages

How to Create a Simple Web Page with HTML

Last Updated: February 2, 2024 Fact Checked

This article was co-authored by wikiHow staff writer, Nicole Levine, MFA . Nicole Levine is a Technology Writer and Editor for wikiHow. She has more than 20 years of experience creating technical documentation and leading support teams at major web hosting and software companies. Nicole also holds an MFA in Creative Writing from Portland State University and teaches composition, fiction-writing, and zine-making at various institutions. There are 15 references cited in this article, which can be found at the bottom of the page. This article has been fact-checked, ensuring the accuracy of any cited facts and confirming the authority of its sources. This article has been viewed 4,669,303 times. Learn more...

This wikiHow teaches you how to write a simple web page with HTML (hypertext markup language). HTML is one of the core components of the World Wide Web, making up the structure of web pages. Once you've created your web page, you can save it as an HTML document and view it in your web browser. Creating an HTML page is possible using basic text editors found on both Windows and Mac computers.

Adding a Head to Your HTML

• ChromeOS - Open launcher, then click Text. (The icon says Code Pad).

Adding a Body and Text to Your HTML

• The headings shows the priority or importance of the text. But its not necessary to use a higher heading if you want to use any lower heading. One can directly use H3, even if there is no H1 in your post.

• You can add multiple paragraph lines in a row in order to create a series of paragraphs under one heading.
• You can change the color of any text by framing the text with the <font color="color"> and </font> tags. Make sure to type your preferred color into the "color" section (you'll keep the quotes). You can turn any text (e.g., headers) into a different color with this set of tags . For example, to turn a paragraph's text blue, you would write the following code: <p><font color="blue">Whales are majestic creatures.</font></p>
• You can add bolds, italics and other text formats using HTML. The following are examples of how you can format text using HTML tags: [7] X Research source < b > Bold text </ b > < i > Italic text </ i > < u > Underlined text </ u > < sub > Subscript text </ sub > < sup > Superscript text </ sup >
• If you use bold and italic text for emphasis, not just for styling, use the <strong> and <em> elements instead of <b> and <i> . This makes your web page easier to understand when using technologies like a screen reader [8] X Research source or the reader mode provided in some browsers [9] X Research source .

Adding Additional Elements to Your HTML

• Type <img src= to open your image tag.
• Copy and paste the image URL after the "=" sign in quotation marks.
• Type > after the image url to close your image tag. For example, if the image's URL is "http://www.mypicture.com/lake", you would write the following: < img src = "http://www.mypicture.com/lake.jpg" >

• Type <a href= to open your link tag.
• Copy and paste URL after the "=" sign in quotation marks.
• Type > after the URL to close the link portion of the HTML.
• Type a name for the link after the closing bracket.
• Type </a> after the link name to close the HTML link. [12] X Research source The following is an example of a link to Facebook. < a href = "https://www.facebook.com" > Facebook </ a > .

Customizing Colors

• <body style="background-color:lavender;">

• <p style="color:midnightblue;">
• The color change will only affect the text within that <p> tag. If you start another <p> tag later that should also be midnightblue , you'll need to set the style attribute there as well.

• <p style="background-color:lightgrey;">
• <h1 style="background-color:lightskyblue;">

Closing Your HTML Document

Saving and Opening Your Web Page

• This step is neither necessary nor possible on Windows.

• Alternatively, you can press Ctrl + S (Windows) or ⌘ Command + S (Mac) to do so.

• Windows - Click the "Save as type" drop-down box, click All Files , and then type .html at the end of the file's name.
• MacOS - Replace the .txt at the end of the file's name with .html instead.
• ChromeOS - Click the "Save as" button. Name the file with .html at the end. The beginning is up to you.

• HTML files typically open with your default web browser.

• Windows - Right-click the document, select Open with , and click your preferred browser.
• Mac - Click the document once, click File , select Open With , and click your preferred browser.

• On Windows, you can right-click the document and click Edit in the resulting drop-down menu (if you have Notepad++ installed, this will say Edit with Notepad++ instead). [17] X Research source
• On Mac, you'll want to click the document to select it, click File , select Open With , and click TextEdit . You can also drag the document into TextEdit. [18] X Research source
• On Chromebook, close the Text app, open Files, find your file, and then click on it.

Sample HTML

Community Q&A

• Many people use Notepad++ to write and compile their code. [19] X Research source Thanks Helpful 0 Not Helpful 1
• Tags should always be closed in a mirror image of their open counterparts. For example, <tag1><tag2> should be closed as </tag2></tag1> . Thanks Helpful 1 Not Helpful 0
• You can add side-scrolling text to your website using the <marquee></marquee> tag, but keep in mind that this tag might not be recognized by some browsers. Thanks Helpful 1 Not Helpful 0

• It's best to host your own images on Imgur or similar if you plan on uploading images to your web page. Posting other people's pictures may result in copyright infringement. Thanks Helpful 5 Not Helpful 3

You Might Also Like

• ↑ https://www.w3schools.com/howto/howto_website.asp
• ↑ https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
• ↑ https://www.freecodecamp.org/news/html-background-image-how-to-add-wallpaper-images-to-your-website/
• ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p
• ↑ https://www.w3schools.com/html/html_formatting.asp
• ↑ https://alistapart.com/article/conversational-semantics/
• ↑ https://alistapart.com/article/accessibility-for-vestibular/#section6
• ↑ https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML
• ↑ https://www.w3.org/TR/html401/struct/links.html
• ↑ https://www.w3schools.com/html/html_links.asp
• ↑ https://www.freecodecamp.org/news/html-new-line-how-to-add-a-line-break-with-the-br-tag/
• ↑ https://www.freecodecamp.org/news/how-to-change-text-color-in-html/
• ↑ https://support.apple.com/guide/textedit/work-with-html-documents-txted0b6cd61/mac
• ↑ https://condor.depaul.edu/sjost/hci201/documents/notepad.htm
• ↑ https://notepad-plus-plus.org/

About This Article

1. Open a text editor. 2. Type ″<!DOCTYPE html>″ on the first line. 3. Type ″<html>″ on the next line. 4. Type ″<head>″ on the next line. 5. Type your page’s title between ″<title>″ and ″</title>″ tags. 6. Type ″</head>″ on the next line. 7. Type ″<body>″ on the next line. 8. Enter the content of your page. 9. End the page with ″</body></html>″ Did this summary help you? Yes No

• Send fan mail to authors

Reader Success Stories

May 1, 2023

Is this article up to date?

Indulekha P.

Dec 18, 2016

Sipho Jaclly

May 26, 2017

Tanuja Jalal

Mar 26, 2017

Savita Singh

Nov 26, 2016

Featured Articles

Trending Articles

Watch Articles

• Terms of Use
• Privacy Policy
• Do Not Sell or Share My Info
• Not Selling Info

wikiHow Tech Help:

Tech troubles got you down? We've got the tips you need

• How to Make a Website

How to Code a Website

Learn to Build a Website Using HTML and CSS

Staff Writer

Want to learn how to create a website with HTML and CSS?

You’re in the right place. In this guide, we show you all the steps to get from a blank screen to a working website that’s optimized and quite good-looking at the same time.

But first, what is HTML and CSS?

Well, you could just look up both terms in Wikipedia, but those definitions aren’t very reader-friendly. Let’s simplify things a bit:

• HTML (Hypertext Markup Language) defines the structure and contents of a web page – where things go, how they are laid out, and what’s on the page
• CSS (Cascading Style Sheets) defines the styling/presentation of a web page and the elements on it

You can’t really have one without the other – the two work together to make up the final web page, its design, and the content that’s on it.

Note; when we say “a web page,” what we mean is a single HTML document – a single page that’s part of your website. Whereas, “a website” is the complete thing – your whole site with all its individual web pages.

Table of contents

• Learn the basics of HTML
• Understand HTML document structure
• Get to know CSS selectors
• Put a CSS stylesheet together
• Get Bootstrap
• Pick a design
• Customize your website with HTML and CSS
• Add content and images
• Fine-tune colors and fonts
• Create additional pages

If you think this is too complicated, we recommend either creating a website using WordPress or choosing one of the website builders.

Before You Start, Gather Your Resources:

So, the first thing you need even before creating a website with HTML and CSS is a web server (hosting). Don’t worry, though; you don’t have to buy your own machine. Many web hosting companies will sell you a simple hosting service on their machines. Just google for “web hosting” and pick something that isn’t too expensive or check our web hosting reviews .

With the server sorted, the next thing you need is a domain name. The domain name is what the website is identified on the web. For example, this site’s domain name is websitesetup.org .

When you have both a domain name and a server, you can connect the two together.

To have this sorted out with no pain on your end, we recommend signing up with a company like Bluehost.

They will handle all the setup for you. Meaning that they will: (a) set up a hosting account for you, (b) register a domain name on your behalf, (c) configure everything to work together, and (d) give you access to an easy-to-use dashboard.

Go ahead and sign up with any of the web hosting services , we’ll wait. When you’re back and have your web server configured and ready to go, scroll to the next step.

P.S. If you just want to experiment with an HTML website on your computer , and don’t intend to make it public, use a local web server software. The one we recommend and like to use is called XAMPP . It has versions for both Mac and PC, and it’s easy to use. Here’s a guide on how to install it on your computer.

1. Learn the Basics of HTML

The main element of an HTML structure is an HTML tag .

A tag, for example, looks like this:

Here, we’re dealing with a <b> tag. This one will bold a piece of text that’s between the opening tag ( <b> ) and the closing tag ( </b> ). In this case, that piece of text is SOMETHING .

But there are other tags, just to name a few:

• <i>...</i> will italicize the text between the opening and closing tags
• <u>...</u> will underline it
• <p>...</p> is a paragraph of text
• <h1>...</h1> is the main header on the page

Apart from those simple tags, there are also more complex tags. For example, if you want to build a list like the following:

Item 1 Item 2 Item 3

… you can do that with the following HTML code:

Or, if you want to add a link to another page, like this one:

This is a link to our homepage

… you can do that with this piece of code:

Read this to get the full list of HTML tags . It’ll become useful as you’re creating a website with HTML and CSS.

2. Understand HTML Document Structure

Think of your HTML page as if it was built of Legos. You put different bricks on top of one another to end up with a given bigger structure.

But instead of Lego bricks, you get HTML tags…

Here’s the simplest HTML document structure:

You can take the code above, copy and paste it to a new file, save the document as index.html , and it’s going to be a perfectly valid HTML page.

Let’s explain the individual parts of this code:

• <!doctype html> – the initial declaration of the document
• <html lang="en"> – another declaration; says that what’s to come next is an HTML document written in English
• <head> – marks the start of the head section; the head section is where all the basic parameters of the page go; most of those are not going to be shown on the screen; they just define what’s going on under the hood
• <meta charset="utf-8"> – defines what character set is used to write the document; no need to spend too much time on this; just use this declaration as is
• <title>Hello, world!</title> – the title of the page; this is what people will see in the title bar of their browsers, e.g.:

• <body> – marks the start of the body section; this is where all the content of the page goes; it’s the main part of an HTML document; let us emphasize this, this section is where you’re going to be including all the content that’s meant to appear on the page
• <h1>Hello, world!</h1> – the main header on the page
• <p>My first web page.</p> – a simple paragraph of text
• </html> – the closing tag of the whole HTML document

An important note here. Working on an HTML file in a basic text app or a complex text processor like MS Word is not a good experience. To make things easy on yourself, install a HTML editor called Sublime Text . It has versions for both Mac and PC, and it is free.

Why is it better? Among other things, it will colorize the syntax of an HTML file. Meaning, it’ll visually distinguish your HTML tags from text content, tag parameters, and other values. Basically, it’ll all become readable. Here’s what our simple HTML structure looks like in Sublime Text:

Okay, back on topic. You can take that new index.html file of yours, copy it to where the main directory of your web server is, and then see that page by navigating to it through a web browser. Don’t get too excited, though; this page will be rather ugly (see below).

Okay, so the page is ugly, how to make it not so?

3. Get to Know CSS Selectors

Just like HTML has its tags, CSS has selectors .

Selectors describe how a given element should behave appearance-wise. Here’s an example of a CSS selector:

This selector indicates that all HTML <p> tags within the document will have a font size of 18px.

However, a more practical way of using CSS selectors is not to restrict all tags of a given type to a certain styling, but rather create different “classes” and assign them to tags one by one.

For example, a class selector in CSS looks like this:

Notice the dot ( . ) before the name of the class ( normal-text ). With the “normal-text” class defined, we can now assign that class to those specific HTML tags that we want to make 18px in size.

For example:

Let’s take one more minute to explain all the elements of that piece of CSS code above:

• .normal-text – class definition; everything after the name of the class and between the opening and closing brackets {} defines what the elements assigned to this class will look like
• font-size – an example CSS property
• 18px – a value assigned to the property

There’s a ton of CSS properties apart from the above font-size . Here’s the complete list if you’re curious.

4. Put Together a CSS Stylesheet

An HTML document is very structural – every element has its place, and the order of elements is crucial for the final construction and appearance of the web page in question. A CSS document is a lot less so.

CSS documents are often referred to as stylesheets . Basically, a CSS stylesheet is a list of all the class definitions that are being used in the corresponding HTML document. The order of the class definitions is not that crucial most of the time (at least for simple designs).

The way you put a CSS stylesheet together is by defining each class one by one, and then testing if the outcome in your page design is what you wanted.

This sounds like tedious work, and it is.

But we’ll make things easier on you, and not force you to learn HTML and CSS design by hand. Instead of teaching you everything from scratch, we’ll take a living organism and dissect its elements.

This is where a thing called Bootstrap comes into play.

5. Download/Install Bootstrap

Bootstrap is an open-source toolkit for creating a website with HTML and CSS.

In plain English, Bootstrap takes care of the basic structure of an HTML document and CSS stylesheet for you. It delivers a framework that makes sure that the main scaffolding of your web page is ready and optimized for further development.

Basically, Bootstrap lets you not start from scratch, and instead go right into the fun part. With it, you don’t have to work on the often boring early stages of creating a website with HTML and CSS.

There are two paths you can take:

• Option (a) : learn Bootstrap – go to the Bootstrap homepage, download the main Bootstrap package and start building on top of it.
• Option (b) : take a shortcut – get a starter pack for Bootstrap with a good-looking design and a demo web page already built.

Option (a) might have some learning curve at the beginning, but it’s not in any way the worse way to approach creating a website with HTML and CSS. Once you master the core Bootstrap structure, it might be easier for you to build new pages and make them look exactly as you want them. The Bootstrap documentation is a great place to get started with this path.

We’re going to go with Option (b) for this guide. We’re doing this for a couple of reasons, chief of them:

Starting with a ready-made structure saves a lot of pain in trying to figure out the basic necessities of an HTML document. This lets you focus on the interesting stuff – like laying out content and making it look good.

In short, learning things this way will give you a better-looking result quicker, which we guess is what you want.

6. Pick a Design

When you’re creating a website with HTML and CSS, you are free to use any Bootstrap template you like. They should all work similarly enough.

However, for this guide, we’re going to use one of the templates by Start Bootstrap . They have a nice selection of free templates that are optimized, work trouble-free, and are also very well designed.

The theme we’re going to use is called Creative . The final effect we’re going for will look something like this:

To begin with, the Creative template, click on the Free Download button that’s on the right (on this page ) and save the zip package to your desktop.

Unzip the package and move its contents to the main directory of your local web server or your web hosting account.

Now open that location through your web browser. You’ll see the stock version of the template:

It’s already quite good-looking, but now it’s time to learn how to use HTML and CSS to make it into exactly what you want it to be.

7. Customize Your Website With HTML and CSS

Let’s work on the homepage of the design first. This is going to show us how to replace the graphics, texts, and tune everything up in general.

We’ve talked about the head section of an HTML document briefly above. Let’s have a more in-depth look into it here.

When you open the index.html file of your Bootstrap site in Sublime Text, you’ll see a head section like this (we removed all the non-crucial things from this code for clarity *):

* Apart from the above, there was also code to load Google Fonts, Font Awesome icons and a lightbox module for the images displayed on the page.

Most of the declarations here we already know, but there are a couple of new ones:

• First off, everything between the <!-- ... --> brackets is an HTML comment. It doesn’t show up on the final page.
• <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> – it’s one of Bootstrap’s own declaration tags. It defines the size of the website’s viewport.
• <link href="css/creative.min.css" rel="stylesheet"> – this line loads the CSS stylesheet of the Creative template and it also houses the default stylesheet of Bootstrap.

Let’s modify that last declaration – the line loading the CSS – to make it easier to work with later on.

Change that line to:

This is just a small difference – it’ll load the non-shortened version of the same CSS sheet. This version is just easier to modify.

Now scroll down to the very bottom of the index.html file. You’ll see the following lines right before the closing body tag:

They’re responsible for loading JavaScript  files that handle some of the more visual interactions of the design. For instance, when you click on the About link in the top menu, you’ll be taken smoothly to the about block on the same page – this, among other things, is done via JavaScript. We don’t need to trouble ourselves understanding this code right now. Let’s leave this for another time.

Instead, let’s work on adding our own content to the page:

8. Add Content and Images

The first thing you’ll want to do is change the title of the page.

1. Change the Title

Find the title tag in the head section and replace the text between the tags to something of your own:

2. Customize the Hero Section

The hero section is what we call this block:

It would be cool to have our own content inside of it. To modify this block, go back to your index.html file and find this section:

This whole block of code controls what’s in the hero section.

There are some new tags here:

• <header> – this is a tag defining that this whole section is the header of the page; this tag has a couple of brothers and sisters in the form of the <section> tag and <footer> tag
• <div> – is a general CSS tag that indicates that what follows is a separate section (aka division ) in the HTML document; using it makes it easier to distinguish individual sections on the page visually

You’ll also notice that some of the other tags (which we already know) look to be a bit more complex, with multiple CSS classes assigned to them. For example:

The classes assigned to the <h1> tag here is text-uppercase text-white font-weight-bold .

These classes have been created by Bootstrap and by the Creative theme’s developer. The good news is that you too can use them freely when creating a website with HTML and CSS.

Quite frankly, you can customize any tag you add to your page’s structure by assigning any number of classes to it.

If you want to see the complete list of the classes available, you can open the main creative.css file that’s in the css subdirectory of the Creative theme.

Getting a grasp of all these classes can seem intimidating at first, but it’s actually way easier than it looks.

For example, one of the classes assigned to some of the paragraphs in our index.html file is font-weight-light . When you jump into the creative.css file and ctrl+f looking for that class name, you’ll see that it simply sets the font-weight parameter like so:

Modifying the default texts in the index.html file is very simple. Just find the tag that you want to edit and change what’s between the opening and closing tags.

For example, to change the main headline, just change this:

To something like the following:

You can do the same to all the paragraphs and other tags on the page.

What’s important is that you can also add new paragraphs freely. For example, we can take the paragraph that’s already on the page, make a copy of it and paste it right below the original paragraph; like so:

Now, with the texts taken care of, let’s replace the image that’s in the background.

This is a bit more complicated to do since it requires us to go into the CSS stylesheet file and do the modification there. As you can see in the HTML code of the Masthead section, no tag would indicate including an image to the page in any way. This is all done via CSS.

When you take another look at the whole block of code handling the Masthead section, you’ll see that it’s assigned to a class called masthead . This line of code handles the class assignment:

The masthead class is the one that puts an image in the background of the whole block.

Let’s open the creative.css file again and look for the “masthead” class:

This code does all kinds of fancy things to our image (like adding an overlay, shading, etc.), but the important part is this: url("../img/bg-masthead.jpg") . This is the line that indicates where to find the background image. It’s going to be in the img subdirectory.

To change this background image, take any image of your own, copy it to the img subdirectory and then copy and paste its name in place of the original bg-masthead.jpg file. In short, change this: url("../img/bg-masthead.jpg") to this: url("../img/YOURFILE.jpg") .

3. Customize the Other Blocks on the Page

As you go through the index.html file, you’ll notice that there’s a lot of different sections already on the page. We have a section for the navigation , and about a block, some services , a portfolio , a call to action , a contact block, and a footer .

While there’s different content in all these sections, the sections themselves are similar in structure. They all have roughly the same set of HTML tags – just different CSS classes assigned to them.

The best way to modify the page to fit your needs is to go through the blocks one by one and experiment by changing things around.

Apart from modifying the texts, you can also move whole sections around (the parts between the <section> tags). Granted, you do have to do that by hand (by cutting and then pasting elements into place), it still is straightforward to do.

With that being said, there are two quite basic modifications that we haven’t talked about yet. Let’s cover these next:

9. Fine-Tune Colors and Fonts

Changing colors or fonts is very easy to do in HTML and CSS. The simplest thing you can do is assign some in-line styling to an HTML tag. For example:

In HTML, colors are represented by their hex values; “#FF0000” is red. Here’s a table of all the other standard colors .

A better way to assign colors is to do it via the CSS stylesheet. For example, to get the same effect as the code above, we could put this in our CSS stylesheet:

And then use the following piece of HTML code in the main document:

That second method is basically how things are done in Bootstrap.

To change the color of any text on the page, first find the tag responsible for styling that text, and then go into the stylesheet and modify the corresponding class, or create a new class.

Here’s an example; say you want to change the color of the header saying “At Your Service.” Currently, it’s black, and this is the code handling it:

To change its color, the best way is to create a new class called, say, .text-orange and set the color value there, like so:

* The !important  will make sure that this color setting will overwrite any other color setting that came before it.

Now, we can go back to our header, and change its code to:

With these changes, the header will now be orange:

To change the font and its size, you can do something very similar. But first, an example of what a font definition block looks like in CSS:

• load fonts Merriweather , Roboto , and a system-default sans-serif font (read this to learn about web-safe fonts )
• set the font size to 18px

This sort of definition can be placed into any CSS class, just like the color definition. Actually, font and color definitions are often found in the same class declarations.

Going back to our previous example, to change the font size for that header that says “At Your Service,” we could first create a class like this:

And then assign this class to the header:

When changing the colors or fonts in your Bootstrap-made template, first look through the CSS stylesheet for classes that might already provide you with alternative sizes or colors. Use those where available.

10. Create Additional Pages

Now that you have the homepage customized, it’s time to start working on some additional pages and then link them to the homepage.

When creating a website with HTML and CSS, you can build any number of sub-pages and then link them all together.

Here are some of the common pages that most websites need:

• products/services
• policies (privacy policy, terms, etc.)

1. Start With the Layout

When building a new web page, the first decision you have to make is what you want the layout to be.

When creating a website with HTML and CSS, nothing is stopping you from crafting whatever layout you want. The only difficulty is actually putting it together.

HTML and CSS can be tough to deal with when starting from a blank screen, so we’re going to use Bootstrap here as well. First, we’re going to show you some principles of crafting a layout and then demonstrate how to do it with Bootstrap.

The way you can think of your web page’s layout is to consider it a sequence of individual blocks – one on top of another. Something like this (notice the four distinct blocks):

The great thing about Bootstrap is that it handles the basic layout principles and appearance details for you so that you can just focus on putting those blocks in the right places.

In this section of the guide, we’re going to create a new “about” page.

To begin, we’ll create just a very basic project of the layout. Something like the one above.

• there’s a navigation menu at the top,
• a full-width headline block below the menu,
• the main content section in the middle, boxed in the center of the screen (not full-width),
• and a footer.

Now let’s build this layout in HTML.

2. Build a New Page

The easiest way to start working on a new page is to duplicate an existing page and use it as a template. That’s what we’re going to do.

Create a copy of the index.html file and rename it about.html .

Just to make the pages easier to distinguish at this early stage, edit the new about.html file and change what’s in the <title> tag. For example, <title>About Me</title> .

Now let’s go through the file line by line and decide what we’ll leave and what we’ll remove:

• The navigation menu (below <!-- Navigation --> ). You probably want to keep this section intact, just to make the navigation experience uniform on all pages.
• The main hero section (below <!-- Masthead --> ). This one we won’t need according to our layout project. You can go ahead and erase the whole section.
• The about section (below <!-- About Section --> ). We’re going to reuse this section as our main headline block.
• The services section, portfolio section, call to action section, and contact section (everything between <!-- Services Section --> and <!-- Footer --> ). We don’t need these sections at all. You can go ahead and erase them.
• The footer section and everything below it (below <!-- Footer --> ). This we’ll need to keep.

This makes our current code quite simple. It basically is just this:

The thing that we’re missing here is the main content section. To build it, we’re going to reuse the about section.

Go ahead and make a copy of the about section. This one:

Now change the first two lines to this:

Since we don’t need the <h2> header there and the <hr> element, let’s just remove them. The only thing left inside this whole block is going to be a paragraph of text. Like so:

When you save the file and navigate to it via your browser, you’ll see that you basically have two very similar blocks one below the other, with the same color background:

It’d be better to have a white background in the main content section. To change it, the only thing we need to do is remove the bg-primary class from the main <section> tag. In other words, make the tag into this:

That’s better:

Let’s add some dummy paragraphs to the page to populate it some more, plus maybe a sub-head:

Here’s what this looks like on the page:

If you don’t like the text to be centered then just remove the text-center class from one of the <div> tags.

If you want to put some more flair on these blocks of text, you can create new CSS classes (like before) and assign them to the paragraphs in the block. Or, you can have a peek into the current stylesheet and see what classes are already there for this purpose. Here are the ones we assigned to the <p> and <h3> tags:

And here’s the effect:

One more thing we’re going to do here is add an image somewhere on the page.

Here’s what an example image tag in HTML looks like:

Fairly simple, right? The only parameter there is the path to the image file. To keep things nicely organized, you can put your image in the img directory again (just like you did with that background a while ago). In such a case, the image tag will be:

That being said, the image tag in this particular configuration is fairly limited. To make it a bit more refined, let’s assign some Bootstrap classes to it. Particularly:

These two classes will give your image rounded corners and will also make sure that the size of the image doesn’t exceed the size of the block where it sits.

You can now add a tag like this somewhere in the main content section of your about page. For example, here:

And here’s the final effect on the page:

Here’s our about page in all its glory:

3. Link to the New Page

With the new page done, let’s now link it from the homepage (the index.html file). Naturally, the best place to add this link is in the navigation menu (below <!-- Navigation --> ).

In particular, look for this line:

We’re going to change it to this:

This is something we haven’t talked about yet, but the <a> tag is a link tag in HTML. Using it, you can link to any web page by providing the address of that page in the href parameter. The text of the link – the clickable part of the link – will be the text between the opening and closing <a></a> tags.

When you refresh the homepage now, you’ll see your new link pointing to the about page.

Further Reading

At this stage, you’ve basically built yourself a simple website consisting of two pages – a homepage and an about page.

What you should do now is rinse and repeat by creating new pages, tuning them up, adding content to them, and then linking everything from the navigation menu.

Other things worth doing as you’re going through these steps is further learning HTML and CSS principles, going through the checklist , and also learning Bootstrap and its structures and classes. Some resources for that:

• HTML5 cheat sheet
• CSS cheat sheet
• Javascript cheat sheet
• Bootstrap tutorial
• Bootstrap cheat sheet

Mastering Bootstrap, highly likely the best path currently available to building optimized and beautiful websites with HTML and CSS.

If you have any questions about creating a website with HTML and CSS, don’t hesitate to submit them in the comments.

An Introduction to HTML for Beginners

HTML, which stands for HyperText Markup Language, serves as the foundation of web development. It enables you to create interactive web pages, structure content, and effectively communicate your message.

In this guide, we'll explore HTML comprehensively, addressing essential questions to provide a strong foundation for budding web developers.

The Crucial Role of HTML in Web Development

HTML plays an essential role in web development as it defines the structure and content of web pages. It serves as the backbone upon which websites are built.

HTML accomplishes this by utilizing a system of tags and elements, each serving a unique purpose.

How Do I Write HTML Code?

Writing HTML code is a matter of understanding HTML tags.

Tags are enclosed within angle brackets, each comprising an opening and closing part. They function as building blocks that define the structure of your web page.

Think of them as the bricks and mortar of web development. Understanding their roles is essential for web development.

How to Create a Website Using HTML?

Creating a website using HTML involves several key steps. Let's go over them in the following sections.

Website Planning

Before you start coding, take time to plan your website thoroughly.

Identify your target audience, outline the content and structure of your site and design a layout that aligns with your goals.

Keep in mind that the visual design can be enhanced with CSS (Cascading Style Sheets), a topic we'll explore later in your web development journey.

Writing HTML Code

Open a text editor, such as Visual Studio Code or Sublime Text, and begin writing HTML code.

Start with the basic structure, including <!DOCTYPE html> , <html> </html> , <head> </head> , and <body> </body> .

Then, populate the body with your content.

Saving as .html

Save your HTML files with a .html extension to indicate that they are web pages. Proper file naming is essential for organizing your project.

Local Testing

To see how your website looks and functions, open your HTML files in a web browser. This local testing phase allows you to fine-tune your design and layout.

Hosting and Publishing

For your website to be accessible on the internet, you'll need web hosting services. Various providers offer hosting, and you'll typically obtain a domain name (for example, www.yourwebsite.com) to point to your hosted site.

How to Start HTML Code?

Starting HTML code is straightforward. Let's go over each step in the following sections.

Text Editor Selection

Choose a text editor that suits your needs. Popular options include Visual Studio Code, Sublime Text, and Atom. These editors offer features like syntax highlighting and autocompletion tailored to web development.

HTML5 Declaration

Initiate your HTML document with <!DOCTYPE html> . This declaration signifies the use of HTML5, the latest HTML standard.

Building the Structure

Inside the <html> </html> tags, create your HTML structure.

The <head> </head> section contains metadata, including the page title, and the <body> </body> section houses the visible content of your web page.

Adding Metadata

Within the <head> </head> section, utilize the <meta> tag to specify the character encoding, ensuring proper rendering.

How Do I Run HTML Code Step by Step?

Executing HTML code is straightforward, thanks to modern web browsers. Here's a step-by-step guide:

Save Your HTML File

Ensure that your HTML file is saved with a .html extension. This signals to your computer that it's an HTML document.

Double-Click to Open

Double-click the HTML file, and your default web browser will automatically open it. Your browser renders the HTML, displaying your web page.

Alternative Browsers

If you prefer a specific web browser, you can right-click the HTML file and choose "Open with" to select your preferred browser.

Inspect and Debug

Modern web browsers come equipped with built-in developer tools that enable you to inspect and debug your HTML, CSS, and JavaScript.

Access these tools by right-clicking on your web page and selecting "Inspect" or by pressing F12 or Ctrl+Shift+I (Windows) or Cmd+Option+I (Mac).

How Do You Write "Hello" in HTML?

Displaying "Hello" on a web page is straightforward. You can use the <h1> tag to create a top-level heading, as demonstrated earlier.

HTML offers multiple ways to present "Hello." For instance:

Or you can use a paragraph tag:

Both options result in "Hello!" being displayed on your web page. The choice depends on the context and your styling preferences.

It's worth noting that HTML has six levels of headings, ranging from <h1> (the highest) to <h6> (the lowest). Headings are used to structure content hierarchically, with <h1> representing the main heading and <h6> representing subheadings.

How to Create an HTML File with an Example?

Creating an HTML file is your gateway to web development. Here's an expanded step-by-step guide:

Choose a Text Editor

Select a text editor that suits your workflow and preferences. Modern editors offer features like syntax highlighting and autocompletion, enhancing your coding experience.

Structure Your HTML

Begin your HTML document with <!DOCTYPE html> , followed by <html> </html> tags to enclose your content. Inside the <head> </head> section, set metadata, such as the page title and character encoding, using the <meta> tag.

Add Content

Within the <body> </body> section, insert your content. Experiment with various HTML tags to format your content, including headings, paragraphs, lists, links, and images.

Save with .html Extension

Save your file with a .html extension. This naming convention ensures that your computer recognizes it as an HTML document.

Preview Locally

Double-click the HTML file to open it in your web browser. This provides an instant preview of your webpage, allowing you to see how it appears to your audience.

Introducing CSS for Styling

While HTML defines the structure of your web page, CSS (Cascading Style Sheets) is used for styling. You can link an external CSS file to your HTML to control the design and layout of your webpage. For example:

This separation of content (HTML) and presentation (CSS) is a fundamental practice in web development.

How Do You Write a Sentence in HTML?

To create a sentence in HTML, you can employ the <p> (paragraph) tag, as mentioned earlier. However, HTML offers flexibility, allowing you to use other inline tags for shorter text snippets. Here's an example:

Alternatively, for shorter text, you can use the <span> tag:

The <p> tag is typically used for paragraphs, while the <span> tag is more versatile and is often used for inline elements within a sentence or paragraph. Choose the tag that suits the context of your content.

Additional HTML Elements to Explore

While we've covered the basics, HTML offers a plethora of elements and attributes for creating rich and interactive web experiences. Here are some additional HTML elements you can explore:

HTML provides elements like <form> , <input> and <button> to create user-friendly forms for collecting data.

You can use <table> , <tr> , <td> and other related tags to structure tabular data.

Embed images, audio, and video using <img> , <audio> , and <video> tags.

Links and Anchors

Create hyperlinks using the <a> tag to connect web pages and external resources.

Use <ul> for unordered lists, <ol> for ordered lists and <li> for list items.

Semantic Tags

HTML5 introduced semantic elements like <header> , <nav> , <section> , <article> and <footer> to enhance the structure and accessibility of web pages.

Further refine your document with meta tags, including those for specifying character encoding, viewport settings, and author information.

In closing, HTML is your gateway to web development. It provides the foundation upon which you can build stunning web experiences and effectively communicate with your audience.

Whether you're embarking on creating a personal blog, launching an e-commerce site, or showcasing your portfolio, HTML forms the foundation of your online presence.

As you progress in web development, remember that HTML is just the beginning of your journey. Complement your HTML skills with CSS for styling and JavaScript for interactivity. This  approach empowers you to create dynamic and engaging websites that captivate the attention of your audience.

In your pursuit of web development excellence, embrace the challenges and endless possibilities presented by HTML and the ever-evolving field of web technologies. Stay curious, never stop learning, and remain current with the latest standards and best practices. Connect with me on Twitter .

frontend developer || 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

• School Guide
• Class 10 Syllabus
• Maths Notes Class 10
• Science Notes Class 10
• History Notes Class 10
• Geography Notes Class 10
• Political Science Notes Class 10
• NCERT Soln. Class 10 Maths
• RD Sharma Soln. Class 10
• Math Formulas Class 10

How to build a Website using HTML?

• How to Build a Website using Wix ?
• How to make Simple Website using Google AMP ?
• Build Blog website using Flask
• Bootcamp Website Template using HTML and CSS
• How to add sub heading using HTML ?
• How to write e-mails in HTML and send it using Gmail ?
• How to use HTML Agility Pack ?
• How to Deploy a Basic Static HTML Website to Heroku?
• How to make a website using WordPress (Part – 2)
• Blog Website using JavaScript
• How to Create Badges using HTML and CSS ?
• Simple Portfolio Website Design using HTML
• How to create a table by using HTML5 ?
• What Is Hostinger Website Builder ?
• How to Create a Portfolio Website using HTML CSS and JavaScript ?
• Using GitHub to host a free static website
• How to make a website using WordPress (Part - 1)
• AWS - Launching a Website
• Top Website Building Platforms

In today’s modern world, it has become essential for businesses, organizations, and individuals to have a strong online presence. One of the fundamental components of any website is HTML (Hypertext Markup Language). HTML provides the structure and layout for websites, enabling content to be displayed in an organized and structured way. In this article, we will learn how to create an HTML website.

Set Up Your HTML document

To create a website, the first step is to create an HTML document. You can create this document in any text editor, even on Notepad. Therefore, any text editor can be used to make an HTML file. All you need to do is add the extension “.html” or “.htm”. Let’s create the first basic HTML program.

To create an HTML document follow the following steps:

Step 1: Open your text editor such as Notepad Sublime Text , etc.

Step 2: Write the code given below in the text editor.

Step 3: Save this file with the .html/.htm extension.

Step 4: Open that file with any browser. The output will be displayed.

So this is how we create a simple HTML document.

Building HTML Website

To create a website using HTML, we need to learn about the various tags and attributes available. HTML tags are instructions that are enclosed in angle brackets. By using these tags, we can design a visually appealing webpage. Some of the important tags that we can use are:

• Header tags (<h1> … </h1> to <h5> … </h5>): These tags are used to provide headings of different sizes to your website. <h1>…</h1> is the largest heading while <h5>…</h5> is the smallest.
• Bold tags (<strong>…</strong> or <b>…</b>): These tags are used to make text appear bold.
• Italic tags (<i>…</i> or <em>…</em>) : These tags are used to make text appear in italics. The difference between <i> and <em> tags is that <em> is used to provide semantic emphasis on important text or words, while <i> is used to make text appear in italics.
• Ordered List (<ol>…</ol>): The HTML <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical. It starts and ends with a <ol> tag, and each list item starts with a <li> tag. We can use the type attribute to define the type of ordered list that we want to create.

5. Unordered List (<ul>…</ul>): It displays elements in bulletin form . An unordered list starts with <ul > tag and each item  starts with <li> tag. We can use the type attribute to define the type of unordered list we need to make:

6. Image Tag: If we need to add an image to our website we need to use the following syntax.

<img src=”filename” alt=”name / bit about image”>

• img : Tells browser that we want to add an image.
• src : Tells source of image for eg image from desktop or a website.
• alt : This attribute is used to describe an image. If the image is not able to download in a web browser due to some reason then alt is shown.

7. Anchor Tag: This tag is mainly used to connect one website to another.

<a href=”https://www.geeksforgeeks.org/c-plus-plus/?ref=shm”> Click Here to Learn C++</a>

Note: Nesting is possible in HTML, which means that we can write one tag between another tag. 

Basic HTML Website

Example : Here, we create a simple website of GeeksforGeeks. 

Build Website using HTML

Building a website in HTML is a foundational skill for anyone interested in web development and By following these steps and experimenting with different HTML elements and CSS styles, you can create visually appealing and functional website tailored to your specific needs. Remember to continuously refine your skills and stay updated with the latest web design trends to create compelling and user-friendly websites.

Please Login to comment...

Similar reads.

• HTML-Questions
• Web Technologies

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

HTML Get Started

An HTML file is simply a text file saved with an .html or .htm extension.

Getting Started

In this tutorial you will learn how easy it is to create an HTML document or a web page. To begin coding HTML you need only two things: a simple-text editor and a web browser.

Well, let's get started with creating your first HTML page.

Creating Your First HTML Document

Let's walk through the following steps. At the end of this tutorial, you will have made an HTML file that displays "Hello world" message in your web browser.

Step 1: Creating the HTML file

Open up your computer's plain text editor and create a new file.

Tip: We suggest you to use Notepad (on Windows), TextEdit (on Mac) or some other simple text editor to do this; don't use Word or WordPad! Once you understand the basic principles, you may switch to more advanced tools such as Adobe Dreamweaver.

Step 2: Type some HTML code

Start with an empty window and type the following code:

Step 3: Saving the file

Now save the file on your desktop as "myfirstpage.html ".

Note: It is important that the extension .html is specified — some text editors, such as Notepad, will automatically save it as .txt otherwise.

To open the file in a browser. Navigate to your file then double click on it. It will open in your default Web browser. If it does not, open your browser and drag the file to it.

Explanation of code

You might wonder what that code was all about. Well, let's find out.

• The first line <!DOCTYPE html> is the document type declaration . It instructs the web browser that this document is an HTML5 document. It is case-insensitive.
• The <head> element is a container for the tags that provides information about the document, for example, <title> tag defines the title of the document.
• The <body> element contains the document's actual content (paragraphs, links, images, tables, and so on) that is rendered in the web browser and displayed to the user.

You will learn about the different HTML elements in detail in the upcoming chapters. For now, just focus on the basic structure of the HTML document.

Note: A DOCTYPE declaration appears at the top of a web page before all other elements; however the doctype declaration itself is not an HTML tag. Every HTML document requires a document type declaration to insure that your pages are displayed correctly.

Tip: The <html> , <head> , and <body> tags make up the basic skeleton of every web page. Content inside the <head> and </head> are invisible to users with one exception: the text between <title> and </title> tags which appears as the title on a browser tab.

HTML Tags and Elements

HTML is written in the form of HTML elements consisting of markup tags. These markup tags are the fundamental characteristic of HTML. Every markup tag is composed of a keyword, surrounded by angle brackets, such as <html> , <head> , <body> , <title> , <p> , and so on.

HTML tags normally come in pairs like <html> and </html> . The first tag in a pair is often called the opening tag (or start tag), and the second tag is called the closing tag (or end tag).

An opening tag and a closing tag are identical, except for a slash ( / ) after the opening angle bracket of the closing tag, to tell the browser that the command has been completed.

In between the start and end tags you can place appropriate contents. For example, a paragraph, which is represented by the p element, would be written as:

You will learn about the various HTML elements in upcoming chapter.

Is this website helpful to you? Please give us a like , or share your feedback to help us improve . Connect with us on Facebook and Twitter for the latest updates.

Interactive Tools

A website creator made for professionals

Webflow lets you create responsive websites powered by HTML5, CSS3, and JavaScript — without actually writing the code yourself.

For too long, creating for the web has meant tackling the laborious task of learning code, or hiring a developer to implement your vision.

But with Webflow’s no-code website creator, you can harness all the power of a developer without knowing code.

Unleash your creativity on the web — without coding

“If I did not have Webflow, I probably would not be doing website design.”

–Andres Jasso, Freelance Designer

Webflow gives you the tools you need to design and create professional websites using an intuitive and efficient graphic interface. It’s as easy as a simple drag-and-drop of different design elements onto the blank canvas, then styling them elements however you want.

Webflow’s website creator gives your creativity free reign, allowing you to focus on your design without worrying about coding.

Webflow is your starting point and endpoint for web design

Whether you’re starting from scratch or want to use a template , Webflow gives you a running start, so you can create a website quickly.

Choose from one of our 100+ HTML5 responsive templates for your blog, business, or portfolio. Our professionally designed templates will give you a solid framework for creating a website you’ll love. And you can customize every element of our templates with the code-free Webflow Designer, so you get complete control over the final look and feel. You’ll never want to use one of those cookie-cutter templates offered by other free website builders again. And with our preview feature, you’ll be able to see exactly how your website will look and function on any device.

Go from concept to launch faster than ever

“Webflow is actually changing our workflow. Before we had to … depend on engineering.”

-David Gomez Rosado, Creative Director Groupon

With Webflow, you’ll never have to waste time creating mockups again. While you create the design, Webflow generates the code. HTML5, CSS3, and JavaScript are all accurately generated while you work your design magic. Your website will not only look exactly how you want it, but will also be responsive.

In any setting, whether it’s an agency, freelancing, ecommerce store, or at a large company, the quicker you can take a concept and put a responsive, visually engaging website in front of a client, the better. Webflow’s rapid HTML and CSS prototyping will speed up this process. And all that time you save will free you up for high fives from the team.

Add interactions and animations without the added headaches

Before Webflow, creating animations and interactions involved working with tedious code, or bribing one of your developer friends with pizza (or a couple hundred bucks) to do it for you. With Webflow, you can forget about wrestling with code and keep that large pepperoni pizza for yourself.

Interactions and animations are super easy. Our multiple triggers and effects open up a world of design possibilities that all work beautifully across browsers and mobile devices. Just a few clicks in our intuitive interface and you’ll have fun, engaging animations and interactions that will improve navigation as well as creating a fun and visually exciting experience for the user.

Less design time means more creativity

Your workflow should flow like a river — not a sputtering faucet. Webflow keeps you moving with easy-to-use prebuilt components so you can design faster and style elements with ease.

Webflow’s prebuilt components include navigation, sliders, tabs, forms, lightboxes — and so much more. And of course, you can adjust every detail of these components, including typography, colors, and more. Every detail is yours to make your own. And with our Symbols feature, you can style components to perfection, then reuse them across your site with a click of a button.

This lets you spend more time on what’s important — shaping your website to fit your creative vision.

Content management, managed visually

If content is king of the web, then no website creator is complete without a built-in content management system (or CMS). And while many website creators do include a CMS, they’re often either extremely limited (enabling no more than blogging) or require extensive knowledge of PHP and/or database languages to customize.

Webflow CMS is different.

Whatever your content is — whether it’s a landing page , portfolio , blog to grow your online presence, sell products with an online store, app reviews, team member bios, whatever — you can structure and format it exactly the way that you want it, without even thinking about code. It’s a level of customizability you won’t find with WordPress unless you’re a developer.

Webflow is also the first site builder that lets you access and design with your content , so you can immediately test your ideas and make optimizations with a full suite of enterprise-grade SEO tools And any changes you make to content on one page will automatically cascade across your site.

Be the website designer and the developer

“Before Webflow … I was always very dependent on either finding an engineer ... asking friends for help and giving them part of the cut, or just not doing it at all. With Webflow, that problem’s just gone.”

–AJ Shewki, Professional Web Designer

Web design and development doesn’t have to be limited to those who know how to code. Anyone with the spark of creativity should have the tools that they need to create whatever they can imagine — and that’s exactly why we built Webflow. Our website creator will actually help you understand code and the web better as you see how your styling choices affect your design — in real-time.

Webflow puts the power of professional design at your fingertips

“We are the music makers… we are the dreamers of dreams.”

Willie Wonka, Candy Industry Disruptor

Just as a painter can grab paint and brushes and immediately bring their artistic vision to life on canvas, Webflow give you the tools you need to create your next web design masterpiece.

With its easy-to-understand interface, pre-made design elements, animations and interactions, and its visual content management system, Webflow is the best website creator for creating websites visually. It allows you to design and launch websites faster and more beautifully than ever before.

Webflow lets you be the web designer and the developer so you can take whatever dreams you have for creating a website and makes them come true.

Web design doesn’t have to be complicated. With Webflow, you’re ready to go.

Start building today, for free. You only pay for custom domain web hosting or advanced features like integrations with your favorite tools, and when you upgrade, enjoy peace of mind with our 30-day money-back guarantee (check our pricing page for more information).

Get started for free

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.

Create without limits using  an HTML website builder

Build a unique powerful website using 1000s of intuitive design features and advanced AI tools.

Trusted by 250M+ users worldwide.

Start with HTML templates designed with you in mind

Choose from expertly crafted HTML5 website te mplates , all fully customizable and tailored for any type of business.

Photography

Business & Services

Food & drink

Build a one-of-a-kind website with ease

AI content creation tool

Intuitive drag & drop elements

Extensive media library

Interactive design effects

Reusable HTML components

Mobile optimization and more

Join millions. Kickstart your website journey today.

sites created daily

How to use an HTML website builder

Create your site in no time with our easy-to-follow steps:

Plan your website.
 Think about the type of site you’re creating and who your target audience is. Then start mapping out the pages you’d like to incorporate.    

Sign up for a free HTML website builder.  Choose the right plan for you that fits all your website's needs.  

Pick a template or let AI do the heavy lifting.  Browse our collection of templates or chat with our AI site builder and have a website created for you.    

Customize your website.  Seamlessly change colors, fonts, layouts and more. You can add custom CSS or Javascript for extra customization.  

Get a domain name.  Connect a custom domain or use a free Wix branded domain to get your site online.  

Optimize for search engines.  Use a suite of advanced SEO tools to help you optimize your site and increase organic traffic.  

Publish and promote your website.  Once your site is live, drive traffic by promoting it with built-in solutions like email marketing and social media tools. 

Enhance your site with  end-to-end business solutions

Start selling products, create a community, take  bookings and establish your brand online—all from one place.

Online store

Sell anything and boost your revenue with powerful eCommerce features.

Create a blog and monetize your content effortlessly.

Scheduling software

Offer your services, take online bookings, and manage your calendar seamlessly.

Showcase your work, reach new clients, and expand your online presence.

Domain & hosting

Look professional online with a custom domain name and enjoy free web hosting .

Branding tools

Establish a strong brand identity with a customizable logo , color themes, and more.

Built to help you succeed

Manage client relationships, promote your business, and drive growth with even more built-in tools:

Run your business on the go with the Wix Owner app.

Reach the right audience with social campaigns & SEO tools.

Make informed decisions with detailed reports & analytics.

Turn prospects into clients with live chats, email marketing, and forms.

Looking for inspiration?

Explore HTML sites created by Wix users and get inspired to start your website creation journey.

Studio van Duelman

Daniel Aristizábal

Sharon Radisch

Steven Popovich

The Robin Collective

Mariela Mezquita

Generation She

Learn more about designing with an HTML website builder

How to Build a Website from Scratch Guide

How to Design a Website

27 Common Types of Websites

Static vs. Dynamic Websites

We're here for you

Get answers.

Watch tutorials and read detailed articles in the Wix Help Center.

Get support by chat or schedule a call with a Customer Care Expert

Get help at any stage—from site creation to online growth.

HTML website builder FAQ

What is an html website builder.

An HTML website creator simplifies the website creation process, allowing you to design and customize your site without extensive coding skills. Wix's HTML website builder streamlines this process for you.

Is Wix's HTML website builder free?

Yes, Wix offers a free HTML website builder. Explore the pricing details for additional plans tailored to your needs here .

What kind of site can I build with an HTML website builder?

Whether you’re looking to build a one-page website , a blog, an online store, a scheduling site or any other kind of page, the Wix HTML website builder gives you the freedom to build a site that fits your needs.

Can I create a website without knowing how to code?

Absolutely. Wix is an HTML website builder that makes it possible to create a high-quality website without knowing how to code. In the Wix Editor, you can drag and drop any feature you want and customize it to match the look and feel of your site. Of course, if you do know how to code, you can add advanced functionality to your site with Velo.

Why use an HTML website builder?

Wix's HTML website builder combines user-friendly tools with the flexibility of HTML, making it an ideal solution for creating a dynamic online presence without extensive coding.

How long does it take to build an HTML website?

With Wix's HTML website builder, you can have a professional website up and running in just a few hours. You can also try our AI website creator to have a business-ready site built for you in minutes.

Maximum flexibility. Minimum hassle.

Wix.com > HTML Website Builder

How and Where to Integrate ChatGPT on Your Website: A Step-by-Step Guide

Published: May 09, 2024

Navigating the landscape of AI-powered tools can be daunting, but one name stands out for its potential and usability – ChatGPT by OpenAI. ChatGPT promises to revolutionize the way you engage with visitors on your website, providing around-the-clock support and personalized responses. In other words, figuring out how to add a ChatGPT integration to your website is a must. 

In this guide, I'll share the step-by-step process of adding a ChatGPT integration to your website. Whether you're a seasoned developer or just beginning to explore the world of artificial intelligence (AI) , I'm here to provide detailed explanations and tips that'll help you get started on the right track. 

Are you ready to elevate your website's interactivity and user experience to the next level? Let's dive in.

How to Use ChatGPT at Work

Discover the key to unlocking unparalleled productivity with this ultimate guide to revolutionizing your workflow.

• 100 ChatGPT Prompts
• Real-World Examples
• Productivity Hacks

You're all set!

Click this link to access this resource at any time.

Understanding ChatGPT and ChatBots

You've probably heard of AI chatbots, but ChatGPT takes it a step further than that. ChatGPT, created by OpenAI, is built on the Generative Pretrained Transformer (GPT) model. That's a fancy way of saying it’s really good at understanding and responding to human language. The best part is that ChatGPT is continually improving. 

ChatGPT uses the power of AI to process and respond to prompts or queries with an understanding of context and language subtleties. It's similar to having a conversation with a person, except it’s available 24/7 and never needs a coffee break. 

Why integrate ChatGPT on your website? 

You can probably guess this, but I highly recommend integrating ChatGPT into your website. Here's why. 

24/7 Customer Support 

Your customers' questions don't sleep, and with ChatGPT-powered chatbots, neither does your support. Round-the-clock assistance? Check. 

Instant Responses 

Long wait times? Not on ChatGPT's watch. Your visitors get answers instantly, leading to happy customers and high-five worthy customer satisfaction scores. 

Scalability 

Whether it's one customer or a hundred, ChatGPT handles interactions with the same ease. Say goodbye to the frantic scaling of your customer support team.

Personalization

Thanks to its ability to recall past prompts, ChatGPT can deliver personalized experiences based on previous interactions with that user. It’s like your website gets to know your customers personally without the awkward small talk.

Cost Efficiency

By handling a hefty chunk of customer interactions, ChatGPT could help you save a pretty penny on operational costs.

So, let's recap. A ChatGPT integration can save you money, increase personalization efforts, and ensure that your users have a seamless experience on your site. In my opinion, it's a no-brainer: Adding a ChatGPT integration is a must. 

Introducing ChatSpot by HubSpot

While we're on the topic of AI-powered chatbots, I want to mention HubSpot's very own free chatbot builder . We've also introduced our own chat-based AI , affectionately known as ChatSpot.

This tool is your AI-powered sales and marketing assistant designed to help your businesses grow. ChatSpot combines the power of ChatGPT with dozens of unique data sources, most notably the HubSpot CRM. ChatSpot is tailor-made for growing businesses like yours and completely free to use for everyone, even if you aren't yet using the HubSpot CRM.

Try out HubSpot's AI Today

Additionally, the free chatbot builder can be used to create AI-powered bots that interact with visitors, providing 24/7 support and engagement. I recommend taking advantage of this option if you're already using HubSpot's suite of marketing, sales, and service software.

Whether you choose to go with ChatGPT, ChatSpot, or a combination of the two, it's clear that AI chatbots are transforming how businesses engage with their audience online. It's a crucial moment; get on board, or you'll get left behind. The good news is that, with the right implementation, you'll find that AI-powered tools can help you significantly enhance user experience, lead generation, and customer satisfaction.

So, are you ready to bring the power of the chatbot tool to your website? I will walk you through the nuts and bolts of preparing for ChatGPT integration and acquiring the necessary API keys from OpenAI. (Don't – it's not as intimidating as it seems!) 

Preparing for ChatGPT Integration

Before we dive into the process of integrating ChatGPT, there are a few technical essentials you need to take care of. In essence, the goal is to ensure that your website has the necessary structure and requirements in place.

Step 1: Obtain API Keys from OpenAI

The first step to getting ChatGPT up and running on your website is to obtain API keys from OpenAI. These keys serve as the bridge between your site and the ChatGPT service, enabling communication and data exchange, which is why they're necessary. 

To get your keys, here's what you'll need to do. 

1. Create an account on the Open AI website. 

2. Once your account is all set up, navigate to the 'API Key' section.

3. Follow the prompts to make a new API key.

4. Securely store your API key. You're going to need it for the ChatGPT integration process. 

So far, so good? Let's move to step two. 

Step 2: Technical Requirements and Considerations

Integrating an AI chatbot like ChatGPT requires a certain level of technical proficiency and understanding of your website's backend.

Here’s what you need to have in place:

• Server-Side Integration : You'll need server-side integration to connect with the ChatGPT API. This typically requires an understanding of a server-side language such as Node.js , Python, Ruby, etc.
• Secure Transmission : To ensure secure data transmission between your website and ChatGPT, you'll need to use HTTPS. This adds a layer of encryption, making it harder for unauthorized entities to access the data.
• Frontend Development : You'll also need to create a user-friendly frontend interface for your chatbot. This means some knowledge of frontend development ( HTML , CSS , JavaScript ) is required to create an engaging chat interface.
• User Privacy : It's crucial that you respect user privacy when deploying chatbots. To gain trust, make sure that you inform users that they're interacting with a bot, and give them access to information regarding data usage policies. 

Got your API keys and understand the necessary technical requirements? It's time to move onto the actual ChatGPT integration process. In the next section, I'll show you where to place ChatGPT on your website for the maximum impact. 

Where to Integrate ChatGPT on Your Website

It's time to talk strategy. Where you place ChatGPT on your website can significantly influence your user experience and interaction rates. Your chatbot placement should be strategic and intuitive to encourage meaningful user engagement.

Here are some prime spots I suggest you consider for your chatbot placement. 

1. Homepage : It's usually the first page users land on, making it an excellent spot for your ChatGPT. It can greet users, offer help, and guide them through your site.

2. Product Pages : ChatGPT can be a virtual sales assistant, answering product-related queries, providing recommendations, and even assisting with purchases.

3. Support Pages : This is an ideal place for ChatGPT to shine as a 24/7 customer service rep. It can answer FAQs, offer troubleshooting tips, and direct users to additional resources.

4. Contact Page : A chatbot on this page can provide immediate assistance, giving users a faster alternative to emailing or calling customer service.

5. Checkout Page : ChatGPT can help reduce cart abandonment by promptly addressing concerns or confusion during the checkout process.

Remember, the goal is to make interactions with ChatGPT as seamless and beneficial as possible for your users. Strategic placement combined with customization can create a powerful tool that enhances your website's user experience .

In the next section, we'll get down to the nitty-gritty — the step-by-step process of integrating ChatGPT onto your website.

How to Integrate ChatGPT on Your Website

We've talked about what ChatGPT is, why it’s valuable, how to prepare for its integration, and where to place it on your site. Now, I'll show you how to get down to business and actually integrate this AI powerhouse into your website.

Since all websites are a little different and there are a lot of factors that go into integrating ChatGPT into your website, I will provide a high-level overview of the steps below. 

Step 1: Setup OpenAI's ChatGPT API

With your OpenAI API key in hand, you're ready to set up the ChatGPT API. Here's one way to do it using a Node.js server. 

In this example, I'm performing a language translation using the Davinci Codex engine. The first line imports the Axios library and the second line calls your API key.

Lines 3-16 make a POST request to a specified endpoint in the OpenAI API (or the URL: https://api.openai.com/v1/engines/davinci-codex/completions ). This request includes a "prompt" for translation and a parameter (max_tokens) to limit the amount of text that the chatbot will generate. 

The remaining code tells the system what to do if the request is successful and how to handle errors if not. In this case, if it's successful lines 17-19 will receive the translated text and log it to the console. If there's an error, lines 20-22 block the request from being executed and log the error to the console. 

Step 2: Connect to the API

The next step is to connect to the API. This requires setting up a server-side route that makes the call to the ChatGPT API and returns the response. 

Fortunately, the code provided above is a good starting point. Start by replacing " your-api-key-here " with your actual OpenAI API key. From here, you can create a server-side function that makes requests to the API from your site. 

Step 3: Add ChatGPT to Your Website's Backend

To add ChatGPT to your website's backend, you’ll need to set up a server-side function that makes requests to the API. This function will be responsible for sending user input to ChatGPT and receiving responses.

Full disclosure: there are a lot of ways you can approach this step and I could probably write a full post on this part of the setup on its own. To that end, we're going to skip ahead a bit and show you what the code will look like once you've chosen a port for your server and have defined a route that makes a call to the OpenAI API. 

Step 4: Create a Frontend for the Chatbot

With the backend setup, you'll need to create a frontend for your chatbot. This includes designing the chat interface and scripting the interactivity. Here, you can will use a combination of HTML, CSS, and JavaScript.

The CodePen below provides a basic code for you to use. Note that the chatbot in the "results" tab will not respond properly since it is not connected to OpenAI API.

See the Pen ChatBot ChatGPT Integration by HubSpot ( @hubspot ) on CodePen .

Step 5: Test the Integration

Finally, after you've set up the backend and frontend, it’s important to test the integration thoroughly. This ensures that the chatbot responds correctly to user inputs and that the interface works as intended.

Remember, integrating ChatGPT into your website is a process that might require some fine-tuning and patience. But, in my opinion, the result is worthwhile — a robust, AI-driven tool that can enhance user engagement and satisfaction on your website. So keep going, and in the next section, I'll share suggestions on how to customize your ChatGPT for the best user experience.

Customizing ChatGPT for Optimal User Experience

Congratulations! You've integrated ChatGPT on your website. However, your journey doesn’t stop here. To leverage ChatGPT's full potential, you need to customize it to match your brand's tone and cater to your audience’s needs. Here's how you can optimize your ChatGPT for a better user experience.

1. Train ChatGPT with Your Business-Specific Data

One of the key strengths of ChatGPT is its ability to learn and adapt. By training it with your business-specific data , you can improve its understanding of your products, services, and customer queries. This ensures that it can provide accurate and helpful responses to your users.

2. Customize the Language and Tone

The language and tone of your ChatGPT should reflect your brand's personality. If your brand is more formal, ensure your ChatGPT reflects that in its responses. If your brand is more laid-back and casual, your ChatGPT should be too. Remember, consistency is key in branding. 

3. Personalize User Interactions

ChatGPT can deliver personalized experiences based on user's previous interactions, preferences, and behaviors. Leverage this to offer personalized product recommendations, provide helpful information, and create a more engaging user experience.

4. Regularly Update and Improve

As with any AI tool, it's essential to keep ChatGPT updated and continually improve its performance based on user interactions and feedback. This ensures that it remains an effective and valuable tool for your users.

By customizing and continually improving your ChatGPT, you can ensure that it not only fits seamlessly into your brand but also offers a truly engaging and helpful tool for your users. In our final section, we'll cover key tips and best practices to help you get the most out of your ChatGPT integration.

Examples of a ChatGPT Integration

Wish you could see what a ChatGPT integration looks like in practice? I've rounded up a couple of examples for you to check out how powerful it can be.

Quizlet leverages the power of a ChatGPT integration to offer users an AI-powered tutor to make studying more streamlined. The tool takes studying to another level as you're able to select a prompt for the tutor to quiz you on, or use it in a conversational setting to practice your language learning skills. The possibilities are truly endless.

What I like: ChatGPT allows Quizlet learning to become more personalized. You can tailor it to how you learn, which makes studying more efficient. 

Shop by Shopify 

Another example of a well-known brand using ChatGPT integration is Shop, which is owned by ecommerce giant Shopify. When you open your Shop app, you're able to get assistance from AI within the app to help you find what you are seeking.

This is a great addition as it allows users to seamlessly find what they're looking for. It also offers up suggestions they may not have thought of otherwise.

What I Like: Shop offers AI-fueled assistance in an unobtrusive manner.

Use ChatGPT Integration to Take Your Site to the Next Level 

You're now armed with the knowledge to integrate and optimize OpenAI’s ChatGPT on your website. From understanding the what and why of ChatGPT, to gearing up for its integration, choosing the right spots on your site, following a detailed integration guide, and finally, learning how to customize and optimize it — we've covered some serious ground.

Remember, the ultimate goal of integrating ChatGPT is to enhance user experience, offer around-the-clock customer support, and provide your users with personalized and engaging interaction. But the most beautiful part about AI is that it's a journey of continuous learning and improvement. Keep analyzing your users’ interactions with ChatGPT, seek feedback, and regularly optimize to ensure it remains a valuable asset to your website.

Editor's note: This post was originally published in July 2023 and has been updated for comprehensiveness.

Don't forget to share this post!

Related articles.

AI Website Mockups: How to Use Image Generative AI to Inspire Website Layouts

How to Get Started with AI as a UX Designer

4 CMS Platforms That Have AI Baked In

Craft Your Own Python AI ChatBot: A Comprehensive Guide to Harnessing NLP

AI vs Humans: When to Use Which

I Built a Landing Page With AI: Here's How

How to Build an End-to-End AI Strategy for Your Website

What is OpenAI’s API? [+ How to Start Using It]

Top 7 AI CMS Integrations

Why AI Won't Replace Web Designers [+Examples of Why]

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

Advertisement

Where Protesters on U.S. Campuses Have Been Arrested or Detained

By The New York Times

Police officers and university administrators have clashed with pro-Palestinian protesters on dozens of college campuses in recent weeks, arresting students, removing encampments and threatening academic consequences. More than 2,800 people have been arrested or detained on campuses across the country.

Campus protests where arrests and detainments have taken place since April 18

The fresh wave of student activism against the war in Gaza was sparked by the arrests of at least 108 protesters at Columbia University on April 18, after administrators appeared before Congress and promised a crackdown. Since then, tensions between protesters, universities and the police have risen, prompting law enforcement to take action in some of America’s largest cities.

An earlier version of this article misstated the number of arrests at Princeton University. There have been 15 arrests, not 14.

• Share full article

Our Coverage of the U.S. Campus Protests

News and Analysis

Duke: Dozens of students walked out  of Duke University’s commencement ceremony as Jerry Seinfeld, who has been vocal about his support for Israel, received an honorary degree.

U.C. Berkeley:  Befitting a campus synonymous with student protest, the graduation ceremony at the University of California, Berkeley, blurred the lines between pomp and pro-Palestinian activism .

U.S.C.: Asna Tabassum, the valedictorian at the University of Southern California whose speech was canceled by school administrators, received her degree to cheers and loud applause  from students and parents.

Turning to Al Jazeera :  Students active in campus protests value the Arab news network’s on-the-ground coverage  and its perspective on the Israel-Hamas war. They draw distinctions between it and major American outlets.

Black Colleges :  The White House appears anxious about President Biden’s speech at Morehouse College, a historically Black institution. But for complex reasons, such campuses have had far less visible Gaza tensions .

A Different Approach :  University leaders in Britain have so far adopted a more permissive attitude to pro-Palestinian encampments than their U.S. counterparts. Here’s why .

• Español – América Latina
• Português – Brasil
• Tiếng Việt

Build Your First Android App in Java

1. welcome.

In this codelab, you'll learn how to build and run your first Android app in the Java programming language. (If you're looking for the Kotlin version of this codelab , you can go here .)

What you must know already

This codelab is written for programmers and assumes that you know either the Java or Kotlin programming language. If you are an experienced programmer and adept at reading code, you will likely be able to follow this codelab, even if you don't have much experience with Java.

What you'll learn

• How to use Android Studio to build your app.
• How to run your app on a device or in the emulator.
• How to add interactive buttons.
• How to display a second screen when a button is pressed.

Use Android Studio and Java to write Android apps

You write Android apps in the Java programming language using an IDE called Android Studio. Based on JetBrains' IntelliJ IDEA software, Android Studio is an IDE designed specifically for Android development.

To work through this codelab, you will need a computer that can run Android Studio 3.6 or higher (or already has Android Studio 3.6 or higher installed).

2. Install Android Studio

You can download Android Studio 3.6 from the Android Studio page.

Android Studio provides a complete IDE, including an advanced code editor and app templates. It also contains tools for development, debugging, testing, and performance that make it faster and easier to develop apps. You can use Android Studio to test your apps with a large range of preconfigured emulators, or on your own mobile device. You can also build production apps and publish apps on the Google Play store.

Android Studio is available for computers running Windows or Linux, and for Macs running macOS. The OpenJDK (Java Development Kit) is bundled with Android Studio.

The installation is similar for all platforms. Any differences are noted below.

• Navigate to the Android Studio download page and follow the instructions to download and install Android Studio .
• Accept the default configurations for all steps, and ensure that all components are selected for installation.
• After the install is complete, the setup wizard downloads and installs additional components, including the Android SDK. Be patient, because this process might take some time, depending on your internet speed.
• When the installation completes, Android Studio starts, and you are ready to create your first project.

3. Task: Create your first project

In this step, you will create a new Android project for your first app. This simple app displays the string "Hello World" on the screen of an Android virtual or physical device.

Here's what the finished app will look like:

• How to create a project in Android Studio.
• How to create an emulated Android device.
• How to run your app on the emulator.
• How to run your app on your own physical device, if you have one.

Step 1: Create a new project

• Open Android Studio.

• Give your application a name such as My First App .

• Leave the defaults for the other fields.
• Click Finish .

After these steps, Android Studio:

• Creates a folder for your Android Studio project called MyFirstApp . This is usually in a folder called AndroidStudioProjects below your home directory.
• Builds your project (this may take a few moments). Android Studio uses Gradle as its build system. You can follow the build progress at the bottom of the Android Studio window.
• Opens the code editor showing your project.

Step 2: Get your screen set up

When your project first opens in Android Studio, there may be a lot of windows and panes open. To make it easier to get to know Android Studio, here are some suggestions on how to customize the layout.

• Depending on the size of your screen, consider resizing the pane on the left showing the project folders to take up less space.

At this point, your screen should look a bit less cluttered, similar to the screenshot shown below.

Step 3: Explore the project structure and layout

Based on you selecting the Basic Activity template for your project, Android Studio has set up a number of files for you. You can look at the hierarchy of the files for your app in multiple ways, one is in Project view. Project view shows your files and folders structured in a way that is convenient for working with an Android project. (This does not always match the file hierarchy! To see the file hierarchy, choose the Project files view by clicking (3) .)

• Double-click the app (1) folder to expand the hierarchy of app files. (See ( 1) in the screenshot.)
• If you click Project (2) , you can hide or show the Project view. You might need to select View > Tool Windows to see this option.
• The current Project view selection (3) is Project > Android .

In the Project > Android view you see three or four top-level folders below your app folder: manifests , java , java (generated) and res . You may not see java (generated) right away.

• Expand the manifests folder.

This folder contains AndroidManifest.xml . This file describes all the components of your Android app and is read by the Android runtime system when your app is executed. 2. Expand the java folder. All your Java language files are organized here. The java folder contains three subfolders:

com.example.myfirstapp: This folder contains the Java source code files for your app.

com.example.myfirstapp (androidTest): This folder is where you would put your instrumented tests, which are tests that run on an Android device. It starts out with a skeleton test file.

com.example.myfirstapp (test): This folder is where you would put your unit tests. Unit tests don't need an Android device to run. It starts out with a skeleton unit test file. 3. Expand the res folder. This folder contains all the resources for your app, including images, layout files, strings, icons, and styling. It includes these subfolders:

drawable : All your app's images will be stored in this folder.

layout : This folder contains the UI layout files for your activities. Currently, your app has one activity that has a layout file called activity_main.xml . It also contains content_main.xml , fragment_first.xml , and fragment_second.xml .

menu: This folder contains XML files describing any menus in your app.

mipmap : This folder contains the launcher icons for your app.

navigation: This folder contains the navigation graph, which tells Android Studio how to navigate between different parts of your application.

values : This folder contains resources, such as strings and colors, used in your app.

Step 4: Create a virtual device (emulator)

In this task, you will use the Android Virtual Device (AVD) manager to create a virtual device (or emulator) that simulates the configuration for a particular type of Android device.

The first step is to create a configuration that describes the virtual device.

• Click +Create Virtual Device . (If you have created a virtual device before, the window shows all of your existing devices and the +Create Virtual Device button is at the bottom.) The Select Hardware window shows a list of pre-configured hardware device definitions.
• Choose a device definition, such as Pixel 2 , and click Next . (For this codelab, it really doesn't matter which device definition you pick).
• In the System Image dialog, from the Recommended tab, choose the latest release. (This does matter.)
• If a Download link is visible next to a latest release, it is not installed yet, and you need to download it first. If necessary, click the link to start the download, and click Next when it's done. This may take a while depending on your connection speed.
• In the next dialog box, accept the defaults, and click Finish .

The AVD Manager now shows the virtual device you added.

• If the Your Virtual Devices AVD Manager window is still open, go ahead and close it.

Step 5: Run your app on your new emulator

• In Run > Select Device , under Available devices , select the virtual device that you just configured. This menu also appears in the toolbar.

The emulator starts and boots just like a physical device. Depending on the speed of your computer, this may take a while. You can look in the small horizontal status bar at the very bottom of Android Studio for messages to see the progress.

Once your app builds and the emulator is ready, Android Studio uploads the app to the emulator and runs it. You should see your app as shown in the following screenshot.

Step 6: Run your app on a device (if you have one)

What you need:

• An Android device such as a phone or tablet.
• A data cable to connect your Android device to your computer via the USB port.
• If you are using a Linux or Windows OS, you may need to perform additional steps to run your app on a hardware device. Check the Run Apps on a Hardware Device documentation. On Windows, you may need to install the appropriate USB driver for your device. See OEM USB Drivers .

Run your app on a device

To let Android Studio communicate with your device, you must turn on USB Debugging on your Android device.

On Android 4.2 and higher, the Developer options screen is hidden by default. To show Developer options and enable USB Debugging:

• On your device, open Settings > About phone and tap Build number seven times.
• Return to the previous screen ( Settings ). Developer options appears at the bottom of the list. Tap Developer options .
• Enable USB Debugging .

Now you can connect your device and run the app from Android Studio.

• Connect your device to your development machine with a USB cable. On the device, you might need to agree to allow USB debugging from your development device.
• Select your device, and click OK . Android Studio installs the app on your device and runs it.

Troubleshooting

If you're stuck, quit Android Studio and restart it.

If Android Studio does not recognize your device, try the following:

• Disconnect your device from your development machine and reconnect it.
• Restart Android Studio.

If your computer still does not find the device or declares it "unauthorized":

• Disconnect the device.
• On the device, open Settings->Developer Options .
• Tap Revoke USB Debugging authorizations .
• Reconnect the device to your computer.
• When prompted, grant authorizations.

If you are still having trouble, check that you installed the appropriate USB driver for your device. See the Using Hardware Devices documentation .

Check the troubleshooting section in the Android Studio documentation .

Step 7: Explore the app template

When you created the project and selected Basic Activity , Android Studio set up a number of files, folders, and also user interface elements for you, so you can start out with a working app and major components in place. This makes it easier to build your application.

Later in this codelab, you'll look at the Next button and modify the way it looks and what it does.

4. Task: Explore the layout editor

Generally, each screen in your Android app is associated with one or more fragments . The single screen displaying "Hello first fragment" is created by one fragment, called FirstFragment . This was generated for you when you created your new project. Each visible fragment in an Android app has a layout that defines the user interface for the fragment. Android Studio has a layout editor where you can create and define layouts.

Layouts are defined in XML . The layout editor lets you define and modify your layout either by coding XML or by using the interactive visual editor.

Every element in a layout is a view. In this task, you will explore some of the panels in the layout editor, and you will learn how to change property of views.

• How to use the layout editor.
• How to set property values.
• How to add string resources.
• How to add color resources.

Step 1: Open the layout editor

• Double-click fragment_first.xml .

On the left is a Palette (1) of views you can add to your app.

Below that is a Component Tree (2) showing the views currently in this file, and how they are arranged in relation to each other.

In the center is the Design editor (3) , which shows a visual representation of what the contents of the file will look like when compiled into an Android app. You can view the visual representation, the XML code, or both.

• Try selecting the different modes. Depending on your screen size and work style, you may prefer switching between Code and Design , or staying in Split view. If your Component Tree disappears, hide and show the Palette .

• At the lower right of the Design editor you see + and - buttons for zooming in and out. Use these buttons to adjust the size of what you see, or click the zoom-to-fit button so that both panels fit on your screen.

The Design layout on the left shows how your app appears on the device. The Blueprint layout , shown on the right, is a schematic view of the layout.

Depending on the size of your screen and your preference, you may wish to only show the Design view or the Blueprint view, instead of both.

• Use the device menu to view the layout on different devices. (This is extremely useful for testing!)

On the right is the Attributes panel. You'll learn about that later.

Step 2: Explore and resize the Component Tree

• In fragment_first.xml , look at the Component Tree . If it's not showing, switch the mode to Design instead of Split or Code .

The Component Tree closes. 4. Bring back the Component Tree by clicking the vertical label Component Tree on the left.

Step 3: Explore view hierarchies

• In the Component Tree , notice that the root of the view hierarchy is a ConstraintLayout view.

Every layout must have a root view that contains all the other views. The root view is always a view group , which is a view that contains other views. A ConstraintLayout is one example of a view group. 2. Notice that the ConstraintLayout contains a TextView , called textview_first and a Button , called button_first .

• If the code isn't showing, switch to Code or Split view using the icons in the upper right corner.
• In the XML code, notice that the root element is <androidx.constraintlayout.widget.ConstraintLayout> . The root element contains a <TextView> element and a <Button> element.

Step 4: Change property values

• In the code editor, examine the properties in the TextView element.
• Click on the string in the text property, and you'll notice it refers to a string resource, hello_first_fragment .
• Right-click on the property and click Go To > Declaration or Usages

values/strings.xml opens with the string highlighted.

• Change the value of the string property to Hello World! .
• Switch back to fragment_first.xml .

• Run the app to see the change you made in strings.xml . Your app now shows "Hello World!".

Step 5: Change text display properties

• With textview_first still selected in the Component Tree , in the layout editor, in the list of attributes, under Common Attributes , expand the textAppearance field. (You may need to scroll down to find it.)

• Change some of the text appearance properties. For example, change the font family, increase the text size, and select bold style. (You might need to scroll the panel to see all the fields.)
• Change the text color. Click in the textColor field, and enter g .

A menu pops up with possible completion values containing the letter g. This list includes predefined colors.

• Select @android:color/darker_gray and press Enter .

Below is an example of the textAppearance attributes after making some changes.

• Look at the XML for the TextView . You see that the new properties have been added.
• Run your app again and see the changes applied to your Hello World! string

Step 6: Display all attributes

• In the Attributes panel, scroll down until you find All Attributes .

• Scroll through the list to get an idea of the attributes you could set for a TextView .

5. Task: Add color resources

So far you have learned how to change property values. Next, you will learn how to create more resources like the string resources you worked with earlier. Using resources enables you to use the same values in multiple places, or to define values and have the UI update automatically whenever the value is changed.

• How resources are defined.
• Adding and using color resources.
• The results of changing layout height and width.

Step 1: Add color resources

First, you'll learn how to add new color resources.

• In the Project panel on the left, double-click on res > values > colors.xml to open the color resource file.

The colors.xml file opens in the editor. So far, three colors have been defined. These are the colors you can see in your app layout, for example, purple for the app bar.

• Go back to fragment_first.xml so you can see the XML code for the layout.
• Add a new property to the TextView called android:background , and start typing to set its value to @color . You can add this property anywhere inside the TextView code.

A menu pops up offering the predefined color resources:

• Choose @color/colorPrimaryDark.
• Change the property android:textColor and give it a value of @android:color/white .

The Android framework defines a range of colors, including white, so you don't have to define white yourself. 6. In the layout editor, you can see that the TextView now has a dark blue background, and the text is displayed in white.

Step 2: Add a new color to use as the screen background color

• Back in colors.xml , create a new color resource called screenBackground :

A Color can be defined as 3 hexadecimal numbers (#00-#FF, or 0-255) representing the red, blue, and green (RGB) components. The color you just added is yellow. Notice that the colors corresponding to the code are displayed in the left margin of the editor.

Note that a color can also be defined including an alpha value (#00-#FF) which represents the transparency (#00 = 0% = fully transparent, #FF = 100% = fully opaque). When included, the alpha value is the first of 4 hexadecimal numbers (ARGB).

The alpha value is a measure of transparency. For example, #88FFEE58 makes the color semi-transparent, and if you use #00FFEE58, it's fully transparent and disappears from the left-hand bar.

• Go back to fragment_first.xml .

• In the Attributes panel, select the background property and press Enter . Type "c" in the field that appears.
• In the menu of colors that appears, select @color/screenBackground . Press Enter to complete the selection.

• Click on the yellow patch to the left of the color value in the background field.

• Feel free to change the value of the screenBackground color, but make sure that the final color is noticeably different from the colorPrimary and colorPrimaryDark colors.

Step 3: Explore width and height properties

Now that you have a new screen background color, you will use it to explore the effects of changing the width and height properties of views.

• In fragment_first.xml , in the Component Tree , select the ConstraintLayout .

The layout_width and layout_height properties are both set to match_parent . The ConstraintLayout is the root view of this Fragment , so the "parent" layout size is effectively the size of your screen.

• Notice that the entire background of the screen uses the screenBackground color.

• Select textview_first . Currently the layout width and height are wrap_content , which tells the view to be just big enough to enclose its content (plus padding)
• Change both the layout width and layout height to match_constraint , which tells the view to be as big as whatever it's constrained to.

The width and height show 0dp , and the text moves to the upper left, while the TextView expands to match the ConstraintLayout except for the button. The button and the text view are at the same level in the view hierarchy inside the constraint layout, so they share space.

• Explore what happens if the width is match_constraint and the height is wrap_content and vice versa. You can also change the width and height of the button_first.
• Set both the width and height of the TextView and the Button back to wrap_content .

6. Task: Add views and constraints

In this task, you will add two more buttons to your user interface, and update the existing button, as shown below.

• How to add new views to your layout.
• How to constrain the position of a view to another view.

Step 1: View constraint properties

• In fragment_first.xml , look at the constraint properties for the TextView .

These properties define the position of the TextView . Read them carefully.

You can constrain the top, bottom, left, and right of a view to the top, bottom, left, and right of other views.

• Select textview_first in the Component Tree and look at the Constraint Widget in the Attributes panel.

Step 2: Add buttons and constrain their positions

To learn how to use constraints to connect the positions of views to each other, you will add buttons to the layout. Your first goal is to add a button and some constraints, and change the constraints on the Next button.

• Notice the Palette at the top left of the layout editor. Move the sides if you need to, so that you can see many of the items in the palette.

• Click on some of the categories, and scroll the listed items if needed to get an idea of what's available.
• Select Button , which is near the top, and drag and drop it onto the design view, placing it underneath the TextView near the other button.

Notice that a Button has been added to the Component Tree under ConstraintLayout .

Step 3: Add a constraint to the new button

You will now constrain the top of the button to the bottom of the TextView .

• Move the cursor over the circle at the top of the Button .

• Click and drag the circle at the top of the Button onto the circle at the bottom of the TextView .

The Button moves up to sit just below the TextView because the top of the button is now constrained to the bottom of the TextView .

• Take a look at the Constraint Widget in the Layout pane of the Attributes panel. It shows some constraints for the Button , including Top -> BottomOf textView .
• Take a look at the XML code for the button. It now includes the attribute that constrains the top of the button to the bottom of the TextView .
• You may see a warning, " Not Horizontally Constrained ". To fix this, add a constraint from the left side of the button to the left side of the screen.
• Also add a constraint to constrain the bottom of the button to the bottom of the screen.

Before adding another button, relabel this button so things are a little clearer about which button is which.

• Click on the button you just added in the design layout.
• Look at the Attributes panel on the right, and notice the id field.
• Change the id from button to toast_button .

Step 4: Adjust the Next button

You will adjust the button labeled Next , which Android Studio created for you when you created the project. The constraint between it and the TextView looks a little different, a wavy line instead of a jagged one, with no arrow. This indicates a chain , where the constraints link two or more objects to each other, instead of just one to another. For now, you'll delete the chained constraints and replace them with regular constraints.

To delete a constraint:

• Or click on one of the constrained views, then right-click on the constraint and select Delete from the menu.
• Or in the Attributes panel, move the cursor over the circle for the constraint until it shows an x, then click it.

If you delete a constraint and want it back, either undo the action, or create a new constraint.

Step 5: Delete the chain constraints

• Click on the Next button, and then delete the constraint from the top of the button to the TextView .
• Click on the TextView , and then delete the constraint from the bottom of the text to the Next button.

Step 6: Add new constraints

• Constrain the right side of the Next button to the right of the screen if it isn't already.
• Delete the constraint on the left side of the Next button.
• Now constrain the top and bottom of the Next button so that the top of the button is constrained to the bottom of the TextView and the bottom is constrained to the bottom of the screen. The right side of the button is constrained to the right side of the screen.
• Also constrain the TextView to the bottom of the screen.

It may seem like the views are jumping around a lot, but that's normal as you add and remove constraints.

Your layout should now look something like this.

Step 7: Extract string resources

• In the fragment_first.xml layout file, find the text property for the toast_button button.
• Notice that the text "Button" is directly in the layout field, instead of referencing a string resource as the TextView does. This will make it harder to translate your app to other languages.
• To fix this, click the highlighted code. A light bulb appears on the left.

• In the dialog box that appears, change the resource name to toast_button_text and the resource value to Toast and click OK .

• Notice that the value of the android:text property has changed to @string/toast_button_text .
• Go to the res > values > strings.xml file. Notice that a new string resource has been added, named toast_button_text .
• Run the app to make sure it displays as you expect it to.

You now know how to create new string resources by extracting them from existing field values. (You can also add new resources to the strings.xml file manually.) And you know how to change the id of a view.

Step 8: Update the Next button

The Next button already has its text in a string resource, but you'll make some changes to the button to match its new role, which will be to generate and display a random number.

• As you did for the Toast button, change the id of the Next button from button_first to random_button in the Attributes panel.

• In strings.xml , right-click on the next string resource.
• Select Refactor > Rename... and change the name to random_button_text .
• Click Refactor to rename your string and close the dialog.
• Change the value of the string from Next to Random .
• If you want, move random_button_text to below toast_button_text .

Step 9: Add a third button

Your final layout will have three buttons, vertically constrained the same, and evenly spaced from each other.

• In fragment_first.xml , add another button to the layout, and drop it somewhere between the Toast button and the Random button, below the TextView .
• Add vertical constraints the same as the other two buttons. Constrain the top of the third button to the bottom of TextView ; constrain the bottom of the third button to the bottom of the screen.
• Add horizontal constraints from the third button to the other buttons. Constrain the left side of the third button to the right side of the Toast button; constrain the right side of the third button to the left side of the Random button.

Your layout should look something like this:

• Examine the XML code for fragment_first.xml . Do any of the buttons have the attribute app:layout_constraintVertical_bias ? It's OK if you do not see that constraint.

The "bias" constraints allows you to tweak the position of a view to be more on one side than the other when both sides are constrained in opposite directions . For example, if both the top and bottom sides of a view are constrained to the top and bottom of the screen, you can use a vertical bias to place the view more towards the top than the bottom.

Here is the XML code for the finished layout. Your layout might have different margins and perhaps some different vertical or horizontal bias constraints.The exact values of the attributes for the appearance of the TextView might be different for your app.

Step 10: Get your UI ready for the next task

The next task is to make the buttons do something when they are pressed. First, you need to get the UI ready.

• Change the text of the TextView to show 0 (the number zero).
• Change the id of the last button you added, button2 , to count_button in the Attributes panel in the design editor.
• In the XML, extract the string resource to count_button_text and set the value to Count.

The buttons should now have the following text and ids:

• Run the app.

Step 11: Fix errors if necessary

The errors occur because the buttons have changed their id and now these constraints are referencing non-existent views.

If you have these errors, fix them by updating the id of the buttons in the constraints that are underlined in red.

7. Task: Update the appearance of the buttons and the TextView

Your app's layout is now basically complete, but its appearance can be improved with a few small changes.

Step 1: Add new color resources

• In colors.xml , change the value of screenBackground to #2196F3 , which is a blue shade in the Material Design palette .
• Add a new color named buttonBackground . Use the value #BBDEFB , which is a lighter shade in the blue palette.

Step 2: Add a background color for the buttons

• In the layout, add a background color to each of the buttons. (You can either edit the XML in fragment_first.xml or use the Attributes panel, whichever you prefer.)

Step 3: Change the margins of the left and right buttons

• Give the Toast button a left (start) margin of 24dp and give the Random button a right (end) margin of 24dp. (Using start and end instead of left and right makes these margins work for all language directions.)

Step 4: Update the appearance of the TextView

• Remove the background color of the TextView , either by clearing the value in the Attributes panel or by removing the android:background attribute from the XML code.

When you remove the background, the view background becomes transparent. 2. Increase the text size of the TextView to 72sp.

• Change the font-family of the TextView to sans-serif (if it's not already).
• Add an app:layout_constraintVertical_bias property to the TextView , to bias the position of the view upwards a little so that it is more evenly spaced vertically in the screen. Feel free to adjust the value of this constraint as you like. (Check in the design view to see how the layout looks.)

• Make sure the layout_width is wrap_content , and the horizontal bias is 50 ( app:layout_constraintHorizontal_bias="0.5" in XML).

Step 5: Run your app

If you implemented all the updates, your app will look like the following figure. If you used different colors and fonts, then your app will look a bit different.

8. Task: Make your app interactive

You have added buttons to your app's main screen, but currently the buttons do nothing. In this task, you will make your buttons respond when the user presses them.

First you will make the Toast button show a pop-up message called a toast . Next you will make the Count button update the number that is displayed in the TextView .

• How to find a view by its ID.
• How to add click listeners for a view.
• How to set and get property values of a view from your code.

Step 1: Enable auto imports

To make your life easier, you can enable auto-imports so that Android Studio automatically imports any classes that are needed by the Java code.

• In Android Studio, open the settings editor by going to File > Other Settings > Preferences for New Projects .
• Select Auto Imports . In the Java section, make sure Add Unambiguous Imports on the fly is checked.

Step 2: Show a toast

In this step, you will attach a Java method to the Toast button to show a toast when the user presses the button. A toast is a short message that appears briefly at the bottom of the screen.

• Open FirstFragment.java ( app > java > com.example.android.myfirstapp > FirstFragment ).

This class has only two methods, onCreateView() and onViewCreated() . These methods execute when the fragment starts.

As mentioned earlier, the id for a view helps you identify that view distinctly from other views. Using the findViewByID() method, your code can find the random_button using its id, R.id.random_button . 2. Take a look at onViewCreated() . It sets up a click listener for the random_button , which was originally created as the Next button.

Here is what this code does:

• Use the findViewById() method with the id of the desired view as an argument, then set a click listener on that view.
• In the body of the click listener, use an action, which in this case is for navigating to another fragment, and navigate there. (You will learn about that later.)
• Just below that click listener, add code to set up a click listener for the toast_button , which creates and displays a toast. Here is the code:
• If you want, extract the message string into a resource as you did for the button labels.

You have learned that to make a view interactive you need to set up a click listener for the view which says what to do when the view (button) is clicked on. The click listener can either:

• Implement a small amount of code directly.
• Call a method that defines the desired click behavior in the activity.

Step 3: Make the Count button update the number on the screen

The method that shows the toast is very simple; it does not interact with any other views in the layout. In the next step, you add behavior to your layout to find and update other views.

Update the Count button so that when it is pressed, the number on the screen increases by 1.

• In the fragment_first.xml layout file, notice the id for the TextView :
• In FirstFragment.java , add a click listener for the count_button below the other click listeners in onViewCreated() . Because it has a little more work to do, have it call a new method, countMe() .
• In the FirstFragment class, add the method countMe() that takes a single View argument. This method will be invoked when the Count button is clicked and the click listener called.
• Get the value of the showCountTextView . You will define that in the next step.
• Convert the value to a number, and increment it.
• Display the new value in the TextView by programmatically setting the text property of the TextView .

Here is the whole method:

Step 4: Cache the TextView for repeated use

You could call findViewById() in countMe() to find showCountTextView . However, countMe() is called every time the button is clicked, and findViewById() is a relatively time consuming method to call. So it is better to find the view once and cache it.

• In the FirstFragment class before any methods, add a member variable for showCountTextView of type TextView .
• In onCreateView() , you will call findViewById() to get the TextView that shows the count. The findViewById() method must be called on a View where the search for the requested ID should start, so assign the layout view that is currently returned to a new variable, fragmentFirstLayout , instead.
• Call findViewById() on fragmentFirstLayout , and specify the id of the view to find, textview_first . Cache that value in showCountTextView .
• Return fragmentFirstLayout from onCreateView() .

Here is the whole method and the declaration of showCountTextView :

• Run your app. Press the Count button and watch the count update.

9. Task: Implement the second fragment

So far, you've focused on the first screen of your app. Next, you will update the Random button to display a random number between 0 and the current count on a second screen.

• How to pass information to a second fragment.

Update the layout for the second fragment

Step 1: Add a TextView for the random number

• Open fragment_second.xml ( app > res > layout > fragment_second.xml ) and switch to Design View if needed. Notice that it has a ConstraintLayout that contains a TextView and a Button .

• Add another TextView from the palette and drop it near the middle of the screen. This TextView will be used to display a random number between 0 and the current count from the first Fragment .
• Set the id to @+id/textview_random ( textview_random in the Attributes panel.)
• Constrain the top edge of the new TextView to the bottom of the first TextView , the left edge to the left of the screen, and the right edge to the right of the screen, and the bottom to the top of the Previous button.
• Set both width and height to wrap_content .
• Set the textColor to @android:color/white , set the textSize to 72sp , and the textStyle to bold .

• Set the text to " R ". This text is just a placeholder until the random number is generated.
• Set the layout_constraintVertical_bias to 0.45 .

This TextView is constrained on all edges, so it's better to use a vertical bias than margins to adjust the vertical position, to help the layout look good on different screen sizes and orientations. 10. If you get a warning "Not Horizontally Constrained," add a constraint from the start of the button to the left side of the screen and the end of the button to the right side of the screen.

Here is the XML code for the TextView that displays the random number:

Step 2: Update the TextView to display the header

• In fragment_second.xml , select textview_second , which currently has the text "Hello second fragment. Arg: %1$s" in the hello_second_fragment string resource.
• If android:text isn't set, set it to the hello_second_fragment string resource.
• Change the id to textview_header in the Attributes panel.
• Set the width to match_constraint , but set the height to wrap_content , so the height will change as needed to match the height of the content.
• Set top, left and right margins to 24dp . Left and right margins may also be referred to as "start" and "end" to support localization for right to left languages.
• Remove any bottom constraint.
• Set the text color to @color/colorPrimaryDark and the text size to 24sp .
• In strings.xml , change hello_second_fragment to " Here is a random number between 0 and %d. "
• Use Refactor > Rename... to change the name of hello_second_fragment to random_heading .

Here is the XML code for the TextView that displays the heading:

Step 3: Change the background color of the layout

Give your new activity a different background color than the first activity:

• In colors.xml , add a new color resource:
• In the layout for the second activity, fragment_second.xml , set the background of the ConstraintLayout to the new color.

In the Attributes panel:

Your app now has a completed layout for the second fragment. But if you run your app and press the Random button, it may crash. The click handler that Android Studio set up for that button needs some changes. In the next task, you will explore and fix this error.

Step 4: Examine the navigation graph

When you created your project, you chose Basic Activity as the template for the new project. When Android Studio uses the Basic Activity template for a new project, it sets up two fragments, and a navigation graph to connect the two. It also set up a button to send a string argument from the first fragment to the second. This is the button you changed into the Random button. And now you want to send a number instead of a string.

• Open nav_graph.xml ( app > res > navigation > nav_graph.xml ).

A screen similar to the Layout Editor in Design view appears. It shows the two fragments with some arrows between them. You can zoom with + and - buttons in the lower right, as you did with the Layout Editor .

• You can freely move the elements in the navigation editor. For example, if the fragments appear with SecondFragment to the left, drag FirstFragment to the left of SecondFragment so they appear in the order you work with them.

Step 5: Enable SafeArgs

This will enable SafeArgs in Android Studio.

• Open Gradle Scripts > build.gradle (Project: My First App)
• Find the dependencies section In the buildscript section, and add the following lines after the other classpath entries:
• Open Gradle Scripts > build.gradle (Module: app)
• Just below the other lines that begin with apply plugin add a line to enable SafeArgs:

• Choose Build > Make Project . This should rebuild everything so that Android Studio can find FirstFragmentDirections .

Step 6: Create the argument for the navigation action

• In the navigation graph, click on FirstFragment , and look at the Attributes panel to the right. (If the panel isn't showing, click on the vertical Attributes label to the right.)
• In the Actions section, it shows what action will happen for navigation, namely going to SecondFragment .
• Click on SecondFragment , and look at the Attributes panel.

The Arguments section shows Nothing to show .

• Click on the + in the Arguments section.

Step 7: Send the count to the second fragment

The Next / Random button was set up by Android Studio to go from the first fragment to the second, but it doesn't send any information. In this step you'll change it to send a number for the current count. You will get the current count from the text view that displays it, and pass that to the second fragment.

• Open FirstFragment.java ( app > java > com.example.myfirstapp > FirstFragment )
• Find the method onViewCreated() and notice the code that sets up the click listener to go from the first fragment to the second.
• Replace the code in that click listener with a line to find the count text view, textview_first .
• Create an action with currentCount as the argument to actionFirstFragmentToSecondFragment() .
• Add a line to find the nav controller and navigate with the action you created.

Here is the whole method, including the code you added earlier:

• Run your app. Click the Count button a few times. Now when you press the Random button, the second screen shows the correct string in the header, but still no count or random number, because you need to write some code to do that.

Step 8: Update SecondFragment to compute and display a random number

You have written the code to send the current count to the second fragment. The next step is to add code to SecondFragment.java to retrieve and use the current count.

• In SecondFragment.java , add an import for navArgs to the list of imported libraries.
• In the onViewCreated() method below the line that starts with super , add code to get the current count, get the string and format it with the count, and then set it for textview_header.
• Get a random number between 0 and the count.
• Add code to convert that number into a string and set it as the text for textview_random .

Congratulations, you have built your first Android app!

10. Learn more

The intention of this codelab was to get you started building Android apps. We hope you want to know a lot more though, like how do I save data? How do I run background tasks? How do I display a list of photos? How do I ...

We encourage you to keep learning. We have more Android courses built by Google to help you on your learning journey.

Written tutorials

• Android Developer Fundamentals teaches programmers to build Android apps. This course is also available in some schools.
• Kotlin Bootcamp codelabs course is an introduction to Kotlin for programmers. You need experience with an object oriented programming language (Java, C++, Python) to take this course..
• Find more at developer.android.com , the official Android developer documentation from Google.

These interactive, video-based courses were created by Google experts in collaboration with Udacity. Take these courses at your own pace in your own time.

• Developing Android Apps in Kotlin : If you know how to program, learn how to build Android apps. This course uses Kotlin .
• Kotlin Bootcamp for Programmers : This is an introduction to Kotlin for programmers. You need some experience with an object oriented programming language (Java, C++, Python) to take this course.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Social Security: Protect yourself from QR code fraud | KYLLE' D. MCKINNEY

Quick Response codes, better known as QR codes, are a very popular way to get information. QR codes are scannable barcodes that will direct you to a website. However, scammers can create QR codes to trick people into visiting a fraudulent website or downloading malware that compromises their personal information.

For example, scammers may:

• Cover official QR codes with fake ones on parking meters, menus, or magazines.
• Send QR codes via email or text message pretending to be from delivery companies.
• Request that you confirm your information due to suspicious activity on your account using imposter QR codes.
• Place harmful codes on social media advertisements.

Here are some tips to avoid related scams.

Verify the Source : Before scanning a QR code, make sure it comes from a trusted and reliable source. Legitimate QR codes from Social Security will always send you to a safe and secure webpage at  www.ssa.gov .

Inspect the Code : Scammers may use tactics that mirror a legitimate QR code. Take a moment to examine the QR code closely. Look for any signs of tampering, unusual colors, or misspellings. If something seems suspicious, it’s best to avoid scanning the QR code.

Be Cautious of Unsolicited QR Codes : Avoid scanning unsolicited QR codes received via email or text message. Be aware of codes from unknown sources. We will never send a QR code via text or email asking you to confirm your information.

Be Aware of Urgent Requests Using QR Codes : Fraudsters often pretend to be government officials and use fake QR codes to defraud people. For example, a scammer may pose as a Social Security employee claiming that you have an outstanding debt or there’s a problem with your account and demanding immediate payment. A scammer may send fake QR codes via text or email requesting the payment. Remember, Social Security will never request any form of payment using a QR code.

Stay Informed : Stay up to date on the latest QR code fraud and scams. Follow trusted sources such as cybersecurity blogs, news outlets, and official government websites for updates.

QR codes are an easy and convenient way to get information, but it’s important to remain vigilant when using them.

For more information, you can review the Federal Trade Commission Consumer Alert at  www.consumer.ftc.gov/consumer-alerts/2023/12/scammers-hide-harmful-links-qr-codes-steal-your-information .

You can report suspected Social Security imposter scams to the Office of the Inspector General’s website at  www.oig.ssa.gov/report . We encourage you to learn more about fraud and scams on our  Protect Yourself from Scams  webpage at  www.ssa.gov/scam .

Please share this with those who may need it.

Kylle D. McKinney is an Alabama Social Security Public Affairs Specialist

Create a Free Website

With w3schools spaces, code websites directly in the browser with w3schools spaces, no credit card required..

Coding Skills

Powerful Code Editor

Front-end, back-end or full-stack - the choice is yours, choose your plan.

By subscribing to a plan you support the W3Schools mission to make learning available to everyone - no matter their background.

$0 /Forever

This is for you that are beginning to explore coding and web development

• Build and host 1 static website
• 100 credits/month Access various AI features like W3Schools kAI coding tutor and interview preparation.

W3Schools Plus

$14.99 /Month

This is for you that want to learn and reach your goals faster. Build fullstack projects, ad free experience.

• Ad-free experience
• Build and host 15 static websites
• Build and host 1 full stack server
• Choose from 18 frameworks / languages
• Choose from 75+ templates
• 50000 credits/month Access various AI features like W3Schools kAI coding tutor and interview preparation.
• Priority Support
• Cancel anytime

W3Schools Classroom

Contact us for information

W3Schools right to use and Plus for educational institutions or enterprise customers

• Everything in W3Schools Plus
• Certification Exams
• And much more!

NEW SUBSCRIBER DEAL

Use promo code:, want custom domains.

You can also buy a domain or connect an existing one.

Looking to add multiple users?

Just landed in Spaces

Learn to code more effectively and intelligently with kAI - AI tutor

Hi! I'm kAI, W3Schools AI Tutor...

Feel free to ask me any coding-related questions, and I'll do my best to assist you.

I can help you checking your code for errors, improving your code's structure, explaining coding concepts in a clear and understandable way, and more...

I can even create complete websites for you based on your input, so what are you waiting for?

Practice Makes Perfect

Sharpen and master your development skills with these technologies using spaces ..

Save Time with Templates

Build powerful websites in just a few clicks.

Super Simple to Share

Host and publish websites in no time, included for free in all plans, w3schools subdomain, hosting, and ssl certificate., buy a domain or transfer an existing one and connect it to your space..

How it works

Coding Made Easy

All at your fingertips with our easy-to-use code editor.

Cloud-Based

Save time & money., no installation required. access everything in your browser. get started in seconds..

File Navigator

All your files in one place., find and switch easily between your code files without leaving the code editor..

Terminal and Log

Fix your code faster., monitor your code, debug and troubleshoot your work during the development process..

Get Full Data Visibility.

Find and preview all the data stored in your website. anytime, from anywhere..

Environment Manager

Increased control and security., control your website access points to establish secure connections..

Package Manager

Find what you need quicker., search and install frameworks and libraries in just one click..

User Analytics

Get traffic insights., learn from your website visitors to deliver a better user experience., get inspired, connect and share your website with the community to get instant feedback.

Frequently Asked Questions

With Basic Spaces, you can build frontend websites. Whereas with Fullstack Spaces, you can build frontend and backend websites.

Basic Spaces include HTML, CSS, and Javascript. Full Stack Spaces include everything in Basic Spaces plus PHP, Python, React.js, Vue.js, Node.js, Handlebars, and Django.

Your subscription will be automatically renewed every month.

Your access to all the benefits for the paid period of time will continue. However, the subscription will not be renewed automatically.

To subscribe W3Schools accounts for multiple users, you can contact [email protected]

Have some other questions? Visit our support page

Cancel anytime., 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.