Learn PSD to Responsive Parallax HTML/CSS Web Design
4.5 (110 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,408 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learn PSD to Responsive Parallax HTML/CSS Web Design to your Wishlist.

Add to Wishlist

Learn PSD to Responsive Parallax HTML/CSS Web Design

Learn how to convert PSD to Responsive Parallax HTML with CSS animation , PHP Ajax Contact Form, Hover Effects etc..
4.5 (110 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,408 students enrolled
Created by Supriyo Kundu
Last updated 9/2016
English
Current price: $10 Original price: $200 Discount: 95% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 6 hours on-demand video
  • 8 Articles
  • 9 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
What Will I Learn?
You will be able to Convert PSD to HTML/CSS
You will be able to Create Responsive Parallax Website Design
You will Learn Creating Awesome Hover Effects
You will be able to implement cool CSS Animations in your website
You will learn various Cool Tips and Tricks , by which you will have an edge over others.
You are getting over $1000 Resource Files (1 PSD Template + 1 HTML Template with no license Restriction)
View Curriculum
Requirements
  • You need to be familiar with basic concepts of HTML /CSS, Jquery, Bootstrap
Description

Hi,

Do you want to Learn Responsive Parallax Web Design ?

Do you want to Learn PSD to HTML/CSS ?

Do you want to Learn Creating Awesome HTML Templates ?

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

Welcome to this Awesome course , where we will build a Cool Professional Modern Responsive Parallax Corporate Template.

Features of the Template :

  • Responsive Design
  • Parallax Backgrounds
  • PHP AJAX Functional Contact Form
  • CSS Animations
  • Awesome Hover Effects
  • Modern Professional Look
  • Cool Tips & Tricks (by which you will have an edge over others)

With this course , you are getting over 1000$ Resource Files ( 1 PSD Template & 1 HTML Template with no license Restriction )

I am really excited and also feeling honoured that I will walk you through all of these step by step

Every bit of code is explained in the course . And also if you need any help , I am always here to help you out .

After taking this course , you will have enormous confidence of building this kind of awesome websites.

And also ,You will have 30 Days Money Back Guarantee . If you dont like this course , you will get 100% refund , with no questions asked .

But , I promise , you will love this course . 

Now take a look at the full demo of the template that we are going to build in this course which is a free preview.

I am really excited to see you in this course :)

Who is the target audience?
  • If you want to Learn PSD to HTML/CSS. this course is for you
  • If you want to Learn Responsive Parallax Web Design , this course is for you
  • If you want to Learn Creating Awesome HTML Templates , this course is for you
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 53 Lectures Collapse All 53 Lectures 05:46:35
+
Introduction
2 Lectures 12:40

Learn PSD to Responsive Parallax HTML/CSS Website Design

Preview 02:18

Check out the full demo of the Template , that we are going to build in this course .

Preview 10:22
+
Mega Project : Part1 : PSD to HTML/CSS
25 Lectures 02:53:19

In this lecture , we will create some basic files and folders

Creating Basic Files and Folders
01:34

In this lecture , we will study the psd template

Complete Study of PSD Template ( Very Important Step )
05:39

Grab the Plan PSD File
00:01

In this lecture , we will export the images required for our template

Exporting Images
08:10

Grab the PSD Template
00:05

In this lecture , we will create Basic Html Markup

Creation and Explanation of Basic HTML Markup
05:05

Grab this File (index-start.html)
00:04

In this lecture , we will add Bootstrap and Respond.js  to our project for Responsive Design

Adding Bootstrap and Respond.js to our Project
07:25

In this lecture , we  will add other necessary css files to our project

Adding Other Necessary CSS Files (Google Fonts , FontAwesome etc ..)
04:59

Grab this Index file (google fonts , bootstrap , respond.js links added)
00:10

In this lecture , we will add Main Javascript File

Adding Main Javascript File
01:45

Grab this file (link to main.js added)
00:11

In this lecture , we will populate reset.css file

Populating Reset.css File
06:08

Reset.css File (Before Starting Project)
00:13

In this lecture , we will create the header section.

Header
12:29

In this lecture , we will create the slider section (Part 1)

Slider Section (Part 1)
15:39

In this lecture , we will complete the slider section (Part 2)

Slider Section (Part 2)
08:26

Here , we will make our header a fixed header.

Its Time for Fixed Header
05:26

Here in this lecture , we will create the services section

Services Section
07:39

In this lecture , we will create portfolio section 

Portfolio Section
18:16

In this lecture , we will create Team Section

Team Section
14:06

In this lecture , we will create Testimonial Section

Testimonial Section
14:33

In this lecture , we will create Blog Section

Blog Section
07:26

In this lecture , we will create Contact Section

Contact Section
12:08

In this lecture , we will create footer section

Footer
15:40
+
Mega Project : Part2 : Responsive Design
8 Lectures 45:13

In this lecture , we will make our menu responsive 

Responsive Menu
13:49

In this lecture , we will make our slider responsive 

Responsive Slider
08:12

In this lecture , we will make our portfolio section responsive 

Responsive Portfolio
06:51

In this lecture , we will make our Team section responsive 

Responsive Team
03:50

In this lecture , we will make our Testimonial section responsive 

Responsive Testimonials
03:06

In this lecture , we will make our blog section responsive 

Responsive Blog
03:07

In this lecture , we will make our contact form responsive 

Responsive Contact Form
03:56

In this lecture , we will make our footer responsive 

Responsive Footer
02:22
+
Mega Project : Part 3 : Spicing Up Our Project
7 Lectures 50:02

In this lecture , we will make parallax backgrounds

Parallax Effect
06:25

In this lecture , we will implement CSS animations (Part1)

CSS Animations (Part 1)
13:10

In this lecture , we will implement CSS animations (Part2)

CSS Animations (Part 2)
10:03

In this lecture , we will implement Awesome Hover Effects (like zooming and flipping effect )

Cool Zooming and Flipping Hover Effects
08:03

In this lecture , we will implement Smooth Scrolling

Smooth Scrolling
04:06

In this lecture , we will implement animation without delay

Animation Without delay
02:06

In this lecture , we will implement page loader where loader will show how much the page has loaded and in the background , page will be loading . So , instead of seeing a broken page users will see the page loader

Page Loader
06:09
+
Mega Project : Part 4 : Finishing Touches
2 Lectures 08:28

In this lecture , we will finish our awesome template (part1)

Finishing Touch (Part1)
05:32

In this lecture , we will finish our awesome template (part2)

Finishing Touch (Part2)
02:56
+
Mega Project : Part 5 : Uploading to Real Server & Functional Contact Form
6 Lectures 21:36

Here , we will download Filezilla which is an FTP Client

Dowload Filezilla
01:15

Here we will upload our website to real server through FTP

Uploading Files to Server
01:14

Here , we will test and debug our website in real server

Testing and Debugging
04:23

Here , we will make functional PHP Ajax Contact form

Functional PHP Ajax Contact Form
12:44

Grab the contact.php file here

Contact.php File
00:35

Here , we will change the loader color to Red

Changing Loader Colour ( Final Finishing Touch)
01:25
+
Resources
1 Lecture 00:11

Grab here $1000 resource files (1 HTML Template + 1 PSD template + Plan psd file) . You can use it for your personal and commercial purpose 

Grab $1000 Resources here
00:11
+
Bonus Section
2 Lectures 35:20

Here in this lecture , we will see , how to add animated dropdown to your navigation Menu

Adding Animated Dropdown to Navigation Menu
15:22

In this Lecture , we will add a very cool stuff .. that is , when on scrolling , we are on a section , that respective menu item will be highlighted (both when scrolling up and also on scrolling down)

Highlighting Active Section Menu Item on Scrolling
19:58
About the Instructor
Supriyo Kundu
4.4 Average rating
632 Reviews
19,426 Students
12 Courses
Web Developer & Graphic Designer, 19000+ Students Instructor

Hi ,

My name is Supriyo . I am a Computer Science Engineer .
I have equal passion for both Programming and Designing.
I have designed Websites , Business Cards , Banners and also have experience in PSD to Html/Css , PHP , Wordpress.

I help students to grow their Design and Programming skills , be it Design Effects or Retouching or Photo Manipulation or Animations or Website Design (Design and coding both) etc .

Currently , My courses have over 19000 Awesome Students and they also love me :)