Step-by-step HTML and CSS for Absolute Beginners

In this course, we'll be creating a simple "Coming Soon" page using HTML and CSS. Here's what the page will look like.

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

I'll be using Google Chrome and TextWrangler (for Mac) for the rest of these lessons, but you can use any web browser and plain text editor you like.

Let's get started!

Downloads

Download a free web browser:

• Chrome (Mac/PC)
• Firefox (Mac/PC)
• Internet Explorer (PC)
• Opera (Mac/PC)
• Safari (Mac/PC)

Download a free text editor:

• TextWrangler (Mac)
• Notepad++ (PC)

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:

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

Are you ready to check your progress? Let's see how you're doing!

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.

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:

1. A DOCTYPE declaration (to tell the web browser what kind of HTML you're using)
2. The HTML tag (to contain all your HTML code)
3. The HEAD tag (to contain all the "administrative" information for your webpage)
4. The BODY tag (to contain all your webpage content)
5. The TITLE tag (to specify what goes in the title bar for your webpage)

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:

1. The P tag (to identify paragraph text)
2. The H1 tag (to identify a single main heading text on your webpage)
3. The H2, H3, H4, H5, and H6 tags (to identify descending levels of subheadings on your webpage)
4. The COMMENT tag (to add special notes or comments inside your HTML file)

Helpful Links

• Lorem Ipsum generator

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:

1. The copyright symbol: ©
2. Any other special character or symbol, such as the yen sign (¥), fractions (½), accented letters (é), etc.

Helpful Links

• HTML Codes - Characters and symbols

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:

1. The A tag (to identify the text that will be linked)
2. The HREF attribute (to specify where you want the link to go)
3. HTTP://... and MAILTO:... values (to distinguish between web links and email links)

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:

1. The IMG tag (to add an image to your webpage)
2. The SRC attribute (to tell the web browser where to find the image file)
3. The HEIGHT and WIDTH attributes (to tell the web browser the size of the image in pixels)
4. The ALT attribute (to give the web browser an accurate description of what the image is)

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

Helpful Links

• IconArchive

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:

1. An IMG tag nested inside an A tag

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:

1. Click on "More Options"
2. Next to Document Type, select "HTML5 (experimental)"

…and then proceed normally with the validation!

Helpful Links

• W3C Markup Validation Service

Are you ready to check your progress? Let's see how you're doing!

CSS stands for Cascading Style Sheets. CSS is a language used for describing the look and formatting of a document written in a markup language such as HTML.

In this lesson, you'll learn more about why CSS was designed, and why it's useful to keep content (HTML) separate from presentation (CSS).

How do I connect a CSS stylesheet to an HTML webpage? In this lesson, you'll learn:

• The reason we have separate HTML and CSS files
• The purpose of HTML vs the purpose of CSS
• Why it's good to keep content (HTML) separate from presentation (CSS)

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

1. The LINK tag (to connect an external CSS stylesheet to your webpage)
2. The REL and TYPE attributes (to describe the CSS stylesheet)
3. The HREF attribute (to specify where to find the CSS stylesheet)

What's the basic syntax for writing CSS? In this lesson, you'll learn:

• How (and why) CSS code looks different than HTML code
• What a "selector" does in CSS
• How to use curly brackets { } (aka opening and closing braces) in your CSS code, and what goes inside them
• How to organize your CSS code for better legibility
• How to include non-displaying comments inside your CSS stylesheet

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

1. The BODY selector (to control the look of the body in your webpage)
2. The H1 selector (to control the look of H1 text)
3. The P selector (to control the look of P text)
4. The BACKGROUND-COLOR attribute (to change the background color)
5. The COLOR attribute (to change the color)

How do you change the font type and font size on your webpage? In this lesson, you'll learn:

• What "web safe fonts" are and why we use these
• The difference between serif and sans-serif fonts
• Why it's good to use relative (%) font sizes vs absolute (px) font sizes

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

1. The FONT-FAMILY attribute (to specify the font we want)
2. The FONT-SIZE attribute (to specify the size of the font)

Helpful Links

• CSS Web Safe Fonts
• Understanding the differences between serif and sans serif fonts

How do you create a nice color scheme for your webpage? In this lesson, you'll learn:

• Why good color schemes are important
• How to create color swatches from images
• How to identify colors by their hexadecimal values

Helpful Links

• ColorExplorer

How do you change the background, text and link color on a webpage? In this lesson, you'll learn:

• How to control colors on your webpage with more accuracy
• How to figure out which selector to use in your CSS stylesheet

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

1. The A selector (to control the look of links)
2. The BACKGROUND-COLOR attribute (to change the background color)
3. The COLOR attribute (to change the color)
4. HEXADECIMAL colors values (to specify colors)

How do you make sure your CSS 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 CSS Validation Service to troubleshoot your code

Helpful Links

• W3C CSS Validation Service

How do you publish your webpage onto the world wide web, where everyone can see it? In this lesson, you'll learn:

• The difference between domain name registration and web hosting
• How to register your domain name
• How to find a web hosting provider
• What "shared web hosting" is, and who it's for
• Typical costs involved

What is FTP, and how do you use it? In this lesson, you'll learn:

• The purpose of File Transfer Protocol
• Where live HTML and CSS files are stored, or "hosted"
• What kind of software program you need to use FTP
• How to use an FTP client (like Cyberduck) to connect to a web server
• What three pieces of information you need to connect to a web server

Downloads

Download a free FTP client:

• Cyberduck (Mac/PC)

How do you upload and download files to and from a web server using FTP (File Transfer Protocol)? In this lesson, you'll learn:

• How to navigate through files and folders on another server using an FTP client (such as Cyberduck)
• How to use an FTP client (such as Cyberduck) to move files between your computer and a web server
• How to view a website's stylesheet through any web browser

How can you edit files directly on a server using FTP (File Transfer Protocol) and a plain text editor? In this lesson, you'll learn:

• How to save time when editing files online
• How to configure Cyberduck to use your preferred text editor (TextWrangler or Notepad++) to edit files online
• How to check the modification time of the files on your server using an FTP client (such as Cyberduck)

Now that you understand what HTML and CSS do, let's put it all together!

In the next few lessons, we'll edit our HTML file and our CSS stylesheet simultaneously in order to control the layout and presentation of our webpage.

How do you separate different sections of your webpage using HTML and CSS? In this lesson, you'll learn:

• How to divide your webpage layout into different "sections"
• How to format your HTML code with tabs for better legibility
• How to add temporary borders to DIVs to help you understand how your DIVs are positioned on your webpage

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

1. The DIV tag (in HTML, to identify sections of content)
2. The ID attribute (in HTML, to label content on a webpage)
3. The DIV selector (in CSS, to specify styles that apply to DIVs)
4. The BORDER-WIDTH, BORDER-STYLE, and BORDER-COLOR attributes (in CSS, to specify how a border looks)

How can you change the background color of a DIV? In this lesson, you'll learn:

• How to identify specific content in your CSS stylesheet using #ID selectors
• How to understand and predict the behavior of nested DIVs

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

1. #ID selectors (in CSS, to apply styles to content with a specific ID)
2. The BACKGROUND-COLOR attribute (in CSS, to specify the background colour of specific content)
3. The COLOR attribute (in CSS, to specify the colour of specific content)

How do you change the width of a DIV? In this lesson, you'll learn:

• How to use percentage (%) widths to create flexible, responsive webpage layouts

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

1. The WIDTH attribute (in CSS, to specify the width of something)

How do you center content inside a DIV? In this lesson, you'll learn:

• How to align text inside a DIV
• How centering content inside a DIV is different than centering the DIV itself

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

1. The TEXT-ALIGN attribute (in CSS, to specify how you want your text to be aligned)
2. The CENTER value (in CSS, to center content)

How do you center an entire DIV (not just the content inside it)? In this lesson, you'll learn:

• How centering an entire DIV is different than centering the text inside a DIV
• How margins relate to a DIV's relative position on the page
• How to add a "container" DIV to contain all the DIVs on your page
• How a DIV inherits its relative width from its containing DIV(s)

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

1. The MARGIN attribute (in CSS, to specify the margins around something)
2. The AUTO value (in CSS, to set margins "automatically" to be equal)

How can you remove underlines from the links on your webpage? In this lesson, you'll learn:

• How to use CSS to change the default "look" of links on your webpage

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

1. The TEXT-DECORATION attribute (in CSS, to change the look of text)

How can you automagically* change the text on your webpage to uppercase or lowercase? In this lesson, you'll learn:

• How to use CSS to change text to uppercase or lowercase, rather than re-type the text

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

1. The TEXT-TRANSFORM attribute (in CSS, to change the case of text)
2. LOWERCASE and UPPERCASE values (in CSS, to change text case to lowercase or uppercase)

*Yes, "automagically." :)

What are "classes," and why are they useful? In this lesson, you'll learn:

• What "classes" are used for
• How to create classes and use these to classify content in your HTML code
• How to identify classes and apply styles to them in your CSS code

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

1. The CLASS attribute (in HTML, to identify a category or "class" of content)
2. The .CLASS selector (to CSS, to apply styles to specific categories or "classes" of content)

How can you "float" an image to the right on your webpage? In this lesson, you'll learn:

• How to create a class that will make elements "float" to the right
• How to apply a class to an image
• How to prevent elements on your webpage from overlapping one another

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

1. The FLOAT attribute (in CSS, to make elements "float" to the right or left in your layout)
2. The CLEAR attribute (in CSS, to make sure an element doesn't overlap any elements on the webpage)

How can you add more space inside and around DIVs on your webpage? In this lesson, you'll learn:

• What the "box model" is in CSS
• How to control the margins around something
• How to control the padding inside a DIV
• How to apply styles to specific images using #ID selectors in CSS
• Some useful shortcuts when specifying margins and padding in CSS

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

1. The MARGIN attribute (in CSS, to specify the space surrounding something)
2. The PADDING attribute (in CSS, to specify the space between the border of a DIV and the elements inside)
3. The IMG selector (in CSS, to apply styles to images)

Our "Coming Soon" webpage is looking good, but it still needs a few more tweaks.

In our final few lessons, we'll learn how to use CSS to fine-tune the look of a webpage.

How do you make rounded corners using CSS? In this lesson, you'll learn:

• How to think about rounded corners as being 1/4 of a circle
• How to control the size of rounded corners using CSS

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

1. The BORDER-RADIUS attribute (in CSS, to create rounded corners)

How can you adjust the line spacing for the text on your webpage? In this lesson, you'll learn:

• How to control the amount of space between lines of text using CSS
• How to change the size of text inside specific DIVs

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

1. The LINE-HEIGHT attribute (in CSS, to control the space between lines of text)
2. The FONT-SIZE attribute (in CSS, to control the size of text)

How can you change the color of a link and its behavior when you hover over it? In this lesson, you'll learn:

• How to control the style of links located inside a specific DIV
• How to use "pseudoclasses" to control the behavior of lines only under certain circumstances

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

1. The COLOR attribute (in CSS, to control the color of text)
2. The A:HOVER pseudoclass (in CSS, to specify the style of a link when someone hovers their mouse over it)

How do you create a drop shadow effect using CSS? In this lesson, you'll learn:

• How to remove temporary borders around DIVs
• How to control the shading behind elements on your webpage

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

1. The BOX-SHADOW attribute (in CSS, to add shading behind an element)
2. HORIZONTAL OFFSET, VERTICAL OFFSET, BLUR RADIUS, and RGBA values (in CSS, to control the shading behind an element)

How can you create a "dropped snapshot" effect using CSS only? In this lesson, you'll learn:

• How to apply styles to a specific image (rather than all images on my webpage)
• How to apply multiple classes to a single image in your HTML code
• How to add borders to images
• How to add a drop shadow behind images
• How to control the space around an image with more precision
• How to use shortcuts when setting margin values in CSS
• How to rotate elements using CSS3
• What vendor prefixes are, and how to use them
• Why vendor prefixes won't typically validate (and why this is okay!)

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

1. The BORDER-WIDTH, BORDER-STYLE, and BORDER-COLOR attributes (in CSS, to control the border around an element)
2. The BOX-SHADOW attribute (in CSS, to add shading behind an element)
3. HORIZONTAL OFFSET, VERTICAL OFFSET, BLUR RADIUS, and RGBA values (in CSS, to control the shading behind an element)
4. The MARGIN attribute (in CSS, to specific the amount of space around an element)
5. The TRANSFORM attribute (in CSS3, to transform an element)
6. The ROTATE value (in CSS3, to rotate an element a specified number of degrees)

Wow, you did it! Our "Coming Soon" page is now complete!

If you need to review any of the code, download the project files provided in the "Downloadable Materials" section.