Login Get started

Learn HTML – Full Tutorial for Beginners (2022)

freeCodeCamp.org・212 minutes read

Dave Gray offers 4 hours of HTML tutorials, emphasizing HTML as the fundamental building block of the web and providing practical tips for coding, structuring web content, and creating lists and links. The tutorials cover essential HTML elements, tools like Visual Studio Code, and the importance of validating code, culminating in the completion of an HTML project with forms, images, tables, and semantic elements for a well-structured webpage.

Insights

Dave Gray provides a series of 10 HTML tutorials that progressively build on each other, emphasizing a structured learning approach.
The tutorials offer practical tools and resources like Google Chrome, Dark New Tab extension, and Visual Studio Code for effective HTML coding.
Emphasis is placed on the importance of HTML as the foundational element of web content structuring, highlighting its significance in webpage development.
Practical tips such as using VS Code Icons, GitHub Theme, and Live Server extensions are recommended for an enhanced coding experience and webpage viewing.
Creating semantic HTML elements, organizing content with headers, and utilizing lists are crucial aspects detailed in the tutorials for effective webpage design.
The importance of validating HTML code using tools like the W3C Markup Validation Service is reiterated throughout the tutorials to ensure error-free and standards-compliant coding.

Get key ideas from YouTube videos. It’s free

Recent questions

How can I start learning HTML?
By watching Dave Gray's 4-hour tutorial series.

Related videos

Summary

00:00

"HTML Tutorial Series by Dave Gray"

Dave Gray offers 4 hours of HTML tutorials, consisting of 10 tutorials that progressively build on each other.
Links mentioned in the video are compiled in a GitHub resource available in the description.
Dave Gray, the creator of the tutorials, encourages subscribing to his YouTube channel for more content.
The importance of HTML as the fundamental building block of the web is highlighted, defining its role in structuring web content.
Necessary tools for HTML coding include a web browser (Google Chrome recommended), an extension like Dark New Tab, and a code editor like Visual Studio Code.
Instructions are provided on downloading and installing Google Chrome, the Dark New Tab extension, and Visual Studio Code for Windows, Linux, or Mac OS.
Creating an HTML file involves naming it as "index.html" in lowercase without spaces, using Visual Studio Code for coding, and organizing files in folders.
The process of creating HTML elements like <html>, <head>, and <body> is detailed, emphasizing the structure of an HTML page.
Practical tips include using extensions like VS Code Icons, GitHub Theme, and Live Server for a better coding experience and viewing web pages.
The importance of using a development server like Live Server for viewing web pages and validating HTML code through the W3C Markup Validation Service is highlighted.

15:59

"Upload, Validate, Enhance: HTML Web Page Creation"

To access the web page, click on "file upload" as the page is stored on the computer, not online.
Choose the file from the computer by navigating through folders.
Select the "index.html" file to upload and check for errors.
Address the warnings and errors found in the HTML file.
Add a "lang" attribute to the HTML start tag to declare the language.
Include a character encoding declaration by setting the character set attribute to UTF-8.
Insert a document type declaration at the beginning of the HTML file.
Validate the document to ensure no errors or warnings remain.
Enhance the metadata in the head element by adding author and description meta tags.
Include a favicon by using a link element with attributes for icon reference.

32:37

"HTML Elements and Semantic Meaning"

Headers in HTML provide semantic meaning, organizing content into main topics and subtopics.
Visual separation on a webpage can be achieved using horizontal rule elements.
Line breaks can be inserted within a paragraph element to create space between lines of text.
Block level elements start on a new line, creating space around them, while inline elements do not create extra space.
HTML entities can be used to display symbols like less than or greater than signs on a webpage.
Abbreviations and acronyms can be defined using the ABBR element with a title attribute for tooltips.
The ADDRESS element signifies a specific location or address within a webpage.
HTML comments can be added to the code for personal reminders or notes, visible in the source code but not on the webpage.
Validating HTML code using the W3C Markup Validation Service ensures the file is error-free and follows HTML standards.

49:53

Creating and Formatting Lists in HTML

Lists are essential on web pages and come in three types: ordered, unordered, and description lists.
Visual Studio Code is used to create lists, with the live server extension for viewing the page.
Ordered lists are created by enclosing list items in an ordered list element (ol).
Unordered lists are made by enclosing list items in an unordered list element (ul).
Description lists consist of description terms (dt) and description details (dd).
Adding lists involves nesting elements like paragraphs within list items.
Ordered lists are numbered, while unordered lists use bullet points.
Lists can be indented and formatted differently based on the type.
Validating code using validator.w3.org is crucial to catch errors.
Hypertext links are created using anchor tags (a) with href attributes for absolute or relative references.

01:06:12

Creating "about.html" Page in Visual Studio Code

To create a new page, open the file explorer in Visual Studio Code and click on the new file icon.
Name the new file "about.html" and pause the video to create your own version of the page.
Copy the content from the index.html page by selecting everything with Ctrl+A, copying with Ctrl+C, and pasting into the about.html page with Ctrl+V.
Make changes to the description meta tag and title of the page to personalize it.
Maintain the same doc type, HTML elements, head section, meta tag for character set, and author information.
Change the heading of the page and add a new paragraph with lorem text to replace existing content.
Create semantic HTML sections with IDs for different topic areas on the page.
Add a navigation area with unordered lists and list items for internal links to different sections on the page.
Include a back-to-top link at the bottom of the page for easy navigation.
Modify the CSS in the main.css file to change the color of links for better visibility, especially in dark mode.

01:22:09

Enhancing Web Pages with Links and Images

Adding a horizontal rule and an unordered list to the about.html page.
Creating a download link for an HTML5 favicon file (html5.png) with the download attribute.
Explaining the importance of the download attribute for enabling file downloads.
Adding a contact link with an email address using the mailto attribute.
Highlighting the risks of displaying email addresses directly on web pages.
Implementing a telephone link using the tel attribute for dialing a phone number.
Creating an absolute reference link to Google with the target attribute set to open in a new tab.
Adding a link back to the home page (index.html) using a slash value in the href attribute.
Validating the index.html and about.html files using validator.w3.org to ensure error-free code.
Introducing the process of adding images to web pages in HTML, including creating an image folder and inserting an image tag with attributes like src, alt, title, width, and height.

01:38:30

Optimizing Image Elements for Display and Performance

Providing width and height in image elements helps browsers prepare for image loading.
Google developers recommend including width and height attributes in image elements.
Adding a second image involves specifying the source and alt attributes.
A title attribute can be added to complement the alt attribute for images.
Including width and height attributes for images aids in proper display.
The loading attribute can be set to lazy for images below the fold to enhance performance.
The figure element can be used to wrap images and their related captions.
The fig caption element specifies a caption related to an image within a figure element.
The loading attribute should be set to lazy for images below the fold.
Providing width and height attributes for images ensures proper display and performance.

01:55:01

Enhancing Web Pages with Semantic HTML

Element code is used to display code on a webpage, allowing for the inclusion of other elements within it.
To display HTML code using element code, HTML entities like "<" and ">" are used for the less than and greater than signs.
The figure element can be utilized to contain code samples and captions on a webpage.
Validating code using the W3C validator is crucial to ensure error-free HTML.
Various image resources are recommended, including placeholder image generators and websites like unsplash.com and pixabay.com for freely usable images.
IrfanView is suggested as free image software for resizing and cropping images.
Canva.com is recommended for image editing, with a mention of using tinypng.com for compressing images.
Semantic HTML layout is essential for organizing documents, with headers, main elements, and footers being key components.
Semantic HTML elements like nav, hr, and section provide meaning and accessibility to web pages.
Adding headers, main elements, and footers, along with semantic elements like nav, enhances the structure and accessibility of web pages.

02:12:01

"HTML Semantic Elements Structure Content Clearly"

An article has a clear topic, while a section is more generic and can be used to create a segment in code.
Inside an article, multiple articles can be created, but sections can also be added.
Adding sections to an HTML article involves using opening and closing tags, with headings like h2 and h3.
A section can contain subheadings, logos, and code samples related to its topic.
Semantic elements like "aside" can be used for complementary text or quizzes, with details and summary elements.
The "mark" element highlights specific text, while the "time" element adds meaning to time durations.
Semantic elements like "section" and "aside" help structure content and assistive technologies.
Divs and spans, lacking semantic meaning, should be avoided in favor of semantic elements for clarity.
The HTML5 Outliner extension can create an outline of the page based on semantic elements and headings.
Tables should be used for tabular data, not for page layout, with rows and data cells structured using tr and td elements.

02:28:33

Enhancing HTML Tables with CSS and Forms

The text discusses adding CSS to an HTML table to improve its appearance and readability.
CSS is applied to the table by pasting code at the bottom of the linked CSS file.
The table is inspected using dev tools to understand its structure and styling.
Headers for the table columns are added by inserting a row with th elements.
The concept of column span is introduced to make a cell span multiple columns.
Row span is explained to make a cell span multiple rows in the table.
Semantics are added to the table by including a caption, thead, tbody, and tfoot elements.
Scope attributes are used to define how headings relate to the table.
The process of validating the HTML code using a validator tool is demonstrated.
The text transitions to adding a form to the HTML page to enable user interaction and information submission.

02:44:57

Creating Form Inputs for First and Last Name

The attribute value should match the id value of the input, starting with "first name" for both.
The label and input elements are created, with the label showing "first name" and the input type set to text.
The name and id attributes of the input should match the label's value, "first name."
Additional attributes like placeholder, autocomplete, required, and autofocus can be added to the input element.
The placeholder attribute displays text in the input field but does not submit with the form.
Autocomplete can be set to on or off, suggesting previously entered inputs in the field.
The required attribute ensures the field must be filled before form submission.
The autofocus attribute focuses on the input field when the page loads, allowing immediate typing.
Copying and modifying the first name input to create a last name input, ensuring consistency in attributes.
Wrapping the label and input elements in a paragraph tag for better form organization.

03:01:21

Creating Option Groups for Improved Form Organization

An "option group" is created in the code by tabbing over and using the closing tag.
The first group is designated for "coffees," with the label attribute set to "Coffees."
Another "opt group" is added for "espresso drinks" with the appropriate label.
The organization of the list is improved by using these option groups.
Additional attributes are added to the parent select element, including "multiple" and "size" to allow for multiple selections and control the displayed list size.
A typo in the label attribute is corrected by adding an extra "e" to "coffee."
An alternative input method using a text input with a data list is demonstrated, allowing for filtered choices as the user types.
The form is further structured by adding field sets with legends to categorize different sections of the form.
Radio buttons are added for selecting favorite foods, ensuring unique IDs for each option.
Checkboxes are included for selecting pet types, allowing for multiple selections.

03:17:26

Creating and Validating Form Buttons

Set the button type to "submit" to create a submit button.
Save the button with the label "submit" to display it on the button.
Add a new button type to the form, setting it as "reset" to clear form values.
Clicking the submit button triggers immediate validation, prompting to fill required fields.
Validation prompts for each required field until all are filled.
Fill out all required fields, including a phone number, to meet validation criteria.
Submitting the form displays the data sent to HTTP bin for review.
Review the data sent to HTTP bin, noting the arguments and values sent.
Add a new button to override the form's original action and method attributes.
Submitting the form with the new button sends the data using the post method to a specified address.

03:33:13

Creating HTML Structure for "The Little Taco Shop"

HTML structure requires lowercase tags and the lang attribute set to English.
The head section includes meta elements for character set, author name, and page description.
The title of the page is "The Little Taco Shop."
Links for favicon, stylesheet, and navigation are added in the head section.
The body section starts with a header containing an h1 tag for the page title.
Navigation menu with links to about, menu, hours, and contact pages is structured.
An image with alt text and caption is included in the header.
The main content section includes an article element with an about section.
The about section details the founding of "The Little Taco Shop" in 2022.
Taco trivia section with a question-answer format is added using details and summary elements.

03:50:33

"Tacos: From 1905 to Taco Shop Menu"

Tacos first appeared in the United States in 1905.
The taco trivia question is displayed, requiring a click to reveal the answer.
Additional details and information are included in the paragraph.
A citation from the Smithsonian Magazine is added to the content.
A horizontal rule indicates a topic change, leading to a new article.
The new article focuses on a taco shop menu, starting with an h2 header.
A table is created with headings for tacos, quantity, and price.
Rows are added for crunchy tacos with quantities and prices specified.
Additional rows are added for soft tacos with corresponding quantities and prices.
The table is completed with a footer listing chips and salsa prices.

04:07:01

Dave's Email Sends Successful Message to Binn

Use the "contact us" information with the email dave@dave.dave and a message from Dave.
The message is sent successfully to http://binn.org.
The form information is visible on the website http://binn.org.
The website is recommended for testing forms.
The completion of the HTML project is acknowledged with congratulations.

Try it yourself — It’s free.