Изучение Tailwind CSS за час в одном видео! Разработка проекта с нуля
ฝัง
- เผยแพร่เมื่อ 4 ส.ค. 2024
- Представляю вам большой урок по изучению CSS фреймворка Tailwind CSS за час! В ходе урока для начинающих вы с нуля изучите принцип работы данной технологии, научитесь прописывать стили на её основе и разработаете небольшой веб сайт при помощи Tailwind CSS.
✅ Полезные ссылки:
- Tailwind CSS: tailwindcss.com/
- Node JS: nodejs.org/
⏰ Тайм-коды:
00:00 - Начало
00:22 - Что такое Tailwind?
01:19 - Отличие между Tailwind и Bootstrap
02:20 - Что необходимо знать?
02:46 - Подключение Tailwind
06:30 - Инициализация проекта
14:00 - Базовые стили
18:25 - Ночной режим
21:50 - Разработка проекта
25:50 - Создание шапки
33:30 - Основной часть сайта
39:30 - Система сеток
42:58 - Адаптивность сайта
53:50 - Заключительная часть
✔ Сообщество программистов: itproger.com/
✔ -------------
Вступай в группу Вк - prog_life 🚀
Группа FaceBook - goo.gl/XW0aaP
Инстаграм itProger: / itproger_official
Instagram: / gosha_dudar
Telegram: t.me/itProger_official
Twitter - / goshadudar
- Уроки от #GoshaDudar 👨🏼💻
- Все уроки по хештегу #goshaLessons
Очень полезное видео. Спасибо!
Все наглядно и доходчиво.
Только вчера искал видео по этой теме. Спасибо большое!
Давно не использовал Tailwind, посмотрел видео - всё вспомнил и снова верстаю лендинг в realtime - спасибо за видос!
Чуваак, спасибо огромное, я запарилась домысливать, как и что тут происходит, с твоим уроком за минуту поняла
Большое спасибо, очень полезное видео, особенно для новичков
Отлично объясняете, спасибо!
Спасибо за видео, понравилось, так как узнал для себя много нового.
Топ ,спасибо за инфу ,хорошо объясняешь для новичков .пошел смотреть твои видосы
лайкнул, норм прям) Остается живой проект в качестве практики
Спасибо! То что надо
Очень полезное видео. Спасибо!
Сколько же бороды). Ну есть же css/scss. Просто, комфортно и быстро.
Спасибо за старания, хорош!
Спасибо. Всё очень понятно и полезно. Возможно, попробую использовать для общего развития
Долгожданный видео
Круто. Спасибо за видео.
Очень полезный урок. Спасибо
Спасибо, Гоша!
Чётко!
крутой фреймворк, спасибо за обзор, попробовал и заметно сократилось время на верстку, теперь у меня процентов на 60 меньше времени занимает верстка, осталось классы подучить что бы без документации использовать
@ducke спасибо ! помогает, уже установил, с этим расширением намного удобнее
В видео показываются новшества из tailwind 3.1?
Как сделать чтобы при нажатии кнопки выразила реклама,и давали монетки.
Круто, буду использовать. Очень удобно верстать адаптив. Тем кто знает css, тому проще. HTML раздувает конечно + БЭМ, не знаю влияет ли это на что-нибудь.
То что css файл отдельно компилируется это понятно. А как с результирующем HTML, он также с классами от тайвинд скомпилируется ?
MacBook-Pro-Georgij --- Блин, как же это круто!
Русский интерфейс в VS Code, прям как в школе, -- это ещё круче!!
(Спасибо, поржала)
Единственный типок который рассказал на человеческом языке. Хоть я и устанавливал на Laravel! ))
Мне интересно есть ли там Сетка для адаптива ?(как в бутстрапе)
У меня на 41 минуте хром в инспектори пишет что h = 0 и поэтому не показывается блок
В коде не косячил, но все же вот
А как подключить к Django
а что делать если темный режим не работает
Гоша и ещё раз спасибо
Щось подібне май же сам зробив. А бачу, що все вже є). 👍 за відос.
Дударь Ваще Четко обьяснил Подписка обеспечена я требую продолжения банкета 😂😂😂
у кого то были проблемы с темной темой? если класс в html поменять на light то все равно применяются стили для dark
Его обычно используют с 4-8 px grid layout
Норм расказываешь
заметил, что если проект запускаешь заново и ничего не работает, попробуйте написать npm start в терминале. Мне помогло.
и еще с html убрал class='dark'
Високий рівень. Дякую Вам!
Почему у меня не работает прописаныйе стили ответьте пожалуйста кто нибудь
А есть ли подобный урок по BOOTstrap или курс видеоуроков по BOOTstrap
Ребята, не учите tailwind, только, если вы под пытками :)
его не нужно учить, достаточно просто попробовать, чтобы освоить
Если вас пугает множество классов, то вам достаточно использовать js чтобы создать массив и перебрать стили
@@vkussno2875 и по сути получится тот же css, где вместо селекторов и правил внутри - массив с классами внутри :)
Нужно больше видео про блокчейн, смарт контракты и еще про web 3.0 🙏🏻
не нужно.
@@user-fr8ti5hk8r Подумай еще раз хорошенько
Только на IDE он не работает
фигово то что он не обновляется в лайв сервере, надо команду запускать что бы он нормально обновлялся.
Вот такая вот тут как раз идёт логика. Вполне себе опять же неплохо..
Очень понятно, Ну понятнее уже не куда.
Очень и очень поверхностно. Таких видео даже на русском 1000 и 1 штука.
а че тебе еще надо?
практикуйся смотри в документацию и со временем запомнишь че как в садике все надо объяснять?
Ну, так для Гоши это золотой стандарт. Он разве по-другому хоть что-то рассказывает? Нет, никогда. Для школоты -- самое оно.
Познакомился с Tailwind, когда начал изучать ларку, поставил тогда стартер кит Breeze, ну и попробовал верстать сайт на этом Tailwind, и послал его на 3 буквы. Лучше голый CSS, если Bootstrap не устраивает, чем ЭТО, меньше кода будет и проще понять... ИМХО!
Здравствуйте, я смотрю ваши видеоролики по изучению языков программирования, а также по изучение разных движков для создания игр и хотел бы посоветовать вам записать видеоролик по русскому движку Unigine. Многим я думаю понравится!
А как же БЭМ?)
*Сделай обзор на игру Безумие Реанимация*
У одной ссылки столько класов, как то не очень.
По-моему это лучше, чем mylink который фиг пойми за что отвечает. Да ещё и по разным файлам могут быть стили раскиданы... Вот надо тебе конкретно этот элемент особенным сделать так надо создавать новый класс а если на проекте разные люди работают .. каждый будет свои классы для выравнивания текста городить или контейнеры или ещё какие-то элементы делать повторно и классы друг друга будут перекрывать .. а так можно не создавать свои Css классы на уровне компонент лишний раз.
Будетли видео JWT , cloud , apollo...
Не от того канала видосы ждёшь)
По полкам раскидал
27:00
Уже 2 месяца как на Tailwind css Верстаю сайты и могу сказать что фреймворк хороший но что то не хватает так как я перешёл на него из Bootstrap
Эх, щас бы хидер.
На первой минуте выключил. Есть bootstrap.
И то он для тех, кто не знает css.
По моему легче выучить css, чем библиотеку
Согласен с вами! Лично для меня не нужный вещь!
Bootstrap свои элементы имеет, а tailwind это конструктор. Если бы ты действительно использовал бутстрап, то ты бы о нем не писал, потому что попробуй переопредели стили кнопок, модалок или ещё чего-то.. там по-любому надо импортанты использовать будет местами.. а в теилвинд по крайней мере в уроке я таких опасных классов не увидел, которые привносят боль рестайлинга.
второй
Приятель, сделай что-то у себя со звуком! Я в шоке, сколько технических видео, а звук на минималках. Неужели ты не можешь отмикшировать звук?!
хидер
Возникла такая ситуация.
Пишу
Все хорошо, отступы есть.
Затем решил добавить по Вашему совету адаптивности. И пишу это:
Отступы при полном экране браузера исчезли.
В чем тут дело?
Разобрались?
Нет.
@@Mr_Palch, Теперь, надеюсь, да.
@@yulyayashina2801 а вы знаете в чем тут проблема?
@@Mr_Palch я же написала в комментарии рядом
Представляю себе, какой это геморрой так верстать: например дизайнер сделал макет, где используется 50 оттенков серого - что на них всех отдельные классы писать? Уж не проще ли обычным способом: из Фигмы скопировал CSS код и вставил себе в класс, который сам же и назвал! Секунда дела, а не вручную выписывать эти все классы. А уж если надо будет Pixel Perfect сделать - то использовать фреймворк это не иначе как слабоумие.
Такие фреймворки обычно используют при разработке, например, на react
Уверен что есть готовые плагины для фигмы которые умеют работать с tailwind, думаю это даже удобней будет потому что не надо свои классы придумывать. Если у вас на каждой странице разные отступы и цвета то дизайнер скорее всего овощ так как обычно же есть тема с определенным набором цветов. Все-равно не все что выдает фигма можно вставлять и адаптивность она за тебя не сделает насколько я знаю и ховеры всякие.
TailwindCSS - это зло. Я всё сказал
Привет, Гоша. Tailwind - ну, не знаю, столько классов фигачить в один тег.Такое себе.Лучше реально знать CSS.
Можно настроить конфиги и лепить стили через scss
Это ладно как анимации делать?))
Tailwind как-то уж сильно раздумает HTML-код. Просто ветер из-под хвоста. 💥💨
Так настрой свои конфиги и пользуйся через scss
Ооочень быстро........
Если это именно Обучающее видео - Убавляй Скорость Подачи
Нормально все, смотри уроки для новичков веб дева если не понимаешь ничего.
@@zigzag2341
НЕдалёкое,,,,,,,,
Аби, ти ще це все українською озвучував!
💛💙
В обычном CSS можно также "сразу разрабатывать две версии вашего сайта"... В целом половину посмотрел - никаких преимуществ не увидел, смотрим дальше
если ты купил хороший хостинг, ужал фото, сделал ленивую загрузку то по скрости тальвинд что и бустрап одинаковый. А тут нужно что-то качать настроить, долго и нудно. Бустрап легок если уметь удалять хлам, делов на 5 минут а скрость как и у тальвинда
А как подключить к Django
А как подключить к Django
А как подключить к Django