Step-by-step HTML and CSS for Absolute Beginners

On your mark, get set... GO! 4 lectures 17:13 Course introduction and welcome Welcome to Step-by-step HTML and CSS for Absolute Beginners! In this lesson, you'll learn more about who this course is for, and what this course covers. You'll also meet me, your instructor! Project overview: A "Coming Soon" webpage In this course, we'll be creating a simple "Coming Soon" page using HTML and CSS. Here's what the page will look like. Getting started with HTML and CSS What is HTML and CSS, and what kind of software do you need to write it? This lesson will help you:

• Understand what HTML and CSS is used for
• See some examples of HTML code
• Discover what software you need to write HTML and CSS code, and where to download it for free

Creating HTML and CSS files How do you create HTML pages and CSS stylesheets? This lesson will teach you how to:

• Prepare a project folder to organize your files
• Create new empty HTML and CSS files
• Save your files in the correct format

By the end of this lesson, you should have a folder named "comingsoon" on your computer containing three items:

• a blank HTML file (index.html)
• a blank CSS stylesheet (style.css), and
• an empty folder (images)

On your mark, get set... GO! 4 lectures 17:13 Course introduction and welcome Welcome to Step-by-step HTML and CSS for Absolute Beginners! In this lesson, you'll learn more about who this course is for, and what this course covers. You'll also meet me, your instructor! Project overview: A "Coming Soon" webpage In this course, we'll be creating a simple "Coming Soon" page using HTML and CSS. Here's what the page will look like. Getting started with HTML and CSS What is HTML and CSS, and what kind of software do you need to write it? This lesson will help you:

• Understand what HTML and CSS is used for
• See some examples of HTML code
• Discover what software you need to write HTML and CSS code, and where to download it for free

Creating HTML and CSS files How do you create HTML pages and CSS stylesheets? This lesson will teach you how to:

• Prepare a project folder to organize your files
• Create new empty HTML and CSS files
• Save your files in the correct format

By the end of this lesson, you should have a folder named "comingsoon" on your computer containing three items:

• a blank HTML file (index.html)
• a blank CSS stylesheet (style.css), and
• an empty folder (images)

Course introduction and welcome Welcome to Step-by-step HTML and CSS for Absolute Beginners! In this lesson, you'll learn more about who this course is for, and what this course covers. You'll also meet me, your instructor! Course introduction and welcome Welcome to Step-by-step HTML and CSS for Absolute Beginners! In this lesson, you'll learn more about who this course is for, and what this course covers. You'll also meet me, your instructor! Course introduction and welcome Welcome to Step-by-step HTML and CSS for Absolute Beginners! In this lesson, you'll learn more about who this course is for, and what this course covers. You'll also meet me, your instructor! Course introduction and welcome Welcome to Step-by-step HTML and CSS for Absolute Beginners! In this lesson, you'll learn more about who this course is for, and what this course covers. You'll also meet me, your instructor! Welcome to Step-by-step HTML and CSS for Absolute Beginners! In this lesson, you'll learn more about who this course is for, and what this course covers. You'll also meet me, your instructor! Welcome to Step-by-step HTML and CSS for Absolute Beginners! In this lesson, you'll learn more about who this course is for, and what this course covers. You'll also meet me, your instructor! Project overview: A "Coming Soon" webpage In this course, we'll be creating a simple "Coming Soon" page using HTML and CSS. Here's what the page will look like. Project overview: A "Coming Soon" webpage In this course, we'll be creating a simple "Coming Soon" page using HTML and CSS. Here's what the page will look like. Project overview: A "Coming Soon" webpage In this course, we'll be creating a simple "Coming Soon" page using HTML and CSS. Here's what the page will look like. Project overview: A "Coming Soon" webpage In this course, we'll be creating a simple "Coming Soon" page using HTML and CSS. Here's what the page will look like. In this course, we'll be creating a simple "Coming Soon" page using HTML and CSS. Here's what the page will look like. In this course, we'll be creating a simple "Coming Soon" page using HTML and CSS. Here's what the page will look like. Getting started with HTML and CSS What is HTML and CSS, and what kind of software do you need to write it? This lesson will help you:

• Understand what HTML and CSS is used for
• See some examples of HTML code
• Discover what software you need to write HTML and CSS code, and where to download it for free

Getting started with HTML and CSS What is HTML and CSS, and what kind of software do you need to write it? This lesson will help you:

• Understand what HTML and CSS is used for
• See some examples of HTML code
• Discover what software you need to write HTML and CSS code, and where to download it for free

Getting started with HTML and CSS What is HTML and CSS, and what kind of software do you need to write it? This lesson will help you:

• Understand what HTML and CSS is used for
• See some examples of HTML code
• Discover what software you need to write HTML and CSS code, and where to download it for free

Getting started with HTML and CSS What is HTML and CSS, and what kind of software do you need to write it? This lesson will help you:

• Understand what HTML and CSS is used for
• See some examples of HTML code
• Discover what software you need to write HTML and CSS code, and where to download it for free

What is HTML and CSS, and what kind of software do you need to write it? This lesson will help you:

• Understand what HTML and CSS is used for
• See some examples of HTML code
• Discover what software you need to write HTML and CSS code, and where to download it for free

What is HTML and CSS, and what kind of software do you need to write it? This lesson will help you:

• Understand what HTML and CSS is used for
• See some examples of HTML code
• Discover what software you need to write HTML and CSS code, and where to download it for free

Creating HTML and CSS files How do you create HTML pages and CSS stylesheets? This lesson will teach you how to:

• Prepare a project folder to organize your files
• Create new empty HTML and CSS files
• Save your files in the correct format

By the end of this lesson, you should have a folder named "comingsoon" on your computer containing three items:

• a blank HTML file (index.html)
• a blank CSS stylesheet (style.css), and
• an empty folder (images)

Creating HTML and CSS files How do you create HTML pages and CSS stylesheets? This lesson will teach you how to:

• Prepare a project folder to organize your files
• Create new empty HTML and CSS files
• Save your files in the correct format

By the end of this lesson, you should have a folder named "comingsoon" on your computer containing three items:

• a blank HTML file (index.html)
• a blank CSS stylesheet (style.css), and
• an empty folder (images)

Creating HTML and CSS files How do you create HTML pages and CSS stylesheets? This lesson will teach you how to:

• Prepare a project folder to organize your files
• Create new empty HTML and CSS files
• Save your files in the correct format

By the end of this lesson, you should have a folder named "comingsoon" on your computer containing three items:

• a blank HTML file (index.html)
• a blank CSS stylesheet (style.css), and
• an empty folder (images)

Creating HTML and CSS files How do you create HTML pages and CSS stylesheets? This lesson will teach you how to:

• Prepare a project folder to organize your files
• Create new empty HTML and CSS files
• Save your files in the correct format

By the end of this lesson, you should have a folder named "comingsoon" on your computer containing three items:

• a blank HTML file (index.html)
• a blank CSS stylesheet (style.css), and
• an empty folder (images)

How do you create HTML pages and CSS stylesheets? This lesson will teach you how to:

• Prepare a project folder to organize your files
• Create new empty HTML and CSS files
• Save your files in the correct format

By the end of this lesson, you should have a folder named "comingsoon" on your computer containing three items:

• a blank HTML file (index.html)
• a blank CSS stylesheet (style.css), and
• an empty folder (images)

How do you create HTML pages and CSS stylesheets? This lesson will teach you how to:

• Prepare a project folder to organize your files
• Create new empty HTML and CSS files
• Save your files in the correct format

By the end of this lesson, you should have a folder named "comingsoon" on your computer containing three items:

• a blank HTML file (index.html)
• a blank CSS stylesheet (style.css), and
• an empty folder (images)

Adding content to your webpage using HTML 9 lectures 01:11:29 Understanding HTML HTML stands for HyperText Markup Language. HTML elements form the building blocks of all websites. In this lesson, you'll learn more about what HTML does. Learning HTML syntax What's the basic syntax for writing HTML? In this lesson, you'll learn:

• What HTML tags look like
• How to open and close tags
• How to "nest" tags
• How to preview your webpage in a web browser

By the end of this lesson you'll know how to code:

A DOCTYPE declaration (to tell the web browser what kind of HTML you're using)

The HTML tag (to contain all your HTML code)

The HEAD tag (to contain all the "administrative" information for your webpage)

The BODY tag (to contain all your webpage content)

The TITLE tag (to specify what goes in the title bar for your webpage)

Learning HTML syntax Adding headings and paragraph text How do you add headings and paragraph text to an HTML page? In this lesson, you'll learn:

• What "lorem ipsum" is
• What "soft wrap text" means in your text editor
• How to show line numbers in your text editor (and why this is useful)
• How to add paragraph text to your webpage
• How to add headings and subheadings to your webpage
• How to include non-displaying comments inside your HTML file

By the end of this lesson you'll know how to code:

The P tag (to identify paragraph text)

The H1 tag (to identify a single main heading text on your webpage)

The H2, H3, H4, H5, and H6 tags (to identify descending levels of subheadings on your webpage)

The COMMENT tag (to add special notes or comments inside your HTML file)

Using special characters How do you write special characters like the copyright symbol in HTML? In this lesson, you'll learn:

• Why you can't just cut-and-paste special symbols into HTML files
• Where to find HTML codes for special characters and symbols

By the end of this lesson you'll know how to code:

The copyright symbol: ©

Any other special character or symbol, such as the yen sign (¥), fractions (½), accented letters (é), etc.

Adding web and email links How do you add web and email links to an HTML page? In this lesson, you'll learn:

• How attributes can be used to add extra information to an HTML tag
• How to add attribute/value pairs to tags
• How web links differ from email links

By the end of this lesson you'll know how to code:

The A tag (to identify the text that will be linked)

The HREF attribute (to specify where you want the link to go)

and MAILTO:... values (to distinguish between web links and email links)

Adding images How do you add images to an HTML page? In this lesson, you'll learn:

• The three types of image files that web browsers can display (JPEG, GIF, and PNG)
• Where to store your image files in your project folder
• When and how to use "self-closing" tags
• The difference between relative and absolute addressing
• How to find the width and height of an image in pixels
• Why it's essential to include accurate HEIGHT, WIDTH, and ALT values for all images
• What "hotlinking" is, and why you should avoid it

By the end of this lesson you'll know how to code:

The IMG tag (to add an image to your webpage)

The SRC attribute (to tell the web browser where to find the image file)

The HEIGHT and WIDTH attributes (to tell the web browser the size of the image in pixels)

The ALT attribute (to give the web browser an accurate description of what the image is)

Finding icons and other graphics Where can you find nice looking icons for your website? In this lesson, you'll learn:

• Where to find good icon sets to use on your webpage
• How to download and extract an icon set to your computer
• Where to store the icon image files you want to display on your webpage
• How to use copy-and-paste to speed up your coding
• How web browsers display "block-level" and "inline" elements differently

Making clickable images How do you make an image into a link on an HTML page? In this lesson, you'll learn:

• How to make images on your page link to other websites when clicked
• How to nest IMG tags inside A tags

By the end of this lesson you'll know how to code:

An IMG tag nested inside an A tag

Checking your HTML code for mistakes How do you make sure your HTML code doesn't have mistakes in it? In this lesson, you'll learn:

• Why you should to check your code
• What it means to "validate" your code
• When is the right time to validate your code (early and often!)
• How to use the free W3C Markup Validation Service and interpret the results
• How to go about solving errors in your code (one at a time, easiest first!)

HELPFUL HINT: If you're getting a "character encoding was not declared" error from the W3C Markup Validation Service, try the following:

Click on "More Options"

Next to Document Type, select "HTML5 (experimental)"

…and then proceed normally with the validation! Adding content to your webpage using HTML. 9 lectures 01:11:29 Understanding HTML HTML stands for HyperText Markup Language. HTML elements form the building blocks of all websites. In this lesson, you'll learn more about what HTML does l character or symbol, such as the yen sign (¥), fractions (½), accented letters (é), etc. ...