Creating Basic Web Layouts

This course is part of Web Development for Beginners Specialization

Instructor: William Mead

Access provided by BSH

4 modules

Gain insight into a topic and learn the fundamentals.

Intermediate level

Some related experience required

2 weeks to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

4 modules

Gain insight into a topic and learn the fundamentals.

Intermediate level

Some related experience required

2 weeks to complete

at 10 hours a week

Flexible schedule

Learn at your own pace

Skills you'll gain

Tools you'll learn

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

4 assignments

Taught in English

See how employees at top companies are mastering in-demand skills

Learn more about Coursera for Business

logos of Petrobras, TATA, Danone, Capgemini, P&G and L'Oreal

Build your subject-matter expertise

This course is part of the Web Development for Beginners Specialization

When you enroll in this course, you'll also be enrolled in this Specialization.

Learn new concepts from industry experts
Gain a foundational understanding of a subject or tool
Develop job-relevant skills with hands-on projects
Earn a shareable career certificate

There are 4 modules in this course

In this course, we’ll explore the history of layout on the web and techniques that have been used to create those layouts. You’ll practice using Flexbox CSS and gain an understanding of how Flexbox works to create layouts for web pages. We’ll practice using responsive web design and discuss the challenges of managing layouts across multiple screen sizes. You’ll learn specific techniques to build a responsive web page and practice using mobile first development. Lastly, you’ll apply the techniques learned in this course by using Flexbox properties to create a mini portfolio website and deploy it on GitHub.

Welcome to the course! In this module, we will start exploring the history of layout on the web. By layout, I mean specifically how the visual space of the webpage can be used, and how different elements can be arranged within that space. We will discuss the history of techniques that have been used to create layouts on the web, and dive into the complexities and challenges associated with creating layouts on the web. Let's get started!

What's included

13 videos5 readings1 assignment4 discussion prompts

13 videos Total 97 minutes

Course Introduction 3 minutes
Module Introduction 2 minutes
Web Layout History, Part 1 9 minutes
Web Layout History, Part 2 8 minutes
Web Layout History, Part 3 11 minutes
Web Layout History, Part 4 8 minutes
Box Model, Part 1 7 minutes
Box Model, Part 2 7 minutes
Box Model, Part 3 4 minutes
Box Model, Part 4 10 minutes
Display Property Basics, Part 1 10 minutes
Display Property Basics, Part 2 7 minutes
Display Property Basics, Part 3 11 minutes

5 readings Total 41 minutes

Course Navigation and Safety Statement 1 minute
The Wax and the Wane of the Web 10 minutes
Box Model Files 10 minutes
Display Property Basics Files 10 minutes
Digging Into the Display Property: Box Generation 10 minutes

1 assignment Total 35 minutes

Module 1 Quiz 35 minutes

4 discussion prompts Total 60 minutes

Learning Goals 15 minutes
Box Model (Optional) 15 minutes
Display Property Basics (Optional) 15 minutes
Module 1 Discussion 15 minutes

Welcome to the second lesson in our course on basic web layout. In this lesson you will learn about and practice a limited set of initial features that accompany the flexbox CSS layout module. You will create simple layouts using these features and get a hint of what is to come, as we get deeper into understanding how flexbox works to help us create layouts for our web pages.

What's included

15 videos2 readings1 assignment3 discussion prompts

15 videos Total 86 minutes

Module Introduction 2 minutes
Flexbox, Part 1.1 3 minutes
Flexbox, Part 1.2 6 minutes
Flexbox, Part 1.3 9 minutes
Flexbox, Part 1.4 5 minutes
Flexbox, Part 1.5 11 minutes
Flexbox Challenge 1 Intro 3 minutes
Flexbox Challenge 1 Answer & Challenge 2 Intro 2 minutes
Flexbox Challenge 2 Answer & Challenge 3 Intro 3 minutes
Flexbox Challenge 3 Answer & Challenge 4 Intro 5 minutes
Flexbox Challenge 4 Answer & Challenge 5 Intro 6 minutes
Flexbox Challenge 5 Answer & Challenge 6 Intro 5 minutes
Flexbox Challenge 6 Answer & Challenge 7 Intro 7 minutes
Flexbox Challenge 7 Answer & Challenge 8 Intro 6 minutes
Flexbox Challenge 8 Answer 13 minutes

2 readings Total 20 minutes

Flexbox, Part 1 Files 10 minutes
Flexbox Challenge Files 10 minutes

1 assignment Total 45 minutes

Module 2 Quiz 45 minutes

3 discussion prompts Total 45 minutes

Flexbox, Part 1 (Optional) 15 minutes
Flexbox Challenge (Optional) 15 minutes
Module 2 Discussion 15 minutes

Welcome to the third lesson in our course on basic web layout. In this lesson you will learn about responsive web design, including how the term was coined and the history associated with the challenges of managing layouts across many possible screen sizes. You will learn specific techniques that you can use to build a responsive web page. We will discuss mobile first development and why it is important to make your designs work on the smallest, least capable devices first, then progressively enhance those designs for users with larger screens and more resources.

What's included

17 videos4 readings1 assignment3 discussion prompts

17 videos Total 101 minutes

Module Introduction 1 minute
Responsive Design, Part 1 6 minutes
Responsive Design, Part 2 7 minutes
Responsive Design, Part 3 9 minutes
Responsive Design, Part 4 7 minutes
Responsive Design, Part 5 3 minutes
Responsive Design, Part 6 7 minutes
Responsive Design, Part 7 6 minutes
Responsive Design, Part 8 8 minutes
Responsive Design, Part 9 8 minutes
Responsive Design, Part 10 8 minutes
Responsive Design, Part 11 6 minutes
Mobile First Responsive Example, Part 1 7 minutes
Mobile First Responsive Example, Part 2 5 minutes
Mobile First Responsive Example, Part 3 2 minutes
Mobile First Responsive Example, Part 4 9 minutes
Common Sense CSS Resets 4 minutes

4 readings Total 60 minutes

Responsive Design Files 10 minutes
Responsive Design Historical Readings 30 minutes
Mobile First Response Files 10 minutes
Common Sense CSS Resets File 10 minutes

1 assignment Total 45 minutes

Module 3 Quiz 45 minutes

3 discussion prompts Total 45 minutes

Responsive Design (Optional) 15 minutes
Mobile First Responsive Example (Optional) 15 minutes
Module 3 Discussion 15 minutes

Welcome to the fourth lesson in our course on basic web layout. In this lesson you will learn about more of the flexbox properties that will help you create a variety of web layouts. This set of properties compliments the techniques learned in the previous lesson about responsive design, as they will help you further control the design of your website across a wide variety of screen sizes. At the end of this module, you will have the opportunity to use everything you have learned to create a simple, mini portfolio website and deploy it to GitHub to share with your friends, family and colleagues.