Learn To Build Beautiful HTML5 And CSS3 Websites In 1 Month
4.8 (425 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.
18,904 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learn To Build Beautiful HTML5 And CSS3 Websites In 1 Month to your Wishlist.

Add to Wishlist

Learn To Build Beautiful HTML5 And CSS3 Websites In 1 Month

The fastest way to learn HTML5/CSS3 & how to build websites that wow. Great for designers, entrepreneurs, & beginners!
4.8 (425 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.
18,904 students enrolled
Created by Ryan Bonhardt
Last updated 6/2014
English
Curiosity Sale
Current price: $10 Original price: $50 Discount: 80% off
30-Day Money-Back Guarantee
Includes:
  • 11 hours on-demand video
  • 4 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • At the end of this course HTML and CSS will no longer be a foreign language to you. Instead you will already have built your first couple sites and have the skills to build many others. You'll be a part of the 1% of people that actually know how to build things online and have a life-changing new skill set - the power to code and create.
View Curriculum
Requirements
  • computer
  • desire to learn fast and effectively
Description

"Man, I would have to say this is hands down the best course ever! I've done a ton of certifications, training, and real-world experience in other areas of IT. Nothing I've done so far has been as rewarding and I felt like making something and actually have the necessary skills to do so, without looking elsewhere." - Cortell

----------------

Maker-Based HTML & CSS is a project-based course that will show anyone, even a complete beginner how to build beautiful websites. Through a series of video lessons and tutorial you’ll build 4 different websites - a landing page, blog template, magazine layout page, and your very own portfolio page to show off your work.

When you sign up you get immediate access to your own virtual classroom where you can take lessons at your own pace, ask us questions, and chat live with other students. Along the way you will learn all you need to know about HTML, CSS, SEO, hosting your site, building beautiful sites fast, Bootstrap, adding social sharing, and other bonus goodies to test your business ideas. You’ll be an HTML and CSS ninja.

This Course Is Great For

Entrepreneurs

Want to build an online business? Than this is the course for you. You’ll learn HTML & CSS fast and have your first landing page up in less than a week to test your idea.

Josh Hagler took his knowledge from this course to test his business idea and build the website for his college startup RoomScapeU. Jay Mayu took our course and in less than a week had his first paid client. You can achieve these results too

Designers who want to get better jobs and increase their salary

Nowadays companies are looking for more than just a graphic designer. They’re looking for designers that can make their designs come to life on a webpage through HTML and CSS. Don’t take our word for it? Listen to our students:

Around two months ago I graduated from the University of Applied Sciences in Rotterdam as a User Experience Designer. Pretty awesome but soon I discovered there was not a lot of work in this area of expertise. So to enhance my chances for a suitable job I decided to improve my front-end skills. Every company wants people with programming skills nowadays. Since I advertised that in my motivational letters and mentioning it in my CV I have multiple invitation from companies to get to know each other." -- Ruud Visser, Graduate from University of Applied Sciences in Rotterdam

Coders that want to learn HTML and CSS fast

Excellent course that exposed me step-by-step to the world of web design. I come from a computer programming background and never really had to build a site from scratch. This was a great tool in pushing me to be a more well-rounded tech person. - Khalid

Complete beginners

Absolutely awesome! I recommend this course to anyone who feels like learning to code is too hard to start off with, because it really isn't. I thought it was too hard, but Ryan makes it look really easy with his step for step increase in difficulty. I built my own website within a week after starting this course, and it looks really great. Keep it up, Ryan! -- Robert de Kok

Those that have tried to learn HTML and CSS before and stopped

This is the first time I was able to go from start to finish with making an entire site. I have done other training before but they don't ever seem to close it off at the end. This class went over everything needed to make a site. I would love to find other courses like this. I also did not feel dumb mid way through the course due to lack of explaining. Everything was well documented and covered. Very good job on this thanks. - Jay Mims

Hustlers who want promotions

Man, I would have to say this is hands down the best course ever! I've done a ton of certifications, training, and real-world experience in other areas of IT. Nothing I've done so far has been as rewarding and I felt like making something and actually have the necessary skills to do so, without looking elsewhere. Thanks for this, I am at a loss for words; I hope this helped articulate how thankful I am. Thank you! -- Cortell Shaw

What you will learn

- CORE FUNDAMENTALS: I’ll teach you how to use a text-editor and the fundamentals of HTML and CSS so that you can put up any site you want.

- RAPID DEVELOPMENT: By learning to use powerful frameworks and tools such as Bootstrap, Font-Awesome, Google Forms and more, you'll be able to put up sexy, startup quality sites fast

- HTML5 & CSS3 to make your site look fresh and new. You'll learn the rules and practices of the newest languages. No outdated teachings or 1990s looking sites here!

- RESPONSIVE DESIGN: Designing for web is no longer for just your computer or laptop. We'll teach you responsive design so your site looks great on all devices.

- NO STAKES PRACTICING: How to use browser tools to play around and see live changes on sites so that you can learn faster and explore the HTML and CSS of the best looking websites

- BEAUTIFUL VISUALS: You’ll learn how to include professional style graphics and icons in your site for free

- COMPLETE KNOWLEDGE OF CSS AND HTML YOU WILL USE WHEN BUILDING SITES: links, lists, positioning, images, fonts, background properties, and any thing else you'll encounter when designing and developing a website

- MULTIPLE SITE LAYOUTS: When you're done with this course you'll be able to make any site you can dream up. Whether its a simple tower site, to a blog template, to a complex magazine layout you'll have the power in your hands to whip it up.

- SEO AND SOCIAL SHARING OPTIMIZATION: You don't want to work hard and create a beautiful site for it to just disappear into the internet abyss. You want people to be able to find your site and easily share its beauty. SEO and social sharing is just as an important part of HTML as anything else and you'll have the foundational knowledge you need after this course.

And I won’t stop where most other courses stop. I'll teach you:

- FREE HOSTING: how to save over $100 a year in hosting fees

- INSTANT DEPLOYMENT: how to host your site live online QUICKLY

- YOUR OWN CUSTOM DOMAIN NAME: how to buy a domain name and put your site up on it.

- GOODIES FOR ENTREPRENEURS: how to grow your site's visitors and test your business ideas - quick and for free.

- ADDED FINISHING TOUCHES: bonus lessons with javascript are hidden throughout to show you how to include some subtle magic that really wows the user. You're going to love these sections!

When you're done with this course...

HTML and CSS will no longer be a foreign language to you. Instead you will already have built your first couple sites and have the skills to build many others. You'll be a part of the 1% of people that actually know how to build things online and have a life-changing new skill set - the power to code and create.

With your new found knowledge of HTML and CSS you'll be able to separate yourself from others in a job search, follow your passion, explore a new career path, the possibilities are endless.

Why take this course versus the other HTML and CSS courses?

Here’s the deal… there’s the difference between knowing how to build a site with HTML5 and CSS3 and knowing how to build one that really wows! Whether its for looks, increasing sales, growing email lists, making your blog look professional or even making a personal page to start getting yourself online, you need to know how to make a site that functions how you want it and that separates you from the average person building average sites online. This course will do that. It’s the difference between being able to create and being able to not only create but impress with some added finishing touches. Its that aha moment - that’s what we’re going for when someone comes to our site and we’re going to teach you how to develop that.

  • Learn fast - its not made from old outdated teaching methods where you learn everything up front and then start building. No that's boring, frustrating, overwhelming and just plain unecessary. In this course you're going to start building your first site from the beginning. The result, you'll stay engaged and enjoy the interactive nature of this new type of learning.
  • You're not learning to build outdated looking sites - you're learning to build sites that are fresh and up with the modern times.
  • You're learning the newest technologies, not just HTML5 and CSS3 but other tools as well that will save you time, and help you make sites that amaze your users
  • An added bonus of teaching you how to host your site for FREE. That alone saves you over $50 a year.

So why not sign up today? Why not start investing in your future today? Click the button to start learning now.

Who is the target audience?
  • beginners
  • people interested in webdesign and webdevelopment
  • non-programmers
  • entrepreneurs
  • students with an interest to build things online
Students Who Viewed This Course Also Viewed
Curriculum For This Course
80 Lectures
10:55:37
+
Getting Started
7 Lectures 28:56

Lets take a quick look at what we'll be building throughout the course and the tools we need to get started

Preview 01:43

Thanks for taking this course! I'm excited for the benefits for you and the sites that will come of having this new life-changing skill set. Here's a quick guide for you to get the most out of the course.

This Guide Will Be Your Course Friend
01:02

Use these suggestions to crush this course and be building awesome sites in no time.

Preview 03:23

Let's dive into bootstrap and get your first site up.

Preview 03:59

Become familiar with the different types of tags throughout this course and how to open and close each.

Preview 07:29

Let's drill home some HTML basics!

HTML Basics
02:35

Practicing Your HTML
6 questions

Bootstrap offers a handful of templates for you to jumpstart your site's creation process. We'll learn how to grab any of these templates we want.

Preview 08:44
+
Your First Site: Getting Your Feet Wet With HTML And CSS
8 Lectures 01:02:25

In this lesson we'll explore how to combine templates, use Chrome's dev tools, and utilize Bootstrap's native components to start putting together the site fast.

Preview 09:06

Divs are all over HTML documents. Understand divs and you'll be like an HTML magician. Feel the power!

Preview 07:41

Quick Review
7 questions

CSS controls the style of your site. Make your first CSS rule and start transforming the site from boring text to sexy startup quality.

Preview 06:07

Lets take a quick moment to learn more about CSS

More CSS Fun
10:34

If you've ever heard of Steve Jobs you know that fonts are critical in the design of a product. Let's learn to put any font you want into your website.

Get Your Font On
04:55

Fonts can be the difference between a beautiful, sexy site and a generic, template-looking site. We don't want template-looking sites. We want sexy, slick sites. So lets cover the big three of fonts:

Making Fonts Look Good
02:31

Every html element is a rectangular box. Understand this along with what margin, padding, and border and you’re on your way to being a website ninja

The Box Model
09:21

Lets go through how to add images to your site so that it really pops, both through HTML and CSS. And now we'll be done with the top section. Pat yo' self on the back!

Bringin' In The Images
12:10

Quick Review
10 questions
+
Your First Site: Rounding Out Your Skills With The Bottom Section
13 Lectures 01:29:39

Lets go into bootstrap's grid system so you can learn to make the site look exactly however you want it. With the added understanding of floats you can build any complex-looking site.

The Grid System
07:07

Use links to control the flow of users from and through your site. In this lesson we cover the different types of links

Linking It Up
05:20

Quick Review
7 questions

Learn how to bring in Google Forms. An awesome, free tool to get feedback from you site users and put a sense of interactivity in your site

BONUS SECTION: Google Forms
03:24

Font-awesome allows you to include professional quality icons in your site free and easy to give it that extra pop.

Font Awesome Is Awesome
09:02

Spans let you style inline-elements. Use it if you want to make certain words, phrases, or other inline elements stand out with a different color or style.

Playing With Spans
02:50

Through working on the get-involved section we learn and revisit many text-based CSS properties as well as see how to give the same CSS rule to multiple different HTML elements.

Styling The Get Involved Section
12:50

Let’s learn how to center block elements

Centering Block Elements
06:11

In this lesson you’ll see the power of assigning classes to elements when you want multiple elements to have a similar style. It’s a beautiful thing!

The Benefits Of Using Classes
04:16

We’re rockin’ and rollin’ now as we style links for when users hover over them and get an introduction to pseudo-classes.

Hello Hover
02:57

Lets learn how to style full-width background colors in order to give our some subtle design beauty

Beautification Through Background Colors
06:57

In this lesson we’ll learn about the benefits of IDs and when to use them versus classes

All About IDs
07:44

Quick Review
9 questions

A quick styling of the footer section and you have yourself your first website. Do a dance!

Finishing Off With The Footer
03:32

We'll make the site look good across all devices with some responsive design and your bonus intro to the awesome world of Javascript

Responsiveness: Making Your Site Look Good On All Devices
17:29
+
Your First Site: Getting Your Site On The Web For The World To See
4 Lectures 18:27

Let’s get yo' site live and online with Forge for the world to see.

Getting Your Site Live Online With Forge
00:08

Dropbox allows you to put up sites free and fast. Lets look at another option Github that has the same benefits but also gives you a more human friendly URL

Getting Your Site Live With Github
09:23

Let’s get you your first very own custom domain name!

How To Get Free Hosting And Use Your Custom Domain Name
07:29

Now that we know the building blocks of CSS and HTML as well as how to get our sites live online what’s next?

What's Next?
01:27
+
Your First Site: Adding Goodies With Advanced HTML, CSS, & Some Bonus Javascript
13 Lectures 01:48:52

Let's start putting some magic into our site with some cool, subtle scrollspy

BONUS: Scrollspy Magic
10:24

Let's put some smooth transitions in our tower page links with a smooth scrolling feature.

BONUS: Smooth Scrolling
13:11

Let's explore a new type of positioning

Fixed Positioning
09:42

Now we'll round out our knowledge of types of positioning with absolute and relative positioning

Absolute And Relative Positioning
03:26

Bring in modals to add interactivity and give your user more information on a topic.

Modal Magic
03:11

Let's learn about iframes by bringing in a youTube video

iFrame, You Frame, We All Frame
11:37

Quick Review
4 questions

A quick intro into youTube player paramenters to give our youTube videos a site-customized look

YouTube Videos
03:43

Move into the ranks of website ninjas as you learn how to center absolute elements. This is a crazy cool power to have.

Centering Absolute Elements
09:13

Let's learn about stacking with the z-index

The Z-Index
04:43

Quick Review
3 questions

Want to test a business idea or sell products on your site? Gumroad is your answer

BONUS: Making Money With Gumroad
08:40

A quick, free way to build an email list. Mailchimp will be your friend

BONUS: Grabbing Email Addresses With Mailchimp
05:12

Forms allow users to interact with your site. Lets learn how to include them in yours

All About Forms
12:54

Now that we know all about the important parts of forms lets style them to look good on our site

Styling Forms
12:56
+
Building A Blog Template
12 Lectures 02:16:24

We’ll continue to round out our knowledge of HTML and CSS while we build a blog template

Lets Get Started
04:56

We’ll get some common styling set up with the body’s font-family and bring in a navbar

Setting Up The Blog
07:36

With all the possibilities of text and font styling in CSS you can create your own unique logos and brands directly in the browser.

Advanced Styling Of Fonts With CSS
08:29

Lets “google”-ize our blog’s look through child pseudo-elements

Child Pseudo-Elements
15:27

Lets get specific and creative with our styling via pseudo-selectors

More Pseudo Selectors
12:49

We’ll revisit many CSS and HTML principles as we style out our blog posts.

Styling Our Blog Posts
19:10

Its important to have a way for your readers to subscribe to your blog. Let’s revisit forms and create a way.

Subscribe Box
20:06

Take a walk down Mailchimp memory lane and give your subscribe form functionality

Mailchimp Revisited
06:55

In this lesson we learn advanced tactics to keep users on our site as they sign up for our email list.

BONUS: Advanced Mailchimp Shenanigans
10:03

Let's get into some list-styling skills

Styling Lists
18:04

Remember responsive design? Lets do a quick revisit as well as touch up our footer.

Revisit Responsiveness And Edit Footer
05:32

Let’s visit our sumo friends to get some amazing tools to significantly increase our site’s newsletter signups and social shares. Oila, Magic!

BONUS: Jedi Tools For Increasing Signups And Shares
07:17
+
Building A Blog Template: Advanced HTML And CSS Topics
12 Lectures 02:06:43

Let’s add some share buttons to our posts and learn about how to vertical-align inline elements.

Share Buttons And Vertical Alignment
14:29

FB Meta tags allow us to determine the look of our shares and optimize them for increased sharing and SEO.

Social Meta Tags
06:48

Learning the key basics of SEO is a very important part of learning HTML. After all, you do want people to be able to find your site online.

SEO
04:30

Sometimes you want some simple spacing between divs or you don’t want a div to span the whole width of the page.

Offsetting Columns
07:07

Knowing float is the key to making complex website layouts.

Let's Float
14:11

Is your page content short and your footer half way up the screen? Let’s fix that with a sticky footer.

Sticky Footer
04:07

In this lesson we learn how to create our own multi-column layout.

Deep Dive Into Floats And Divs
14:50

We add a powerful skill to our repertoire of being able to style rows of columned divs and learn the “trick of clear fixes”. After this lesson you are officially a website building beast!

Styling Columns Of Divs
13:01

Lets learn even more ways to make complex layouts with nested columns.

Nested Columns
10:34

Lets start setting up a nice landing page to welcome our site visitors

Setting Up A Landing Page
16:34

Have a little fun with all the different background possibilities

Background Properties
12:46

Put on the finishing touches and you have yourself a good looking blog template!

Finishing Up
07:46
+
Building A Full-Width Magazine Layout
11 Lectures 01:22:48

Let’s learn how to make an awesome, full-width magazine layout site

Let's Get Started
04:32

Lets take a walk down memory lane and revisit how to create a jumbotron section

Recreating A Jumbotron Section
07:46

We’ll add another tool to your website making arsenal with text shadows and revisit to rgba colors

Background Opacity And Text Shadows
07:03

We’ve learned in the past how to add Google Fonts to our site. Now let’s learn how to add fonts we have on our computer

Importing Fonts From Your Computer
03:41

Up to this point you’ve been working with fixed navbars. Now it’s time to learn how to create a static navbar

Static Navbars
09:26

And now it’s time to put the final touches on our beautiful, transparent navbar

Finishing Up The Navbar
05:55

Let’s learn how to make website layouts that span the width of the screen. Oh how the possibilities are endless now!

Fluid Containers
11:09

Sometimes you want to make entire divs clickable. Let’s learn how to do so

Linking Divs
07:35

Let’s finish it all up with a simple footer section

Finishing Up With The Footer
09:12

Did you try to do the responsiveness yourself? If not try to before you watch this video. I think you’ll surprise yourself at how much you know!

Revisiting Responsive Design
15:02

What's Next?
01:27
About the Instructor
Ryan Bonhardt
4.4 Average rating
6,675 Reviews
142,355 Students
2 Courses
Online Learning Enthusiast & Teacher at Maker-Based

Ryan Bonhardt is a self-directed learning enthusiast and self-taught web developer and entrepreneur. He believes in the power of education and has a life mission of empowering people to follow their passions, make money doing it, and to constantly test the system.

During college he decided he wanted to avoid "Corporate America", make money doing things he loved and live life as he wanted to. In the beginning it was rough and he STRUGGLED….but then he discovered how to learn skills rapidly and promote efforts he believed in. Since then he has founded Maker-Based, helped found a non-profit running across the USA for Sarcoma cancer research, lived in 10 cities, been a white water river guide, surfed across Latin America, and advised multiple businesses and startups. His goal is to always love what he's doing and do what he loves - to learn something new and add value daily.

At Maker-Based we aim to better education through content and delivery. We believe every day there is a growing gap between what students should be and are learning. We aim to lessen that gap by teaching you skills that are relevant today - to enable you to follow your passion and do what you love. And we believe the most effective way to learn these skills is through project-based learning. We work to achieve this mission daily with online learning courses and our social venture of bringing coding into the school system.