Getting Started & Preparations
  • Course Outline & What Are You Going to Learn
  • Quick Important Note About Reviews!
  • Pre-Start: Why You've Just Made the Right Decision
  • Why PSD to HTML5 is a Must-Have Skill for Any Web Designer/Developer
  • Showcasing the Finished PSD design
  • Showcasing the Final Finished Website
  • Join the Official Facebook Group Here!
  • Join the Official Course Chatroom Here!
  • How to Use the Q&A to Communicate With The Community
  • Reach Out to the Instructor
Environment Setup: Get Your Hands Dirty
  • Personalizing and Choosing the Right Code Editor
  • Downloading & Installing Photoshop CC Free Trial
  • Setting Up the Project Environment
  • Download the Final Project Files Here
  • Download Free Gift: 25 Finished & Modern PSD designs to Practice Your Skills On
Studying & Preparing the Finished PSD design
  • Determining The Size & Measurements of Our Project
  • Choosing & Deciding the File/Image Structure to Work With
  • Slicing Up the Design
  • Installing & Implementing Fonts
  • Helper Classes: What Are They and When to Use Them?
  • PSD Design Quiz
Converting the PSD design Into a Functional Website
  • Coding the Hero Section: Creating the Markup & the Navbar
  • Styling the Hero Section: Positioning the Content & Polishing the Navbar
  • Styling the Hero Section: Buttons, Floats & Custom Width
  • Coding the App Section: Creating Custom Columns
  • Styling the App Section: Positioning and Polishing the Custom Columns
  • Coding the Nose Section: Writing the Basic HTML Markup
  • Styling the Nose Section: Transferring Colors from Photoshop to CSS3
  • Coding the Footer: Introducing List-Style Footers
  • Styling the Footer: Setting a Background Image to a List-Style Element
  • Coding the Copyright Section: Learn Quick HTML5 Symbols
  • Styling the Copyright Section: Finalizing the Website's Content
  • Website Design Quiz
Polishing the Website: Learn to Create Amazing Interactive Animations
  • Preparations: Installing & Setting Up Famous Animation Libraries
  • Interactive iPhone Turn-on Animation: Preparing Files & Inserting Image Slices
  • Animations Aside: Explaining Z-index and Relative & Absolute Positioning
  • iPhone Animation: Moving the iPhone Around with Basic Positioning Techniques
  • iPhone Animation: Creating the Finalized Animation
  • iPhone Animation: Clicking the Button and Adding Delays with JavaScript
  • Get Your Hands Dirty: Animating the Rest of the Website with WOW.js
  • Animation & Positioning Quiz
Let's Make Our Website Responsive!
  • Preparation: Media Queries Explained + Adding Minor Final Changes to the Website
  • Responsive Layout: Making the Hero Section Responsive
  • Responsive Layout: Finishing the Responsive Layout with More Media Queries
  • Navigation Bar: Creating Custom Responsive Navigation Bar from Scratch!
  • Responsiveness Quiz
Conclusion & Final Toughts
  • Congratulations! You did it! What now?
BONUS Lectures
  • Huge Discounts for My Other Courses!
  • What is 'Inspect Element' and When Should You Use It?
  • Short Conversion Series: Showcasing a Brand New PSD Design
  • Short Conversion Series: Creating the Layout Markup
  • Short Conversion Series: Styling & Preparing the Content Holder
  • Official Course Chatroom!
  • Be the FIRST to know about my new course releases!