Build Flat Responsive Website from Scratch - Complete Course
4.2 (141 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
12,100 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Build Flat Responsive Website from Scratch - Complete Course to your Wishlist.

Add to Wishlist

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.
4.2 (141 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
12,100 students enrolled
Last updated 10/2016
English
English
Current price: $10 Original price: $35 Discount: 71% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 7 hours on-demand video
  • 8 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
What Will I Learn?
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.
View Curriculum
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.
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
Who 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
Curriculum For This Course
Expand All 54 Lectures Collapse All 54 Lectures 07:43:34
+
Introduction
3 Lectures 01:40
What Is Flat Web Design
15 pages

Principles of Flat Web Design
10 pages


1

Quiz: Section 1
3 questions
+
Planning & Wire framing
7 Lectures 15:07
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

You can download the final Wireframe from attachment.

Wire framing the Layout
15:07

Quiz: Section 2
4 questions
+
Designing in Photoshop
11 Lectures 01:41:30
1200 Grid
02:39

Baseline Grid
03:07

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

Setting up
01:52

The Header
08:10

Banner
14:45

Services
12:47


Creative Process
11:55

Testimonials
14:33

Call to Action
05:34

You can get the final PSD by downloading attachment.

Footer
10:34
+
Bootstrap
6 Lectures 30:27
What is Twitter Bootstrap
03: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/

Installation
02:46

Gather Assets
05:35

Base Markup
03:48

Page Containers and Rows
08:00

Adding Containers for Content
06:32
+
HTML Markup
9 Lectures 01:03:37

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

You can download the final HTML file on attachment.

Coding the Footer
05:04
+
Styling with CSS
11 Lectures 02:02:36
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

You can download the final CSS file on attachment.

Styling the Footer
04:28
+
Responsive
6 Lectures 01:10:28

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

You can download the final Responsive CSS file on attachment.

Final Touches
09:44
+
Validation
1 Lecture 02:09
HTML/CSS Validation
02:09
About the Instructor
1st Web Designer
4.2 Average rating
141 Reviews
12,100 Students
1 Course
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