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

24,000,000

Course Enrollments

6,800,000

Students

Reviews

Average Rating
4.4
Details
  1. 5 Stars
    78
  2. 4 Stars
    15
  3. 3 Stars
    3
  4. 2 Stars
    5
  5. 1 Stars
    6
    • 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.

    • Anna Leppänen

    What a mess

    One of the worst courses I've ever taken. I would not mind that the instructor is not a native english speaker if he only had prepared what he was going to say a bit better. It is a pain to listen to him. And all the files that are missing? What's up with that? This course is a good example of the fact that it is a different skill all together to teach than it is being an expert at something. Fail. I'm lucky that I got this as a part of deal where I paid 9 dollars for 10 courses and not the price he's asking.

    • Oli Laban

    Would certainly recommend!

    This course is great if you want to learn about both flat web design and responsive development. It would help if you know a bit of HTML and CSS before taking this course as details like that are not explained in full. The website you create in this course looks beautiful. In my opinion, better than any other similar course. The design part of the course in Photoshop is not explained in detail although that would probably be a course of it's own and also, there are some great PDFs that go into detail about flat web design and the planning process. The only aspect of the production that could have been better was the commentary volume sometimes jumped from quiet to loud but it is no real inconvenience. Overall, I would recommend this course to anyone that wants to learn about the process of designing and developing a flat responsive website.

    • Nadir Durmic

    Great course which needs to be updated

    This is definitely one the best and complete web development courses which covers not only the basics but also more advanced topics which can be used while making a site. However, the materials on the course are not accessible since the course is not updated for couple of months, but however, I have found Mr. Michael on internet and he sent me needed files very fast. So overall, this course needs some update, but it is great, and I would recommend it to everyone wanting to learn web development.

    • Lisa Berry

    Glitchy, some files don't load, unnecessarily long

    A couple of things that I didn't like from this experience: 1. The lectures don't load properly, I kept having to download each pdf and viewing it on the computer which kind of defeats the whole purpose of Udemy. 2. The dropbox links don't work, good luck getting those resource files - so yeah, you can't really do anything with this course. If you look in the discussion he offers more links, but they don't work either. I did like the few videos the instructor put in, they're nice and informative. The information in the course is very clear and helpful. My problem isn't with the course itself, but how it runs on Udemy, the lack of resource files and the huge price tag on it - I am so glad I didn't pay full price for this! Please don't pay full price for this.

Show more reviews
Ready to start learning?
Preview this course