Learn PSD to Responsive Parallax HTML/CSS Web Design
4.3 (236 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.
2,397 students enrolled

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.3 (236 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.
2,397 students enrolled
Created by Supriyo Kundu
Last updated 11/2017
English
English [Auto]
Current price: $129.99 Original price: $199.99 Discount: 35% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 9.5 hours on-demand video
  • 8 articles
  • 9 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
  • 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)
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 this course is for:
  • 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
Course content
Expand all 78 lectures 09:17:42
+ 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:17

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:10

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:23

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:22

Here , we will change the loader color to Red

Changing Loader Colour ( Final Finishing Touch)
01:25
+ Resources
1 lecture 00:10

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:10
+ Bonus Section I
5 lectures 01:14:08

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
Addressing Responsive Dropdown Issue with Animated Dropdown
14:50
Requested Lecture : Udemy like 'See All' Hover effect
07:28
Hover Effect : Take a test Drive
16:30
+ Bonus Section II : Learn Bootstrap within 3 Hours
22 lectures 02:52:19
What is Bootstrap and why people use it ?
04:01
Downloading and Using Bootstrap
15:13
Understanding Bootstrap Grid System
02:47
Understanding Concept of Row and Container
06:15
Understanding col-xx-y Formula
13:44
Different Column Layout
04:41
Understanding Offset
04:29
Understanding Nested Columns
05:38
Pull Right and Pull Left
05:23
Push and Pull
06:22
Clearing Float in Bootstrap
05:09
Decorating Images Using Bootstrap
03:10
Responsive Images
03:08
Bootstrap Navigation : Part1
15:11
Bootstrap Navigation : Part2 : Adding Custom Styles to Bootstrap Navigation
12:20
Dropdown
05:43
Tabs and Pills
04:30
Functional Tabs Using Javascript
11:09
Functional Tabs Using CSS
03:21
Progressbar
07:34
Carousel
18:15
Modal Dialogue
14:16