Это увлекательный курс, основанный на проектах, чтобы научиться создавать потрясающие макеты с помощью CSS-фреймворка Tailwind и освоиться с использованием классов вместо чего-то вроде Bootstrap, в котором используются классы на основе компонентов. Давайте посмотрим на схему этого курса...
Песочница
Я не хочу сразу переходить к проектам, хотя вы, конечно, могли бы, если хотите. Итак, первые два раздела мы будем работать в песочнице программирования. В каждом новом видео в этих разделах у нас будет новый файл, с которым можно поэкспериментировать и узнать все об определенном аспекте Tailwind. Например, у нас будут страницы/видео для цветов, типографики, интервалов, flex-классов и многого другого. Это позволяет нам касаться всех частей Tailwind в определенном порядке, а не просто сразу переходить к проектам.
Мини-проекты
Далее мы возьмем то, чему научились в среде песочницы, и используем это для создания небольших проектов. Это вещи, на создание которых уйдет 10-20 минут, и мы сделаем все это в одном видео для каждого проекта. Среди мини-проектов:
Картка email подписки
Ценовые сетки
Модальное окно продукта
Галерея
Модальное окно для входа
Я могу даже добавить больше мини-проектов позже. Это поможет вам промокнуть ноги, создавая что-то.
Проекты веб-сайтов
Далее мы начнем работать над более крупными целевыми страницами. Это действительно проверит то, чему вы научились. Будет 6 разных сайтов. Все они очень современные и чистые. Мы сотрудничали с Frontend Mentor для дизайна. В некоторых проектах будет немного JavaScript для таких вещей, как гамбургер-меню, вкладки и некоторая проверка.
Давайте посмотрим на проекты:
Clipboard Website — простая целевая страница программного продукта. Сосредоточение внимания в основном на flexbox и выравнивании. Некоторые фоновые изображения и т.д.
Loopstudios — веб-сайт компании в виртуальной реальности с крутыми изображениями, отзывчивым мобильным меню с некоторыми JavaScript, эффектами градиентного наложения.
Shortly - Сайт для инструмента сокращения ссылок. У нас будет красивое адаптивное меню, и мы добавим немного JavaScript для проверки формы и работы с DOM.
Testimonial Grid — проект, в котором мы фокусируемся на использовании классов сетки Tailwind.
Fylo — страница продукта с функцией светлого/темного режима. Мы добавим немного JavaScript, чтобы сохранить цветовой режим в локальном хранилище. У нас также будет компонент динамической вкладки для часто задаваемых вопросов.
Bookmark — целевая страница расширения менеджера закладок. На этом веб-сайте будут динамические фоновые изображения, гамбургер-меню и несколько вкладок, которые будут использовать JavaScript.
Посмотреть больше
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
Урок 1.
00:02:58
Introduction
Урок 2.
00:06:04
Course Outline & Projects
Урок 3.
00:07:05
What Is Tailwind CSS?
Урок 4.
00:06:19
Basic Environment Setup
Урок 5.
00:03:53
Tailwind Sandbox Setup
Урок 6.
00:06:58
Utility-First Example
Урок 7.
00:09:40
Working With Colors
Урок 8.
00:09:50
Container & Spacing
Урок 9.
00:08:45
Typography
Урок 10.
00:06:40
Width & Height
Урок 11.
00:13:20
Layout & Position
Урок 12.
00:08:08
Backgrounds & Shadows
Урок 13.
00:06:15
Borders & Border Radius
Урок 14.
00:05:49
Filters
Урок 15.
00:13:36
Interactivity
Урок 16.
00:09:18
Breakpoint Classes & Media Queries
Урок 17.
00:04:29
Columns
Урок 18.
00:12:27
Flexbox
Урок 19.
00:05:19
Grid
Урок 20.
00:07:32
Transition & Transform
Урок 21.
00:05:10
Animation Classes & Keyframes
Урок 22.
00:10:50
Config & Customization
Урок 23.
00:10:35
Dark Mode
Урок 24.
00:10:04
Create An Environment With Tailwind CLI
Урок 25.
00:09:52
Directives & Functions
Урок 26.
00:15:31
Optional - Webpack & PostCSS Environment
Урок 27.
00:03:37
Mini-Projects Introduction
Урок 28.
00:15:37
Mini-Project 1 - Email Subscribe Card
Урок 29.
00:16:39
Mini-Project 2 - Pricing Grids
Урок 30.
00:21:43
Mini-Project 3 - Product Modal
Урок 31.
00:19:35
Mini-Project 4 - Image Gallery
Урок 32.
00:21:43
Mini-Project 5 - Login Modal
Урок 33.
00:01:40
Project Intro
Урок 34.
00:06:03
Setup & Config
Урок 35.
00:12:02
Hero Section & Background Image
Урок 36.
00:05:55
4 - Snippets Section & Using Directives
Урок 37.
00:12:50
Features Section & Items
Урок 38.
00:09:27
Supercharge Section
Урок 39.
00:15:40
References & Footer
Урок 40.
00:08:24
Deploy To Netlify
Урок 41.
00:02:04
Project Intro
Урок 42.
00:04:23
Setup & Config
Урок 43.
00:12:15
Hero With Desktop Navigation
Урок 44.
00:05:56
Feature Section
Урок 45.
00:24:41
Creations Section With Gradient Overlays
Урок 46.
00:11:45
Footer
Урок 47.
00:09:43
Hamburger Button & Animation
Урок 48.
00:08:42
Mobile Menu & JavaScript
Урок 49.
00:04:10
Deploy To Vercel
Урок 50.
00:01:55
Project Intro
Урок 51.
00:04:01
Setup & Config
Урок 52.
00:06:56
Navbar
Урок 53.
00:06:37
Hero Section
Урок 54.
00:11:06
Shorten Form & Links
Урок 55.
00:08:09
JavaScript Link Validation
Урок 56.
00:13:23
Feature Boxes
Урок 57.
00:12:20
CTA & Footer
Урок 58.
00:08:08
Mobile Menu
Урок 59.
00:02:00
Project Intro
Урок 60.
00:03:38
Setup & Config
Урок 61.
00:06:10
FIrst Box
Урок 62.
00:07:00
Remaining Boxes
Урок 63.
00:05:42
Add Grid Classes
Урок 64.
00:03:43
Line Clamp Plugin
Урок 65.
00:01:57
Project Intro
Урок 66.
00:08:12
Setup & Config
Урок 67.
00:09:12
Header & Dark Mode Button
Урок 68.
00:14:04
JavaScript For Color Mode
Урок 69.
00:05:39
Hero Section
Урок 70.
00:12:26
Features & Productive Sections
Урок 71.
00:13:06
Testimonials & Early Access
Урок 72.
00:08:56
Smooth Scroll & Footer
Урок 73.
00:02:15
Project Intro
Урок 74.
00:03:30
Setup & Config
Урок 75.
00:05:57
Navbar
Урок 76.
00:12:45
Hero Section
Урок 77.
00:20:00
Tabs & Panel Layout
Урок 78.
00:13:28
JavaScript For Tabs
Урок 79.
00:11:03
Download Boxes
Урок 80.
00:11:38
FAQ Accordion
Урок 81.
00:11:50
Newsletter & Footer
Урок 82.
00:16:24
Mobile Menu
Авторы - Brad Traversy, udemy
Brad Traversy
Я начал программировать в 2007 году в возрасте 26 лет. В 2016 году я стал штатным преподавателем и создателем контента. Я показываю людям, что им не обязательно быть отличником или гением, чтобы научиться программировать. Я разбиваю сложные концепции, показывая вам, как их реализовать в курсах и учебных пособиях на основе проектов.
+189
udemy
Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.
TailwindCSS офигенен. Курс – шляпа. Первая треть – плохой пересказ документации (доки понятнее). Ещё две трети – проекты. Инструктор не пишет проекты с нуля а набирает по образцу поэтому ход мышления понять невозможно. "Напишем эти 20 классов, потом вот эти 10. Ну вот и всё получилось". Образовательной ценности в таком изложении – ноль, не тратьте время.
hcee
Jabberworker
May i ask, Which other Tailwind course would you recommend instead?
Jabberworker
hcee
I eventually bought Tailwind UI (official). It's expensive but I don't regret and I refer to it each month I work on UI/FE. Official docs + examples on Tailwind UI are enough for TW. The course I'd recommend instead is https://css-for-js.dev/ It's for CSS but TW is a just an alt. syntax for CSS. Again, it's expensive but it covers everything you need to become a FE pro. Adam Wathan himself praises Josh Comeau's content.
hcee
Jabberworker
Sorry for the delay in reply. Thank you for your suggestions!
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.
Привет и добро пожаловать! Возможно, вы уже слышали, что с TailwindCss вы можете очень быстро разрабатывать красивые и уникальные веб-сайты и интерфейсы. Но наиболее важным преимуществом для меня является то, что вам не нужно создавать бесконечные таблицы стилей для адаптации вашего сайта под разные размеры экрана.
Анимация пользовательского интерфейса играет важную роль для веб-приложений и веб-сайтов в улучшении взаимодействия с пользователем. Но создание анимации может быть трудным или чрезмерным. На этом курсе мы изучим основы CSS-анимации и перейдем к продвинутым концепциям, таким как оркестровка и хореография. Мы также изучим принципы моушн-дизайна, которые сделают все наши анимации последовательными и продуманными.
CSS3 Animations, Transforms and Transitions Ultimate Guide
CSS стал очень популярным и важным языком для каждого отдельного разработчика в современном стеке веб-разработки, и этот язык продолжает развиваться, обладая новыми возможностями. В настоящее время CSS может справиться с большинством потребностей движения и анимации, используя CSS transitions, CSS transforms и анимацию CSS keyframe.
Основополагающие знания CSS, необходимые для успешного прохождения фронтенд-интервью. CSS составляет второй столп святой троицы современного Интернета. Часто незаслуженно рассматриваемый многими разработчиками как утомительный и разочаровывающий, он на самом деле может быть довольно элегантным и мощным в умелых руках.