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.
https://www.udemy.com/build-beautiful-html5-website/?couponCode=FREEBIES
by Brad Hussey
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:
http://bradhussey.ca/course/psd2html5/
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: http://www.theuniversitybarbershop.com
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!
SECTION 1: Introduction
Text
Lecture 1:
Welcome to PSD to HTML5 & CSS3
SECTION 2: Preparation
Text
Lecture 2:
What we are building
Text
Lecture 3:
What you need to start
Text
Lecture 4:
Setting up our Folder Structure
Text
Lecture 5:
Code Chunks
SECTION 3: The PSD
Text
Lecture 6:
Becoming Familiar with the Layout
20:14
Lecture 7:
Gathering Assets & Saving for Web
3 questions
Quiz 1:
Photoshop Pop Quiz!
SECTION 4: HTML
13:50
Lecture 8:
Coding an HTML5 Skeleton
11:57
Lecture 9:
Coding the "Header"
13:43
Lecture 10:
Coding the "Content Section"
06:51
Lecture 11:
Coding the "Footer"
4 questions
Quiz 2:
HTML5 Pop Quiz!
SECTION 5: CSS
03:19
Lecture 12:
Adding a Stylesheet to your Website
04:05
Lecture 13:
Normalize vs. Reset: What is the...
20:15
Lecture 14:
Global Styles & Typography
25:41
Lecture 15:
Layout: Styling the Navigation Bar
27:25
Lecture 16:
Layout: Styling the Header
15:55
Lecture 17:
Layout: Styling the "Content Section" —...
16:48
Lecture 18:
Layout: Styling the "Content Section" —...
26:13
Lecture 19:
Layout: Styling the Footer
3 questions
Quiz 3:
CSS3 Pop Quiz!
SECTION 6: Validation
03:33
Lecture 20:
Validating your HTML5
12:22
Lecture 21:
Validating your CSS3
3 questions
Quiz 4:
Validation Pop Quiz!
SECTION 7: Conclusion
02:03
Lecture 22:
Review
