Design
Web Design
PSD to HTML
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]
Preview this course
Learn PSD to Responsive Parallax HTML/CSS Web Design
Current price: $129.99 Original price: $199.99 Discount: 35% off
5 hours left at this price!
Buy now
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
Featured review
Viharos Loránd Ottó
Viharos Loránd Ottó ( 39 courses, 19 reviews )
11 months ago
I already knew how to use SASS and bootstrap for core sitebuilding. I think the main goal is not to learn there skills here, but this course is amazing when you want to learn about website special effects, like loaders and animations, scrolling etc... I am rly happy now to taken this course! :)
Course content
Expand all 78 lectures 09:17:42
+ – Introduction
2 lectures 12:40

Learn PSD to Responsive Parallax HTML/CSS Website Design

Learn PSD to Responsive Parallax HTML/CSS Web Design
Preview 02:18

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

Full Demo of Responsive Template
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