Learn Responsive Web Design

Learn Responsive Web Design

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

位教师：Kevin Powell

访问权限由 New York State Department of Labor 提供

6个模块

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

15 条评论

中级等级

推荐体验

2 周完成

在 10 小时一周

灵活的计划

自行安排学习进度

6个模块

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

15 条评论

中级等级

推荐体验

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 Assignment 30分钟

26个插件总计176分钟

Welcome to interactive lessons! 1分钟
Welcome to the course! 4分钟
An Important note before we start 1分钟
Introduction to the CSS Fundamentals module 3分钟
Margin and Padding - Margins and spacing out text 5分钟
Margin and Padding - Collapsing margins 7分钟
Margin and Padding - Consistency and a new type of selector 5分钟
Inline and Block elements 6分钟
The span element 4分钟
Styling links 12分钟
Practice Time! 22分钟
Inline-block 5分钟
Styling buttons 9分钟
Specificity basics 5分钟
Specificity - two selectors of equal value 2分钟
Compound Selectors 15分钟
Compound selectors and specificity 7分钟
A better way to name our CSS classes 9分钟
The text properties 3分钟
Font-family and font stacks 6分钟
How to use Google fonts 9分钟
Inheritance 2分钟
Working with, overwriting, and applying inheritance 4分钟
Putting it all together 8分钟
Putting it all together - the CSS 18分钟
Solution to the challenge and module wrap up 4分钟

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 Assignment 30分钟

45个插件总计246分钟

Starting to think responsively 3分钟
CSS Units 3分钟
CSS Units - Percentage 6分钟
Controlling the width of images 5分钟
min-width and max-width 3分钟
CSS Units - The em unit 5分钟
The problem with ems 2分钟
CSS Units - rems 5分钟
Picking which unit to use 4分钟
ems and rems - an example 8分钟
Flexbox refresher and setting up some HTML 8分钟
Basic styles and setting up the columns 7分钟
Adding the background color 4分钟
Setting the column widths 4分钟
Spacing out the columns 4分钟
Controlling the vertical position of flex items 5分钟
Media Query basics 10分钟
Making our layout responsive with flex-direction 7分钟
flex-direction explained 3分钟
Creating a navigation 5分钟
Using flexbox to start styling our navigation 8分钟
Making our navigation look good 7分钟
Adding the underline 4分钟
A more complicated navigation 7分钟
Making the navigation responsive 7分钟
Taking a look at the rest of the project 4分钟
Setting up the structure 8分钟
Featured article structure 5分钟
The home page - HTML for the recent articles 2分钟
home page - html for the aside 6分钟
Starting the CSS for our page 15分钟
Starting the layout - looking at the big picture 9分钟
Starting to think mobile first 3分钟
Styling the featured article 6分钟
Changing the visual order with flexbox 5分钟
Playing with the title's position, and the downsides of negative margins 5分钟
Styling recent articles for large screens 8分钟
Changing image sizes with object-fit 4分钟
Setting up the widgets and talking breakpoints 7分钟
Using a new pseudo-class to wrap-up the homepage 7分钟
Creating the recent posts page 3分钟
Setting up the About Me page 4分钟
Fixing up some loose ends 4分钟
Important Note: The viewport meta tag 4分钟
Module wrap up 3分钟

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 Assignment 25分钟

38个插件总计172分钟

It's time to step up our style 3分钟
A look at line-height 5分钟
text-transform: uppercase 4分钟
Making things easier to read with letter-spacing 4分钟
A nice color trick with rgba() 5分钟
background-images 4分钟
Background images and the file path (very important note) 2分钟
Controlling our background images 8分钟
BBQ Splash Page - Project Introduction 3分钟
Writing the HTML for the BBQ splash page 7分钟
Starting to style it up - BBQ Splash Page 11分钟
Adding the background image - BBQ Splash Page 4分钟
Changing the order - BBQ Splash Page 4分钟
Styling the main content area - BBQ Splash page 3分钟
Adding the media query - BBQ Splash Page 4分钟
Setting up the typography for large screens - BBQ Splash Page 2分钟
Starting to set things up for large screens - BBQ Splash Page 3分钟
Viewport units 7分钟
Adding viewport units to the BBQ Splash Page 2分钟
Enter box-sizing: border-box 7分钟
Using flexbox to vertically center the main content - BBQ Splash Page 3分钟
Fixing the intro section on both small and large screens - BBQ Splash Page 3分钟
Dealing with very large screens solution #1 4分钟
Dealing with very big screens solution #2 5分钟
The very basics of forms 11分钟
Form basics - form attributes 4分钟
The basics of styling form 5分钟
Adding the form - BBQ Splash Page 4分钟
Starting to style up the form - BBQ Splash Page 4分钟
Making the inputs look good - BBQ Splash Page 4分钟
CSS Gradients 6分钟
Styling the button - BBQ Splash Page 5分钟
Basic transitions 5分钟
Intro to transforms (and a quick word on performance) 3分钟
We can transition more than :hover 3分钟
Border gradients 5分钟
Blending images, colors, and gradients with background-blend-mode 4分钟
Wrap up 2分钟

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 Assignment 15分钟

17个插件总计76分钟

Taking flexbox to the next level 2分钟
flex-direction, flex-wrap, and flex-flow 5分钟
justify-content and align-items and their relationship to flex-direction 7分钟
Exploring align-content 4分钟
flex-grow and flex-shrink explained 5分钟
flex-basis 4分钟
The flex shorthand property 4分钟
Aligning individual elements with align-self 2分钟
Margin auto and flexbox 4分钟
Building a card component with flexbox - Introduction 3分钟
Building a card component with flexbox - The markup 5分钟
Building a card component with flexbox - Typography 6分钟
Building a card component with flexbox - Mobile layout 11分钟
Building a card component with flexbox - Large screens part one 5分钟
Building a card component with flexbox - Large screens part two 5分钟
Centering something on the screen with flexbox 2分钟
Module wrap-up 2分钟

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 Assignment 25分钟

19个插件总计96分钟

Introduction to CSS Grid 3分钟
Setting up a basic grid 5分钟
Placing items on the grid 4分钟
grid-row and grid-column shorthands 5分钟
Spanning columns 2分钟
Some similarities to flexbox 5分钟
Using grid for our card component 13分钟
The grid-gap property 3分钟
Adding the gap to our card 3分钟
The implicit and explicit grid 6分钟
Exploring grid areas 8分钟
grid-areas and media queries 6分钟
minmax() 4分钟
the fr unit 3分钟
minmax() and the fr unit 2分钟
Putting grid to use - part 1 12分钟
Putting grid to use - part 2 4分钟
repeat() 3分钟
auto-fit and auto-fill 5分钟

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 Assignment 20分钟

29个插件总计121分钟

Taking it to the next level 2分钟
Analyzing the layouts 3分钟
Starting work on the homepage 3分钟
The HTML for the homepage 4分钟
The first lines of CSS you should always write 4分钟
Setting up our grid for small screens 3分钟
Continuing the hero area 5分钟
The "info" section 4分钟
Setting up the footer 3分钟
Using Font Awesome for our icons 5分钟
Wrapping up the footer 2分钟
Setting up the grid and hero for larger screens 5分钟
Setting up the rest of the page for larger screens 6分钟
Starting to style our navigation 3分钟
Setting up our navigation for small screens with positioning 5分钟
Making the close button 3分钟
Adding the open button to our navigation 4分钟
Styling the navigation for large screens 2分钟
Fixing up the navigation and hero area 6分钟
Creating the second page 2分钟
Styling the about page 9分钟
Exploring box-shadows to get the effect on our images 5分钟
Using pseudo-elements to add the yellow lines 5分钟
Adding the yellow bar to our titles 3分钟
Creating the contact page 4分钟
Styling the contact form 7分钟
Styling the contact form for larger screens 6分钟
The loose ends 5分钟
You did it! 3分钟

获得职业证书

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

位教师

Kevin Powell

Scrimba

5 门课程 9,678 名学生

提供方

Scrimba

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

Felipe M.

自 2018开始学习的学生

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

Jennifer J.

自 2020开始学习的学生

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

Larry W.

自 2021开始学习的学生

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

Chaitanya A.

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

学生评论

5 stars
73.33%
4 stars
13.33%
3 stars
6.66%
2 stars
0%
1 star
6.66%

显示 3/15 个

已于 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.

查看更多评论