3.6 out of 5
3.6
38 reviews on Udemy

Learn PSD to Responsive Parallax HTML 5 / CSS 3 Web Design

Learn how to convert PSD to Responsive Parallax HTML 5 / CSS 3 Animation Hover Effects , 10+ JQuery Plugin / Responsive
Instructor:
Adil Ahmed
6,185 students enrolled
English [Auto]
Students will be able to Convert PSD to HTML/CSS
You will be able to Create the Complete Responsive & Parallax Creative Website Design
Students will learn to Create the Amazing and Creative Hover Effects
You will be able to create or implement the Cool Effects for Website Design
You are getting over $500 Resource Files ( 1 PSD Template + 1 HTML 5 Template with no License Restriction)

Hi,

Do you want to Build The Responsive Parallax Website Design From very scratch ?

And Do you want to Convert PSD Document to HTML 5 / CSS 3 Responsive Website Design ?

OR,

Just  you want to Learn Creating Awesome HTML Website Templates Like the Themeforest has ?

If your answer to any of above questions  mentioned is Yes, Then this Course is  perfect fitting for You !!

Welcome to this Amazing course of PSD Conversion , where we will build a Real world and Professional Looking Modern Responsive Parallax Website Template.

Contents of the Template :

Responsive Design & Retina Ready Display

Parallax Effect & Attachment

Whole PSD Document & HTML 5 Template Included

CSS Animations & Transitions

Amazing CSS 3 Hover Effects

Modern Real World Responsive Website

Cool Tips & Tricks For Conversion

Includig this course , you are getting over 500$ Resource Files ( 1 PSD Designed Template & 1 Complete HTML5 Responsive Website Designer Template with no license Restrictions)

I am really Feeling great and also honored that I will walk you through all of these step by step from very scratch

Every concepts of code is explained in great depth throughout this course . And also if you stuck while following the course then I am always here to help you out .

After Enrolling to this course , you will have amazing confidence and concepts of Converting this kind of awesome website design in very less time without facing any issues.

And also ,You will have 30 Days Money Back Guarantee . If this course does not help you then you can get your money back without asking any single question .

But , I promise to you that, you will love and appreciate this course without having any single doubts.

Now Take a look of this course as free Preview of Intro Video 

I am really looking forward to see you inside 🙂

Who is the target audience?

If you want to Learn PSD to HTML 5 / CSS 3. This course is  Perfect fitting for you !

If you want to Build Responsive Parallax Web Design , This course is Perfect for you !

If you want to Learn Creating Awesome HTML 5 Website Templates , This course is for you !

Introduction

1
Introductory

This is the introductory video of this PSD to HTML 5 Website Conversion. And in this video i will be showing you that What this course is containing all about. This is the complete course for PSD conversion to HTML 5 Responsive Website Design. Hope this website designing course will help you alot  more and makes your concepts even more batter. This course is containing all the modern technologies such as HTML 5 / CSS 3 / Bootstrap / JavaScript & JQuery

2
Tools Acquainted to start website design

Hi Welcome to the very first Website Tutorial for tools Acquainted for the website design and development. Here you will come to know that whats the most important tools are required to start the website design and development. First we will need The Browser like Google Chrome or Mozilla Firefox and these any one browser we will use throughout this course to have the preview of live coding. So its required to get the course started.

3
File folder setup and fonts adding

This is the second website tutorial and here you will come to know that how to start the website design and development and firstly here we will setup the file folder to store all the images and plugin to start the PSD Conversion to HTML 5 responsive website design

4
Exporting the images from Photoshop

In this video i will show that how to export all the images from Photoshop Document as a template for Html 5 Responsive website design. And its very easy to export all the images from the Photoshop document. First you need to open the psd template in Adobe Photoshop and here you can use any version of Photoshop- Does not matter of Its version. Simply open the document in Photoshop and start exporting the images one by one as the videos showing the steps.

5
Hero area part 1 with Markup Only

In this Website Tutorial i will show to create the very first website document. Here you will learn that how to put the hero text in website page as same as Photoshop Document showing up. Its very easy simply i will write some basic markup of HTML 5 and will have some Heading Tag like H1 or H6 in between its preferable. And then we will some dummy text inside the heading tag and once it will be put we will start taking a look in the website by going through the live preview or simply by opening the index file where we are working.

6
Hero area part 1 with styles

In this tutorial i will guide you that how to decorate the Html 5 beautifully by using the style.css and here on the page called style.css we are gonna putting all the specific styles and we will decorate it amazingly. Hope this Style.css make your website designing concepts even more batter.

7
services section part with markup

This is the another Website Tutorial for Service section and here we will showcase all the services what we are offer in the psd document and we will put as same as the psd document showing up. Hope this website design tutorial will help you to export the images and to put as exactly as it is.

8
services section part with style

In this video we will style the service section beautifully like we will put some css 3 properties called Hover and Transition effect to make the services section more beautifully and amazing. Here we will also cover some pseudo properties to make it animated nicely.

9
video Area part 1- Markup

This is the another tutorial for PSD to html 5 conversion and in this video you will come to know that how to make the section which contents video and on the click just popup the video by having some overlay on the screen. This video will also contents some Click function which will be coming from JavaScript.

10
video part 2 with Styles

In this website design or PSD to HTML 5 conversion you will come to know that how to style the video section nicely. First we will put some overlay over the image and then we will align the play button beautifully then it will look like something cool.

11
video part 3 final

This is the last part of video section and here we will put the final style to make it just cool. Hope this PSD to html 5 conversion videos and the course will make your concepts just wow and add some great skills in you.

12
About section

This is the About section and it will be having some amazing and cool CSS 3 Hover and Transition effect which will just make the website or PSD to Html 5 document just cool. So why waiting lets dive into this tutorial and create some great looking responsive and nice looking website section beautifully

13
Team area markup

This is the team area section and here i will guide you to make the team section just amazing. And this Team section will be containing the slider as carousel from owl carousel and it will also contain some indicators to navigate the slider or team image nicely. This website tutorial will add some great skills in you for sure.

14
Skills bar

This is the skills section of PSD to html 5 Responsive and here i will guide you to put the animated skills to website document form very scratch and for putting the animated skills i am gonna using the HTML 5 Markup and CSS 3 as well and also i am gonna using some counted JQuery plugin to make the skills bar animated at a scrolling time.

15
Team area style

In this section we will star the styling for team section and at the end you will be having the beautiful Team area which will be containing the image slider and indicators as well. Hope this website design tutorial will help you alot more.

16
Team JS Work Final

This is the last Tutorial for Team section and here you will come to know that how to script for team section and makes the website design just looking cool. Hope this website design tutorial will help you alot more and makes your concepts even more batter

17
Blockquote

In this PSD to HTML 5 Responsive website designing video i will show you that how to create the amazing Blockquote design using the modern technologies such as HTML 5 / CSS 3 / Bootstrap / and JavaScript from very scratch

18
features part 1 - Markup and styles

This is the feature section and here i will showing you that how to create the amazing Feature section using the html 5 and all the modern technologies from very scratch in less time. Hope this website design tutorial will help you alot more.

19
Feature box part 2

This is the feature section part 2 and we will use the html5 and css 3 and all the modern technologies to create the amazing looking feature for the website design in very less time. Hope this website design tutorial will help you alot more and makes your concepts even more batter.

20
Feature box final

This is the feature box and it will be last tutorial for this specific section and it will make the concepts even more batter. In this section we will use css 3 to put the css 3 hover and transition effect on the icon to make it just wow. For creating such a document we will start from very scratch and will add some cool website design effects

21
Responsive Tab part 1 with style

This is the tab section and here we will make the tab as responsive by using the modern technologies like HTML 5 and also we will use the JQuery plugin to make it just animated. Hope this responsive tab of this section makes the website just looking cool and amazing

22
.Responsive tab part 2

This is the responsive tab and this is the second part and here i will guide you to create the responsive tab in very less time. Hope this website design tutorial will help you alot more and just add some creativity of website design or PSD to responsive HTML 5 Conversion in very less time by following this amazing website design or PSD to HTML 5 responsive course

23
Gallery Filter part 1

This is the gallery filter section part 1 and here you will come to know that how to style the responsive tab using the style.css to make it just amazing and decorate it like font changing and color changing for the text. Hope this tutorial of  gallery section will just add the creativity in you and just add the cool effects

24
Gallery Fitler part 2 style

This is the gallery filter section part 2 and here we will just add the filter effect using the style.css to make it just amazing. Hope this website design tutorial will help you alot more and just makes the concepts even more batter.

25
Gallery part 3

This is the gallery part 3 and here we will also add the styling for the gallery section to make it working. Hope this website design tutorial will help you alot more and just add some cool effect for the gallery section.

26
Testimonial section part 1

This is the Bootstrap based Testimonial section and here you will come to know that how to add the amazing carousel effect using the Bootstrap classes and here you will come to know that how to animate the testimonial section from very scratch in less time.

27
Testimonial section part 2

This is the Testimonial section part 2 and here i will guide you that how to use the Testimonial section amazing and also i will use the style.css to style it just amazing. Hope this website design tutorial will help you alot more.

28
Pricing table part 1

This is the pricing table part 1 and in this tutorial i will guide you that how to add amazing price table nicely. Hope this website design tutorial will help you alot more. This is the amazing website design tutorial which will just add the amazing effect over the pricing table to make it just cool

29
Counter up effect final

In this video i will add some counter up effect which will animate the numbers while scrolling the page or website document. Hope this counter up effect for website design tutorial will help you alot more. This effect we will create by using the JQuery plugin called Counter up effect from very scratch

30
Client list part 1

This is the client list part 1 and here i will guide you that how to create or build the amazing looking client list section just by using the plugin called owl carousel and JQuery amazing plugin from very scratch. This is the amazing website design tutorial where you will come to know that how to add the touch enable client section using the JQuery plugin like owlcarousel

31
Newslider part 1

In this website design tutorial we will use  some amazing jquery plugin called owlcarousel to make the amazing looking newslider design from very scratch and it will be just amazing and also increase the workflow with the coding.

32
Newslider part 2

This is the second video for Newslider and here we will add some style.css sheet to make it just decorated. This PSD to html 5 conversion course will definitely increase the coding skills and make the concepts just cool

33
Contact form part 1

This is the contact form ui design and here we will just add the input box to put the text inside. Hope this website design tutorial will help you to create the cool looking form design or contact form design for your website design in very less time by using the HTML 5 and all the modern technologies

34
Contact form part 2

This is the second part for contact form and here we will add some extra cool hover and transitions effect using the css 3 and html 5 in very less time. Hope this website design tutorial will help you alot more.

35
Contact form part 3

This is the contact form pate design and this is the 3rd video and i will guide you from very scratch to create the cool looking form design in less time. Hope this contact page makes your website design just cool and amazing

36
contact form part 4

This is the last part for the contact page and here we will guide you to finalize the contact page nicely. At the end of this tutorial you will have enormous skills and knowledge about the contact page design. And lastly you will get just amazing contact form or form design in very less time

37
Google Map

In this tutorial i will guide you to embed the google map to the website document in very less time. For embedding the google map to website document we need some api which google gives and after taking the api we will have embed in the html 5 markup and then it will start showing in the website design or website document and it will be fully functional

38
Footer Final

This is the last part for the footer design and here will add some cool hover and transition effect using the CSS 3 some cool properties and also i am gonna putting some cool effect on the hover for icons. And for the icons i am gonna putting icons form the font awesome. This will be super professional

39
Navigation par 1

This is the Responsive navigation menu part 1 and here i will guide you to create the simple markup for navigation bar form very scratch and here i will guide guide you to create the markup and then we will refer for the styling. Hope this website design tutorial will help you a lot more.

40
Navigation part 2

This is the navigation part 2 and here i will guide you to create or style the navigation part like we will inline the navigation at the very top in just one line and also we will add some hover effects

41
Navigation menus linking and smooth scroll custom script

In this responsive navigation video section i will guide you to create the navigation menu and we will also link the menus with the specific section to make it clickable and also i am gonna using the smooth scroll script to make it just scrolling by smooth. Hope this Responsive Navigation menus concept makes the concepts even more batter.

42
Animate part 1 - wow and animate

In this website tutorial i will be adding the Animate.css plugin to make the section animate at the time of scrolling. So when the section will appear then it will start animating and makes the website looks so cool and creative one

43
Animate part 2

This is the animate part 2 and here we will put the animation for the rest section which has remained to be done. This is the complete section for the animation to make the section animate while scrolling the website document. Hope this website design tutorial will help you a lot more and makes your website design concepts or PSD to HTML 5 Responsive website design even more batter.

You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
3.6
3.6 out of 5
38 Ratings

Detailed Rating

Stars 5
18
Stars 4
10
Stars 3
4
Stars 2
4
Stars 1
2
cabf493904bf1dd9f7385e4c13eb6d57
30-Day Money-Back Guarantee

Includes

10 hours on-demand video
Full lifetime access
Access on mobile and TV
Certificate of Completion
Don't Miss Any Course Join Our Telegram Channel Join Channel
+ +