PSD to Responsive HTML5: Beginner to Advanced
4.5 (768 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
4,469 students enrolled

PSD to Responsive HTML5: Beginner to Advanced

Learn modern web development and convert a photoshop design to a responsive animated HTML5 and CSS3 website from scratch
4.5 (768 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
4,469 students enrolled
Created by Filip Kordanovski
Last updated 2/2018
English [Auto]
Current price: $76.99 Original price: $109.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 6 hours on-demand video
  • 7 articles
  • 12 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • 6 hours of Full-HD video material divided into 46 lectures.
  • Learn to convert a static photoshop design into a completely responsive website
  • Skills to develop a fully responsive website WITHOUT any framework
  • Feel comfortable taking any PSD design and converting it into a fully functional website
  • Learn how to create amazing interactive animations on scroll using JavaScript and CSS3
  • Have a very solid understanding of how PSD and HTML5 integrate and work together
  • Learn clean, modern web design trends and apply them into your projects
  • 25 amazing & trendy finished PSD designs to practice your newly acquired skills on
  • Adaptive and available instructor (24/7) to answer all of your questions ASAP
Course content
Expand all 50 lectures 06:03:54
+ Getting Started & Preparations
10 lectures 35:20

This is the first lecture where I'm introducing you to the course - we're going through the course topics & objectives and defining the subjects that we are going to learn.

Preview 03:59

uDemy recently changed their review system, so I want to give you a quick heads up about it.

Quick Important Note About Reviews!

Learn a little more about me here and why you made the right decision buying this course. Its because I'm a PROVEN instructor!

Preview 02:52

Final lecture of the "talking" style series, before we actually move on to the website creation. Learn why PSD-to-HTML5 is a worthy skill to have in 2016. 

Why PSD to HTML5 is a Must-Have Skill for Any Web Designer/Developer

Take a brief look at the final PSD website design that we are going to be converting into a functional website during the course. Also, the final PSD design is included here, so download it - or - get it with all the other project files at Lecture 12.

Preview 04:25

We're exploring the finished/final website that has an amazing clean look and is responsive on all screen sizes. Meet all of the animations and features this website has to offer!

Preview 06:08

"uDemy Web Enthusiasts" is a Facebook group where me and my students communicate. Its a vital part of the learning process and you're very welcome to join in!

Join the Official Facebook Group Here!

I've created a chatroom for the students of this course as I think communication between student-student and teacher-student is vital during your learning experience. You can discuss about anything, ask questions, help others and more - 

Join the chatroom here:

Join the Official Course Chatroom Here!

The community is really an important part of my course. Many of the students communicate in the Q&A section and share their bug fixes and problem solving solutions. Learn how to use the Q&A for a better overall experience.

How to Use the Q&A to Communicate With The Community
+ Environment Setup: Get Your Hands Dirty
5 lectures 34:18

One of my personal favorite lectures. We're installing Brackets here but what's more important is that we're customizing the heck out of it! So much plugins to enhance our coding experience, so don't miss out on this lecture!

Personalizing and Choosing the Right Code Editor

Photoshop will be mandatory software during the duration of this course, so make sure you have it installed before you even start diving into the course.

Downloading & Installing Photoshop CC Free Trial

One more important lecture. We are setting up the file structure and we'll be installing all the necessary libraries. I'm also explaining what is reset.css and why you should use it.

Preview 15:29

Here you can find the final project files that are consisted of literally everything that we've coded during the conversion of the PSD design. Also, the PSD design is included here as well. Make sure you use these for reference and solving-problem purposes.

Download the Final Project Files Here

I have prepared 25 unique PSD designs for you, which can be downloaded in this lecture. Feel free to take and re-create one of these into pure HTML after completing the course. Happy coding!

Download Free Gift: 25 Finished & Modern PSD designs to Practice Your Skills On
+ Studying & Preparing the Finished PSD design
5 lectures 41:39

In this lecture, we are determining the size of the project by using Photoshop tools. Then, we're adjusting the website's container/holder accordingly. Jump in the new section!

Determining The Size & Measurements of Our Project

You have to play smart when deciding which images to use from the design. And what elements can be created with CSS3 to save up storage space. So, in this lecture, I'm explaining exactly this.

Choosing & Deciding the File/Image Structure to Work With

This is the lecture where we start using some neat Photoshop features to slice off the images from the design, save them for the web and later use them in the website.

Slicing Up the Design

Google Fonts is an amazing library to use fonts from. Its easy to implement and it takes very little time. Here we're looking at 2 different ways you can implement fonts in your projects, on of which is Google Fonts library.

Preview 08:56

According to the project, helper classes are either VERY useful or useless. Learn what are they, when to use them and HOW to use them. They can save you a lot of time and struggle.

Helper Classes: What Are They and When to Use Them?

Let's see what you've learned!

PSD Design Quiz
5 questions
+ Converting the PSD design Into a Functional Website
11 lectures 01:41:17

We're finally starting to convert the PSD design. In this lecture we're writing the markup for the navigation bar, inserting the image, the text content and more.

Coding the Hero Section: Creating the Markup & the Navbar

Adding first touches such as background images of the section, border-bottom on hover on the navigation bar and more.

Styling the Hero Section: Positioning the Content & Polishing the Navbar

In this second part we're finalizing the styling of the hero section using floats and margins to the elements. Also we're making the CTA (call to action) button look fancy on hover.

Styling the Hero Section: Buttons, Floats & Custom Width

Among other things, in this lecture, we're going to be creating custom columns (just like Bootstrap's columns), but we will style them later when creating the responsiveness of the website manually. Because manual creation of responsive website is a must have skill if you're planning to become web developer/designer.

Coding the App Section: Creating Custom Columns

We are positioning the previously created custom columns into a row-fashion. That means they are displayed one next to the other one - which is done with width and float rules. Watch how!

Styling the App Section: Positioning and Polishing the Custom Columns

Pretty easy lecture, we're coding the HTML markup for the nose section. Follow along!

Coding the Nose Section: Writing the Basic HTML Markup

We're transforming the section to look exactly like the one in the PSD design in a record time. Join me!

Styling the Nose Section: Transferring Colors from Photoshop to CSS3

Yet again we are setting up custom columns. You should be familiar with these now and maybe even try to code them on your own to practice.

Coding the Footer: Introducing List-Style Footers

Finalizing the footer and giving it a nifty look. After this lecture you'll definitely be able to edit and utilize custom columns by your own on any next project you will take.

Styling the Footer: Setting a Background Image to a List-Style Element

The last part of the conversion is upon us. Get coding!

Coding the Copyright Section: Learn Quick HTML5 Symbols

Finish the CSS and get ready to learn some animation!

Styling the Copyright Section: Finalizing the Website's Content

See how far you've come with the last section you've completed

Website Design Quiz
5 questions
+ Polishing the Website: Learn to Create Amazing Interactive Animations
7 lectures 01:08:19

In a world of fast-paced and changing technologies, you need to keep up. Learn to create absolutely breathtaking animations using famous libraries to make it easier for you. Libraries like Animate.css, Waypoints.js and WOW.js will save your life.

Preparations: Installing & Setting Up Famous Animation Libraries

We're FINALLY getting ready for the iPhone animation, This is exciting. Prepare all the files you need in order to get started!

Interactive iPhone Turn-on Animation: Preparing Files & Inserting Image Slices

In this lecture, I will briefly explain the concept of these positioning types and clear up any confusion that you might have about positioning stuff inside a div holder. We're also taking a look at z-index positioning.

Animations Aside: Explaining Z-index and Relative & Absolute Positioning

We're putting together the scattered iPhone using the positioning techniques we've learned previously.

iPhone Animation: Moving the iPhone Around with Basic Positioning Techniques

After this lesson, the iPhone will have its final looking animation done with JavaScript, but it won't be interactive. For interaction, watch the next lecture ;)

iPhone Animation: Creating the Finalized Animation

In this lecture, we are adding delays with JavaScript as well, to make an animation (illusion) of an iPhone turning on.

iPhone Animation: Clicking the Button and Adding Delays with JavaScript

This is when things get interesting. You get your hands dirty and use the skills that you've gained so far to create a fully custom animated webpage to your own style. Get coding!

Get Your Hands Dirty: Animating the Rest of the Website with WOW.js

Spice up the skills that you've learned so far about animation and positioning!

Animation & Positioning Quiz
5 questions
+ Let's Make Our Website Responsive!
4 lectures 52:12

We're making final tweaks to the website and I'm starting to explain what are media queries and using basic example I'm showing a demo of what media queries are capable of doing.

Preview 10:58

We're kicking off with making the first section responsive using media queries. Learn some cool tricks here to save you time and energy!

Responsive Layout: Making the Hero Section Responsive

In this lecture, we are completely finalizing the responsiveness part of this website. The website now is mobile ready, fitting any screen size and mobile width. Cograts!

Responsive Layout: Finishing the Responsive Layout with More Media Queries

In this relatively short amount of time we're building a completely functional, RESPONSIVE navigation bar from scratch using NO FRAMEWORKS, just with pure CSS3 and little bit of JavaScript. If you're excited as I am, join me right now!

Navigation Bar: Creating Custom Responsive Navigation Bar from Scratch!

Lets see how much you've learned about media queries overall!

Responsiveness Quiz
5 questions
+ Conclusion & Final Toughts
1 lecture 01:08

Thank you very much for being a student. Congratulations on doing a really good job finishing the course all the way. I truly wish you have a successful career in whatever niche you're going to pursuit. Good luck and farewell!

Congratulations! You did it! What now?
+ BONUS Lectures
7 lectures 29:41

If you've enjoyed this course, feel free to check out my other 2 courses featuring Bootstrap 4 and HTML5/CSS3/JS Workshop. If you ever decide to purchase any of them, I've prepared 2 coupon codes for you in this lecture. You'll be able to purchase them 10$ each, no matter their original market price. I offer this discount to my loyal students only.

Huge Discounts for My Other Courses!

In this first bonus lecture, we're taking a look at a very nifty developer console tool called "Inspect Element" which is natively built into Chrome Browser. You should use this to debug ANY problem that you face during development process. In this lecture, I teach you how.

What is 'Inspect Element' and When Should You Use It?

We are starting to convert a brand new PSD design that features real-world problems. In this short series, we'll be taking a look in a PSD design that features nifty elements and graphics, while turning them into functional HTML. Join me in the first lecture where we are showcasing and looking at this brand new PSD file.

Short Conversion Series: Showcasing a Brand New PSD Design

Yet another bonus lecture! This time, we are writing the layout markup for the brand new PSD design. Prepare yourself for some neat CSS3 lectures that are coming in the following weeks! W're going to edit the markup that we're writing in this bonus lecture. Stay tuned!!!

Short Conversion Series: Creating the Layout Markup

A brand new bonus lecture where we are preparing the content holder for the following lectures. We're also adding the necessary margins and paddings, as well as font styles and font sizes.

Short Conversion Series: Styling & Preparing the Content Holder

This is the official course, student-only chatroom. Join hundreds of students, just like you, in a multiple-channel Discord chatroom where you can discuss anything from hobbies to web dev topics and connect with me personally.

Official Course Chatroom!

Interested in new course releases? This is the right place to be!

Preview 00:25
  • Basic understanding of HTML & CSS (divs, classes, IDs)
  • Photoshop CS3/CS4/CS5/CS6/CC (or a free-trial)
  • A code editor of your choice (Brackets in my case)
  • Internet connection is required
  • Your favorite chips flavor and a drink!



*** + Amazing interactive animations with beginner JavaScript lectures included ***

*** + Creating Responsive design with CUSTOM media queries ***

*** + Advanced BONUS section with real-world website conversion and special tips ***

*** + Course is constantly UPDATED with new content/lectures ***


2017 BLACK FRIDAY SPECIAL: New Official Facebook Group!


4 NEW LECTURES ADDED ("What is 'Inspect Element' and When to Use It", "Showcasing Brand New PSD Design", "Creating the Layout Markup" and "Be the FIRST to know about new courses").
Make sure to check these at the bottom BONUS section as they contain important information.

Are you planning your web design career and looking for a good starting point? Or maybe you are a web development enthusiast looking to convert PSD designs into fully functional websites? Or just a beginner web developer/designer who is looking forward to learn how PSD and HTML5/CSS3 work together?

Either way, PSD to HTML5 conversion is a MUST-HAVE skill for any aspiring or experienced web developer/designer out there.

This PSD to HTML5 conversion course will take you from a complete beginner to a knowledgeable developer who is feeling comfortable converting PSD designs into fully functional and responsive HTML5 websites.

This is a lot more than PSD-to-HTML course. It is one of the most comprehensive web design/development courses out there as its very content-rich and features a lot of topics. We’ll start of with Photoshop and learn what are the basic starting steps of converting a PSD design into a HTML5 website. We will firstly understand and study the PSD design and after that slice it, cut it and collect the images. Then we’ll start coding our HTML5 markup to prepare the development of the website.

During the development stage, we'll learn a lot of things when styling our design: floats, positioning, width, custom columns, fluid design, full-width backgrounds AND MORE!!!

- We’ll be creating stunning animations FROM SCRATCH including an iPhone turn-on animation that looks very slick. We’ll use various famous libraries to create the remaining breathtaking animations on scroll and polish our website to the maximum. However, that’s not all.
We’ll then dive into creating our website responsive to fit any screen size and mobile device. We will be coding CUSTOM media queries to control the behavior of our website on smaller screens. I’ll be guiding you through a way to create a responsive navigation bar menu from scratch using basic programming techniques.

We’ll then jump into a brand new section that will get updated over time and which will include special tips and advanced techniques to convert problematic PSD designs into working websites.

In this course you will take a finished PSD design and learn how to convert it to create a fully responsive HTML5 page with pure CSS3 from SCRATCH. No responsive frameworks like Bootstrap! (My earlier course covers that!)

I believe that the only way to become a successful student of this course is through practice and involvement. That’s why you will be presented with quizzes and interactive questions throughout the course. After completing, you will be challenged to take a PSD design, use the skills that you’ve gained in this course and create a breathtaking HTML5 responsive website that you will be proud of!

So, what are you waiting for? Press on “Take this course” button and start learning web design & development today! 30-day money back guarantee!

Who this course is for:
  • Students who plan on becoming web designers in the near future
  • New and aspiring web designers looking to learn a brand new skillset
  • Designers and developers looking to learn how to convert a PSD design to fully functional and responsive HTML5 website
  • Beginners with a limited knowledge of Photoshop interested in web design/development and converting PSD designs
  • Anyone who is interested how Photoshop and HTML5 work together
  • Anyone looking to spice up their PSD conversion skills