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

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

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

Открыть Coursera
Интеграция
Пространство университета
Моё пространствоСтраница курса
↵
ЯЛичный кабинетСтудент
© 2026 LearnSpaceКаждый день — возможность узнать больше.Помощь
Master CSS: Responsive Websites with Flexbox, Grid & SCSS · LearnSpace
Назад в каталог
courseraПрограммирование

Master CSS: Responsive Websites with Flexbox, Grid & SCSS

Курс от LearnKartS
Начальный≈ 16.9 чХинди
О курсеНавыкиПрограммаПреподаватели

О курсе

You learned basic CSS. Then came the tough part. Broken layouts, confusing positioning, & designs that fail on mobile. This course helps you move beyond trial and error by teaching modern CSS, responsive layouts, Flexbox, Grid, and scalable styling the way real front-end developers actually use them. Here is what you will especially build: • Write CSS selectors, apply color, background, border, & typography in VS Code, and along the way, understand specificity and display. As a result, you stop guessing why things break. • Align elements with Flexbox, and then structure pages with CSS Grid. Handle positioning, sticky headers, & scroll behavior the same way real projects do. • Compile SCSS with Node and NPM, and use variables, nesting, transitions, animations, gradients, and blend modes for cleaner, more maintainable stylesheets. • Build a complete portfolio using media queries, viewport units, Font Awesome, Bootstrap Icons, and mobile navigation. So, by the end, everything comes together in one real project. Built for beginners and aspiring front-end developers who want practical skills and real projects, taught in Hindi and trusted by 200,000+ learners across 160+ courses. Enroll today and start building with confidence.

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

Cascading Style Sheets (CSS)DebuggingUser Interface (UI)Semantic WebWeb DesignWeb DevelopmentScalabilityWeb Content Accessibility GuidelinesBootstrap (Front-End Framework)Front-End Web DevelopmentTypographyVisual Basic (Programming Language)Development TestingHTML and CSSSoftware Engineering ToolsVisual DesignDevelopment EnvironmentBuilding CodesBrowser CompatibilityLayout Design

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

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

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

CSS Introduction

Course IntroductionВидеоWhat is CSS?ВидеоDemo: How CSS Works?ВидеоBasic CSS SyntaxВидеоIntroduction to Common CSS Properties (Color & Background)Видео

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

Nikhil Agarwal

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

LearnKartS

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

Master CSS: Responsive Websites with Flexbox, Grid & SCSS
В каталоге вашей программы

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

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

Начать на Coursera

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

Обучение на Coursera

≈ 16.9 ч

4 модулей

Язык: Хинди

Субтитры: Английский

Часть программы вашего университета
Checkpoint QuizЗадание
CSS Fundamentals & Styling BasicsDIALOGUE
Proficiency QuizЗадание

Typography, Spacing & Layout Basics

Demo: Font Properties (Size, Weight, Family, Google Fonts)Видео Demo: Text Alignment & Direction (Left, Right, Center, Justify)Видео Margin vs Padding (Concept & Basics)Видео Margin, Padding & Border (Detailed Styling)Видео Advanced Spacing (Inline Start/End, Responsive)ВидеоCheckpoint QuizЗаданиеStyling and Spacing a Responsive Webpage with CSSDIALOGUEProficiency QuizЗадание

Visual Styling & Display

Border & Border RadiusВидео Height & Width BasicsВидео Image Handling (Object Fit, Scaling)Видео Demo: Display Property Basics (Block, Inline, Inline-block)Видео Demo: Lists, Text Decoration & Layout StylingВидеоCheckpoint QuizЗаданиеProficiency QuizЗадание
02Core CSS Concepts30 материалов

Selectors & Backgrounds

Understanding CSS SelectorsВидеоDemo: CSS Box Model Basics (Content, Padding, Border, Margin)Видео Demo: Background Image Introduction & Basic PropertiesВидеоDemo: Advanced Background Properties (Position, Size, Repeat, RGB, Opacity)ВидеоCheckpoint QuizЗаданиеProficiency QuizЗадание

CSS Units & Responsiveness

Introduction to CSS Units + Pixels (px)ВидеоREM (Root Relative Unit)ВидеоREM (Parent Relative Unit)Видео Percentage (%) for Responsive LayoutsВидео Viewport Units (vh, vw)ВидеоAdvanced Units (vmin, vmax, ch, ex, fr - Grid Unit)Видео

Layout Systems

CSS Grid LayoutВидеоCSS Flexbox LayoutВидеоCSS Float LayoutВидео Demo: CSS Positioning Basics (Relative, Absolute, Fixed + Centering using Transform)ВидеоDemo: Scroll Behavior, Box Shadow, and Advanced Positioning (Sticky Overview)ВидеоCheckpoint QuizЗадание

Advanced Layouts

CSS Multi-Column LayoutВидеоCSS Table LayoutВидеоCSS Inline-Block LayoutВидеоCSS Sticky LayoutВидеоCSS Layout Use CasesВидеоCheckpoint QuizЗаданиеProficiency QuizЗадание
03Advanced CSS & Preprocessors32 материалов

CSS Framework Concepts

CSS Preprocessors: SCSS, SASS, LESS and MoreВидео Introduction to SCSS vs CSS + Nesting, Variables & Live Server SetupВидео Demo: Installing Node.js & Understanding NPM (Node Package Manager)Видео Demo: Installing SASS via NPM + Project Setup (node_modules, package.json)Видео Demo: SCSS to CSS Compilation (Watch Mode) + Live Changes in BrowserВидеоCheckpoint QuizЗаданиеProficiency QuizЗадание

Selectors & Interactions

CSS Productivity Tips: Shortcuts and Best PracticesВидеоIntroduction to Pseudo Classes + :hover (Styling Interactive States)ВидеоDemo: focus and :nth-child() (Form Styling & List Targeting)ВидеоDemo: not() Pseudo Class + Combining Selectors for Advanced StylingВидеоCSS Pseudo-ElementsВидеоCheckpoint QuizЗадание

Animations & Variables

Demo: CSS Transitions and AnimationsВидеоCSS VariablesВидеоAdvanced CSS (Filters, Custom checkbox, Autofit, min-max in grid)ВидеоCSS Gradients: Background and Text EffectsВидеоCSS Blend Modes and Clip-PathВидеоIntroduction to Responsive Design and LayoutsВидео

Responsive Design

Advanced Responsiveness (Overflow, Clamp, Breakpoints)Видео Demo: Project Setup, Folder Structure & Linking CSSВидеоHeader Styling Basics (Colors, Fonts, Padding)ВидеоDemo: Navigation Layout using Flexbox & SpacingВидео Advanced Styling (Max-width, Box-sizing, Fixed Header, Smooth Scroll)ВидеоCheckpoint QuizЗадание
04Portfolio Project & Final Implementation24 материалов

Hero & About Section

Projects Section Structure, Grid Layout & Reusable ClassesВидеоProject Cards Design (Image, Text, Buttons & Final Styling)ВидеоPortfolio Website: Contact Section DesignВидеоPortfolio Website: Footer DesignВидеоDemo:Mobile Navigation (Menu Toggle, Icon, JS Behavior)ВидеоCheckpoint QuizЗаданиеProficiency QuizЗадание

Skills & Icons

Skill Card Design (Background, Border Radius, Box Shadow)ВидеоHover Effects & Transitions (Transform, Animation)Видео Introduction to Icon Libraries (Font Awesome, Bootstrap Icons)Видео Adding Icons to Skills (Classes, Styling, Colors)Видео Demo: Advanced Setup (CDN, Local Setup, Consistent Styling & Cleanup)ВидеоCheckpoint QuizЗадание

Projects Section

Projects Section Structure, Grid Layout & Reusable ClassesВидеоProject Cards Design (Image, Text, Buttons & Final Styling)ВидеоPortfolio Website: Contact Section DesignВидеоPortfolio Website: Footer DesignВидео Media Queries, Tablet Layout & About Section FixesВидео Demo: Mobile Navigation (Menu Toggle, Icon, JS Behavior)Видео
Checkpoint QuizЗадание
CSS Units & Responsive SizingDIALOGUE
Proficiency QuizЗадание
Building Responsive Layouts with CSS Grid, Flexbox, and PositioningDIALOGUE
Proficiency QuizЗадание
CSS Selectors & Productivity TechniquesDIALOGUE
Proficiency QuizЗадание
Demo: Media Queries & Mobile View Styling (480px)Видео
Checkpoint QuizЗадание
Proficiency QuizЗадание
Building a Responsive Website Layout with Advanced CSS TechniquesDIALOGUE
Proficiency QuizЗадание
Interactive Skill Cards & Icon StylingDIALOGUE
Proficiency QuizЗадание
Checkpoint QuizЗадание
Proficiency QuizЗадание
Course SummaryВидео