Advanced Web Layouts

This course is part of Web Development for Beginners Specialization

Instructor: William Mead

Included with

Learn more

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

What's included

16 videos1 assignment2 discussion prompts

16 videos Total 87 minutes

Module 4 Introduction 1 minute
Introducing CSS Floats 5 minutes
Float Challenges, Part 1 4 minutes
Float Challenges, Part 2 5 minutes
Float Challenges, Part 3 5 minutes
Example Layout with Float, Part 1 10 minutes
Example Layout with Float, Part 2 7 minutes
Next Steps, Part 1 6 minutes
Next Steps, Part 2 11 minutes
Next Steps, Part 3 3 minutes
Thoughts About Using AI, Part 1 2 minutes
Thoughts About Using AI, Part 2 6 minutes
Thoughts About Using AI, Part 3 5 minutes
Thoughts About Using AI, Part 4 7 minutes
Thoughts About Using AI, Part 5 8 minutes
Course Summary 1 minute

1 assignment Total 20 minutes

Module 4 Quiz 20 minutes

2 discussion prompts Total 30 minutes

Module 4 Discussion 15 minutes
Self-Reflection 15 minutes

Earn a career certificate

Add this credential to your LinkedIn profile, resume, or CV. Share it on social media and in your performance review.

Instructor

William Mead

University of California, Davis

8 Courses 326,621 learners

Offered by

University of California, Davis

Explore more from Design and Product

Status: Free Trial
University of California, Davis
Creating Basic Web Layouts
Course
Status: Free Trial
Board Infinity
Advanced CSS Techniques & Responsive Design
Course
Status: Free Trial
Logical Operations
Web Dev: Page Layout and Complex Style Rules
Course
Status: Free Trial
Packt
Advanced CSS & Responsive Web Design
Course

Why people choose Coursera for their career

Felipe M.

Learner since 2018

"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."

Jennifer J.

Learner since 2020

"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."

Larry W.

Learner since 2021

"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."

Chaitanya A.

"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."

Open new doors with Coursera Plus

Unlimited access to 10,000+ world-class courses, hands-on projects, and job-ready certificate programs - all included in your subscription

Learn more

Advance your career with an online degree

Earn a degree from world-class universities - 100% online

Explore degrees

Join over 3,400 global companies that choose Coursera for Business

Upskill your employees to excel in the digital economy

Learn more

Frequently asked questions

To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.

When you enroll in the course, you get access to all of the courses in the Specialization, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.

Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.