PSD to Responsive HTML5: Beginner to Advanced (Udemy.com)

Learn modern web development and convert a photoshop design to a responsive animated HTML5 and CSS3 website from scratch

( 49 Reviews )

Created by: Filip Kordanovski

Produced in 2018

What you will 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

Quality Score

Content Quality

Video Quality

Qualified Instructor

Course Pace

Course Depth & Coverage

Overall Score : 92 / 100

Live Chat with CourseDuck's Co-Founder for Help

Need help deciding on a html 5 course? Or looking for more detail on Filip Kordanovski's PSD to Responsive HTML5: Beginner to Advanced? Feel free to chat below.

Join CourseDuck's Online Learning Discord Community

Course Description

*** UDEMY BESTSELLER FOR "PSD TO HTML" COURSE TOPIC ***
*** A LOT MORE THAN PSD-to-HTML5 COURSE ***

*** + 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 ***
-------------------------------------------------------------------------------------------------------------------------
***** COURSE COMPLETELY UP TO DATE AS OF 15TH NOV 2017 *****
-------------------------------------------------------------------------------------------------------------------------

2017 BLACK FRIDAY SPECIAL: New Official Facebook Group!

27TH FEBRUARY 2017: NEW LECTURE ADDED (SPECIAL COURSE CHATROOM)

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

Time: 6h

*Some courses are excluded from this sale. Coupon not working? If the link above doesn't drop prices, clear the cookies in your browser and then click this link here.
Also, you may need to apply the coupon code directly on the cart page to get the discount.

Coupon Code

Instructor Details

Filip Kordanovski

4.6 Rating
49 Reviews

Filip Kordanovski is a self-taught front-end web developer and designer from Skopje, Macedonia. He is truly passionate about his work and he has a deep understanding of various teaching methods and techniques.

BACKGROUND & INTERESTS:
Filip has more than 7 years experience in the field of web development & design and has recently started teaching and publishing courses online to share his knowledge with the world.
He is the founder of CodeCrack, a web development/design agency providing digital solutions, releasing courses and e-books.
He is also knowledgeable in various fields including Databases and Database Management Systems, Graphic Design, Video and Audio Editing, Game Design & Development and 3D Modelling & Digital Sculpting.

STATISTICS:
A truly dedicated persona with huge enthusiasm towards teaching, always aiming to deliver affordable, high quality education and content.
With more than 10000 students and 1300+ reviews with a rating of 4.4, he is one of the top-rated instructors on the platform. Also, one of his 6 courses is a Bestseller on Udemy.
Start learning with him today and make a significant impact on your professional career.

Reviews

4.6

49 total reviews

5 star 4 star 3 star 2 star 1 star

Write a Review

By Reginald Collins on

course was very good. learned a lot and would recommend to anyone wanting to learn how to convert a psd to html. I rated the course 4 stars only because I never received a responsive to my question. Other than that the course is very well put together.

By Scott Boyer on

This course has been edited enough where some things don't make sense. I just finished 4-30, and the html

caused some major problems for me..images was referenced earlier, and had a float of right, which made the icon images sit outside the container. I removed images, and all is well.Earlier in the course, there is no real explanation on how the code he says to do is able to mask the phone image and the background image.I finished the course. A lot of it was review for me, and that is still valuable.However, I did not appreciate a few things:-Freeze framing and putting in text explanations to cover mistakes. But I do get it. I have a YT channel with lots of videos too.-Bonus lectures not finished. However, It does provide a challenge for me to finish what we started.-Your video about positioning says that the parent needs to be relative, and children set to absolute. By that logic, .imgs should have been relative.I had to go back and rewatch what you actually did in order to determine that .imgs was still set to abs.-There was a lot of video padding. Introducing, and welcoming.... blah blah blah. Get to the meat!Outside of that, I enjoyed the course. It's nice to have another process to learn from.

By Rahul Kumar on

Its a Great Course. Please I request complete the bonus section Pending Lecture ASAP.

By Jamila Musa on

It would be nice to have a file for each lesson or stage in the project. I cant tell where I went wrong by lesson 13 because the project file is the finished project

By Karim Besanon on

Trs bonne introduction aux langages HTML, CSS et Javascript. Le formateur explique et dtaille toutes les tapes. En tant que novice, ce cours est assez cors. Avoir une base m'aurait aid comprendre certaines erreurs. Parfois le rythme est assez soutenu, merci les fonctions retour et pause!

By Emilia J on

Na pocztku nie byam zbytnio usatysfakcjonowana z kursu, jednake ostatecznie wycignam kilka przydatnych informacji dla siebie. W oglnej ocenie jestem zadowolona.

By Piotr Kawiak on

This course is a good reminder of the basics of css and html. However, some bonus lessons were missing.

By Maria Myshkovskaya on

Where is the final lecture? The course is not fresh and you had time to finish it. I bought it because of that bonus

By Sachin Nehra on

Filip unpresumably teaches what the basic and core things need to be taught to every person. Some people already know that some don't. I'm very satisfied with this PSD to HTML5 course.

By Alena Mekhnina on

There are many good tips, but I wish there was explanation how teacher finds all the margins/paddings, shadows, gradients from a PSD file. I feel that this information is missing.

By Noble on