Find online courses made by experts from around the world.
Take your courses with you and learn anywhere, anytime.
Learn and practice real-world skills and achieve your goals.
- - -
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.
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.
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.
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!
Do you want to hand-code your first website in 4-hours? Let's do this!
|Section 1: Introduction|
|A brief introduction of the course.|
|Section 2: Preparation|
A brief overview of the Photoshop Mockup we will be coding.
This lecture lists everything needed in order to start building your HTML5 & CSS3 website.
|This lectures covers how to set up a simple folder structure to lay the foundation of building a website.|
|This lecture contains a "Code Chunks" folder that includes individual HTML & CSS files for reference throughout the course.|
|Section 3: The PSD|
|This lecture outlines the Wireframe, and all of the most common elements used in building a website.|
This lecture covers how to slice up your Photoshop Mockup and how to Save for Web & Devices.
Photoshop Pop Quiz!
|Section 4: HTML|
|In this lecture, we start laying the foundation for our website by hand-coding the HTML5 skeleton.|
|In this lecture we hand-code the HTML5 for the "Header" section of the website.|
In this lecture, we hand-code the HTML5 for the "Content" section of the website.
|In this lecture, we hand-code the HTML5 for the "Footer" section of the website.|
HTML5 Pop Quiz!
|Section 5: CSS|
|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.|
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.
|In this lecture, we begin styling our website with CSS3.|
In this lecture, we use CSS3 to style the Navigation section of our website.
|In this lecture, we use CSS3 to style the Header section of our website.|
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.
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 :)
|In this lecture, we use CSS3 to style the Footer section of our website.|
CSS3 Pop Quiz!
|Section 6: Validation|
|In this lecture, we validate our HTML5 and fix any major errors or bugs that may have creeped into our code.|
|In this lecture, we validate our CSS3 and fix any necessary errors or bugs that may have creeped into our code.|
Validation Pop Quiz!
|Section 7: Conclusion|
|In this final video, we briefly review the material of the course.|
|Section 8: Brand New Bonus Lectures!|
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.
In this lecture, we're going to learn how to code a CSS Sticky Footer.
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
30 day money back guarantee
Available on desktop, iOS and Android
Certificate of completion
Hours of video content