VOOZH about

URL: https://www.coursera.org/learn/advanced-web-layouts

⇱ Advanced Web Layouts | Coursera

Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.

Gain insight into a topic and learn the fundamentals.
Intermediate level

Recommended experience

9 hours to complete
Flexible schedule
Learn at your own pace
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.

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

4 assignments

Taught in English

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

University of California, Davis
8 Courses•328,188 learners

Explore more from Design and Product

Why people choose Coursera for their career

👁 Image

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."
👁 Image

Jennifer J.

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

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."
👁 Image

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

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.

Financial aid available,