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

Convert Photoshop Designs into Stunning HTML5 & CSS3 websites with confidence. Absolutely no prior experience necessary!
  • Lectures 24
  • Video 5 Hours
  • Skill level all level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion

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.

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!

What are the requirements?

  • Adobe Photoshop CS3 or higher
  • Very basic knowledge of HTML & CSS
  • Text Editor (TextWranger, Espresso, or Coda recommended)

What am I going to get from this course?

  • 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

What is the target audience?

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

Curriculum

Section 1: Introduction
Text
A brief introduction of the course.
Section 2: Preparation
Text
A brief overview of the Photoshop Mockup we will be coding.
Text
This lecture lists everything needed in order to start building your HTML5 & CSS3 website.
Text
This lectures covers how to set up a simple folder structure to lay the foundation of building a website.
Text
This lecture contains a "Code Chunks" folder that includes individual HTML & CSS files for reference throughout the course.
Section 3: The PSD
Text
This lecture outlines the Wireframe, and all of the most common elements used in building a website.
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
Photoshop Pop Quiz!
3 questions
Section 4: HTML
13:50
In this lecture, we start laying the foundation for our website by hand-coding the HTML5 skeleton.
11:57
In this lecture we hand-code the HTML5 for the "Header" section of the website.
13:43
In this lecture, we hand-code the HTML5 for the "Content" section of the website.
06:51
In this lecture, we hand-code the HTML5 for the "Footer" section of the website.
HTML5 Pop Quiz!
4 questions
Section 5: CSS
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.
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.
20:15
In this lecture, we begin styling our website with CSS3.
25:41
In this lecture, we use CSS3 to style the Navigation section of our website.
27:25
In this lecture, we use CSS3 to style the Header section of our website.
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.

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 :)
26:13
In this lecture, we use CSS3 to style the Footer section of our website.
CSS3 Pop Quiz!
3 questions
Section 6: Validation
03:33
In this lecture, we validate our HTML5 and fix any major errors or bugs that may have creeped into our code.
12:22
In this lecture, we validate our CSS3 and fix any necessary errors or bugs that may have creeped into our code.
Validation Pop Quiz!
3 questions
Section 7: Conclusion
02:03
In this final video, we briefly review the material of the course.
Section 8: Brand New Bonus Lectures!
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!

08:11

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

Instructor Biography

Brad Hussey , Expert Web Developer 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.

70,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

Reviews

Average Rating
4.5
Details
  1. 5 Stars
    125
  2. 4 Stars
    40
  3. 3 Stars
    13
  4. 2 Stars
    3
  5. 1 Stars
    5
    • Frank J De Swart

    Happy with this course...

    I got a great start to HTML 5 and CSS3 with this course. Sure, Brad's Coda screen is hard to see but the Code Chunks you can download makeup for that. Straight forward and easy to follow - this is a great beginner's course.

    • Thom David

    Good info, not for absolute beginners

    What attracted me to the title of the course was the idea of incorporating Photoshop with HTML5/CSS3, and while technically that happens in the course, it wasn't entirely what I expected. Having said that, the course provides some solid bits of information regarding how to take a Photoshop mockup and recreate it as a semantically-valid HTML5/CSS3 web page. I didn't have trouble following along, but I believe that's due to my familiarity with basic HTML and CSS concepts. An absolute beginner is likely to get lost in the weeds pretty quickly. In fairness, the instructor does say that some background would be helpful; in my view, it's essential. My main criticism is the quality of the video itself. When you are writing code, you have to be able to read the code. It wasn't until halfway through the course that the video zoomed into the code itself so that it could be read. Otherwise, you'll find yourself pausing and rewinding unless you are a fast and accurate keyboarder (which I am not). Somewhat frustrating. The instructor might have been a bit more organized in his presentation, but it wasn't a big problem. Overall, I learned some things from this course, and would recommend it to those who already have some HTML/CSS knowledge and who want to take a Photoshop mockup from concept to final coding.

    • Ryon Everett

    Comprehensive, Educational and engaging!

    I would suggest this courseto anyone starting out with PSD or HTML5/CSS3 it is a comprehensive guide that shows you the ropes on the basics of efficient site-building and how to apply code to transform pictures into interactive web-sites. He is a little quick, but you can always go back, and also there is at least a "basic" understanding of coding suggested to get the full experience. Highly Recommended!

    • Soham

    Informative!

    Balanced and informative course.

    • Daniel Zucchi

    OK course, but not the best way to learn.

    This course does exactly what it says in the title. You will code a website in 4 hours. That is, however, very different from saying you will LEARN TO code a website in 4 hours. Far too many lines and concepts go unexplained, and I got increasingly annoyed with the constant "I will not dive into this" comments from the instructor when forced to add a piece of "CSS trickery" he did not seem to want to introduce. That gives me the impression the course was not carefully planned in advance, and he was just improvising as he went along with no clear progression - a feeling I had throughout the entire course. Even more confusingly, the instructor often spends time explaining the very basic and blatantly obvious, only to later skip clarifying the slightly more complex, in an apparent contradiction to the course’s stated minimum required skills. If a concept being utilised (such as “clearfix") plays such a central role in the design, I would expect it to have its use at least defined. Mostly, it just felt like long sessions of switching between the video and my code editor to mechanically copy the code that was being written, with little to no explanation or clarification of why, as well as being directed to third-party web resources to read "if you wish to know more”. Don't get me wrong, I did extract some good learning from this course, and there is value in following along. However, learning any language - not just computer language - requires more than just writing words without knowing their meaning or reasons behind it, lest the learning runs the risk of becoming a fixed mental model that is not adaptable or replicable. I expect an instructor to guide me progressively through the topics, so later I will feel competent enough to replicate my learning on my own. I am sorry to say, I don’t in this case. The course is thus not recommended for beginners, and those with a little experience might feel slightly bored. Well presented, however, some good tips and good voice and production, and inspires you to seek to learn more. It is good practice if you wish to refresh your basic HTML and CSS skills, but if you really want to learn to code, there are better options out there.

Show more reviews

What you get with this course

30 day money back guarantee

Lifetime access

Available on desktop, iOS and Android

Certificate of completion

Join the biggest student community

5,400,000

Hours of video content

21,000,000

Course enrollment

6,300,000

Students

Ready to start learning?
Preview this course