Responsive Web Design 101: Build A Responsive Webpage from Scratch | Maia Coghlan | Skillshare

Responsive Web Design 101: Build A Responsive Webpage from Scratch

Maia Coghlan, Front-end Web Developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
21 Videos (1h 39m)
    • Introduction

    • Project Topic and Setup

    • HTML Basics

    • CSS Basics

    • Styling Your Header

    • Create An Image Banner

    • Your Heading

    • Share Your Progress!!

    • Image Row HTML

    • Image Row CSS

    • Feature Block HTML

    • Feature Block CSS

    • Row Reverse

    • Media Queries

    • Additonal Styling

    • Footer

    • Insert a Menu Icon

    • Hide Your Menu Links

    • A Tiny Bit of JavaScript

    • Create a Dropdown Menu

    • Final Edit

26 students are watching this class

About This Class

In this class, Web Developer Maia Coghlan teaches beginners a simple and effective way to write HTML and CSS code for their own web page so that it looks great and functions correctly on any screen size. With the knowledge you gain from this class you’ll be creating beautiful, responsive websites to suit any need in no time. And the best parts? You don’t need to have any previous coding experience, and you’ll learn to write all the code yourself!

The lessons will cover the basics of HTML and CSS, as well as going deeper into CSS using flex-box and media queries to improve the overall design and layout of your website. You will learn how to make individual images and the entire layout of your website adapt to the size of the viewer's screen. You'll also understand how each section fits together and have a collection of usable code ready to easily insert into any other project you might work on in the future, all of it having been written by you!

The website layout taught in this class can easily be adapted to suit any need, and by the end of you will not only have created a responsive website but you’ll hopefully have built it to complement your own particular needs. It could be tailored as a portfolio page, product landing page, tribute page, or anything really!

Before you begin you will need to install the following free tools (help with this is given at the beginning of the class):

You can see a live example of the page structure we will be creating here.





  • --
  • Beginner
  • Intermediate
  • Advanced
  • All Levels
  • Beg/Int
  • Int/Adv


Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

Maia Coghlan

Front-end Web Developer

Hey! I'm Maia. I'm a self-taught web developer from Australia, currently living in Malaysia. I discovered my passion for coding while I was living my passion for travel, and now I do both at the same time!


Being self-taught means I spent a huge amount of time sifting through irrelevant and repetitive information on the web while trying to figure out exactly what I needed to learn to begin my career as a Web Developer. This journey made me want to reach out as a teacher to...

See full profile

Report class