HTML&CSS3

Learn HTML5 & CSS3 in 3 Hours: A Responsive Web Page Tutorial

Get the skills you need to build responsive web pages in about 3 hours by building your own hand-coded, custom landing page from scratch! No Experience Necessary!

Enroll in the course for $40

See what you’ll be building right here

What are you going to learn?

In about 3 hours, and over the course of  27 easy to follow, bite-sized video lectures you’ll gain a strong foundation in responsive web design, wireframing, HTML5 and CSS3 – even if you’ve never tackled any of these topics before.

We’ll walk you through it, step-by-step, as you create your own 100% custom landing page, that’s search engine friendly and whose content and layout is completely under your control. And because we take the time and care to explain to you not just “the how” but also “the why” behind the code, you’ll finish with a really deep understanding of how to apply what you’ve learned with us to any project you take on in the future.

 

Check out our sample lectures on YouTube by clicking here

 

Check out the Syllabus

Section 1: Introduction

  • Lecture 1.1: Why Am I Here?
    • Why are you taking this course? Find out right here.  If you’re short on time and big on ambition… you’re in the right place.
  • Lecture 1.2: The Tools of the Trade (hint: They’re All Free!)
    • Did you know that everything you need to build awesome, responsive webpages is free? We’ll show you the tools we use to build our own projects.

Section 2: Wireframing & Setting the Stage

  • Lecture 2.1: What is Wireframing? And Why You’ll Never Design Without It Again
    • Never heard of wireframing? We’ll introduce you to this easy, yet powerful way of giving form to your ideas. And trust us, you’ll never start a project without using this powerful design technique again.
  • Lecture 2.2: Starting at the End and Working Your Way Backwards
    • Time to get our hands dirty… by sketching out our wireframe.
  • Lecture 2.3: Your Website’s File Structure and Additional Assets
    • Every file needs a home.  We’ll show you where to put everything so your projects just works.

Section 3: HTML – The Bare Bones of Your Project

  • Lecture 3.1: HTML Tag Basics
    • Learn all about HTML tags, and make friends with the <h1> and <br> tags. We promise, you’ll like them.
  • Lecture 3.2: Web Page Construction – the Head and the Body
    • Get a firm grip on how to work with an HTML page’s head and body sections.  We’ll also show you how to use the <html>, <head>, <body>, and <title> tags.  They’re important.
  • Lecture 3.3: Introducing Block & Inline Tags
    • What’s the difference between a block and inline tag? We’ll show you.  You’re also going to get acquainted with the <div> and <a> tags, and learn just where to use them.
  • Lecture 3.4: Building the Page Body and Content
    • We’re going to conquer the entire HTML body section of our page, really quickly.  Along the way, you’ll learn all about “content wrappers” and HTML tag attributes, in addition to the <img>, <p> and <li> tags. In case that’s not enough, we’re also going to show you a quick and simple way to get an interactive Google map embedded into your page, as well as all the social buttons you’ll ever need – using free tools!

Section 4: CSS Basics

  • Lecture 4.1: What is CSS?
    • We’ll unravel the mysteries of Cascading Style Sheets, or CSS, in this section and you’ll learn exactly what they are and how to use them to make your web page look stylish, beautiful and professional.
  • Lecture 4.2: How Does the Browser Know CSS from HTML?
    • Ever wonder how the browser tells CSS code apart from HTML code? Wonder no more. We’ll explain it all and show you three different ways to introduce CSS into your web page, as well as which method to choose to best suit your needs.
  • Lecture 4.3: Tag, Class & ID Selectors – The 3 Main Building Blocks of CSS
    • Learn all about the three main building blocks of CSS and when to use each of them: Tag selectors, Class selectors, and ID selectors.
  • Lecture 4.4: Establishing Common Vocabulary
    • Don’t stress about all the new vocabulary you’ve just learned.  We’re going to recap it for you right here.  We’ll even throw in some background music and a sneaky raccoon to entertain you.
  • Lecture 4.5: The Importance of RESETS
    • Learn all about “CSS resets”, why you should care about them and where to find the best free version that you can use right now.
  • Lecture 4.6: Color It Up! How to Use Colors in CSS?
    • How many colors can you use in your web designs? Millions. We’ll show you exactly how to color in your design using the three different methods available to you in CSS to get just the color and shade that’s perfect for you.  Learn how to use the CSS ‘color’ rule with plain English words, hex codes, or RGBA values.
  • Lecture 4.7: Font This, Font That, Font You!
    • Family is important… in CSS.  We’ll show you how to use different fonts for different text in your webpage using the ‘font-family’ CSS rule. You’ll also learn all about web fonts and how to import them from the Internet (yup, for free).

Section 5: Putting CSS to Work!

  • Lecture 5.1: Start with the HTML File
    • You’re going to learn how to link an external CSS file to your HTML page within your code’s <html> tag, so you can easily swap out entire style sheets and re-theme your website faster than you can say ‘style sheets’! You’ll also see how to make the best use of absolute and relative URL paths.
  • Lecture 5.2: Let’s Get Styling: The Body Tag
    • It’s time to style your <body> tag via CSS. Never suffer distorted background images again by learning how to properly use a background image via the ‘background-image’ and ‘background-size’ CSS rules.  You’re also going to see exactly how to set font colors via the ‘color’ rule, font sizes via the ‘font-size’ rule, and text line spacing via the ‘line-height’ rule. There’s no faster way to improve your style than watching this lecture!
  • Lecture 5.3: Content-Wrapper: Our First ID Selector
    • Content wrapper? What’s wrapped inside? Chewy content goodness, that’s what! We’ll show you how to quickly give yourself a handy visual assist while coding by using the ‘border’ rule to make your invisible divs temporarily visible while you’re building.  We’re also going to take you through the ‘max-width’ and  ‘margin’ CSS rules as well so that your content will be centered and sitting pretty, just where you want it.
  • Lecture 5.4: Taking a Bigger Bite: The Page Title and Separator
    • When is a box a box? When we create a ‘box’ class of course! You’re going to see exactly how to create and style up the ‘box’ class that lets all the boxes on your webpage share the same rounded corners – and you’ll only have to set it up once! Then we’ll introduce you to the ‘announcement’ ID where you’ll see for the first time how to apply multiple attributes to the same HTML tag get exactly the look you want with as little coding as possible. And did we mention? You’ll also get to see just how the ‘border-radius’, ‘background’, ‘padding’, ‘box-sizing’, and ‘font-weight’ CSS rules work. There’s so much CSS goodness in this lecture.
  • Lecture 5.5: First Content Box
    • When is a box a box? When we create a ‘box’ class of course! You’re going to see exactly how to create and style up the ‘box’ class which lets all the boxes on your web page share the same rounded corners – and you’ll only have to set it up once! Then we’ll introduce you to the ‘announcement’ ID where you’ll see, for the first time, exactly how to apply multiple CSS selectors and attributes to the same HTML tag to get exactly the look you want with as little coding as possible. And did we mention? You’ll also get to see just how the ‘border-radius’, ‘background’, ‘padding’, ‘box-sizing’, and ‘font-weight’ CSS rules work.  There’s so much CSS goodness in this lecture.
  • Lecture 5.6: Styling Up Our Left and Right Boxes
    • It’s time to style up our two main content boxes on the left and right of our design. We’ll show you a quick trick using the ‘min-height’ CSS rule to make sure your boxes will always be proportional to each other.
  • Lecture 5.7: Positioning Our Boxes
    • Ever wonder how to get different webpage elements positioned just right, when going from left to right? Then you’re in the right place! In this lecture you’ll see how to use CSS floats using the ‘float’ rule, as well as where and how you can apply them to position your design elements perfectly, and responsively. We’ll also demonstrate how you can fix a really common bug that happens when using floats by taking advantage of the CSS ‘clear’ rule.
  • Lecture 5.8: Adding Titles to Our Boxes
    • We’ll walk you through, step-by-step, exactly how to add some unique style choices to the blue title bands at the top of your left and right content boxes.  By the time this lecture is done you’ll know exactly how to use the ‘border-top-left-radius’ and ‘border-top-right-radius’ CSS rules. We’ll also add to your bag of CSS tricks by showing you how to use negative margin values to cancel out bits and pieces of your code, but only where you want to, in order to really fine tune your design.
  • Lecture 5.9: Lists!
    • This lecture is list-tastic! You’re going to learn all about lists, how they work, what they can be used for (hint: more than just listing things), and how to get them looking just how you want by using the ‘list-style-type’ CSS rule.
  • Lecture 5.10: Responsive Design Using Conditional CSS
    • Responsive design doesn’t have to be hard. Stop searching for a great explanation for how it all works and watch this lecture NOW! You’ll learn all about the powerful @media() CSS tag and how you can use it to conditionally turn on and off any given set of CSS rules… automatically. This is the powerful technique that will let you build responsive webpages that look great on all devices.
  • Lecture 5.11: Finishing Up with Social Media Links
    • Hold on tight… you’re almost done! We’re going to show you how to finalize the HTML code for your social media icons and style them to suit your taste using CSS.   And last, but not least, you’ll put the finishing touches on your web page, to get your HTML and CSS code shipshape and looking totally professional.  We’ll even show you how to use two more CSS rules before we’re done, ‘vertical-align’ and ‘display’.  Wow!