Development
Web Development
CSS
Learn Web Designing & HTML5/CSS3 Essentials in 4-Hours
4.4 (972 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
46,277 students enrolled

Learn Web Designing & HTML5/CSS3 Essentials in 4-Hours

Convert Photoshop Designs into Stunning HTML5 & CSS3 websites with confidence. Absolutely no prior experience necessary!
4.4 (972 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
46,277 students enrolled
Created by Brad Hussey, Code College
Last updated 3/2016
English
English
Preview this course
Learn Web Designing & HTML5/CSS3 Essentials in 4-Hours
Current price: $51.99 Original price: $74.99 Discount: 31% off
5 hours left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 4 hours on-demand video
  • 7 articles
  • 8 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • In this course, you will learn how to slice up a Photoshop mockup and hand-code valid HTML5 & CSS3
  • By the end of the course, you will be able to turn a PSD into a beautiful, usable, and valid HTML5 & CSS3 website
Course content
Expand all 24 lectures 04:11:32
+ – Preparation
4 lectures 04:19
A brief overview of the Photoshop Mockup we will be coding.
What we are building
Preview 00:19
This lecture lists everything needed in order to start building your HTML5 & CSS3 website.
What you need to start
02:14
This lectures covers how to set up a simple folder structure to lay the foundation of building a website.
Setting up our Folder Structure
Preview 00:56
This lecture contains a "Code Chunks" folder that includes individual HTML & CSS files for reference throughout the course.
Code Chunks
00:50
+ – The PSD
2 lectures 21:03
This lecture outlines the Wireframe, and all of the most common elements used in building a website.
Becoming Familiar with the Layout
00:49

This lecture covers how to slice up your Photoshop Mockup and how to Save for Web & Devices.

Learning Outcomes

  • You will learn how to take a Photoshop Mockup and Save Optimized images and assets for use in your website
Gathering Assets & Saving for Web
Preview 20:14

A few quick questions to keep your brain in the game!

Photoshop Pop Quiz!
3 questions
+ – HTML
4 lectures 46:21
In this lecture, we start laying the foundation for our website by hand-coding the HTML5 skeleton.
Coding an HTML5 Skeleton
13:50
In this lecture we hand-code the HTML5 for the "Header" section of the website.
Coding the "Header"
11:57
In this lecture, we hand-code the HTML5 for the "Content" section of the website.
Coding the "Content Section"
13:43
In this lecture, we hand-code the HTML5 for the "Footer" section of the website.
Coding the "Footer"
06:51
A quick little quiz to jog your HTML5 memory!
HTML5 Pop Quiz!
4 questions
+ – CSS
8 lectures 02:19:41
In this lecture, we start the CSS3 section of the course. This simple video will show you how to hook a CSS file into your HTML file.
Adding a Stylesheet to your Website
03:19
In this lecture, learn the difference between Normalize.css and Reset.css and why one or the other may benefit you more in your web development.
Save some time by downloading the normalize.css file in the extras section of this lecture.
Normalize vs. Reset: What is the difference?
04:05
In this lecture, we begin styling our website with CSS3.
Global Styles & Typography
20:15
In this lecture, we use CSS3 to style the Navigation section of our website.
Layout: Styling the Navigation Bar
25:41
In this lecture, we use CSS3 to style the Header section of our website.
Layout: Styling the Header
27:25

In Part I of this lecture, we use CSS3 to style the primary "content" section of our website, including how to style "grid-style" columns.

Layout: Styling the "Content Section" — Part I
15:55
In Part II of this lecture, we use CSS3 to style the sidebar of our website.
Note: The volume in this video is, unfortunately, a bit quiet. Just be sure to turn your speakers up a bit :)
Layout: Styling the "Content Section" — Part II
16:48
In this lecture, we use CSS3 to style the Footer section of our website.
Layout: Styling the Footer
26:13

A pop quiz to jog your CSS3 memory!

CSS3 Pop Quiz!
3 questions
+ – Validation
2 lectures 15:55
In this lecture, we validate our HTML5 and fix any major errors or bugs that may have creeped into our code.
Validating your HTML5
03:33
In this lecture, we validate our CSS3 and fix any necessary errors or bugs that may have creeped into our code.
Validating your CSS3
12:22

Just a quick little pop quiz about validating your code.

Validation Pop Quiz!
3 questions
+ – Conclusion
1 lecture 02:03
In this final video, we briefly review the material of the course.
Review
02:03
+ – Brand New Bonus Lectures!
2 lectures 21:46

Learn how to purchase a domain name, a hosting package, install Wordpress and publish a blog post in 10 minutes or less with this step-by-step tutorial.

CHEAP BUT AWESOME HOSTING PACKAGES
Look no further for a hosting package for your website! I've recommended JustHost to my friends, my family, my clients and tens of thousands of my online students!
I also use JustHost for ALL of my personal & professional projects, and have been a very happy customer for 7 years. Hosting packages start as low as $3.95/month, Unlimited GBs of space, Unlimited Domain Hosting, Unlimited Email Accounts, and an Anytime Money Back Guarantee, you simply cannot go wrong with these guys.
You can purchase your domain & hosting by using this link: http://bradhussey.ca/justhost-psd2html (affiliate link)

Affiliate Disclaimer
The hosting link I provide in this video is my personal affiliate link. At no extra cost to you, I receive a small commission should you decide to purchase hosting with my link. Think of it as a "free tip"! I have personally used, tested, and have had an amazing experience with JustHost for 7 years now — I would NEVER recommend this service to you if I didn't 100% stand behind it :)
Should you decide to purchase hosting through my link, thank you so much, I truly appreciate it.

SPREAD THE LOVE
Did you like this video? Have I helped you out in any way? If so, please share the video with your friends on Facebook & Twitter.
Click this link to tweet the video: http://bradhussey.ca/tweet-host-tutorial

SUBSCRIBE FOR MORE
I provide more free tutorials, resources and write about my lifestyle at http://bradhussey.ca. Subscribe for free updates using this link: http://bradhussey.ca/subscribe.
Thanks for watching. You're the best!

How to Buy Domain & Hosting for your Website
Preview 13:35

In this lecture, we're going to learn how to code a CSS Sticky Footer.

How to Code a CSS Sticky Footer
08:11
Requirements
  • Adobe Photoshop CS3 or higher
  • Very basic knowledge of HTML & CSS
  • Text Editor (TextWranger, Espresso, or Coda recommended)
Description
** Course Updated November 26th, 2014! **
New lecture added: Code a CSS Sticky Footer

- - -

The Best Way to Learn HTML5 & CSS3

PSD to HTML5/CSS3 is a simple course that will teach you to take a Photoshop Mockup Design and hand-code it into a beautiful, semantic, valid HTML5 & CSS3 website.

Start Speaking the Language Right Away

Just like learning a human language, the best way of learning is by speaking from day 1—this course is similar in the sense that we'll begin speaking HTML5 & CSS3 right away!

I believe this is the best way to learn HTML5 and CSS3.

It's simple. It's easy. You can do it!

If you’ve always wanted to know how to build your own website, or have wanted a simple and comprehensive way to dive into PSD to HTML5 & CSS3, this course is definitely for you.

Real World Example

One of my students, who had no previous web design experience, took my course and ran with the skills he acquired. He built a brand new website for his Barbershop in Vancouver!

So, what are you waiting for?

Do you want to hand-code your first website in 4-hours? Let's do this!

Who this course is for:
  • This course is intended for beginners who have minimal knowledge or experience in Photoshop, and coding HTML & CSS
  • A very basic understanding of HTML, CSS, and Photoshop is recommended
  • First year web design students can greatly benefit from this course!