https://github.com/yauhenkavalchuk/tailwindcss
Код учебного курса “TailwindCSS” на YouTube-канале webDev (https://tinyurl.com/26x26yb5)
https://github.com/yauhenkavalchuk/tailwindcss
css css3 html html-css tailwind tailwind-css tailwindcss
Last synced: 5 months ago
JSON representation
Код учебного курса “TailwindCSS” на YouTube-канале webDev (https://tinyurl.com/26x26yb5)
- Host: GitHub
- URL: https://github.com/yauhenkavalchuk/tailwindcss
- Owner: YauhenKavalchuk
- Created: 2022-01-16T10:28:29.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-01-02T21:58:15.000Z (almost 2 years ago)
- Last Synced: 2025-04-04T01:04:39.556Z (6 months ago)
- Topics: css, css3, html, html-css, tailwind, tailwind-css, tailwindcss
- Language: HTML
- Homepage: http://youtube.com/c/YauhenKavalchuk/
- Size: 2.19 MB
- Stars: 37
- Watchers: 2
- Forks: 13
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TailwindCSS
### Описание курса:
В данном видеокурсе мы с вами рассмотрим TailwindCSS.
TailwindCSS - это CSS-фреймворк, предлагающий обширный каталог классов и инструментов для облегчения стилизации сайта или приложения. Вместо традиционного использования одного класса, содержащего набор свойств (компонент), он предоставляет класс, которому соответсвует одно свойство. Tailwind использует набор интуитивно понятных классов, префиксов и суффиксов, которые очень просты для чтения и понимания. По результату курса мы создадим статичную страницу новостного сайта с множеством элементов по типу брэдкрамбы, бейджики, списки тем, пагинации и т.д. Сама же страница будет разработана с использованием подхода mobile first и будет поддерживать тёмную тему.
### Поддержать развитие канала:
[
][sponsor]
[
][patron]
---
### Используемые инструменты:
- [Visual Studio Code (редактор кода)](https://code.visualstudio.com)
- [Node Package Manager](https://www.npmjs.com)
- [Lorem ipsum (текст-"рыба")](https://www.lipsum.com/)
- [Heroicons (иконки)](https://heroicons.com/)
- [Randomuser (фото)](https://randomuser.me/photos)
### Полезные ссылки:
- [TailwindCSS (документация)](https://tailwindcss.com/)
### Полезные видео:
- [Плагины для VS Code](https://youtu.be/g8LmiLTXkqo)
- [HTML (видеокурс)](https://www.youtube.com/watch?v=NUtloXE1L9U&list=PLNkWIWHIRwMFtHHg0amAgocYP-kZypbY7&index=1)
- [CSS (видеокурс)](https://www.youtube.com/watch?v=8pQKDVRc0T8&list=PLNkWIWHIRwMHUawuIEpPI_tOG7Mfhs_sA&index=1)
- [CSS Flexbox (видеокурс)](https://www.youtube.com/watch?v=O-ytfplFQ3c&list=PLNkWIWHIRwMG0EUBS8rvTRVNL9IcxcawW&index=1&t=3s)
- [CSS Grid (видеокурс)](https://www.youtube.com/watch?v=LHW_M9mf4Is&list=PLNkWIWHIRwMHlq6yOP65F_rNH5wID1U21&index=1&t=2s)
---
### Быстрый старт
- Клонируйте репозиторий: `https://github.com/YauhenKavalchuk/tailwindcss.git`
- Перейдите в папку с проектом: `cd tailwindcss`
- Перейдите в нужную ветку соответствующую уроку:
- `git checkout lesson_01`
- `git checkout lesson_02`
- `git checkout lesson_10` и т.д.
- Установите зависимости: `yarn install`
- Запустите сборку СCS файл: `yarn build`
- Откройте `index.html` в браузере
---
### Список уроков:
- [#0 Введение (Introduction)](https://youtu.be/3bbfisTVMcE)
- [#1 Установка окружения (Setup Environment)](https://youtu.be/z36GC0fA4OM)
- [#2 Шрифты и цвета (Fonts & Colors)](https://youtu.be/U5Jg69DloXQ)
- [#3 Отступы и граница (Padding, Margin & Borders)](https://youtu.be/kddzWvIK4pY)
- [#4 Hover и Декорирование (Hover & Decoration)](https://youtu.be/UoNGb6Xn46M)
- [#5 Кнопки (Buttons)](https://youtu.be/G1IH3rNpdB4)
- [#6 Применение Flexbox (Using Flexbox)](https://youtu.be/mmBIbOfRtOw)
- [#7 Директивы (Directives)](https://youtu.be/GJyXpidSlCU)
- [#8 Иконки (Icons)](https://youtu.be/pXawvKcd4zg)
- [#9 Сеточный макет (Grid Layout)](https://youtu.be/NgFumXMTdx8)
- [#10 Градиенты (Gradients)](https://youtu.be/uCdfvPLtAJs)
- [#11 Отзывчивый макет (Responsive Layout)](https://youtu.be/C1uDlLylTyc)
- [#12 Картинки (Images)](https://youtu.be/eQkfcnhPLT8)
- [#13 Плавные переходы (Transitions)](https://youtu.be/w0DOvTtZ3_c)
- [#14 Тёмная тема (Dark Theme)](https://youtu.be/_hy4L-__NOQ)
- [#15 Пользовательские настройки (Customization)](https://youtu.be/vtWafRDajD0)
---
### Связаться со мной:
[
][youtube]
[
][instagram]
[
][linkedin]
[
][twitter]
[
][vk]
[youtube]: https://youtube.com/YauhenKavalchuk
[instagram]: https://instagram.com/YauhenKavalchuk
[linkedin]: https://linkedin.com/in/YauhenKavalchuk
[vk]: https://vk.com/YauhenKavalchuk
[twitter]: https://twitter.com/YauhenKavalchuk
[sponsor]: https://www.youtube.com/channel/UCE9ODjNIkOHrnSdkYWLfYhg/join
[patron]: https://www.patreon.com/YauhenKavalchuk