- Description
- Curriculum
- FAQ
- Reviews
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!)
-
1Course 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!
-
2Project 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.
-
3Getting 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
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)
-
4Creating 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)
-
5Check your progress!
Are you ready to check your progress? Let's see how you're doing!
-
6Understanding 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.
-
7Learning 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)
-
8Adding 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)
Helpful Links
-
9Using 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.
Helpful Links
-
10Adding 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)
- HTTP://... and MAILTO:... values (to distinguish between web links and email links)
-
11Adding 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)
-
12Finding 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
Helpful Links
-
13Making 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
-
14Checking 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!
Helpful Links
-
15Check your progress!
Are you ready to check your progress? Let's see how you're doing!
-
16Understanding 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).
-
17Adding 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:
- The LINK tag (to connect an external CSS stylesheet to your webpage)
- The REL and TYPE attributes (to describe the CSS stylesheet)
- The HREF attribute (to specify where to find the CSS stylesheet)
-
18Learning 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:
- The BODY selector (to control the look of the body in your webpage)
- The H1 selector (to control the look of H1 text)
- The P selector (to control the look of P text)
- The BACKGROUND-COLOR attribute (to change the background color)
- The COLOR attribute (to change the color)
-
19Changing 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:
- The FONT-FAMILY attribute (to specify the font we want)
- The FONT-SIZE attribute (to specify the size of the font)
Helpful Links
-
20Choosing 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
Helpful Links
-
21Changing 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:
- The A selector (to control the look of links)
- The BACKGROUND-COLOR attribute (to change the background color)
- The COLOR attribute (to change the color)
- HEXADECIMAL colors values (to specify colors)
-
22Checking 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
Helpful Links
-
23Check your progress!
Are you ready to check your progress? Let's see how you're doing!
-
24How 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
-
25Understanding 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
Downloads
Download a free FTP client:
- Cyberduck (Mac/PC)
-
26Getting 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
-
27Editing 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)
-
28Check your progress!
Are you ready to check your progress? Let's see how you're doing!
-
29Using 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.
-
30Dividing 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:
- The DIV tag (in HTML, to identify sections of content)
- The ID attribute (in HTML, to label content on a webpage)
- The DIV selector (in CSS, to specify styles that apply to DIVs)
- The BORDER-WIDTH, BORDER-STYLE, and BORDER-COLOR attributes (in CSS, to specify how a border looks)
-
31Changing 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:
- #ID selectors (in CSS, to apply styles to content with a specific ID)
- The BACKGROUND-COLOR attribute (in CSS, to specify the background colour of specific content)
- The COLOR attribute (in CSS, to specify the colour of specific content)
-
32Changing 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:
- The WIDTH attribute (in CSS, to specify the width of something)
-
33Centering 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:
- The TEXT-ALIGN attribute (in CSS, to specify how you want your text to be aligned)
- The CENTER value (in CSS, to center content)
-
34Repositioning 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:
- The MARGIN attribute (in CSS, to specify the margins around something)
- The AUTO value (in CSS, to set margins "automatically" to be equal)
-
35Controlling 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:
- The TEXT-DECORATION attribute (in CSS, to change the look of text)
-
36Changing 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:
- The TEXT-TRANSFORM attribute (in CSS, to change the case of text)
- LOWERCASE and UPPERCASE values (in CSS, to change text case to lowercase or uppercase)
*Yes, "automagically." :)
-
37Categorizing 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:
- The CLASS attribute (in HTML, to identify a category or "class" of content)
- The .CLASS selector (to CSS, to apply styles to specific categories or "classes" of content)
-
38Repositioning 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:
- The FLOAT attribute (in CSS, to make elements "float" to the right or left in your layout)
- The CLEAR attribute (in CSS, to make sure an element doesn't overlap any elements on the webpage)
-
39Changing 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:
- The MARGIN attribute (in CSS, to specify the space surrounding something)
- The PADDING attribute (in CSS, to specify the space between the border of a DIV and the elements inside)
- The IMG selector (in CSS, to apply styles to images)
-
40Check your progress!
Are you ready to check your progress? Let's see how you're doing!
-
41Going 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.
-
42Making 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:
- The BORDER-RADIUS attribute (in CSS, to create rounded corners)
-
43Tweaking 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:
- The LINE-HEIGHT attribute (in CSS, to control the space between lines of text)
- The FONT-SIZE attribute (in CSS, to control the size of text)
-
44Changing 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:
- The COLOR attribute (in CSS, to control the color of text)
- The A:HOVER pseudoclass (in CSS, to specify the style of a link when someone hovers their mouse over it)
-
45Adding 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:
- The BOX-SHADOW attribute (in CSS, to add shading behind an element)
- HORIZONTAL OFFSET, VERTICAL OFFSET, BLUR RADIUS, and RGBA values (in CSS, to control the shading behind an element)
-
46Creating 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:
- The BORDER-WIDTH, BORDER-STYLE, and BORDER-COLOR attributes (in CSS, to control the border around an element)
- The BOX-SHADOW attribute (in CSS, to add shading behind an element)
- HORIZONTAL OFFSET, VERTICAL OFFSET, BLUR RADIUS, and RGBA values (in CSS, to control the shading behind an element)
- The MARGIN attribute (in CSS, to specific the amount of space around an element)
- The TRANSFORM attribute (in CSS3, to transform an element)
- The ROTATE value (in CSS3, to rotate an element a specified number of degrees)
-
47Check your progress!
Are you ready to check your progress? Let's see how you're doing!