PSD to HTML5/CSS3: Hand Code a Beautiful Website in 4-Hours!

Learn how to take a PSD and turn it into a beautiful, hand-coded HTML5 & CSS3 website with this web design crash course. | taught by Brad Hussey Watch Intro Video
  • 16 Videos
  • 4 Quizzes
  • 6 Texts
  • 4.0 hrs

Course Curriculum

Welcome To PSD To HTML5 & CSS3
Show Content
What we are building
What you need to start
Setting up our folder structure
Code chunks
Show Content
Becoming familiar with the layout
Gathering assets & saving for web
Photoshop Pop Quiz!
Show Content
Coding an HTML5 Skeleton
Coding the "Header"
Coding the "Content Section"
Coding the "Footer"
HTML5 Pop Quiz!
Show Content
Adding a Stylesheet to your Website
Normalize vs. Reset: What is the difference?
Global Styles & Typography
Layout: Styling the Navigation Bar
Layout: Styling the Header
Layout: Styling the "Content Section" -- Part I
Layout: Styling the "Content Section" -- Part II
Layout: Styling the Footer
CSS3 Pop Quiz!
Show Content
Validating your HTML5
Validating your CSS3
Validation Pop Quiz!
Show Content
Show Content

Course description

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.

View the final website you will be building right here:

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, and you can check out his website here:

So, what are you waiting for?

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

Build a Free Wordpress Blog in 5-minutes!

Do you want to know how to get up and running with your own domain and hosting in no time? In my free course, Web Hosting 101 I show you how to buy a domain name and hosting package, and then I top it off with a tutorial on how to set up a Wordpress Blog in 5-minutes!

Code a Responsive Website with Twitter Bootstrap 3

Do you want to learn how to code your first responsive website using the newly released Twitter Bootstrap 3? In my new course, Code a Responsive Website with Bootstrap 3 we will dive into hand-coding custom responsive layouts, sliding carousels, beautiful buttons, device-specific elements, scalable font icons, and so much more! This course includes all HTML5, CSS3, jQuery, and even Photoshop files for you to use for free in your own websites & applications. Check out some of the free lectures here!

Category: Development / Web Development

    • Adobe Photoshop CS3 or higher
    • Very basic knowledge of HTML & CSS
    • Text Editor (TextWranger, Espresso, or Coda recommended)
    • Over 23 lectures and 4 hours of content!
    • 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
    • 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!
Read More


Brad Hussey
Brad Hussey

Brad Hussey is a passionate and experienced web designer, developer & entrepreneur. Originally from Yellowknife, Northwest Territories. Brad is a graduate of theInteractive Design program at Capilano University in Vancouver, British Columbia.

No stranger to the industry, Brad began working professionally as a web designer during his first year at University and has had the privilege of working with numerous businesses, large and small, across North America. Brad works as a web developer at his company Brightside Studios and blogs about minimalism & location independence.