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.6 (71 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,194 students enrolled
Instructed by Supriyo Kundu Design / Web Design
$19
$200
90% off
Take This Course
  • Lectures 53
  • Length 6 hours
  • Skill Level Intermediate Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 7/2016 English

Course 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 :)

What are the requirements?

  • You need to be familiar with basic concepts of HTML /CSS, Jquery, Bootstrap

What am I going to get from this course?

  • 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)

What 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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction
02:18

Learn PSD to Responsive Parallax HTML/CSS Website Design

10:22

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

Section 2: Mega Project : Part1 : PSD to HTML/CSS
01:34

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

05:39

In this lecture , we will study the psd template

Grab the Plan PSD File
Article
08:10

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

Grab the PSD Template
Article
05:05

In this lecture , we will create Basic Html Markup

Grab this File (index-start.html)
Article
07:25

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

04:59

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

Grab this Index file (google fonts , bootstrap , respond.js links added)
Article
01:45

In this lecture , we will add Main Javascript File

Grab this file (link to main.js added)
Article
06:08

In this lecture , we will populate reset.css file

Reset.css File (Before Starting Project)
Article
12:29

In this lecture , we will create the header section.

15:39

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

08:26

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

05:26

Here , we will make our header a fixed header.

07:39

Here in this lecture , we will create the services section

18:16

In this lecture , we will create portfolio section 

14:06

In this lecture , we will create Team Section

14:33

In this lecture , we will create Testimonial Section

07:26

In this lecture , we will create Blog Section

12:08

In this lecture , we will create Contact Section

15:40

In this lecture , we will create footer section

Section 3: Mega Project : Part2 : Responsive Design
13:49

In this lecture , we will make our menu responsive 

08:12

In this lecture , we will make our slider responsive 

06:51

In this lecture , we will make our portfolio section responsive 

03:50

In this lecture , we will make our Team section responsive 

03:06

In this lecture , we will make our Testimonial section responsive 

03:07

In this lecture , we will make our blog section responsive 

03:56

In this lecture , we will make our contact form responsive 

02:22

In this lecture , we will make our footer responsive 

Section 4: Mega Project : Part 3 : Spicing Up Our Project
06:25

In this lecture , we will make parallax backgrounds

13:10

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

10:03

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

08:03

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

04:06

In this lecture , we will implement Smooth Scrolling

02:06

In this lecture , we will implement animation without delay

06:09

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

Section 5: Mega Project : Part 4 : Finishing Touches
05:32

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

02:56

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

Section 6: Mega Project : Part 5 : Uploading to Real Server & Functional Contact Form
01:15

Here , we will download Filezilla which is an FTP Client

01:14

Here we will upload our website to real server through FTP

04:23

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

12:44

Here , we will make functional PHP Ajax Contact form

Article

Grab the contact.php file here

01:25

Here , we will change the loader color to Red

Section 7: Resources
Article

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

Section 8: Bonus Section
15:22

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

19:58

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)

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Supriyo Kundu, Web Developer & Graphic Designer, 18000+ 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 Website Design (Design and coding both) etc .

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

Ready to start learning?
Take This Course