Introduction & Preparations
  • Getting Started and Introduction
  • Important Note About Reviews
  • A Detailed Look Into the Final Website and Its Wireframe!
  • How to Ask for Help if You're Stuck?
  • Information About the Pace of This Course
  • Join the Official Facebook Group Here!
  • Join the Official Course Chatroom Here! [optional]
  • Keep in Touch with your Instructor!
Setting Up The Environment
  • What's the Difference Between a Library and Pure HTML/CSS/JS Code?
  • Assignments and Project Files Explained
  • Download the Final Project Files Here!
  • Choosing and Customizing our Code Editor
  • Presenting the Starting Website Skeleton and Why Is It so Useful
  • Installing Fonts, Explaining What ResetCSS and Helper Classes Are
Project 1: Building an Interactive, Animated Sticky Header
  • The HTML Structure: Building the Skeleton of the Header
  • Header Appearance: Styling the Header with CSS3
  • Creating a Header Clone That Will Act as a Sticky
  • Functionality: Making the Header Sticky with JavaScript/jQuery
  • Start Creating Your Own Website from Scratch!
Project 2: Building a Parallax Page That Tracks Mouse Movements
  • Installing the Library and Setting Up the Environment
  • Building the Scene: Content & Custom Data-Attributes
  • Exploring the Level of Customization of the Library and the Data-Attributes
  • Designing & Finishing the Look of the Parallax Cover Page
  • Re-Create the Cover-Main Section from Scratch!
Project 3: Build a Fully Responsive, Awesome-Looking Grid Layout
  • Installing Masonry JS & Building the HTML
  • Styling the Picture Collage Gallery
  • Exploring Through the Options and Calling the Library with JavaScript
  • Create a Masonry JS Example by Your Own
Project 4: Building a Cool Beating Heart Animation
  • Creating the HTML and Preparing the SVG for the Animation!
  • Styling the Remaining Elements of The Section
  • Explaining Keyframes and Implementing Them to Create Cool Visual Effect
  • Create an Animation with CSS3 and Keyframes!
Project 5: Building a Clean, Responsive Slider with Navigation!
  • Preparing & Installing Slick Slider Library
  • Writing the HTML Structure of the Slider
  • Styling the Slider with CSS3
  • Exploring Through the JavaScript Options of the Slider
  • Create a DIFFERENT Slider for Your Own Website!
Project 6: Finish Off the Website With This Hidden Parallax Footer
  • Showcasing a Cool Trick to "Fake" a Parallax Effect!
  • Recreate the Parallax Footer
Project 7: Build a Modern, Clean Responsive Menu
  • Adding Functionality to the Menu - Scroll on Click to Corresponding Section
  • Step 1: Creating the Responsive Menu HTML Skeleton
  • Step 2: Editing the Skeleton and the Menu With CSS3
  • Step 3: Creating Active Classes and Adding JavaScript Functionality
  • Re-Create the Responsive Menu from Scratch!
Responsiveness: Making the Website Accessible on All Devices (Including Mobile)
  • Part 1: Explaining Media Queries and Fixing the Website for Laptop Resolutions
  • Part 2: Developing the Website for Laptop & Mobile Use
  • Part 3: Making the Slider Showcase Responsive
  • Part 4: Finishing Every Detail in the Responsiveness of the Website
Hosting the Website, Browser Compatibility and Live Preview of the Website
  • Hosting the Website Online on My Server
  • Trying the Website on Multiple Browsers to Check its Compatibility
  • Live Previewing the Website on Multiple Devices (Including Apple)
What Now, Conclusion & Saying Goodbye
  • Download Your Copy of My E-Book!
  • Okay, I've finished the Course Successfully. What Now?
  • Conclusion and Saying Goodbye!
BONUS Lectures!
  • Be the FIRST to Know About My New Course Releases!
  • Huge Discounts for My Other Courses!
  • What is the 'Display: Flex' CSS3 Propery?
  • Font Smoothing and Anti-Aliasing + Minor Typo Fixes