К содержимому
learnspaceYOUR NEXT CHAPTER
ПРОСТРАНСТВО ОБУЧЕНИЯ
ГлавнаяКаталог курсовМоё обучениеCoursera

Знания без границ

Учитесь у лучших университетов и компаний мира.

Открыть Coursera
Интеграция
Пространство университета
Моё пространствоСтраница курса
↵
ЯЛичный кабинетСтудент
© 2026 LearnSpaceКаждый день — возможность узнать больше.Помощь
Learn Responsive Web Design · LearnSpace
Назад в каталог
courseraПрограммирование

Learn Responsive Web Design

Курс от Scrimba
Средний≈ 17.2 чАнглийский
О курсеНавыкиПрограммаПреподаватели

О курсе

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!

Навыки, которые вы освоите

Cascading Style Sheets (CSS)Responsive Web DesignHypertext Markup Language (HTML)HTML and CSSWeb DevelopmentFront-End Web DevelopmentDesign StrategiesUI ComponentsWeb DesignTypography

Программа курса

6 модулей · 180 учебных материалов

01CSS Fundamentals27 материалов

CSS Fundamentals

Welcome to interactive lessons!PLUGINWelcome to the course!PLUGINAn Important note before we startPLUGINIntroduction to the CSS Fundamentals modulePLUGIN

Учитесь у экспертов

Kevin Powell

Преподаватель курса

Learn Responsive Web Design
В каталоге вашей программы

Инвестируйте в себя

Новые знания — в удобное для вас время.

Начать на Coursera

Обучение откроется на Coursera
в новой вкладке

Обучение на Coursera

≈ 17.2 ч

6 модулей

Язык: Английский

Часть программы вашего университета
Margin and Padding - Margins and spacing out textPLUGIN
Margin and Padding - Collapsing marginsPLUGIN
Margin and Padding - Consistency and a new type of selectorPLUGIN
Inline and Block elementsPLUGIN
The span elementPLUGIN
Styling linksPLUGIN
Practice Time!PLUGIN
Inline-blockPLUGIN
Styling buttonsPLUGIN
Specificity basicsPLUGIN
Specificity - two selectors of equal valuePLUGIN
Compound SelectorsPLUGIN
Compound selectors and specificityPLUGIN
A better way to name our CSS classesPLUGIN
The text propertiesPLUGIN
Font-family and font stacksPLUGIN
How to use Google fontsPLUGIN
InheritancePLUGIN
Working with, overwriting, and applying inheritancePLUGIN
Putting it all togetherPLUGIN
Putting it all together - the CSSPLUGIN
Solution to the challenge and module wrap upPLUGIN

CSS Fundamentals Quiz

CSS Fundamentals Graded AssignmentЗадание
02Starting to Think Responsively46 материалов

Starting to Think Responsively

Starting to think responsivelyPLUGINCSS UnitsPLUGINCSS Units - PercentagePLUGINControlling the width of imagesPLUGINmin-width and max-widthPLUGINCSS Units - The em unitPLUGINThe problem with emsPLUGINCSS Units - remsPLUGINPicking which unit to usePLUGINems and rems - an examplePLUGINFlexbox refresher and setting up some HTMLPLUGINBasic styles and setting up the columnsPLUGINAdding the background colorPLUGINSetting the column widthsPLUGINSpacing out the columnsPLUGINControlling the vertical position of flex itemsPLUGINMedia Query basicsPLUGINMaking our layout responsive with flex-directionPLUGINflex-direction explainedPLUGINCreating a navigationPLUGINUsing flexbox to start styling our navigationPLUGINMaking our navigation look goodPLUGINAdding the underlinePLUGINA more complicated navigationPLUGINMaking the navigation responsivePLUGINTaking a look at the rest of the projectPLUGINSetting up the structurePLUGINFeatured article structurePLUGINThe home page - HTML for the recent articlesPLUGINhome page - html for the asidePLUGINStarting the CSS for our pagePLUGINStarting the layout - looking at the big picturePLUGINStarting to think mobile firstPLUGINStyling the featured articlePLUGINChanging the visual order with flexboxPLUGINPlaying with the title's position, and the downsides of negative marginsPLUGINStyling recent articles for large screensPLUGINChanging image sizes with object-fitPLUGINSetting up the widgets and talking breakpointsPLUGINUsing a new pseudo-class to wrap-up the homepagePLUGINCreating the recent posts pagePLUGINSetting up the About Me pagePLUGINFixing up some loose endsPLUGINImportant Note: The viewport meta tagPLUGINModule wrap upPLUGIN

Starting to Think Responsively Quiz

Starting to Think Responsively Graded AssignmentЗадание
03Stepping up our style39 материалов

Stepping up our style

It's time to step up our stylePLUGINA look at line-heightPLUGINtext-transform: uppercasePLUGINMaking things easier to read with letter-spacingPLUGINA nice color trick with rgba()PLUGINbackground-imagesPLUGINBackground images and the file path (very important note)PLUGINControlling our background imagesPLUGINBBQ Splash Page - Project IntroductionPLUGINWriting the HTML for the BBQ splash pagePLUGINStarting to style it up - BBQ Splash PagePLUGINAdding the background image - BBQ Splash PagePLUGINChanging the order - BBQ Splash PagePLUGINStyling the main content area - BBQ Splash pagePLUGINAdding the media query - BBQ Splash PagePLUGINSetting up the typography for large screens - BBQ Splash PagePLUGINStarting to set things up for large screens - BBQ Splash PagePLUGINViewport unitsPLUGINAdding viewport units to the BBQ Splash PagePLUGINEnter box-sizing: border-boxPLUGINUsing flexbox to vertically center the main content - BBQ Splash PagePLUGINFixing the intro section on both small and large screens - BBQ Splash PagePLUGINDealing with very large screens solution #1PLUGINDealing with very big screens solution #2PLUGINThe very basics of formsPLUGINForm basics - form attributesPLUGINThe basics of styling formPLUGINAdding the form - BBQ Splash PagePLUGINStarting to style up the form - BBQ Splash PagePLUGINMaking the inputs look good - BBQ Splash PagePLUGINCSS GradientsPLUGINStyling the button - BBQ Splash PagePLUGINBasic transitionsPLUGINIntro to transforms (and a quick word on performance)PLUGINWe can transition more than :hoverPLUGINBorder gradientsPLUGINBlending images, colors, and gradients with background-blend-modePLUGINWrap upPLUGIN

Stepping up our style quiz

Stepping Up Our Style Graded AssignmentЗадание
04Taking Flexbox to the next level18 материалов

Taking Flexbox to the next level

Taking flexbox to the next levelPLUGINflex-direction, flex-wrap, and flex-flowPLUGINjustify-content and align-items and their relationship to flex-directionPLUGINExploring align-contentPLUGINflex-grow and flex-shrink explainedPLUGINflex-basisPLUGINThe flex shorthand propertyPLUGINAligning individual elements with align-selfPLUGINMargin auto and flexboxPLUGINBuilding a card component with flexbox - IntroductionPLUGINBuilding a card component with flexbox - The markupPLUGINBuilding a card component with flexbox - TypographyPLUGINBuilding a card component with flexbox - Mobile layoutPLUGINBuilding a card component with flexbox - Large screens part onePLUGINBuilding a card component with flexbox - Large screens part twoPLUGINCentering something on the screen with flexboxPLUGINModule wrap-upPLUGIN

Taking Flexbox to the next level quiz

Taking Flexbox to the Next Level Graded AssignmentЗадание
05CSS Grid: The Ultimate Layout Tool20 материалов

CSS Grid: The Ultimate Layout Tool

Introduction to CSS GridPLUGINSetting up a basic gridPLUGINPlacing items on the gridPLUGINgrid-row and grid-column shorthandsPLUGINSpanning columnsPLUGINSome similarities to flexboxPLUGINUsing grid for our card componentPLUGINThe grid-gap propertyPLUGINAdding the gap to our cardPLUGINThe implicit and explicit gridPLUGINExploring grid areasPLUGINgrid-areas and media queriesPLUGINminmax()PLUGINthe fr unitPLUGINminmax() and the fr unitPLUGINPutting grid to use - part 1PLUGINPutting grid to use - part 2PLUGINrepeat()PLUGINauto-fit and auto-fillPLUGIN

CSS Grid: The Ultimate Layout Tool Quiz

CSS Grid: The Ultimate Layout Tool Graded AssignmentЗадание
06Taking it to the next level30 материалов

Taking it to the next level

Taking it to the next levelPLUGINAnalyzing the layoutsPLUGINStarting work on the homepagePLUGINThe HTML for the homepagePLUGINThe first lines of CSS you should always writePLUGINSetting up our grid for small screensPLUGINContinuing the hero areaPLUGINThe "info" sectionPLUGINSetting up the footerPLUGINUsing Font Awesome for our iconsPLUGINWrapping up the footerPLUGINSetting up the grid and hero for larger screensPLUGINSetting up the rest of the page for larger screensPLUGINStarting to style our navigationPLUGINSetting up our navigation for small screens with positioningPLUGINMaking the close buttonPLUGINAdding the open button to our navigationPLUGINStyling the navigation for large screensPLUGINFixing up the navigation and hero areaPLUGINCreating the second pagePLUGINStyling the about pagePLUGINExploring box-shadows to get the effect on our imagesPLUGINUsing pseudo-elements to add the yellow linesPLUGINAdding the yellow bar to our titlesPLUGINCreating the contact pagePLUGINStyling the contact formPLUGINStyling the contact form for larger screensPLUGINThe loose endsPLUGINYou did it!PLUGIN

Taking it to the next level quiz

Taking it to the Next Level Graded AssignmentЗадание