Build Flat Responsive Website from Scratch
Course Contents
| Section 1: Introduction | |||
|---|---|---|---|
| 1 |
What Is Flat Web Design
| 15 pages | |
| 2 |
Principles of Flat Web Design
| 2 pages | |
| 3 |
Tools you need
| 01:40 | |
| 4 |
Quiz: Section 1
| 3 questions | |
| Section 2: Planning & Wire framing | |||
| 5 |
The Goal of the website
| 3 pages | |
| 6 |
Ascertain the elements
| 3 pages | |
| 7 |
AIDA Principle
| 6 pages | |
| 8 |
Whitespace
| 6 pages | |
| 9 |
Finding good Inspiration
| 10 pages | |
| 10 |
Conceptual Sketching
| 3 pages | |
| 11 | 15:07 | ||
| 12 |
Quiz: Section 2
| 4 questions | |
| Section 3: Designing in Photoshop | |||
| 13 |
1200 Grid
| 02:39 | |
| 14 |
Baseline Grid
| 03:07 | |
| 15 | 01:52 | ||
| 16 |
The Header
| 08:10 | |
| 17 |
Banner
| 14:45 | |
| 18 |
Services
| 12:47 | |
| 19 |
Latest Work
Preview | 15:34 | |
| 20 |
Creative Process
| 11:55 | |
| 21 |
Testimonials
| 14:33 | |
| 22 |
Call to Action
| 05:34 | |
| 23 | 10:34 | ||
| Section 4: Bootstrap | |||
| 24 |
What is Twitter Bootstrap
| 03:46 | |
| 25 | 02:46 | ||
| 26 |
Gather Assets
| 05:35 | |
| 27 |
Base Markup
| 03:48 | |
| 28 |
Page Containers and Rows
| 08:00 | |
| 29 |
Adding Containers for Content
| 06:32 | |
| Section 5: HTML Markup | |||
| 30 |
Coding the Header
Preview | 06:54 | |
| 31 |
Coding the Banner
| 03:58 | |
| 32 |
Coding the Services
| 06:54 | |
| 33 |
Coding the Latest Work
| 12:04 | |
| 34 |
Coding the Creative Process
| 11:49 | |
| 35 |
Coding the Testimonials
| 11:57 | |
| 36 |
Coding the Call to Action
| 00:38 | |
| 37 |
Coding the Contact Info
| 04:19 | |
| 38 | 05:04 | ||
| Section 6: Styling with CSS | |||
| 39 |
Global Styles & Typography
| 11:16 | |
| 40 |
Styling the Header
| 16:41 | |
| 41 |
Styling the Banner
| 12:04 | |
| 42 |
Styling the Services
| 08:42 | |
| 43 |
Styling the Latest Work
| 17:08 | |
| 44 |
Styling Latest Work II
| 10:16 | |
| 45 |
Styling Creative Process
| 16:37 | |
| 46 |
Styling the Testimonials
| 13:50 | |
| 47 |
Styling the Call to Action
| 06:20 | |
| 48 |
Styling the Contact Info
| 05:14 | |
| 49 |
Styling the Footer
| 04:28 | |
| Section 7: Responsive | |||
| 50 |
Break Point 768px Small Devices
Preview | 15:04 | |
| 51 |
Break Point 992px Medium Devices (Part 1)
| 12:19 | |
| 52 |
Break Point 992px Medium Devices (Part 2)
| 10:30 | |
| 53 |
Break Point 1200px Desktops (Part 1)
| 11:51 | |
| 54 |
Break Point 1200px Desktops (Part 2)
| 11:00 | |
| 55 | 09:44 | ||
| Section 8: Validation | |||
| 56 |
HTML/CSS Validation
| 02:09 | |
