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


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


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


Section 1: Introduction
What Is Flat Web Design
15 pages
Principles of Flat Web Design
2 pages
Tools you need
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
6 pages
Finding good Inspiration
10 pages
Conceptual Sketching
3 pages

You can download the final Wireframe from attachment.

Quiz: Section 2
4 questions
Section 3: Designing in Photoshop
1200 Grid
Baseline Grid

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

Grid System:
Icons: 80 Shades of White Icons by Victor Erixon

The Header
Latest Work
Creative Process
Call to Action

You can get the final PSD by downloading attachment.

Section 4: Bootstrap
What is Twitter Bootstrap

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

Gather Assets
Base Markup
Page Containers and Rows
Adding Containers for Content
Section 5: HTML Markup
Coding the Header
Coding the Banner
Coding the Services
Coding the Latest Work
Coding the Creative Process
Coding the Testimonials
Coding the Call to Action
Coding the Contact Info

You can download the final HTML file on attachment.

Section 6: Styling with CSS
Global Styles & Typography
Styling the Header
Styling the Banner
Styling the Services
Styling the Latest Work
Styling Latest Work II
Styling Creative Process
Styling the Testimonials
Styling the Call to Action
Styling the Contact Info

You can download the final CSS file on attachment.

Section 7: Responsive
Break Point 768px Small Devices
Break Point 992px Medium Devices (Part 1)
Break Point 992px Medium Devices (Part 2)
Break Point 1200px Desktops (Part 1)
Break Point 1200px Desktops (Part 2)

You can download the final Responsive CSS file on attachment.

Section 8: Validation
HTML/CSS Validation

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


Hours of video content


Course Enrollments




Average Rating
  1. 5 Stars
  2. 4 Stars
  3. 3 Stars
  4. 2 Stars
  5. 1 Stars
    • Dan Goldfeder

    For a totally CSS newbie is a great course

    I'm a newbie on CSS stuff and this course help me to understand how it works and how to use it as a very important tool for your site. The other thing I love about this course is the other tools you can use it to help you design your site. I really recommended 100%.

    • 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.

Show more reviews
Ready to start learning?
Preview this course