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

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

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

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

Tailwind CSS From Scratch - Learn by Building Projects

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

О курсе

Updated in May 2025. This course now features Coursera Coach! A smarter way to learn with interactive, real-time conversations that help you test your knowledge, challenge assumptions, and deepen your understanding as you progress through the course. This course starts with a coding Sandbox to explore colors, typography, spacing, flex classes, and more in Tailwind CSS, building a strong foundation before small projects. We then create six modern, clean landing-page websites, designed with Frontend Mentor: Clipboard Website (Flexbox and alignment), Loopstudios (responsive mobile menu and gradient overlays), Shortly (responsive menu and JavaScript form validation), Testimonial Grid (using Tailwind’s grid classes), Fylo (light/dark mode and dynamic FAQ tabs with JavaScript), and Bookmark (dynamic backgrounds, hamburger menu, and JavaScript tabs). By course end, you'll efficiently use Tailwind CSS utility classes, create and edit layouts quickly, configure custom styles, understand Tailwind fundamentals, set up an environment with Tailwind CLI, and use breakpoint classes and media queries. This course suits those aiming to improve website and UI layout skills, with basic CSS grid, layout, and JavaScript knowledge being advantageous.

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

Responsive Web DesignCascading Style Sheets (CSS)JavascriptHTML and CSSApplication DeploymentAnimationsWeb DesignDevelopment EnvironmentWebpackTypographyWeb Development ToolsUI ComponentsHypertext Markup Language (HTML)

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

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

01Introduction6 материалов

Introduction

IntroductionВидеоFull Course ResourcesЧтениеCourse Outline and ProjectsВидеоWhat Is Tailwind CSSВидео

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

Packt - Course Instructors

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

Tailwind CSS From Scratch - Learn by Building Projects
В каталоге вашей программы

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

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

Начать на Coursera

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

Обучение на Coursera

≈ 17.2 ч

11 модулей

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

Субтитры: Арабский, Французский, Итальянский, Корейский, Немецкий, Индонезийский, Испанский, Японский, Казахский

Часть программы вашего университета
Basic Environment SetupВидео
Tailwind Sandbox SetupВидео
02Tailwind Fundamentals - Part 110 материалов

Tailwind Fundamentals - Part 1

Utility-First ExampleВидеоWorking with ColorsВидеоContainer and SpacingВидеоTypographyВидеоWidth and HeightВидеоLayout and PositionВидеоBackgrounds and ShadowsВидеоBorders and Border RadiusВидеоFiltersВидеоUnderstanding Tailwind CSS Utility ClassesDIALOGUE
03Tailwind Fundamentals - Part 211 материалов

Tailwind Fundamentals - Part 2

InteractivityВидеоBreakpoint Classes and Media QueriesВидеоColumnsВидеоFlexboxВидеоGridВидеоTransition and TransformВидеоAnimation Classes and KeyframesВидеоConfig and CustomizationВидеоDark ModeВидеоUsing TailwindCSS for InteractivityDIALOGUETailwind Fundamentals - Part 2 - AssessmentЗадание
04Better Development Environment4 материалов

Better Development Environment

Create an Environment with Tailwind CLIВидеоDirectives and FunctionsВидеоWebpack and PostCSS EnvironmentВидеоSetting Up Tailwind CSS ProjectsDIALOGUE
05Tailwind CSS Mini Projects7 материалов

Tailwind CSS Mini Projects

Mini Projects IntroductionВидеоMini-Project 1 - Email Subscribe CardВидеоMini-Project 2 - Pricing GridsВидеоMini-Project 3 - Product ModalВидеоMini-Project 4 - Image GalleryВидеоMini-Project 5 - Login ModalВидеоBeginning Tailwind CSSDIALOGUE
06Project 1 - Clipboard Website10 материалов

Project 1 - Clipboard Website

Project IntroductionВидеоSetup and ConfigВидеоHero Section and Background ImageВидео4 - Snippets Section and Using DirectivesВидеоFeatures Section and ItemsВидеоSupercharge SectionВидеоReferences and FooterВидеоDeploy to NetlifyВидеоDesigning a Responsive Landing Page Using Tailwind CSSDIALOGUEProject 1 - Clipboard Website - AssessmentЗадание
07Project 2 - Loopstudios Website10 материалов

Project 2 - Loopstudios Website

Project IntroductionВидеоSetup and ConfigВидеоHero with Desktop NavigationВидеоFeature SectionВидеоCreations Section with Gradient OverlaysВидеоFooterВидеоHamburger Button and AnimationВидеоMobile Menu and JavaScriptВидеоDeploy to VercelВидеоBuilding Responsive Mobile MenusDIALOGUE
08Project 3 - Shortly Website10 материалов

Project 3 - Shortly Website

Project IntroductionВидеоSetup and ConfigВидеоNavbarВидеоHero SectionВидеоShorten Form and LinksВидеоJavaScript Link ValidationВидеоFeature BoxesВидеоCTA and FooterВидеоMobile MenuВидеоCreating a Simple Short Link UI with HTML and Tailwind CSSDIALOGUE
09Project 4 - Testimonial Grid Project8 материалов

Project 4 - Testimonial Grid Project

Project IntroductionВидеоSetup and ConfigВидеоFirst BoxВидеоRemaining BoxesВидеоAdd Grid ClassesВидеоLine Clamp PluginВидеоCreating Responsive Layouts with Tailwind GridDIALOGUEProject 4 - Testimonial Grid Project - AssessmentЗадание
10Project 5 - Fylo Website with Color Picker9 материалов

Project 5 - Fylo Website with Color Picker

Project IntroductionВидеоSetup and ConfigВидеоHeader and Dark Mode ButtonВидеоJavaScript for Color ModeВидеоHero SectionВидеоFeatures and Productive SectionsВидеоTestimonials and Early AccessВидеоSmooth Scroll and FooterВидеоManaging JavaScript for UI ComponentsDIALOGUE
11Project 6 - Bookmark Manager Website13 материалов

Project 6 - Bookmark Manager Website

Project IntroductionВидеоSetup and ConfigВидеоNavbarВидеоHero SectionВидеоTabs and Panel LayoutВидеоJavaScript for TabsВидеоDownload BoxesВидеоFAQ AccordionВидеоNewsletter and FooterВидеоMobile MenuВидео Project 6 - Bookmark Manager Website - AssessmentЗаданиеFull Course Practice AssessmentЗаданиеFull Course AssessmentЗадание