Introduction
  • Learn PSD to Responsive Parallax HTML/CSS Web Design
  • Full Demo of Responsive Template
Mega Project : Part1 : PSD to HTML/CSS
  • Creating Basic Files and Folders
  • Complete Study of PSD Template ( Very Important Step )
  • Grab the Plan PSD File
  • Exporting Images
  • Grab the PSD Template
  • Creation and Explanation of Basic HTML Markup
  • Grab this File (index-start.html)
  • Adding Bootstrap and Respond.js to our Project
  • Adding Other Necessary CSS Files (Google Fonts , FontAwesome etc ..)
  • Grab this Index file (google fonts , bootstrap , respond.js links added)
  • Adding Main Javascript File
  • Grab this file (link to main.js added)
  • Populating Reset.css File
  • Reset.css File (Before Starting Project)
  • Header
  • Slider Section (Part 1)
  • Slider Section (Part 2)
  • Its Time for Fixed Header
  • Services Section
  • Portfolio Section
  • Team Section
  • Testimonial Section
  • Blog Section
  • Contact Section
  • Footer
Mega Project : Part2 : Responsive Design
  • Responsive Menu
  • Responsive Slider
  • Responsive Portfolio
  • Responsive Team
  • Responsive Testimonials
  • Responsive Blog
  • Responsive Contact Form
  • Responsive Footer
Mega Project : Part 3 : Spicing Up Our Project
  • Parallax Effect
  • CSS Animations (Part 1)
  • CSS Animations (Part 2)
  • Cool Zooming and Flipping Hover Effects
  • Smooth Scrolling
  • Animation Without delay
  • Page Loader
Mega Project : Part 4 : Finishing Touches
  • Finishing Touch (Part1)
  • Finishing Touch (Part2)
Mega Project : Part 5 : Uploading to Real Server & Functional Contact Form
  • Dowload Filezilla
  • Uploading Files to Server
  • Testing and Debugging
  • Functional PHP Ajax Contact Form
  • Contact.php File
  • Changing Loader Colour ( Final Finishing Touch)
Resources
  • Grab $1000 Resources here
Bonus Section I
  • Adding Animated Dropdown to Navigation Menu
  • Highlighting Active Section Menu Item on Scrolling
  • Addressing Responsive Dropdown Issue with Animated Dropdown
  • Requested Lecture : Udemy like 'See All' Hover effect
  • Hover Effect : Take a test Drive
Bonus Section II : Learn Bootstrap within 3 Hours
  • What is Bootstrap and why people use it ?
  • Downloading and Using Bootstrap
  • Understanding Bootstrap Grid System
  • Understanding Concept of Row and Container
  • Understanding col-xx-y Formula
  • Different Column Layout
  • Understanding Offset
  • Understanding Nested Columns
  • Pull Right and Pull Left
  • Push and Pull
  • Clearing Float in Bootstrap
  • Decorating Images Using Bootstrap
  • Responsive Images
  • Bootstrap Navigation : Part1
  • Bootstrap Navigation : Part2 : Adding Custom Styles to Bootstrap Navigation
  • Dropdown
  • Tabs and Pills
  • Functional Tabs Using Javascript
  • Functional Tabs Using CSS
  • Progressbar
  • Carousel
  • Modal Dialogue