English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 6 Hours | 1.58 GB
Learn modern web development and convert a photoshop design to a responsive animated HTML5 and CSS3 website from scratch
Are you planning your web design career and looking for a good starting point? Or maybe you are a web development enthusiast looking to convert PSD designs into fully functional websites? Or just a beginner web developer/designer who is looking forward to learn how PSD and HTML5/CSS3 work together?
Either way, PSD to HTML5 conversion is a MUST-HAVE skill for any aspiring or experienced web developer/designer out there.
This PSD to HTML5 conversion course will take you from a complete beginner to a knowledgeable developer who is feeling comfortable converting PSD designs into fully functional and responsive HTML5 websites.
This is a lot more than PSD-to-HTML course. It is one of the most comprehensive web design/development courses out there as its very content-rich and features a lot of topics. We’ll start of with Photoshop and learn what are the basic starting steps of converting a PSD design into a HTML5 website. We will firstly understand and study the PSD design and after that slice it, cut it and collect the images. Then we’ll start coding our HTML5 markup to prepare the development of the website.
During the development stage, we’ll learn a lot of things when styling our design: floats, positioning, width, custom columns, fluid design, full-width backgrounds AND MORE!!!
– We’ll be creating stunning animations FROM SCRATCH including an iPhone turn-on animation that looks very slick. We’ll use various famous libraries to create the remaining breathtaking animations on scroll and polish our website to the maximum. However, that’s not all.
We’ll then dive into creating our website responsive to fit any screen size and mobile device. We will be coding CUSTOM media queries to control the behavior of our website on smaller screens. I’ll be guiding you through a way to create a responsive navigation bar menu from scratch using basic programming techniques.
We’ll then jump into a brand new section that will get updated over time and which will include special tips and advanced techniques to convert problematic PSD designs into working websites.
In this course you will take a finished PSD design and learn how to convert it to create a fully responsive HTML5 page with pure CSS3 from SCRATCH. No responsive frameworks like Bootstrap! (My earlier course covers that!)
I believe that the only way to become a successful student of this course is through practice and involvement. That’s why you will be presented with quizzes and interactive questions throughout the course. After completing, you will be challenged to take a PSD design, use the skills that you’ve gained in this course and create a breathtaking HTML5 responsive website that you will be proud of!
Table of Contents
Getting Started & Preparations
1 Course Outline & What Are You Going to Learn
2 Reach Out to the Instructor
3 Quick Important Note About Reviews!
4 Pre-Start Why You’ve Just Made the Right Decision
5 Why PSD to HTML5 is a Must-Have Skill for Any Web DesignerDeveloper
6 Showcasing the Finished PSD design
7 Showcasing the Final Finished Website
8 Join the Official Facebook Group Here!
9 Join the Official Course Chatroom Here!
10 How to Use the Q&A to Communicate With The Community
Environment Setup Get Your Hands Dirty
11 Personalizing and Choosing the Right Code Editor
12 Downloading & Installing Photoshop CC Free Trial
13 Setting Up the Project Environment
14 Download the Final Project Files Here
15 Download Free Gift 25 Finished & Modern PSD designs to Practice Your Skills On
Studying & Preparing the Finished PSD design
16 Determining The Size & Measurements of Our Project
17 Choosing & Deciding the FileImage Structure to Work With
18 Slicing Up the Design
19 Installing & Implementing Fonts
20 Helper Classes What Are They and When to Use Them
Converting the PSD design Into a Functional Website
21 Coding the Hero Section Creating the Markup & the Navbar
22 Coding the Copyright Section Learn Quick HTML5 Symbols
23 Styling the Copyright Section Finalizing the Website’s Content
24 Styling the Hero Section Positioning the Content & Polishing the Navbar
25 Styling the Hero Section Buttons, Floats & Custom Width
26 Coding the App Section Creating Custom Columns
27 Styling the App Section Positioning and Polishing the Custom Columns
28 Coding the Nose Section Writing the Basic HTML Markup
29 Styling the Nose Section Transferring Colors from Photoshop to CSS3
30 Coding the Footer Introducing List-Style Footers
31 Styling the Footer Setting a Background Image to a List-Style Element
Polishing the Website Learn to Create Amazing Interactive Animations
32 Preparations Installing & Setting Up Famous Animation Libraries
33 Interactive iPhone Turn-on Animation Preparing Files & Inserting Image Slices
34 Animations Aside Explaining Z-index and Relative & Absolute Positioning
35 iPhone Animation Moving the iPhone Around with Basic Positioning Techniques
36 iPhone Animation Creating the Finalized Animation
37 iPhone Animation Clicking the Button and Adding Delays with JavaScript
38 Get Your Hands Dirty Animating the Rest of the Website with WOW.js
Let’s Make Our Website Responsive!
39 Preparation Media Queries Explained + Adding Minor Final Changes to the Website
40 Responsive Layout Making the Hero Section Responsive
41 Responsive Layout Finishing the Responsive Layout with More Media Queries
42 Navigation Bar Creating Custom Responsive Navigation Bar from Scratch!
Conclusion & Final Toughts
43 Congratulations! You did it! What now
BONUS Lectures
44 Huge Discounts for My Other Courses!
45 What is ‘Inspect Element’ and When Should You Use It
46 Short Conversion Series Showcasing a Brand New PSD Design
47 Short Conversion Series Creating the Layout Markup
48 Short Conversion Series Styling & Preparing the Content Holder
49 Official Course Chatroom!
50 Be the FIRST to know about my new course releases!
Resolve the captcha to access the links!