Основы CSS3. Полный курс

#YauhenK #webDev #CSS #CSS3
Всех приветствую в курсе «CSS3 Basics».
В данном видеокурсе мы с вами рассмотрим CSS, или каскадных таблиц стилей. Начнём с основ: простые и составные селектора, псевдоклассы и псевдоэлементы, позиционирование, блочная модель и т.д. А так же разберём свойства добавленные в третьей версии спецификации: границы и скругления, тени, градиенты, фильтры, трансформации, анимации, плавные переходы и т.д. По окончанию курса вы получите отличную теоретическую базу для создания полноценных статичных веб-страниц.
✒ Репозиторий курса:
✔ github.com/YauhenKavalchuk/css3
✒ Timeline:
✔ 0:00 - Введение
✔ 1:58 - Базовый синтаксис и применение стилей
✔ 8:10 - Простые селекторы
✔ 18:01 - Составные селекторы
✔ 25:54 - Псевдоэлементы и псевдоклассы
✔ 38:09 - Каскадность и наследование
✔ 47:58 - Блочная модель и отступы
✔ 57:48 - Позиционирование и z-index
✔ 01:06:35 - Единицы, переполнение и уровни элементов
✔ 01:17:09 - Плавающие элементы и очистка потока
✔ 01:26:00 - Шрифты и текст
✔ 01:37:01 - Границы и тени
✔ 01:46:35 - Скругление углов, списки и цвета
✔ 01:56:33 - Отображение элементов и вендорные префиксы
✔ 02:03:43 - Фон
✔ 02:12:20 - Градиенты
✔ 02:20:43 - Фильтры
✔ 02:26:43 - Трансформации
✔ 02:35:19 - Плавные переходы
✔ 02:41:25 - Анимации
✔ 02:50:12 - Таблицы и курсор
✔ 02:57:41 - Текстовые эффекты и многоколоночный текст
✔ 03:04:13 - Медиазапросы
✔ 03:12:07 - Стилизация плейсхолдера и скролла, CSS-спрайты
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R6rD7qq8
✒ Автор курса:
✔ KZbin: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...

[@user-pt1te3uh7f]

Это ну ооо,-чень ёмкий курс, количество полезной информации просто зашкаливает, Спасибо автору за четкое объяснение такой объемной темы ✨✨✨👏👏👏🌟

[@YauhenKavalchuk]

Спасибо большое за отзыв

[@apelsin4ik2901]

Что сказать по курсу HTML/CSS, низкий поклон автору. Все пробелы в моих знаниях были полностью закрыты, так сказать пополнен багаж знаний. Вопросов не имеется, информация подаётся доступно и понятно. Буду ждать новых роликов. Автор молодец, прошёлся по всем темам, которые не до конца рассказывают It - учителя на ютубе. Желаю удачи в следующих видео, и большое спасибо за проделанный труд.

[@YauhenKavalchuk]

Спасибо большое за отзыв

[@user-nk6ih7uh1h]

Большое спасибо за труд, вложенный в такие качественные видео!

[@YauhenKavalchuk]

Пожалуйста

[@MAKSIMTSA]

Очень насыщенный курс! Освещает все основные темы CSS. Не плохо подтянул свои знания! Спасибо за проделанную работ! ;-)

[@YauhenKavalchuk]

Спасибо за отзыв

[@user-kv1yx5mf1q]

лучший урок по CSS, быстро и по делу, удобно вернуться и пересмотреть в случае чего. сначала показалось что объяснения слишком быстро идут и ничего не успеваешь понять, но в принципе за ролик привыкнуть можно, да и лучше так чем еще больше растягивать курс. но это всё не так важно, а важно то, что здесь собраны детали, о которых другие авторы не говорят (а это такой объём информации, что мне аж страшно подумать, сколько бы вещей прошли мимо меня, если бы я случайно не перешла на этот ролик с ролика другого автора). отдельное спасибо за упоминание тех свойств, которых лучше избегать, но знать полезно. всего вам самого хорошего и процветания канала

[@avet9177]

Я с помошю твоих видеоуроков выучил почти вес html и css и могу сделать макети средней сложности. Спосибо тебя.

[@near5090]

Вау

[@YauhenKavalchuk]

Пожалуйста

[@user-bl2mk2ey3l]

Год назад окончил курсы по верстке, но в силу некоторых обстоятельств, не продолжил обучение. Сейчас же решил вернуться к изучению и решил освежить память. А оказалось за эти 3 часа этого видео урока (и 3 с этого же канала), узнал нового больше чем за 2.5 месяца на онлайн-курсах в принципе, а также не просто освежил память, а получил новые, очень полезные знания! Подача материала, объяснение, дикция - Все отлично! Однозначно подписка, и продолжение изучение профессии используя видео этого канала! Автор, огромное тебе спасибо!

[@YauhenKavalchuk]

Спасибо огромное за отзыв

[@user-xl8wn6ge2m]

Вся суть большинства ит курсов...

[@sufffear]

Все откладывал просмотр курса на потом, а тут прям все в одном файле как бы намекает- пора уже) спасибо!

[@YauhenKavalchuk]

Пожалуйста)

[@lolalol8404]

3часа пролетели незаметно, божественная подача! Спасибо большое!

[@YauhenKavalchuk]

Спасибо большое за поддержку

[@user-dy8ri3kr4m]

Т

[@user-dy8ri3kr4m]

@@YauhenKavalchuk р

[@user-dy8ri3kr4m]

Тт

[@mixm1572]

Крутые уроки, все четко по полочкам и разделам, лаконично, без воды - самый сок.

[@YauhenKavalchuk]

Спасибо 👍

[@BoomKillazz]

Огромное спасибо за ваши курсы, все по полкам и понятным языком.

[@YauhenKavalchuk]

Спасибо большое за ваш отзыв)

[@user-mr3wf4kg6n]

Спасибо тебе, за такую отличную подачу материала и за труд!

[@YauhenKavalchuk]

Спасибо за отзыв

[@7SecondAnalPain836]

Спасибо огромное за информативный курс. Записываю всю информацию в тетрадь чтоб с головы не вылетело. Приятно что автор не просто учит только тому что необходимо, но и тому что полезно знать.

[@YauhenKavalchuk]

Спасибо за отзыв

[@ytc9112]

У вас талант в понятной форме передавать информацию!!! Благодарю примного!!! 🔥🔥🔥

[@YauhenKavalchuk]

Спасибо большое за отзыв

[@NoName-xz2md]

То что мне очень нужно, завтра обязательно посмотрю. Огромное спасибо

[@YauhenKavalchuk]

Спасибо за отзыв!

[@tonich3712]

Спасибо вам огромное дикция, качество, подача материала ,просто огонь ....спасибо вы лучший,,,,

[@YauhenKavalchuk]

Спасибо большое за отзыв

[@onceuponinchina7232]

Спасибо за проделанную работу. отличное обьяснение, очень годный контент, однозначно лайк.

[@YauhenKavalchuk]

Пожалуйста)

[@sunrayfrei58]

Благодарю за этот бесценный курс.

[@YauhenKavalchuk]

Спасибо за отзыв

[@user-qx4nl2ni1b]

Спасибо тебе большое за такой видеокурс! Очень все подробно , доступно и по полочкам. Просто отличная подача материала, одна из лучших по верстке сайтов

[@YauhenKavalchuk]

Спасибо за отзыв

[@egorpobylets6597]

Отличный курс по CSS!!! Спасибо!!!!!

[@YauhenKavalchuk]

Пожалуйста

[@viktoriiavlasova6644]

Спасибо вам за ваш контент. Нужная информация и очень грамотно преподнесение

[@YauhenKavalchuk]

Пожалуйста

[@zoobki]

Очень и очень крутой курс! Максимально подробное понятное объяснение с практическими примерами - это то, что я хочу найти в каждом ролике по вёрстке, но, к сожалению, подобного плана видео очень мало. Больше всего понравилась часть с созданием анимаций. Загорелась, придумала и быстренько написала свою, хотя до этого с ними не сталкивалась. Всё сработало чётко) Спасибо!!!

[@YauhenKavalchuk]

Пожалуйста)

[@user-os8hx6hl7t]

Евгений, огромное Вам спасибо! Замечательный, очень плотный материал, великолепное объяснение без воды. Долго буду пользоваться Вашими видео, конспектирую их уже сейчас. Дай Вам Бог здоровья

[@YauhenKavalchuk]

Пожалуйста

[@borisoffdenis]

Одно из самых лучших видео по CSS что я видел. Особенно первая половина. Рекомендую всем его регулярно пересматривать.

[@YauhenKavalchuk]

Спасибо за отзыв

[@Signtone]

Огонь! Цельные видосы обожаю!

[@YauhenKavalchuk]

👍

[@user-nl9dg6iw2t]

Много полезного, спасибо за ваш труд!

[@YauhenKavalchuk]

Спасибо за отзыв

[@user-bl4te2kg8v]

Лучше не видел. Огромное спасибо за труд!!!

[@YauhenKavalchuk]

Спасибо за поддержку)

[@dmitriytverdokhlibov8832]

Повторяю по этому видео основы. Все четко и по делу) Спасибо за вложенный труд!

[@YauhenKavalchuk]

Спасибо за отзыв

[@itsMatrik]

Почему так мало просмотром?Ваши курсы по front dev (особенно по основам css и html) - лучшее что есть на всем ютубе Забавно видеть, как видео по типу "один день из жизни front end программиста, где люди весь день пьют кофе и серфят инет собирают пол ляма просмотров, а такая годнота остается в тени

[@YauhenKavalchuk]

Спасибо большое за поддержку. Не знаю почему так получается(

[@mrrusiapatriot]

Потому что здесь надо голову напрягать, а там создается эффект, где ты смотришь и представляешь что так же сидишь, кайфы ловишь и бабосы получаешь.

[@grot5957]

Просто лучший, смотрю видосы с удовольствием) объясняешь всë по полкам, спасибо)

[@YauhenKavalchuk]

Спасибо за фидбэк

[@mmkn2494]

обожаю! спасибище за исчерпывающие знания!

[@YauhenKavalchuk]

Спасибо за отзыв)

[@GrandStudio777]

Этот курс великолепен тем,что экономит главный ресурс-время. Хотелось бы такой же курс по JS)))

[@YauhenKavalchuk]

Спасибо за отзыв. На счёт JS - в будущем обязательно сделаю

[@user-vx7tt9jc7u]

Курс 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥 От души благодарю автора!!!!! Всех благ!!!!!!!!!!!!!!!!!?😊

[@staskopytich]

Благодарю за отлично скомпонованный изложенный материал, закрепил теорию :)

[@YauhenKavalchuk]

Спасибо за отзыв

[@xoserama3271]

Женя спасибо огромное за твой контент!!! Единственный человек, который делает с душой!! Всё доступно, все понятно, просто ТОП

[@YauhenKavalchuk]

Спасибо за отзыв

[@softtery3580]

Рад, что нашёл этот курс, появилось желание разобраться в темах html, css и js. И о чудо, здесь есть всё, доступно и понятно. Спасибо большое!

[@YauhenKavalchuk]

Пожалуйста

[@user-bs9tp3nl1y]

Женя, ты молодец !!! Реально очень качественные уроки. Очень очень редко кого хвалю, но тут не могу удержаться.

[@YauhenKavalchuk]

Спасибо большое

[@user-ky3gx2ug4h]

Это лучшее что я видел по CSS3! Чувак, поклон до земли, спасибо!

[@YauhenKavalchuk]

Пожалуйста)

[@Melsanaa]

Спасибо за курс. Повторила то, что изучала давно и узнала много нового. Считаю, что полезно время от времени возвращаться к теории - даёт толчок для дальнейшего роста.

[@YauhenKavalchuk]

Спасибо за отзыв

[@user-nm3fk2ut4h]

я смотрела очень много видео по разработке, это единственный канал который я смотрю от и до, автор вы крутышка

[@YauhenKavalchuk]

Спасибо большое за отзыв

[@mrnobody3739]

спасибо за курс, очень понравился, много для себя почерпнул

[@YauhenKavalchuk]

Спасибо за отзыв!

[@alistrafgrout9220]

Премного благодарен за столь великолепный бесплатный видео-урок о CSS3, желаю вам великих свершений в области front-end и всего наилучшего!

[@YauhenKavalchuk]

Спасибо большое за поддержку

[@Blastikk]

Спасибо большое за вашу работу! Это лучший курс по CSS, что мне попадался. Очень подробный и понятный даже для новичков. Самое главное отличие от других курсов, это то, что тут от А до Я объяснется всё что нужно + откуда что берётся и для чего. Всем рекомендую!

[@YauhenKavalchuk]

Спасибо большое за отзыв

[@baronbaronov760]

мне кажется это один из лучших уроков ,молодец снято по темам отдельно .

[@YauhenKavalchuk]

Спасибо

[@Mikky2k2]

Спасибо за курс💫💕

[@YauhenKavalchuk]

Спасибо за отзыв

[@user-ms7io2qp2u]

Безумно качественная подача, все по делу! Низкий поклон автору! Все пробелы восполнены)

[@YauhenKavalchuk]

Спасибо большое за поддержку

[@eugenia9999]

когда вижу кто сделал ролик в уведомлении, то понимаю что это годное видео !) спасибо !!)) лайк !!))

[@YauhenKavalchuk]

Благодарю

[@user-bg9qz3do6x]

Почти досмотрел видео, спасибо большое. Мне очень понравилось!

[@YauhenKavalchuk]

Пожалуйста

[@user-gp6yt6ze2t]

Концентрат инфы. Супер, спасибо

[@YauhenKavalchuk]

Спасибо за отзыв)

[@d_r_robot]

Спасибо бро за контент!)

[@YauhenKavalchuk]

Спасибо за отзыв

[@user-sp9gh1sj7c]

Спасибо большое, очень подробно 👍🔥🔥🔥🔥

[@YauhenKavalchuk]

Спасибо за отзыв

[@Andrii.W]

спасибо автору за труд во благо! очень полезное видео!

[@YauhenKavalchuk]

Пожалуйста

[@FLAZY]

Огромное спасибо, подача материала просто 🔥

[@YauhenKavalchuk]

Всегда пожалуйста

[@akzatar_2286]

как успехи?

[@viktoriiavlasova6644]

Вы классный. Спасибо вам огромное!!!

[@YauhenKavalchuk]

Пожалуйста)

[@baytszy]

Спасибо за курс)

[@YauhenKavalchuk]

Спасибо за отзыв

[@hodooor7360]

Спасибо за курс.

[@YauhenKavalchuk]

Спасибо за отзыв)

[@alexbausk1316]

Спасибо за такой прекрасный курс, теперь у меня есть неплохие знания css)

[@YauhenKavalchuk]

👍

[@uniworker_gg]

Alex, иметь мало, важно применять их постоянно чтобы стать в кодером🙂

[@jetowl57]

офигенные видео у тебя. спасибо.

[@YauhenKavalchuk]

Пожалуйста

[@user-dv6ej2ix6x]

Очень круто! Советую к просмотру всем тем кто имеет понимание о программировании и готов изучать глубокую теорию разжеванную во всех деталях!

[@YauhenKavalchuk]

Спасибо за отзыв

[@user-pv8bw6iw1w]

спасибо за старания для нас

[@YauhenKavalchuk]

Спасибо за отзыв

[@prokhorov_sergey_igorevich]

Спасибо за курс!

[@YauhenKavalchuk]

Всегда пожалуйста

[@AgnusDei.]

Спасибо за курсы!

[@YauhenKavalchuk]

Пожалуйста

[@kittens_cute]

Отличнейший курс. Помогает повторить свои знания или же что-то выучить, что в своё время пропустил или же не сказали. Спасибо)

[@YauhenKavalchuk]

Спасибо большое за отзыв

[@kittens_cute]

@@YauhenKavalchuk Вам спасибо)

[@user-sz8yx1cd6y]

великолепный курс , за первые 30 минут просмотра дополнил свои знания css

[@YauhenKavalchuk]

Спасибо за отзыв

[@user-ym2ut5cf8t]

спасибо за курс , очень полезно

[@YauhenKavalchuk]

Пожалуйста

[@Veyvik87]

Благодарю за такие качественные курсы , очень емкие и информативные, узнал все что мне было необходимо по html и css в кратчайшие сроки 👍👍👍

[@YauhenKavalchuk]

Спасибо за отзыв

[@uultayarstankulova6132]

Спасибо Вам огромное!!! Было супрер полезно

[@YauhenKavalchuk]

Пожалуйста

[@ThePro_0001]

хорошее видео, благодарю за труд!

[@YauhenKavalchuk]

Всегда пожалуйста

[@user-ie4id9rl1n]

Очень познавательно, спасибо

[@YauhenKavalchuk]

Пожалуйста

[@teofrast024]

Спасибо большое, понятно объясняешь) теперь буду учиться JavaScripty

[@YauhenKavalchuk]

пожалуйста

[@qakajaka3589]

бл, респект. И за курс по HTML и за CSS, складывается четкое понимание, создание правильной структуры front-end части.

[@YauhenKavalchuk]

Спасибо за отзыв

[@rustem7756]

твои уроки отлично заходят, спс

[@YauhenKavalchuk]

Спасибо за отзыв!

[@rustem7756]

@@YauhenKavalchuk после этих уроков изучить флексы и гриды, и хватит думаю с css

[@uzbekhumors6424]

Привет из Узбекистана, спасибо за труд!

[@YauhenKavalchuk]

Спасибо за отзыв)

[@user-uy9lb5el2f]

Спасибо братюня)👍

[@YauhenKavalchuk]

Пожалуйста

[@ded__undead8418]

тяжело учится, но буду пробываться учить и учить, спасибо за столь большой труд!))

[@YauhenKavalchuk]

Спасибо за отзыв

[@user-ir3ru2kv8u]

спасибо, Евгений!!!

[@YauhenKavalchuk]

Пожалуйста

[@mishachubenko3394]

Класно объясняеш, буду смотреть!

[@YauhenKavalchuk]

👍

[@mabluzQ]

еще не смотрел, но почему то уверен что это то что надо)

[@YauhenKavalchuk]

👍

[@Minotskyi]

Огромное спасибо!

[@YauhenKavalchuk]

Пожалуйста

[@grobovshikov]

Спасибо отличный урок, в отличии от многих все структурировано и объяснены некоторые тонкости и общепринятые традиции)

[@YauhenKavalchuk]

Спасибо за отзыв

[@a_mexdiev]

Дай Бог тебе здоровья

[@YauhenKavalchuk]

Спасибо)

[@NeedForHeavyMetal]

Какой же классные уроки! почему так мало просмотров! лайк подписка однозначно! вот так надо преподавать, а не как некоторые)

[@YauhenKavalchuk]

Спасибо большое!)

[@user-qo5xr5gk5y]

@@YauhenKavalchuk , спасибо вам!

[@vitaliycherkasov3654]

7

[@vitaliycherkasov3654]

77

[@vitaliycherkasov3654]

@@YauhenKavalchuk 780

[@Anyagolosova]

Очень нравится курс

[@YauhenKavalchuk]

Спасибо

[@krylovDev]

Снимаю шляпу за профессионализм! Даёшь курсы!

[@YauhenKavalchuk]

Спасибо)

[@GGSoft2009]

Большое спасибо!!!!

[@YauhenKavalchuk]

Пожалуйста

[@user-hg9jc9nc3k]

Лучшие курсы в мире. Спасибо. Лайк. Подписка. Реклама среди друзей.

[@YauhenKavalchuk]

Спасибо

[@_Mister_X_]

Молодец грамотно объясняет.

[@YauhenKavalchuk]

Спасибо

[@alkha7144]

Отличная подача.

[@YauhenKavalchuk]

Спасибо

[@krovnabetone3388]

Самое адекватное описание css на русском, все основное изложено просто и понятно. Спасибо за ролик

[@YauhenKavalchuk]

Спасибо за отзыв

[@Stas446]

Спасибо, всё доходчиво понятно.Плохо конечно что я нифига запомнить не могу ))))понимаешь ,что ничего сложного ,но запоминаешь 10% ,из увидемого .Второй раз буду сейчас смотреть .Всем кто это читает ,рекомендую учить до появления детей,пока молодые ))))

[@YauhenKavalchuk]

пожалуйста

[@Antinormanisto]

Спасибо. Начинаю учить для того чтобы понимать что как, хоть и учу питон уже 7 месяцев и собираюсь писать на нём. Надо же понимать что в шаблонах изменяешь

[@YauhenKavalchuk]

Пожалуйста

[@soundmorozov]

Замечательный урок! Спасибо! Как обычно, сначала сделаешь сайт, потом находишь такой источник наиполезнейшей информации))

[@YauhenKavalchuk]

Спасибо за отзыв

[@el_dorado]

Здорово, спасибо. Я уже пару блогеров смотрю, учусь. И сомневался, стоит ли еще кого-то начинать смотреть. А то можно смотреть до бесконечности, а на кодинг времени не останется) Но у вас подача классная. И всего ведь не расскажешь. И в итоге я у вас нет-нет, да какие-то нюансы узнаю, которых не было у других ваших коллег по ютубу. От души, короче)

[@YauhenKavalchuk]

Благодарю, вот ради нюансов я и снимаю курсы)

[@el_dorado]

@@YauhenKavalchuk спасибо вам за это. кто, может, подумает, что это не спасение человечества от рака, но ваш труд дорогого стоит. а может кто выучится, займется биоинформатикой и спасет нас всех от всех болезней)

[@YauhenKavalchuk]

Может быть) в любом случае, спасибо за отзыв

[@LLuKKen]

Спасибо тебе, добрый человек, за уроки)👍👍👍

[@YauhenKavalchuk]

Пожалуйста

[@romaskhin]

Нефига себе , круто

[@YauhenKavalchuk]

👍

[@Ne_tvoe_delo1]

Ваши бесплатные уроки гораздо полезнее и информативнее платных курсов

[@YauhenKavalchuk]

👍

[@moscow8881]

поздравляю тебя дружище - ты гений html

[@YauhenKavalchuk]

Спасибо

[@adamstadnikov7384]

Спасибо!)

[@YauhenKavalchuk]

Пожалуйста

[@Viro-gj4mw]

Чувак, в январе с меня донат, круто рассказал всё!

[@YauhenKavalchuk]

Донатов нет( только спонсорство и Патреон

[@user-xp8gn7cm4e]

классный курс

[@YauhenKavalchuk]

Спасибо

[@DenDreting]

Бл я единственный который полностью просмотрел этот топовый урок ? хотя я искал уроки про анимации и трансформы. Автору респект за труд !!!

[@YauhenKavalchuk]

Спасибо за отзыв