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.
181 reviews
TAUGHT BY
  • Brad Hussey Pro Web Slinger at Code College

    A highly skilled professional, Brad Hussey is a passionate and experienced web designer, developer, blogger and digital entrepreneur. Hailing from North Of The Wall (Yellowknife, Canada), Brad made the trek to the Wet Coast (Vancouver, Canada) to educate and equip himself with the necessary skills to become a spearhead in his trade of solving problems on the web, crafting design solutions, and speaking in code.

    Brad's determination and love for what he does has landed him in some pretty interesting places with some neat people. He's had the privilege of working with, and providing solutions for, numerous businesses, big & small, across the Americas.

    Brad builds custom websites, and provides design solutions for a wide-array of clientele at his company, Brightside Studios. He regularly blogs about passive income, living your life to the fullest, and provides premium quality web design tutorials and courses for tens of thousands of amazing people desiring to master the craft.

    61,000 Students Don't Lie

    Join Brad and adventure into his world of web design, web development, and speaking in code. You won't regret it!

    What are people saying about Brad?

    "...Brad is amazing and I honestly think he's the best tutor of all the courses I have taken on Udemy. Will definitely be following him in the future. Thanks Brad!" — Brad's student

    "...Brad has an infectious enthusiasm, a great eye for detail, and expert-level knowledge of the material." — Brad's student

    "...These videos are well created, concise, fast-paced, easy to follow, and just funny enough to keep you chuckling as you're slamming out lines of code. I've taken 3 courses from this instructor. Whenever I have questions he is right there with a simple solution or a helpful suggestion to keep me going forward with the course work." — Brad's student

WHAT'S INSIDE
  • Lifetime access to 24 lectures and 4 quizzes
  • 4+ hours of high quality content
  • A community of 37900+ students learning together!
  • 210+ discussions
SHARE

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.
181 reviews

HOW UDEMY WORKS?

Discover courses made by experts from around the world.

Take your courses with you and learn anytime, anywhere.

Learn and practice real-world skills and achieve your goals.

COURSE 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!

    • Adobe Photoshop CS3 or higher
    • Very basic knowledge of HTML & CSS
    • Text Editor (TextWranger, Espresso, or Coda recommended)
    • Over 24 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!

THE UDEMY GUARANTEE

30 day money back guarantee
Lifetime access
Available on Desktop, iOs and Android
Certificate of completion

CURRICULUM

  • SECTION 1:
    Introduction
  • 1
    Welcome to PSD to HTML5 & CSS3
    Text
    A brief introduction of the course.
  • SECTION 2:
    Preparation
  • 2
    What we are building
    Text
    A brief overview of the Photoshop Mockup we will be coding.
  • 3
    What you need to start
    Text
    This lecture lists everything needed in order to start building your HTML5 & CSS3 website.
  • 4
    Setting up our Folder Structure
    Text
    This lectures covers how to set up a simple folder structure to lay the foundation of building a website.
  • 5
    Code Chunks
    Text
    This lecture contains a "Code Chunks" folder that includes individual HTML & CSS files for reference throughout the course.
  • SECTION 3:
    The PSD
  • 6
    Becoming Familiar with the Layout
    Text
    This lecture outlines the Wireframe, and all of the most common elements used in building a website.
  • 7
    Gathering Assets & Saving for Web
    20:14

    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
  • 8
    Photoshop Pop Quiz!
    3 questions
  • SECTION 4:
    HTML
  • 9
    Coding an HTML5 Skeleton
    13:50
    In this lecture, we start laying the foundation for our website by hand-coding the HTML5 skeleton.
  • 10
    Coding the "Header"
    11:57
    In this lecture we hand-code the HTML5 for the "Header" section of the website.
  • 11
    Coding the "Content Section"
    13:43
    In this lecture, we hand-code the HTML5 for the "Content" section of the website.
  • 12
    Coding the "Footer"
    06:51
    In this lecture, we hand-code the HTML5 for the "Footer" section of the website.
  • 13
    HTML5 Pop Quiz!
    4 questions
  • SECTION 5:
    CSS
  • 14
    Adding a Stylesheet to your Website
    03:19
    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.
  • 15
    Normalize vs. Reset: What is the difference?
    04:05
    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.
  • 16
    Global Styles & Typography
    20:15
    In this lecture, we begin styling our website with CSS3.
  • 17
    Layout: Styling the Navigation Bar
    25:41
    In this lecture, we use CSS3 to style the Navigation section of our website.
  • 18
    Layout: Styling the Header
    27:25
    In this lecture, we use CSS3 to style the Header section of our website.
  • 19
    Layout: Styling the "Content Section" — Part I
    15:55

    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.

  • 20
    Layout: Styling the "Content Section" — Part II
    16:48
    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 :)
  • 21
    Layout: Styling the Footer
    26:13
    In this lecture, we use CSS3 to style the Footer section of our website.
  • 22
    CSS3 Pop Quiz!
    3 questions
  • SECTION 6:
    Validation
  • 23
    Validating your HTML5
    03:33
    In this lecture, we validate our HTML5 and fix any major errors or bugs that may have creeped into our code.
  • 24
    Validating your CSS3
    12:22
    In this lecture, we validate our CSS3 and fix any necessary errors or bugs that may have creeped into our code.
  • 25
    Validation Pop Quiz!
    3 questions
  • SECTION 7:
    Conclusion
  • 26
    Review
    02:03
    In this final video, we briefly review the material of the course.
  • SECTION 8:
    Brand New Bonus Lectures!
  • 27
    How to Buy Domain & Hosting for your Website
    13:35

    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!

  • 28
    How to Code a CSS Sticky Footer
    08:11

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

UDEMY BY THE NUMBERS

5,200,000
Hours of video content
19,000,000
Course Enrollments
5,700,000
Students

RATING

  • 122
  • 40
  • 11
  • 3
  • 5
AVERAGE RATING
NUMBER OF RATINGS
181

REVIEWS

  • Brian Matis
    Great, easy to follow course

    I really enjoyed this course! It's been almost 10 years since I had done any extensive html and css work and I really wanted a quick refresher. This course helped bring me up to speed on some more modern techniques and I used it to great success in redoing an old site of mine. Thanks!

  • Allan Reid
    Font is too small

    I can't read any of the content...

  • TeachMe Productions
    Great course (Straight to the point)

    Brad has great presentation skills and covers a lot of concepts and knowledge in a very detailed and efficient manner. I highly recommend this course

  • Teri Castle
    Great content and great explanations

    I enjoy Brad's classes having taken a few. He does a great job of explaining why he is doing something and the code chunks help when I need to look at the final code.

  • Castor Milano
    God job!

    Although some things are taken for granted, the spirit of the course is cool. Brad has a great attitude and for beginners the course can be quite enlightening.

  • 30 day money back guarantee!
  • Lifetime Access. No Limits!
  • Mobile Accessibility
  • Certificate of Completion