Library

Course: Step-by-step HTML and CSS for Absolute Beginners

Step-by-step HTML and CSS for Absolute Beginners

  • Life Time Access
  • Certificate on Completion
  • Access on Android and iOS App
  • Self-Paced
About this Course

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

Basic knowledge
  • 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 you will learn
  • 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!
Curriculum
Number of Lectures: 43
Total Duration: 03:58:22
On your mark, get set... GO!
  • 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)


Adding content to your webpage using HTML
  • 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:

    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)

    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:

    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)
  • 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:

    1. The copyright symbol: ©
    2. 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:

    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)
  • 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:

    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)


  • 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:

    1. 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:

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

    …and then proceed normally with the validation!

Controlling the look of your content with CSS
  • Understanding CSS  

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

  • Adding CSS to your webpage  

    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)
  • Learning CSS syntax  

    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)
  • Changing fonts  

    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)
  • Choosing a good color scheme  

    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
  • Changing colors on your webpage  

    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)
  • Checking your CSS code for mistakes  

    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
Publishing your webpage: The (not-so-scary) technical stuff
  • How web publishing works  

    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
  • Understanding FTP: File Transfer Protocol  

    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
  • Getting your files online using FTP  

    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
  • Editing your webpage online  

     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)
Putting it all together: Webpage layout and design
  • Using HTML and CSS together  

    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. 

  • Dividing sections of content using DIVs  

    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)


  • Changing the background color of a section  

    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)
  • Changing the width of a section  

    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)
  • Centering content inside a section  

    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)
  • Repositioning an entire section  

    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)
  • Controlling the way links appear on your webpage  

    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)
  • Changing your text to uppercase or lowercase  

    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)
  • Categorizing your webpage content using classes  

    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)
  • Repositioning images on your webpage  

    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)
  • Changing the space around sections of content  

    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)
Getting fancy: Tweaking your webpage design
  • Going further with HTML and CSS  

    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. 

  • Making rounded corners  

     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)


  • Tweaking line spacing  

    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)
  • Changing the way a link appears when you hover over it  

    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)
  • Adding a drop shadow effect  

     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)
  • Creating special effects with images  

    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)


Wrapping up
  • Project review: Coming Soon page  

    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. 

  • Bonus Lecture: Additional Resources  

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

Reviews (0)