Advanced Web Layouts

本课程是 Web Development for Beginners 专项课程的一部分

位教师：William Mead

包含在中

了解更多

4个模块

深入了解一个主题并学习基础知识。

中级等级

推荐体验

9 小时完成

灵活的计划

自行安排学习进度

4个模块

深入了解一个主题并学习基础知识。

中级等级

推荐体验

9 小时完成

灵活的计划

自行安排学习进度

您将学到什么

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.

您将获得的技能

您将学习的工具

要了解的详细信息

可分享的证书

添加到您的领英档案

作业

4 项作业

授课语言：英语（English）

了解顶级公司的员工如何掌握热门技能

了解关于 Coursera for Business 的更多信息

Petrobras, TATA, Danone, Capgemini, P&G 和 L'Oreal 的徽标

积累特定领域的专业知识

本课程是 Web Development for Beginners 专项课程专项课程的一部分

在注册此课程时，您还会同时注册此专项课程。

向行业专家学习新概念
获得对主题或工具的基础理解
通过实践项目培养工作相关技能
获得可共享的职业证书

该课程共有4个模块

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.

涵盖的内容

17个视频1篇阅读材料1个作业1个讨论话题

17个视频总计85分钟

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

1篇阅读材料总计1分钟

Course Navigation and Safety Statement 1分钟

1个作业总计45分钟

Module 1 Quiz 45分钟

1个讨论话题总计10分钟

Module 1 Discussion 10分钟

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.

涵盖的内容

12个视频1个作业1个讨论话题

12个视频总计47分钟

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

1个作业总计45分钟

Module 2 Quiz 45分钟

1个讨论话题总计15分钟

Module 2 Discussion 15分钟

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.

涵盖的内容

22个视频1个作业1个讨论话题

22个视频总计109分钟

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

1个作业总计45分钟

Module 3 Quiz 45分钟

1个讨论话题总计15分钟

Module 3 Discussion 15分钟

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

涵盖的内容

16个视频1个作业2个讨论话题

16个视频总计87分钟

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

1个作业总计20分钟

Module 4 Quiz 20分钟

2个讨论话题总计30分钟

Module 4 Discussion 15分钟
Self-Reflection 15分钟

获得职业证书

将此证书添加到您的 LinkedIn 个人资料、简历或履历中。在社交媒体和绩效考核中分享。

位教师

William Mead

University of California, Davis

8 门课程 326,842 名学生

提供方

University of California, Davis

从 Design and Product 浏览更多内容

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

人们为什么选择 Coursera 来帮助自己实现职业发展

Felipe M.

自 2018开始学习的学生

''能够按照自己的速度和节奏学习课程是一次很棒的经历。只要符合自己的时间表和心情，我就可以学习。'

Jennifer J.

自 2020开始学习的学生

''我直接将从课程中学到的概念和技能应用到一个令人兴奋的新工作项目中。'

Larry W.

自 2021开始学习的学生

''如果我的大学不提供我需要的主题课程，Coursera 便是最好的去处之一。'

Chaitanya A.

''学习不仅仅是在工作中做的更好：它远不止于此。Coursera 让我无限制地学习。'

通过 Coursera Plus 开启新生涯

无限制访问 10,000+ 世界一流的课程、实践项目和就业就绪证书课程 - 所有这些都包含在您的订阅中

了解更多

通过在线学位推动您的职业生涯

获取世界一流大学的学位 - 100% 在线

探索学位

加入超过 3400 家选择 Coursera for Business 的全球公司

提升员工的技能，使其在数字经济中脱颖而出

了解更多

常见问题

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.