Learn Responsive Web Design

Learn Responsive Web Design

本课程是多个项目的一部分。

位教师：Kevin Powell

包含在 Coursera Plus 中

了解更多

6个模块

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

4.5

（13 条评论）

中级等级

推荐体验

2 周完成

在 10 小时一周

灵活的计划

自行安排学习进度

6个模块

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

4.5

（13 条评论）

中级等级

推荐体验

2 周完成

在 10 小时一周

灵活的计划

自行安排学习进度

您将学到什么

Responsive web design, CSS, HTML

您将获得的技能

要了解的详细信息

可分享的证书

添加到您的领英档案

作业

6 项作业

授课语言：英语（English）

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

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

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

积累特定领域的专业知识

此课程作为的一部分提供

在注册此课程时，您还需要选择一个特定的合作项目。

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

该课程共有6个模块

This course will take you to a professional level in responsive web design. You'll learn to build advanced layouts while solving fun coding challenges along the way.

Let me ask you a few questions: Do you want to learn to build responsive websites that look 100% professional? Do you want to be confident that your website works well on all devices? Are you tired of feeling that your CSS is a mess? If your answer is YES, then this is the perfect course for you! It gives you a deep understanding of CSS and responsive design while keeping you fully engaged along the way. You'll learn to build four different layouts: a blog, a landing page, a banner, and a company website. Each one will take your skills to a new level. To ensure that the knowledge sticks with you, you are given interactive coding challenges as you progress. It's as if you and the instructor are pair-programming together! This kind of fast-paced interactivity simply isn't possible with any other platform than Scrimba!

The learning module dives into CSS fundamentals, providing learners with a solid foundation in CSS syntax, selectors, properties, and layout techniques to effectively style and structure web pages with creativity and precision.

涵盖的内容

1个作业26个插件

1个作业总计30分钟

CSS Fundamentals Graded Assignment30分钟

26个插件总计176分钟

Welcome to interactive lessons!1分钟
Welcome to the course!4分钟
An Important note before we start1分钟
Introduction to the CSS Fundamentals module3分钟
Margin and Padding - Margins and spacing out text5分钟
Margin and Padding - Collapsing margins7分钟
Margin and Padding - Consistency and a new type of selector5分钟
Inline and Block elements6分钟
The span element4分钟
Styling links12分钟
Practice Time!22分钟
Inline-block5分钟
Styling buttons9分钟
Specificity basics5分钟
Specificity - two selectors of equal value2分钟
Compound Selectors15分钟
Compound selectors and specificity7分钟
A better way to name our CSS classes9分钟
The text properties3分钟
Font-family and font stacks6分钟
How to use Google fonts9分钟
Inheritance2分钟
Working with, overwriting, and applying inheritance4分钟
Putting it all together8分钟
Putting it all together - the CSS18分钟
Solution to the challenge and module wrap up4分钟

The learning module trains developers to adopt a responsive mindset when building websites and applications in HTML and CSS.

涵盖的内容

1个作业45个插件

1个作业总计30分钟

Starting to Think Responsively Graded Assignment30分钟

45个插件总计246分钟

Starting to think responsively3分钟
CSS Units3分钟
CSS Units - Percentage6分钟
Controlling the width of images5分钟
min-width and max-width3分钟
CSS Units - The em unit5分钟
The problem with ems2分钟
CSS Units - rems5分钟
Picking which unit to use4分钟
ems and rems - an example8分钟
Flexbox refresher and setting up some HTML8分钟
Basic styles and setting up the columns7分钟
Adding the background color4分钟
Setting the column widths4分钟
Spacing out the columns4分钟
Controlling the vertical position of flex items5分钟
Media Query basics10分钟
Making our layout responsive with flex-direction7分钟
flex-direction explained3分钟
Creating a navigation5分钟
Using flexbox to start styling our navigation8分钟
Making our navigation look good7分钟
Adding the underline4分钟
A more complicated navigation7分钟
Making the navigation responsive7分钟
Taking a look at the rest of the project4分钟
Setting up the structure8分钟
Featured article structure5分钟
The home page - HTML for the recent articles2分钟
home page - html for the aside6分钟
Starting the CSS for our page15分钟
Starting the layout - looking at the big picture9分钟
Starting to think mobile first3分钟
Styling the featured article6分钟
Changing the visual order with flexbox5分钟
Playing with the title's position, and the downsides of negative margins5分钟
Styling recent articles for large screens8分钟
Changing image sizes with object-fit4分钟
Setting up the widgets and talking breakpoints7分钟
Using a new pseudo-class to wrap-up the homepage7分钟
Creating the recent posts page3分钟
Setting up the About Me page4分钟
Fixing up some loose ends4分钟
Important Note: The viewport meta tag4分钟
Module wrap up3分钟

Elevates your styling skills in HTML and CSS, and equip yourself with advanced techniques and best practices to create visually stunning and polished web designs.

涵盖的内容

1个作业38个插件

1个作业总计25分钟

Stepping Up Our Style Graded Assignment25分钟

38个插件总计172分钟

It's time to step up our style3分钟
A look at line-height5分钟
text-transform: uppercase4分钟
Making things easier to read with letter-spacing4分钟
A nice color trick with rgba()5分钟
background-images4分钟
Background images and the file path (very important note)2分钟
Controlling our background images8分钟
BBQ Splash Page - Project Introduction3分钟
Writing the HTML for the BBQ splash page7分钟
Starting to style it up - BBQ Splash Page11分钟
Adding the background image - BBQ Splash Page4分钟
Changing the order - BBQ Splash Page4分钟
Styling the main content area - BBQ Splash page3分钟
Adding the media query - BBQ Splash Page4分钟
Setting up the typography for large screens - BBQ Splash Page2分钟
Starting to set things up for large screens - BBQ Splash Page3分钟
Viewport units7分钟
Adding viewport units to the BBQ Splash Page2分钟
Enter box-sizing: border-box7分钟
Using flexbox to vertically center the main content - BBQ Splash Page3分钟
Fixing the intro section on both small and large screens - BBQ Splash Page3分钟
Dealing with very large screens solution #14分钟
Dealing with very big screens solution #25分钟
The very basics of forms11分钟
Form basics - form attributes4分钟
The basics of styling form5分钟
Adding the form - BBQ Splash Page4分钟
Starting to style up the form - BBQ Splash Page4分钟
Making the inputs look good - BBQ Splash Page4分钟
CSS Gradients6分钟
Styling the button - BBQ Splash Page5分钟
Basic transitions5分钟
Intro to transforms (and a quick word on performance)3分钟
We can transition more than :hover3分钟
Border gradients5分钟
Blending images, colors, and gradients with background-blend-mode4分钟
Wrap up2分钟

This module takes your understanding of Flexbox to new heights, exploring advanced concepts and techniques that maximize the power of Flexbox for building complex and responsive layouts

涵盖的内容

1个作业17个插件

1个作业总计15分钟

Taking Flexbox to the Next Level Graded Assignment15分钟

17个插件总计76分钟

Taking flexbox to the next level2分钟
flex-direction, flex-wrap, and flex-flow5分钟
justify-content and align-items and their relationship to flex-direction7分钟
Exploring align-content4分钟
flex-grow and flex-shrink explained5分钟
flex-basis4分钟
The flex shorthand property4分钟
Aligning individual elements with align-self2分钟
Margin auto and flexbox4分钟
Building a card component with flexbox - Introduction3分钟
Building a card component with flexbox - The markup5分钟
Building a card component with flexbox - Typography6分钟
Building a card component with flexbox - Mobile layout11分钟
Building a card component with flexbox - Large screens part one5分钟
Building a card component with flexbox - Large screens part two5分钟
Centering something on the screen with flexbox2分钟
Module wrap-up2分钟

Unleash the power of CSS Grid, allowing you to create versatile and intricate page layouts with ease, precision, and responsive capabilities.

涵盖的内容

1个作业19个插件

1个作业总计25分钟

CSS Grid: The Ultimate Layout Tool Graded Assignment25分钟

19个插件总计96分钟

Introduction to CSS Grid3分钟
Setting up a basic grid5分钟
Placing items on the grid4分钟
grid-row and grid-column shorthands5分钟
Spanning columns2分钟
Some similarities to flexbox5分钟
Using grid for our card component13分钟
The grid-gap property3分钟
Adding the gap to our card3分钟
The implicit and explicit grid6分钟
Exploring grid areas8分钟
grid-areas and media queries6分钟
minmax()4分钟
the fr unit3分钟
minmax() and the fr unit2分钟
Putting grid to use - part 112分钟
Putting grid to use - part 24分钟
repeat()3分钟
auto-fit and auto-fill5分钟

Discover how to craft stunning and feature-rich web designs with exceptional functionality and aesthetic finesse.

涵盖的内容

1个作业29个插件

1个作业总计20分钟

Taking it to the Next Level Graded Assignment20分钟

29个插件总计121分钟

Taking it to the next level2分钟
Analyzing the layouts3分钟
Starting work on the homepage3分钟
The HTML for the homepage4分钟
The first lines of CSS you should always write4分钟
Setting up our grid for small screens3分钟
Continuing the hero area5分钟
The "info" section4分钟
Setting up the footer3分钟
Using Font Awesome for our icons5分钟
Wrapping up the footer2分钟
Setting up the grid and hero for larger screens5分钟
Setting up the rest of the page for larger screens6分钟
Starting to style our navigation3分钟
Setting up our navigation for small screens with positioning5分钟
Making the close button3分钟
Adding the open button to our navigation4分钟
Styling the navigation for large screens2分钟
Fixing up the navigation and hero area6分钟
Creating the second page2分钟
Styling the about page9分钟
Exploring box-shadows to get the effect on our images5分钟
Using pseudo-elements to add the yellow lines5分钟
Adding the yellow bar to our titles3分钟
Creating the contact page4分钟
Styling the contact form7分钟
Styling the contact form for larger screens6分钟
The loose ends5分钟
You did it!3分钟

获得职业证书

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

位教师

Kevin Powell

Scrimba

5 门课程8,219 名学生

提供方

Scrimba

从 Mobile and Web Development 浏览更多内容

状态：免费试用
University of London
Responsive Web Design
课程
状态：免费试用
Scrimba
Build a Responsive Website with HTML and CSS
课程
状态：免费试用
Board Infinity
Mastering Responsive UI Design for Modern Web Development
课程
状态：免费试用
University of London
Responsive Website Basics: Code with HTML, CSS, and JavaScript
课程

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

Felipe M.

自 2018开始学习的学生

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

Jennifer J.

自 2020开始学习的学生

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

Larry W.

自 2021开始学习的学生

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

Chaitanya A.

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

学生评论

4.5

13 条评论

5 stars
76.92%
4 stars
7.69%
3 stars
7.69%
2 stars
0%
1 star
7.69%

显示 3/13 个

已于 Dec 23, 2023审阅

I have been following Kevin from youtube, he really puts of the great content, I really like the way he teaches to make site responsive effortlessly

已于 Sep 30, 2023审阅

Detailed, hands-on and fun. This course simplifies intimidating CSS concepts like Flex-box, CSS Grid and Media - Queries. The instructor is amazing. Thanks so much for this terrific course.

查看更多评论

通过 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.