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.

Video Error

We tried several times to play your video but there was an unforeseen error. We have notified our engineers.

Visit https://helpx.adobe.com/flash-player.html to check that Flash is enabled on your browser.

With Flash enabled, please try again in a few minutes or contact support.

$35
Take This Course
  • Lectures 54
  • Video 7.5 hours
  • Skill Level All Levels
  • Languages English, captions
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 12/2013 English Closed captions available

Course Description

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

What are the requirements?

  • Adobe Photoshop, 960 grid system, code editor (there is a lecture on tools you are going to use included).
  • Little knowledge of HTML and CSS is advised.
  • Passion for web design.

What am I going to get from this course?

  • Learn the principles, history and philosophy behind flat web design.
  • Learn to plan a website, think of a concept and use sketching and wireframing.
  • Learn to design pixel-perfect flat designs with grid systems.
  • Learn to use and take advantage of Twitter Bootstrap in your future projects.
  • Learn to turn PSD into valid HTML & CSS.
  • Learn to make your website responsive.
  • By the end of the course you will be able to build your own website from scratch and apply the concepts, ideas and skills learned here to your own projects.

What is the target audience?

  • People who want to make their living of freelance web design,
  • Beginner web designers looking to explore the whole process behind building a website.
  • Web designers willing to improve their skills and master flat web design.
  • Web designers who want to learn to code and developers who want to understand the design process better.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction
What Is Flat Web Design
15 pages
Principles of Flat Web Design
2 pages
Tools you need
01:40
3 questions

1

Section 2: Planning & Wire framing
The Goal of the website
3 pages
Ascertain the elements
3 pages
AIDA Principle
6 pages
Whitespace
6 pages
Finding good Inspiration
10 pages
Conceptual Sketching
3 pages
15:07

You can download the final Wireframe from attachment.

Quiz: Section 2
4 questions
Section 3: Designing in Photoshop
1200 Grid
02:39
Baseline Grid
03:07
01:52

In this Lecture were going to setup a document in Photoshop using the resources provided below.

Grid System: www.1200px.com
Icons: 80 Shades of White Icons by Victor Erixon

The Header
08:10
Banner
14:45
Services
12:47
Latest Work
Preview
15:34
Creative Process
11:55
Testimonials
14:33
Call to Action
05:34
10:34

You can get the final PSD by downloading attachment.

Section 4: Bootstrap
What is Twitter Bootstrap
03:46
02:46

Make sure you will get the version I downloaded since bootstrap updated new releases you can check it out on the link provided below

https://github.com/twbs/bootstrap/releases/

Gather Assets
05:35
Base Markup
03:48
Page Containers and Rows
08:00
Adding Containers for Content
06:32
Section 5: HTML Markup
Coding the Header
Preview
06:54
Coding the Banner
03:58
Coding the Services
06:54
Coding the Latest Work
12:04
Coding the Creative Process
11:49
Coding the Testimonials
11:57
Coding the Call to Action
00:38
Coding the Contact Info
04:19
05:04

You can download the final HTML file on attachment.

Section 6: Styling with CSS
Global Styles & Typography
11:16
Styling the Header
16:41
Styling the Banner
12:04
Styling the Services
08:42
Styling the Latest Work
17:08
Styling Latest Work II
10:16
Styling Creative Process
16:37
Styling the Testimonials
13:50
Styling the Call to Action
06:20
Styling the Contact Info
05:14
04:28

You can download the final CSS file on attachment.

Section 7: Responsive
Break Point 768px Small Devices
Preview
15:04
Break Point 992px Medium Devices (Part 1)
12:19
Break Point 992px Medium Devices (Part 2)
10:30
Break Point 1200px Desktops (Part 1)
11:51
Break Point 1200px Desktops (Part 2)
11:00
09:44

You can download the final Responsive CSS file on attachment.

Section 8: Validation
HTML/CSS Validation
02:09

Instructor Biography

1st Web Designer, Web Design Professionals

It's our personal mission to make sure you become the best web design professional you can be. James Richman, ceo of 1stWebDesigner

Ready to start learning?
Take This Course