Udemy Business

Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Learn PSD to Responsive Parallax HTML/CSS Web Design

Name: Learn PSD to Responsive Parallax HTML/CSS Web Design
Rating: 4.6 (244 reviews)

Learn how to convert PSD to Responsive Parallax HTML with CSS animation , PHP Ajax Contact Form, Hover Effects etc..

Created bySupriyo Kundu

Last updated 11/2017

English

English [Auto],

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)

Course content

9 sections • 78 lectures • 9h 17m total length

Learn PSD to Responsive Parallax HTML/CSS Web Design2:18
Learn PSD to Responsive Parallax HTML/CSS Website Design
Full Demo of Responsive Template10:22
Check out the full demo of the Template , that we are going to build in this course .

Creating Basic Files and Folders1:34
In this lecture , we will create some basic files and folders
Complete Study of PSD Template ( Very Important Step )5:39
In this lecture , we will study the psd template
Grab the Plan PSD File0:01
Exporting Images8:10
In this lecture , we will export the images required for our template
Grab the PSD Template0:05
Creation and Explanation of Basic HTML Markup5:05
In this lecture , we will create Basic Html Markup
Grab this File (index-start.html)0:04
Adding Bootstrap and Respond.js to our Project7:25
In this lecture , we will add Bootstrap and Respond.js to our project for Responsive Design
Adding Other Necessary CSS Files (Google Fonts , FontAwesome etc ..)4: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)0:10
Adding Main Javascript File1:45
In this lecture , we will add Main Javascript File
Grab this file (link to main.js added)0:10
Populating Reset.css File6:08
In this lecture , we will populate reset.css file
Reset.css File (Before Starting Project)0:13
Header12:29
In this lecture , we will create the header section.
Slider Section (Part 1)15:39
In this lecture , we will create the slider section (Part 1)
Slider Section (Part 2)8:26
In this lecture , we will complete the slider section (Part 2)
Its Time for Fixed Header5:26
Here , we will make our header a fixed header.
Services Section7:39
Here in this lecture , we will create the services section
Portfolio Section18:16
In this lecture , we will create portfolio section
Team Section14:06
In this lecture , we will create Team Section
Testimonial Section14:33
In this lecture , we will create Testimonial Section
Blog Section7:26
In this lecture , we will create Blog Section
Contact Section12:08
In this lecture , we will create Contact Section
Footer15:40
In this lecture , we will create footer section

Responsive Menu13:49
In this lecture , we will make our menu responsive
Responsive Slider8:12
In this lecture , we will make our slider responsive
Responsive Portfolio6:51
In this lecture , we will make our portfolio section responsive
Responsive Team3:50
In this lecture , we will make our Team section responsive
Responsive Testimonials3:06
In this lecture , we will make our Testimonial section responsive
Responsive Blog3:07
In this lecture , we will make our blog section responsive
Responsive Contact Form3:56
In this lecture , we will make our contact form responsive
Responsive Footer2:22
In this lecture , we will make our footer responsive

Parallax Effect6:25
In this lecture , we will make parallax backgrounds
CSS Animations (Part 1)13:10
In this lecture , we will implement CSS animations (Part1)
CSS Animations (Part 2)10:03
In this lecture , we will implement CSS animations (Part2)
Cool Zooming and Flipping Hover Effects8:03
In this lecture , we will implement Awesome Hover Effects (like zooming and flipping effect )
Smooth Scrolling4:06
In this lecture , we will implement Smooth Scrolling
Animation Without delay2:06
In this lecture , we will implement animation without delay
Page Loader6: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

Dowload Filezilla1:15
Here , we will download Filezilla which is an FTP Client
Uploading Files to Server1:14
Here we will upload our website to real server through FTP
Testing and Debugging4:23
Here , we will test and debug our website in real server
Functional PHP Ajax Contact Form12:44
Here , we will make functional PHP Ajax Contact form
Contact.php File0:22
Grab the contact.php file here
Changing Loader Colour ( Final Finishing Touch)1:25
Here , we will change the loader color to Red

Adding Animated Dropdown to Navigation Menu15:22
Here in this lecture , we will see , how to add animated dropdown to your navigation Menu
Highlighting Active Section Menu Item on Scrolling19: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)
Addressing Responsive Dropdown Issue with Animated Dropdown14:50
Addresses a responsive dropdown issue by converting the dropdown to an animated dropdown, removing extra markup, and adjusting CSS and media queries for consistent behavior across screen sizes.
Requested Lecture : Udemy like 'See All' Hover effect7:28
Build a Udemy-like see all hover effect with HTML markup and CSS, showing an arrow on hover and using transitions and non-static positioning.
Hover Effect : Take a test Drive16:30
Implement a responsive parallax hover effect by stacking front and back layers, using absolute positioning and transitions to reveal text and zoom the image on hover.

What is Bootstrap and why people use it ?4:01
Downloading and Using Bootstrap15:13
learn how to download bootstrap, link css and javascript locally or via cdn, add respond.js for older browsers, and set up the meta viewport for responsive design.
Understanding Bootstrap Grid System2:47
Understanding Concept of Row and Container6:15
Wrap content in a bootstrap container and create rows of responsive 12-column grid, converting a plain html document into a responsive page with container, row, and col classes.
Understanding col-xx-y Formula13:44
Learn how the Bootstrap grid system uses a 12-column layout with containers and rows, applying col-lg-, col-md-, col-sm-, and col-xs breakpoints at 1200, 992, and 768 pixels for responsive design.
Different Column Layout4:41
Explore bootstrap's grid system to create flexible layouts, combining a three-column image with a nine-column content area and mastering twelve-column totals for responsive web design.
Understanding Offset4:29
Understand how the Bootstrap grid uses offset to create space between two six-column divs by applying offset-1 to the second column, keeping the row total at 12 columns.
Understanding Nested Columns5:38
Understand nested columns in bootstrap's grid system and how a container's 12-column layout splits into child divs with varying weights.
Pull Right and Pull Left5:23
Learn to float images and text with bootstrap by applying pull-right or pull-left, and understand how inline versus block elements affect layout.
Push and Pull6:22
Learn how to use bootstrap push and pull to reorder content for mobile and desktop layouts, adjusting column classes (col-md-push / col-md-pull) to shift services and mission sections.
Clearing Float in Bootstrap5:09
Understand how floats in Bootstrap affect layout and why clearing floats is necessary, using a clearfix or fix class to keep divs aligned inside a container.
Decorating Images Using Bootstrap3:10
Explore bootstrap's inbuilt image classes to decorate visuals with rounded corners, circular shapes, and thumbnails by applying image hyphen rounded, image hyphen circle, and image hyphen thumbnail classes.
Responsive Images3:08
Learn PSD to responsive parallax HTML/CSS web design by applying bootstrap's image-responsive class to scale images across devices.
Bootstrap Navigation : Part115:11
Bootstrap Navigation : Part2 : Adding Custom Styles to Bootstrap Navigation12:20
Build a responsive bootstrap navigation with a nav bar header and collapsible menu using data-toggle and data-target. Customize text and background colors, including the active state.
Dropdown5:43
Learn how to implement a Bootstrap dropdown in a navigation, including markup for ul and li, a data-toggle attribute, a caret icon, and hover styling to customize the dropdown appearance.
Tabs and Pills4:30
Functional Tabs Using Javascript11:09
Build functional tabs by wiring tab links to content panels with IDs, using Bootstrap nav tabs and a JavaScript click handler.
Functional Tabs Using CSS3:21
Progressbar7:34
Explore building Bootstrap progress bars, including setting progress values, responsive containers, accessible ARIA attributes, striped and animated styles, and status variations like success, warning, and danger.
Carousel18:15
Build a from-scratch carousel with indicators, slides, and previous/next controls using data-slide and data-target attributes, plus captions and responsive height adjustments for a parallax HTML/CSS design.
Modal Dialogue14:16

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

Learn PSD to Responsive Parallax HTML/CSS Web Design

What you'll learn

Explore related topics

Course content

Introduction2 lectures • 13min

Mega Project : Part1 : PSD to HTML/CSS25 lectures • 2hr 53min

Mega Project : Part2 : Responsive Design8 lectures • 45min

Mega Project : Part 3 : Spicing Up Our Project7 lectures • 50min

Mega Project : Part 4 : Finishing Touches2 lectures • 8min

Mega Project : Part 5 : Uploading to Real Server & Functional Contact Form6 lectures • 21min

Resources1 lecture • 1min

Bonus Section I5 lectures • 1hr 14min

Bonus Section II : Learn Bootstrap within 3 Hours22 lectures • 2hr 52min

Requirements

Description

Who this course is for: