Learn HTML5 & CSS3 in 3 Hours: A Responsive Webpage Tutorial
4.3 (19 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.
242 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learn HTML5 & CSS3 in 3 Hours: A Responsive Webpage Tutorial to your Wishlist.

Add to Wishlist

Learn HTML5 & CSS3 in 3 Hours: A Responsive Webpage Tutorial

Learn how to build custom responsive landing pages in under3 hours from scratch! No experience necessary!
4.3 (19 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.
242 students enrolled
Last updated 7/2015
Price: $40
30-Day Money-Back Guarantee
  • 3 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • A 100% customizable responsive landing page, that you will build from scratch, using HTML5 & CSS3 (that's also SEO friendly)
  • Be able to make quick design and content changes to your existing websites, landing pages and WordPress sites, all by yourself!
  • Turn your ideas for a website into a clear and useable wireframe
  • Add a highly marketable skill to your resume in about 3 hours
  • Read, write and understand HTML5 and CSS3 code - even if you've never coded before!
  • Take advantage of free technical resources online that will finally make sense now that you have a solid base in HTML & CSS
View Curriculum
  • A computer with internet access (you're using one now)
  • A desire to finally learn about HTML5 and CSS3 and how to read and write your own code, for any reason
  • A pen and paper for taking notes. Taking notes is scientifically proven to help you better retain information

We understand first-hand how frustrating it can be trying to learn how to use new technologies in a short amount of time. And because mastering a new skill isn't usually easy, we decided to do something about that by breaking this course down into easily consumable bite-sized chunks that make the concepts not only super clear, but also really memorable - pretty quickly.

Instead of just showing you how to "paint by numbers", like most courses do, we'll be showing you why the code works like it does so you'll be able to actually take that knowledge and apply it anywhere.

That means you'll be able to do awesome things like being able to bootstrap your business, market on a shoestring budget, or just learn a highly marketable skill to boost your resume or CV - all in about about 3 hours!

Over the course of these 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.

Who is the target audience?
  • Entrepreneurs who are looking to get a landing page up for their business or idea now, without having to hire a designer or developer to do it for you.
  • Business owners and marketing people who want to be able to make quick design or content changes to their websites, landing pages or WordPress sites without having to ask, wait or pay for a developer to do it for them!
  • Marketers or project managers needing to improve their skills to help them at work.
  • People who have never coded before and would like to gain the skills and knowledge they need to add a highly marketable skill to their resumes, really quickly.
  • This tutorial is probably not for you if you hate computers and don't want to learn a new skill that can help you get ahead at work or start your next venture.
Curriculum For This Course
27 Lectures
2 Lectures 06:21

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.

Preview 02:03

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.
The Tools of the Trade (Hint: They’re All Free!)
Wireframing & Setting the Stage
3 Lectures 10:45
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.
What is Wireframing? And Why You’ll Never Design Without It Again

Time to get our hands dirty… by sketching out our wireframe.

Preview 02:56

Every file needs a home. We'll show you where to put everything so your projects just works.

Your Website’s File Structure and Additional Assets
HTML – The Bare Bones of Your Project
4 Lectures 31:09

Learn all about HTML tags, and make friends with the <h1> and <br> tags. We promise, you'll like them.

Preview 04:13

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.

Web Page Construction – the Head and the Body

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.

Introducing Block & Inline Tags

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!

Building the Page Body and Content
CSS Basics
7 Lectures 34:49

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.

Preview 04:31

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.
How Does the Browser Know CSS from HTML?

Learn all about the three main building blocks of CSS and when to use each of them: Tag selectors, Class selectors, and ID selectors.
Tag, Class & ID Selectors – The 3 Main Building Blocks of CSS

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.
Establishing Common Vocabulary

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.
The Importance of RESETS

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.

Color It Up! How to Use Colors in CSS?

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).
Font This, Font That, Font You!
Putting CSS to Work!
11 Lectures 01:46:56
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.
Start with the HTML File

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!

Let’s Get Styling: The Body Tag

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.

Preview 08:09

Everyone likes to be properly introduced using their correct title. Your responsive web page is no different. In this lecture we'll show you exactly how to style your page's title using the <h1> tag, and we'll get you really comfortable with the 'margin' and 'text-align' CSS rules along the way. Last but not least, you're going to learn all about the CSS 'width' rule and how you can apply it to your images to quickly make them responsive and scalable.

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.

First Content Box

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.
Styling Up Our Left and Right 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.

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

Adding Titles to Our Boxes

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.


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.
Responsive Design Using Conditional CSS

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!
Finishing Up with Social Media Links
About the Instructor
HackStack.io Tutorials
4.3 Average rating
19 Reviews
242 Students
1 Course
Bite-Sized Tutorials for Busy People

Whether you are looking to enhance your career, polish up some rusty skills, or finally launch that business you have been dreaming about, we believe our selection of short, “stackable" tutorials will give you the skills and confidence you need to succeed in whatever your passion is.

Petr Kout
4.3 Average rating
19 Reviews
242 Students
1 Course
Co-Founder, Technical Stack @HackStack.io

Petr is originally from a small town outside of Prague, in the Czech Republic. Currently living in NYC, he is both a physics researcher, engineer, and a talented developer. Passionate about the sciences and their application in technology, he has built everything from e-commerce websites to autonomous flying drones. He is experienced in over a dozen programming languages and developmental frameworks and enjoys tutoring and helping others learn as much he as does creating amazing things.

James York
4.3 Average rating
19 Reviews
242 Students
1 Course
Co-Founder, Business Stack @HackStack.io

James is a multi-hat wearing problem solver with a talent for taking concepts from idea to reality. An entrepreneur and consultant with a background in finance, real estate and technology startups in New York and Europe, James enjoys sitting at the crossroads of technology and business - leveraging elements of each to advance the other. He lives in New York with his wife, new son and a 19lb blonde norwegian forest cat named Lars.