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.
98 reviews
TAUGHT BY
  • Michael Burns is a Web & Graphic Designer based in the Philippines. He started designing during his college days with most of his skills and knowledge being self taught. He believes that learning Web and Graphic Design can be learned online and is a matter of practicing really hard until the desired skills are acquired. Michael is also a Design Guru at www.1stwebdesigner.com. At 1stWebDesigner he teaches Web and Graphic design tutorials for beginners. He just loves sharing ideas with everyone.

WHAT'S INSIDE
  • Lifetime access to 54 lectures and 2 quizzes
  • 7+ hours of high quality content
  • Closed captioning enabled
  • A community of 11100+ students learning together!
  • 180+ discussions
SHARE

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.
98 reviews

HOW UDEMY WORKS?

Discover courses made by experts from around the world.

Take your courses with you and learn anytime, anywhere.

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

THE UDEMY GUARANTEE

30 day money back guarantee
Lifetime access
Available on Desktop, iOs and Android
Certificate of completion

CURRICULUM

  • SECTION 1:
    Introduction
  • 1
    What Is Flat Web Design
    15 pages
  • 2
    Principles of Flat Web Design
    2 pages
  • 3
    Tools you need
    01:40
  • 4
    Quiz: Section 1
    3 questions
  • SECTION 2:
    Planning & Wire framing
  • 5
    The Goal of the website
    3 pages
  • 6
    Ascertain the elements
    3 pages
  • 7
    AIDA Principle
    6 pages
  • 8
    Whitespace
    6 pages
  • 9
    Finding good Inspiration
    10 pages
  • 10
    Conceptual Sketching
    3 pages
  • 11
    Wire framing the Layout
    15:07

    You can download the final Wireframe on the link below

    Download Wireframe

  • 12
    Quiz: Section 2
    4 questions
  • SECTION 3:
    Designing in Photoshop
  • 13
    1200 Grid
    02:39
  • 14
    Baseline Grid
    03:07
  • 15
    Setting up
    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

    Resource Files: Get it here!

  • 16
    The Header
    08:10
  • 17
    Banner
    14:45
  • 18
    Services
    12:47
  • 19
    Latest Work
    15:34
  • 20
    Creative Process
    11:55
  • 21
    Testimonials
    14:33
  • 22
    Call to Action
    05:34
  • 23
    Footer
    10:34

    You can get the final PSD by clicking the link below

    Download PSD

  • SECTION 4:
    Bootstrap
  • 24
    What is Twitter Bootstrap
    03:46
  • 25
    Installation
    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/

  • 26
    Gather Assets
    05:35
  • 27
    Base Markup
    03:48
  • 28
    Page Containers and Rows
    08:00
  • 29
    Adding Containers for Content
    06:32
  • SECTION 5:
    HTML Markup
  • 30
    Coding the Header
    06:54
  • 31
    Coding the Banner
    03:58
  • 32
    Coding the Services
    06:54
  • 33
    Coding the Latest Work
    12:04
  • 34
    Coding the Creative Process
    11:49
  • 35
    Coding the Testimonials
    11:57
  • 36
    Coding the Call to Action
    00:38
  • 37
    Coding the Contact Info
    04:19
  • 38
    Coding the Footer
    05:04

    You can download the final HTML file on the link below

    Download HTML

  • SECTION 6:
    Styling with CSS
  • 39
    Global Styles & Typography
    11:16
  • 40
    Styling the Header
    16:41
  • 41
    Styling the Banner
    12:04
  • 42
    Styling the Services
    08:42
  • 43
    Styling the Latest Work
    17:08
  • 44
    Styling Latest Work II
    10:16
  • 45
    Styling Creative Process
    16:37
  • 46
    Styling the Testimonials
    13:50
  • 47
    Styling the Call to Action
    06:20
  • 48
    Styling the Contact Info
    05:14
  • 49
    Styling the Footer
    04:28

    You can download the final CSS file on the link below


    Download CSS

  • SECTION 7:
    Responsive
  • 50
    Break Point 768px Small Devices
    15:04
  • 51
    Break Point 992px Medium Devices (Part 1)
    12:19
  • 52
    Break Point 992px Medium Devices (Part 2)
    10:30
  • 53
    Break Point 1200px Desktops (Part 1)
    11:51
  • 54
    Break Point 1200px Desktops (Part 2)
    11:00
  • 55
    Final Touches
    09:44

    You can download the final Responsive CSS file on the link below


    Download Responsive CSS

  • SECTION 8:
    Validation
  • 56
    HTML/CSS Validation
    02:09

UDEMY BY THE NUMBERS

5,200,000
Hours of video content
19,000,000
Course Enrollments
5,700,000
Students

RATING

  • 73
  • 14
  • 3
  • 3
  • 5
AVERAGE RATING
NUMBER OF RATINGS
98

REVIEWS

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

  • Samuel Ryan
    I'm glad I never paid full price.

    I purchased this course in the New Year sale. The content is great, but the delivery needs to be improved. I didn't complete the course as it became to painful to follow, so I just took snippets from the course and i'm pleased on what I learn't.

  • Reis Caffrey
    In-depth and rewarding

    Great course for those who want to build fantastic flat-design websites! Highly recommended.

  • Matija Vuk
    Amazing course well worth the money (unlike most of the courses here..unfortunately)

    all you need to start producing well designed modern flat and responsive web sites. Good job Michael !

  • 30 day money back guarantee!
  • Lifetime Access. No Limits!
  • Mobile Accessibility
  • Certificate of Completion