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.5 (15 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.
236 students enrolled
$19
$40
52% off
Take This Course
  • Lectures 27
  • Length 3 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 7/2015 English

Course Description

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.

What are the requirements?

  • 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

What am I going to get from this course?

  • 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

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

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: Introduction
02:03

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.

04:18
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
01:22
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.
02:56

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

06:27

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
04:13

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

06:25

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.

04:42

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.

15:49

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
04:31

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.

03:48
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.
06:43
Learn all about the three main building blocks of CSS and when to use each of them: Tag selectors, Class selectors, and ID selectors.
02:49
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.
05:21
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.
06:10

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.

05:27
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!
04:27
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.
09:09

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!

08:09

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.

14:30

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.

12:18

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.

10:46
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.
07:16

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.

09:10

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.

08:24

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.

08:05
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.
14:42
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!

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

HackStack.io Tutorials, 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.

Instructor Biography

Petr Kout, 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.

Instructor Biography

James York, 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.

Ready to start learning?
Take This Course