Step-by-step HTML and CSS for Absolute Beginners

Learn how to code HTML5 + CSS3 to create your own website in this beginner-level course. No coding experience required!
4.8 (187 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
5,604 students enrolled
$19
$120
84% off
Take This Course
  • Lectures 43
  • Length 4 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 8/2013 English

Course Description

Want to learn how to create webpages, but feeling intimidated by HTML and CSS? Not sure where to start? Step-by-step HTML and CSS for Absolute Beginners is a comprehensive and friendly course designed for beginners with NO previous coding or programming experience.

  • HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the building blocks of the web. If you've ever looked at a website, you've seen HTML and CSS in action!


Whether you want to make changes to your website's template, create new webpages from scratch, or just understand what you're doing when you cut-and-paste embed codes from sites like YouTube or SlideShare — understanding HTML and CSS makes it possible.


HOW IS THIS COURSE DIFFERENT?

My name is Kathleen, and I've been teaching technology to beginners under the moniker Robobunnyattack! since 2009. I believe that with the right approach, anyone can learn anything.

My goal in this course is to help you develop an intuitive understanding of how HTML and CSS work.

In this course, we'll create a simple "Coming Soon" webpage using valid HTML5 and CSS3 code. As we work together, I'll explain WHY the code we write looks the way it does. I'll point out the simple patterns in the code, so you can learn more quickly and with more confidence.

As we build our webpage, we'll cover:

  • What tools you need to write HTML and CSS, and how to use them
  • How to use HTML to organize and manage the content of your webpage
  • How to use CSS to control the presentation or "look" of your webpage
  • How web publishing works, and how to get your HTML and CSS files from your computer onto the web
  • How to use lots of other helpful and free web building tools, including code validators, free icon libraries, color scheme generators and more


By the end of this course, you'll be able to use HTML and CSS with confidence, following best practices every step of the way.


Here's just a sample of what my (awesome!) students have to say about this course:

"My favourite part was learning how to tilt images and add drop shadows. Also, the instructor cares enough to answer questions promptly. Can't say enough good things about this course!" —R.B.

"Very accurate and detailed explanations with real time examples. For me it was a big step ahead..." —Mihai E.

"[Kathleen] knows exactly the info to deliver and what to leave out to avoid confusion." —Tara

"What I once thought would be overwhelming to learn is surprisingly quite straight forward." —Odette

"This course finally made CSS make sense to me." —Julie G.

"Thank you, Kathleen, for a wonderful course! Never thought coding could be made fun." —Leslie V.


WHAT'S INCLUDED?

  • This course includes lifetime access to 4 hours of step-by-step videos. You'll also get supplementary text lectures, links to helpful resources, HTML and CSS code examples, and downloadable project files.
  • Short quizzes at the end of each section will help you gauge your own understanding and check your progress along the way.


HOW LONG WILL IT TAKE ME?

  • This completely depends on your availability and learning preference. You can work through all the video lectures in one afternoon, or pace yourself over several days or weeks — it's up to you!


WHAT IF THIS COURSE ISN'T FOR ME?

  • This course comes with an unconditional 30-day Udemy-backed guarantee. Try out this course for 30 days and see for yourself if my approach to learning HTML and CSS is right for you. If you're not 100% satisfied with this course, simply request a full refund within 30 days — no conditions, no questions asked!


I'm confident you'll LOVE this course, and I'm excited to help you learn. Enrol now and you can start building your own webpage using HTML and CSS today!

—Kathleen Farley (aka Robobunnyattack!)

What are the requirements?

  • A computer (Windows, Mac, or Linux) with Internet access
  • Any modern web browser (Chrome, Firefox, Internet Explorer, Opera, or Safari)
  • Some basic computer skills (cutting and pasting text, saving files into folders)
  • A desire to learn!

What am I going to get from this course?

  • In this course, we'll create a simple "Coming Soon" webpage using valid HTML5 and CSS3 code
  • We'll focus on WHY the code we write looks the way it does –– so you can develop an intuitive understanding of how HTML and CSS work
  • By the end of this course, you'll be able to use HTML and CSS with confidence, following best practices every step of the way!

What is the target audience?

  • Beginners with no previous coding or programming experience
  • Web designers seeking to strengthen their HTML and CSS skills
  • Learners of all ages who want to REALLY understand HTML and CSS –– not just memorize code!

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: On your mark, get set... GO!
02:04

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!

01:06

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

08:52

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:

Download a free text editor:


05:09

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)

2 questions

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

Section 2: Adding content to your webpage using HTML
Article

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.


13:19

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)

11:01

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

03:51

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

08:05

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)

16:08

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)

07:33

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

03:07

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

08:22

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

7 questions

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

Section 3: Controlling the look of your content with CSS
Article

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


09:51

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)

11:42

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)

10:11

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

06:19

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

06:19

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)

02:23

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

5 questions

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

Section 4: Publishing your webpage: The (not-so-scary) technical stuff
Article

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
10:35

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:


08:37

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

05:16

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)

4 questions

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

Section 5: Putting it all together: Webpage layout and design
Article

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.


08:21

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)

07:09

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)

02:20

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)

01:51

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)

07:21

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)

01:18

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)

03:14

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." :)

04:47

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)

03:37

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)

08:04

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)

8 questions

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

Section 6: Getting fancy: Tweaking your webpage design
Article

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.


03:55

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)

02:10

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)

03:48

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)

07:54

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)

12:25

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)

6 questions

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

Section 7: Wrapping up
Article

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.


Article

This bonus lecture provides additional resources and links to my other courses on Udemy so you can continue your learning.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Kathleen Farley, aka Robobunnyattack! + co-founder of Audiohackr

Kathleen Farley is a computer geek, teacher, learner, vinyl junkie, hockey fan, and recovering non-profit executive. Occasionally she breaks (and fixes) computers. Not necessarily in that order.

The Montreal-born technologist trained as an audio engineer before moving to Hamilton, Canada in 2007. She now runs Maisonneuve Music, a Hamilton-based independent record label.

Kathleen teaches technology and management skills at a music industry school in Toronto, Canada. She's also the co-founder of Audiohackr, a startup that helps indie musicians, producers, and DIY labels make the most of technology.

Kathleen produces technology training videos under the moniker Robobunnyattack!

Ready to start learning?
Take This Course