Udemy - Tailwind CSS с нуля | Учитесь, создавая проекты
Udemy - Tailwind CSS From Scratch | Learn By Building Projects Быстро и эффективно создавайте великолепные макеты с помощью служебных классов CSS Tailwind. Автор: Брэд Траверси Жанр: электронное обучение Формат: MP4 Видео: h264, 1280x720 | Звук: AAC, 44,1 кГц Язык: английский Продолжительность: 83 лекции • 12 часов 32 минуты Что вы узнаете
Научитесь очень быстро создавать и редактировать макеты
Изучите служебные классы Tailwind, используя изолированную программную среду кода.
Создайте 5 мини-проектов и 6 веб-проектов.
Узнайте, как настроить среду разработки с помощью интерфейса командной строки Tailwind.
Настройте свои стили для создания собственных макетов Требования
Вы должны знать основы CSS
Описание
Это увлекательный курс, основанный на проектах, позволяющий научиться создавать потрясающие макеты с помощью CSS-фреймворка Tailwind и освоить использование служебных классов вместо чего-то вроде Bootstrap, который использует классы на основе компонентов. Давайте посмотрим на схему этого курса... Песочница
Я не хочу сразу переходить к проектам, хотя вы, конечно, могли бы, если хотите. Итак, первые два раздела мы будем работать в «песочнице» для кодирования. В каждом новом видео в этих разделах у нас будет новый файл, с которым можно поэкспериментировать и узнать все об определенном аспекте Tailwind. Например, у нас будут страницы/видео для цветов, типографики, интервалов, гибких классов и многого другого. Это позволяет нам касаться всех частей Tailwind в определенном порядке, а не сразу переходить к проектам. Мини-проекты
Далее мы возьмем то, чему научились в песочнице, и будем использовать это для создания небольших проектов. Это вещи, на создание которых уйдет 10–20 минут, и мы сделаем все это в одном видео для каждого проекта. В мини-проекты входят:
Карта подписки по электронной почте
Ценовые сетки
Модальное окно продукта
Галерея
Модальный вход в систему Проекты веб-сайтов
Далее мы начнем работать над более крупными веб-сайтами с целевыми страницами. Это действительно проверит то, чему вы научились. Будет 6 разных сайтов. Все они очень современные и чистые. Для разработки дизайна мы сотрудничали с Frontend Mentor. В некоторых проектах будет немного JavaScript для таких вещей, как гамбургер-меню, вкладки и некоторые проверки. Давайте посмотрим на проекты. Веб-сайт буфера обмена — простая целевая страница программного продукта. Основное внимание уделяется флексбоксу и выравниванию. Некоторые фоновые изображения и т. д.
Loopstudios — веб-сайт VR-компании с классными изображениями, адаптивным мобильным меню с добавлением JavaScript и эффектами наложения градиента.
Shortly — сайт инструмента для сокращения ссылок. У нас будет красивое адаптивное меню и добавим немного JavaScript для проверки формы и работы с DOM.
Testimonial Grid — проект, в котором мы фокусируемся на использовании классов сетки Tailwind.
Fylo — страница продукта с функцией светлого/темного режима. Мы добавим немного JavaScript, чтобы сохранить цветовой режим в локальном хранилище. У нас также будет динамическая вкладка для часто задаваемых вопросов.
Закладка — целевая страница расширения диспетчера закладок. На этом веб-сайте будет несколько динамических фоновых изображений, гамбургер-меню и несколько вкладок, в которых будет использоваться JavaScript. Для кого этот курс
Любой, кто хочет стать лучше в создании макетов веб-сайтов и пользовательского интерфейса. Дополнительная информация:https://www.udemy.com/course/tailwind-from-scratch
ENG INFO
Build great looking layouts fast and efficiently using Tailwind CSS utility classes What you'll learn
Learn to create and edit layouts super fast
Learn the Tailwind utility classes using a code sandbox
Build 5 mini-projects and 6 website projects
Learn how to set up a dev environment using the Tailwind CLI
Configure your styles to create custom layouts Requirements
You should know the basics of CSS
Description
This is a fun project-based course to learn how to create awesome layouts using the Tailwind CSS framework and get comfortable using utility classes over something like Bootstrap, which uses component-based classes. Let's take a look at the outline for this course... The Sandbox
I don't want to jump right into the projects, though you certainly could if you want. So the first two sections, we will be working in a coding sandbox. In every new video in these sections, we will have a new file to experiment with and learn all about a certain aspect of Tailwind. For example, we will have pages/videos for colors, typography, spacing, flex classes, and much more. This allows us to essential touch on all parts of Tailwind in a specific order, rather than just jumping right into projects. Mini-Projects
Next, we will take what we learn in the sandbox environment and use it to create some small projects. These are things that will take 10 - 20 minutes to create and we will do it all in one video per project. The mini-projects include:
Email Subscribe Card
Pricing Grids
Product Modal
Image Gallery
Login Modal Website Projects
Next, we will start to work on larger landing-page websites. This will really put what you learned to the test. There will be 6 different websites. They are all very modern and clean-looking. We partnered with Frontend Mentor for the designs. Some projects will have a bit of javaScript for things like hamburger menus, tabs, and some validation. Let's take a look at the projects. Clipboard Website - Simple software product landing page. Focusing mostly on flexbox and alignment. Some background images, etc.
Loopstudios - VR company website with cool images, responsive mobile menu with some JavaScript, gradient overlay effects.
Shortly - Website for a link shortening tool. We will have a nice-looking responsive menu and add a little JavaScript for some form validation and working with the DOM.
Testimonial Grid - A project where we focus on using Tailwind's grid classes.
Fylo - Product page with a light/dark mode feature. We will add some JavaScript to save the color mode to local storage. We will also have a dynamic tab component for the FAQ.
Bookmark - Bookmark manager extension landing page. This website will have some dynamic background images, a hamburger menu and some tabs that will use JavaScript. Who this course is for
Anyone that wants to get better at creating website and UI layouts
