Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Build a Flat Responsive Website from Scratch - Complete Course
Introduction
What Is Flat Web Design
Principles of Flat Web Design
Tools you need (2:02)
Planning & Wire framing
The Goal of the website
Ascertain the elements
Whitespace
AIDA Principle
Conceptual Sketching
Finding good Inspiration
Wire framing the Layout (15:07)
Designing in Photoshop
1200 Grid (2:39)
Baseline Grid (3:07)
Setting up (2:02)
The Header (2:02)
Banner (2:02)
Services (12:47)
Creative Process (11:56)
Latest Work (2:02)
Testimonials (2:02)
Call to Action (5:34)
Footer (10:34)
Bootstrap
What is Twitter Bootstrap (3:46)
Installation (2:47)
Gather Assets (5:35)
Base Markup (2:02)
Page Containers and Rows (2:02)
Adding Containers for Content (2:02)
HTML Markup
Coding the Header (2:02)
Coding the Banner (3:58)
Coding the Services (2:02)
Coding the Latest Work (2:02)
Coding the Creative Process (11:49)
Coding the Testimonials (2:02)
Coding the Call to Action (2:02)
Coding the Contact Info (2:02)
Coding the Footer (2:02)
Styling with CSS
Global Styles & Typography (2:02)
Styling the Header (2:02)
Styling the Services (2:02)
Styling the Banner (2:02)
Styling Latest Work II (2:02)
Styling the Latest Work (17:08)
Styling Creative Process (16:37)
Styling the Testimonials (2:02)
Styling the Call to Action (6:20)
Styling the Contact Info (5:14)
Styling the Footer (2:02)
Responsive
Break Point 768px Small Devices (2:02)
Break Point 992px Medium Devices (Part 1) (2:02)
Break Point 992px Medium Devices (Part 2) (2:02)
Break Point 1200px Desktops (Part 1) (11:51)
Break Point 1200px Desktops (Part 2) (2:02)
Final Touches (2:02)
Validation
HTML/CSS Validation (2:09)
The Header
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock