Build Flat Responsive Website from Scratch - Complete Course
Learn the whole process behind building a website - from theory and planning to a functional responsive layout.
 Enroll in Course for $37

Do you want to learn to build a beautiful and functional website from zero?
Do you want to master the hottest trend in web design industry right now - flat web design?
Do you want to know how to make your website look awesome on any device?

This course takes you from very little knowledge about web design to being able to create beautiful, thorough and problem-solving websites and get you going as a web designer.

It will guide you through the creation of a fictional portfolio website starting from scratch and ending up with a beautiful, responsive and functional website. It is a thorough step by step guide with detailed comments and gradual advancement thus no serious prior knowledge is required; just passion for web design. The lessons and techniques you'll find in this course can later be applied when working on seemingly completely different projects.

You will learn:

  • principles of flat web design
  • planning and making a concept for a website
  • designing in Photoshop
  • converting PSD into a valid HTML & CSS
  • how to use Twitter Bootstrap
  • making site responsive

 Enroll in Course for $37
Your Instructor

Michael Burns is a web & graphic designer based in Philippines. He started designing during his college days with most of his skills and knowledge being self taught. He believes that learning web and graphic design can be learned online and is a matter of practicing really hard until the desired skills are acquired. Michael is also a Design Guru at www.1stwebdesigner.com. At 1stWebDesigner he teaches web and graphic design to beginners. He just loves sharing ideas with everyone.

Class Curriculum
Section 1 - Introduction
  What Is Flat Web Design
  Principles of Flat Web Design
  Tools you need (02:40)
Section 2 - Planning & Wire framing
  The Goal of the website
  Ascertain the elements
  AIDA Principle
  Whitespace
  Finding good Inspiration
  Conceptual Sketching
  Wire framing the Layout (15:07)
Section 3 - Designing in Photoshop
  1200 Grid (03:39)
  Baseline Grid (03:07)
  Setting up (02:52)
  The Header (08:10)
  Banner (15:44)
  Services (13:47)
  Latest Work (16:34)
  Creative Process (12:55)
  Testimonials (15:33)
  Call to Action (06:34)
  Footer (11:33)
Section 4 - Bootstrap
  What is Twitter Bootstrap (04:46)
  Installation (03:46)
  Gather Assets (06:35)
  Base Markup (04:48)
  Page Containers and Rows (08:00)
  Adding Containers for Content (07:32)
Section 5 - HTML Markup
  Coding the Header (07:54)
  Coding the Banner (04:57)
  Coding the Services (07:54)
  Coding the Latest Work (12:04)
  Coding the Creative Process (12:49)
  Coding the Testimonials (12:56)
  Coding the Call to Action (01:39)
  Coding the Contact Info (04:19)
  Coding the Footer (05:04)
Section 6 - Styling with CSS
  Global Styles & Typography (11:16)
  Styling the Header (17:41)
  Styling the Banner (12:04)
  Styling the Services (09:42)
  Styling the Latest Work (17:08)
  Styling Latest Work II (10:16)
  Styling Creative Process (17:37)
  Styling the Testimonials (14:50)
  Styling the Call to Action (06:20)
  Styling the Contact Info (05:14)
  Styling the Footer (04:28)
Section 7 - Responsive
  Break Point 768px Small Devices (15:04)
  Break Point 992px Medium Devices (Part 1) (12:19)
  Break Point 992px Medium Devices (Part 2) (11:30)
  Break Point 1200px Desktops (Part 1) (12:51)
  Break Point 1200px Desktops (Part 2) (11:00)
  Final Touches (10:44)
Section 8 - Validation
  HTML/CSS Validation (02:09)
Frequently Asked Questions
When does the course start and finish?
The course starts now and never ends! It is a completely self-paced online course - you decide when you start and when you finish.
How long do I have access to the course?
How does lifetime access sound?
After purchase, you have unlimited access to this course for as long as you like - across any and all devices you own.
What if I am unhappy with the course?
We would never want you to be unhappy!
If you are unsatisfied with your purchase, contact us in the first 30 days and we will give you a full refund.