Advanced Web Layouts

This course is part of Web Development for Beginners Specialization

Instructor: William Mead

Access provided by SCB Academy

4 modules

Gain insight into a topic and learn the fundamentals.

Intermediate level

Recommended experience

9 hours to complete

Flexible schedule

Learn at your own pace

4 modules

Gain insight into a topic and learn the fundamentals.

Intermediate level

Recommended experience

9 hours to complete

Flexible schedule

Learn at your own pace

What you'll learn

Different ways designers and developers can create and control the flow of content on web pages.
Advanced uses of CSS grid and creative ways to implement grid on websites.
Advanced features of CSS Flexbox properties, controlling the use of space in a row or a column, positioning, and techniques to create web layouts.

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 final course of the Web Development for Beginners specialization, we’ll review new approaches for designers and developers to create and control the flow of content on web pages. We’ll review advanced uses of CSS grid, and explore creative ways grid has been implemented on websites in recent years. You’ll practice to build your fluency with challenges and techniques learned throughout the course, and work with advanced features of CSS Flexbox properties to create web layouts. Lastly, we’ll explore how artificial intelligence will affect design and web development in the near-term future, and provide some guidance around using those tools effectively.

Welcome to the course! In this module, we will start by reviewing the different ways in which designers and developers can create and control the flow of content on web pages. In other words, how the content on the page is laid out. We will see how these different systems of layout use different CSS properties to tell the browser how to display content on the page. Then we will dive specifically into the basics of CSS Grid and explore the properties that make this system work.

What's included

17 videos1 reading1 assignment1 discussion prompt

17 videos Total 85 minutes

Course Introduction 3 minutes
Module 1 Introduction 1 minute
Advanced Web Layout Overview, Part 1 6 minutes
Advanced Web Layout Overview, Part 2 5 minutes
Advanced Web Layout Overview, Part 3 4 minutes
Advanced Web Layout Overview, Part 4 9 minutes
Advanced Web Layout Overview, Part 5 7 minutes
Advanced Web Layout Overview, Part 6 6 minutes
Advanced Web Layout Overview, Part 7 5 minutes
Advanced Web Layout Overview, Part 8 4 minutes
Web Layout Cheat Sheet 3 minutes
CSS Grid Basics, Part 1 6 minutes
CSS Grid Basics, Part 2 3 minutes
CSS Grid Basics, Part 3 8 minutes
CSS Grid Basics, Part 4 4 minutes
CSS Grid Basics, Part 5 7 minutes
CSS Grid Basics, Part 6 4 minutes

1 reading Total 1 minute

Course Navigation and Safety Statement 1 minute

1 assignment Total 45 minutes

Module 1 Quiz 45 minutes

1 discussion prompt Total 10 minutes

Module 1 Discussion 10 minutes

Welcome to the second module of this course. In this module, you will review some more advanced uses of CSS grid, and explore some of the creative ways grid has been implemented on websites in recent years. You will also work on some challenges that will help you practice and become familiar with the techniques discussed in this module.

What's included

12 videos1 assignment1 discussion prompt

12 videos Total 47 minutes

Module 2 Introduction 1 minute
Advanced Grid Examples, Part 1 3 minutes
Advanced Grid Examples, Part 2 6 minutes
Advanced Grid Examples, Part 3 6 minutes
Advanced Grid Examples, Part 4 6 minutes
Advanced Grid Examples, Part 5 7 minutes
Grid Template Challenges - Challenge 1 Start 1 minute
Grid Template Challenges - Challenge 1 Solution, Challenge 2 Start 1 minute
Grid Template Challenges - Challenge 2 Solution, Challenge 3 Start 2 minutes
Grid Template Challenges - Challenge 3 Solution, Challenge 4 Start 3 minutes
Grid Template Challenges - Challenge 4 Solution, Challenge 5 Start 6 minutes
Grid Template Challenges - Challenge 5 Solution 5 minutes

1 assignment Total 45 minutes

Module 2 Quiz 45 minutes

1 discussion prompt Total 15 minutes

Module 2 Discussion 15 minutes

In this module, you will learn about some more advanced features of the CSS Flexbox properties and how you can control the use of space in a row or a column, particularly when you are unsure of how large the viewport will be. You will also learn about positioning in this module, and how that layout system can be used in combination with the other tools in your toolkit to create complex web layouts. Along the way, you will get lots of practice with these techniques and see plenty of examples you can use in your own web projects.

What's included

22 videos1 assignment1 discussion prompt

22 videos Total 109 minutes

Module 3 Introduction 1 minute
Flexbox, Part 3A (Audio Only) 6 minutes
Flexbox, Part 3B 7 minutes
Flexbox, Part 3C 6 minutes
Flexbox, Part 3D 4 minutes
Flexbox, Part 3 - Challenges 1 and 2 8 minutes
Flexbox, Part 3 - Challenges 3 5 minutes
Flexbox, Part 3 - Challenges 4 6 minutes
Flexbox, Part 3 - Challenges 5 4 minutes
Flexbox, Part 3 - Challenges 6 5 minutes
Positioning Examples, Part 1 4 minutes
Positioning Examples, Part 2 8 minutes
Positioning Examples, Part 3 4 minutes
Positioning Examples, Part 4 4 minutes
Positioning Examples, Part 5 4 minutes
CSS Positioning Practice 1 minute
Drop Down Menus, Part 1 7 minutes
Drop Down Menus, Part 2 2 minutes
Drop Down Menus, Part 3 4 minutes
Drop Down Menus, Part 4 6 minutes
Drop Down Menus, Part 5 3 minutes
Parallax Examples 8 minutes

1 assignment Total 45 minutes

Module 3 Quiz 45 minutes

1 discussion prompt Total 15 minutes

Module 3 Discussion 15 minutes

Welcome to the final module of our course. In this module you will learn about a few more techniques that will help you create web layouts. Then we will wrap up the course by talking about what's next to learn and ways in which you can utilize the skills you have learned in this course. We will also explore some ideas about how artificial intelligence will affect design and web development in the short term future, and provide some guidance around using those tools effectively