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.
  • Lectures 54
  • Video 8 Hours
  • Skill level all level
  • 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.

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?

  • Over 54 lectures and 7.5 hours of content!
  • 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.

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
Quiz: Section 1
3 questions
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

Join the biggest student community

6,400,000

Hours of video content

28,000,000

Course Enrollments

7,500,000

Students

Reviews

Average Rating
4.4
Details
  1. 5 Stars
    81
  2. 4 Stars
    19
  3. 3 Stars
    5
  4. 2 Stars
    5
  5. 1 Stars
    7
    • Stuart Ryan

    It was OK

    Good introduction to Bootstrap

    • Ben Spak

    "Right Here"

    A large portion of the course's content is in ebook form only. I understand that English isn't the creator's native language, but "Right here" is a phrase used more often than any other in this course. He's not very descriptive of what he's doing.

    • Matthew Lee

    Very Good Course

    This course is relatively fast, straight to the point, and quite frankly, with a very nice end result. The instructor is competent, and he doesn't stop to explain every little thing he does (which I personally liked, but I understand how it may not be ideal for everyone). My only suggestion is to organize the resources a little better. They seemed scattered throughout different lessons, and often hard to find. I also seemed to end up with a few slightly different results even though I followed the code line by line. Overall, I liked it and would recommend it to someone who wants to learn web design in an effective way.

    • De Muñoz Bañuelos

    Really good course, almost great

    I learned a lot: responsive design, flat web design and Bootstrap. I won't complain about it. The disappointments come when the professor makes a mistake and takes time to fix it: I'm sorry, but I paid for a course to make the most of my time and this is just unprofessional (because it is really easy to edit the video and just leave everything correct). The other bad point is the lack of material: I couldn't find all the material used in throught the course so sometimes I had to make my own with the pdf file provided (again, didn't make the most of my time with this kind of delay), also lacking a place where all the material can be downloaded without need of going into every single class to check if there is the needed material. Finally, the lack of response from the proffesor and some practices that are out to date (like the text-indent: -9999px CSS trick) or that could be done in a better way was also a little disappointing. In overall, this is a great course to learn how to use Bootstrap and the principles behind flat web design and responsive design. It could be enhanced, but it is a really good start if you are new to all this.

    • Zertifizierte Webdesignerin Christa Schulte

    Very actually content and a lot of information!

    Great course for learning actualy webdesign. I think flatdesign is a trend and its usefull to know about it.

Show more reviews
Ready to start learning?
Preview this course