CSS для Начинающих - Практический Курс

Мои паблики по JavaScript:

JavaScript cообщества:

Roadmap по каналу:

Видео по основам CSS.
В рамках данного ролика вы создадите с нуля классную стилистику на CSS для сайта резюме и выложите его на GitHub Pages.

HTML + CSS. Практические Курсы
Я уже очень давно хотел это сделать)
Хочу, чтоб каналом новые зрители могли пользоваться, как бесплатной образовательной площадкой прям с нуля.
Чтоб вот пришел зритель, и поэтапно выучил HTML, потом CSS, потом JavaScript и перешел к практике.
Как вы знаете JavaScript на канале очень много, потому ловите первые строительные блоки для веба.
Я разработал 2 ролика, в которых последовательно буду показывать, как с нуля сделать сайт-резюме и выложить его на GitHub.
В процессе вы узнаете про все необходимые элементы внутри HTML и CSS с нуля.

0:00 - Интро
1:17 - Введение в CSS. Что такое CSS
3:44 - Редактор кода VSCode. Установка плагинов
5:14 - Начало практики по CSS
6:11 - Инлайн стили
12:28 - Подключение внешнего CSS-файла
14:51 - Свойства background и color
17:14 - Инспектор кода Chrome DevTools
19:39 - Работа со шрифтами в CSS
26:38 - Работа с картинками img
32:20 - Стилизация параграфов
35:53 - Работы с текстом в CSS
38:32 - Box Model в CSS
53:11 - Вложенные элементы в CSS
57:33 - Стилизация ссылок
1:01:56 - Реализация секций -"карточек"
1:07:03 - Стилизация списка хобби
1:09:56 - Интересный пример работы с псевдоэлементами
1:16:04 - Пример стилизации списка с ссылками
1:20:02 - Стилизация форм
1:27:26 - СSS FlexBox
1:30:16 - Свойство display
1:33:00 - Стилизация кнопки
1:34:29 - Позиционирование в CSS
1:41:59 - Медиа запросы. Адаптив
1:44:42 - Деплой на GitHub
1:46:44 - Завершение работы
1:47:14 - Аутро

[VladilenMinin]

Присоединяйтесь к моему бесплатному марафону для начинающих!
За 5 дней вы создадите 5 крутых проектов на HTML, CSS и JavaScript:

[sun_and_wind]

"Делай добро и бросай его в воду" редко, кто этим сейчас руководствуется в жизни. Огромное Вам Спасибо за добро, которое Вы делаете для меня и для других людей. Оно обязательно Вам вернётся.

[nchufyrina]

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

[System-fmkg]

Думаю не ошибусь, если скажу, что ты лучший СНГ контент мейкер, ОГРОМНЕЙШАЯ благодарность за такие труды!

[xjeuivy]

Уважаемый Владилен! Спасибо большое за Ваши видео. Начала с HTML, теперь CSS, но это явно только начало знакомства с вашими курсами. Информация потрясающе концентрирована, но при этом разделена нагрузка по плотности информации на момент восприятия, абсолютно легко усваиваешь и понимаешь каждый момент. Отдельно хотелось бы отметить ораторские способности: саму манеру речи, словарный запас, спокойствие и доброжелательность, которую излучаете) Здорово было узнать о вас, здорово, что вы это сделали - результат потрясающий.

[Paruk]

Теперь уже полностью можно погрузится в твой канал учить web разработку и стать разработчиком даже с нуля только на твоем контенте. Многому у тебя научился, спасибо тебе за твой труд и за такой хороший контент)

[mxbiler]

Таймкоды, так как ниже их никто вроде не расписал, а также их нет в видео:

0:00 - Интро
1:17 - Введение в CSS. Что такое CSS согласно документации MDN.
2:54 - Переходим к сайту, написанному Владиленом на курсе по HTML.
3:44 - Несколько слов про редактор кода VSCode. Установка полезных плагинов.
5:14 - Переходим к практике по CSS.
6:11 - Способы инлайнового подключения CSS к документу. Примеры работы свойств background и color.
12:28 - Подключение внешнего CSS-файла.
14:51 - Переход к непосредственному написанию CSS. Работа со свойствами background и color.
17:14 - Несколько слов о браузерном инспекторе кода Chrome DevTools.
19:39 - Работа со шрифтами в CSS.
26:38 - Работа с картинками <img>. Работа со свойствами width, border-radius. Изучение атрибутов тега <img>.
32:20 - Стилизация параграфов рядом с картинкой.
35:53 - Некоторые интересные свойства для работы с текстом в CSS.
38:32 - Работа с Box Model в CSS. Основы работы с различными отступами, границами элементов, отображением их размеров.
53:11 - Основы работы со вложенными элементами в CSS. Важный момент касаемо позиционирования элементов при помощи свойства float.
57:33 - Продолжение стилизации документа. Стилизация ссылок. Основы псевдоклассов/псевдоэлементов на примере стилизации ссылок.
1:01:56 - Реализация секций-"карточек". Практика в работе с задними фонами, списками, отступами, ссылками.
1:07:03 - Стилизация списка хобби в карточке "Мои хобби".
1:09:56 - Стилизация таблицы в карточке "Опыт работы". Интересный пример работы с псевдоэлементами.
1:16:04 - Стилизация карточки "Youtube курсы". Пример стилизации списка с ссылками.
1:20:02 - Стилизация секции "Связаться со мной". Достаточно показательный пример стилизации формы обратной связи. Важные моменты стилизации тегов <input> и <textarea>.
1:27:26 - Несколько слов о СSS FlexBox на примере выравнивания тегов <input> в форме. Свойство display.
1:30:16 - Тонкости работы со свойством display.
1:33:00 - Стилизация кнопки отправки формы.
1:34:29 - Основы работы с позиционированием в CSS: свойства position, top, bottom, left, right.
1:41:59 - Несколько слов о настройке адаптивности сайта.
1:44:42 - Разворачиваем нашу готовую страницу на бесплатном хостинге от GitHub.
1:46:44 - Завершение работы.
1:47:14 - Аутро.

P.S. Буду признателен, если Владилен добавит в закреп или в описание к видео )

[tgwdhmg]

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

[pmwxcsv]

Огромное вам спасибо, что так доступно и доходчиво объясняете темы, обучение даётся гораздо легче благодаря вашему контенту!

[vaheavetisyan]

Это просто офигенно, спасибо за проделанную работу !)

[Pan_Jan_Wroclawski]

Ну, собственно, как и всегда - интересно, доходчиво, полезно! Спасибо, Владилен!

[FoxMindShow]

Крутой материал, из всяких курсов разных и того что я отсматривал здесь конечно топчик. Сижу с 2 компов и параллельно практикую, то что ты рассказываешь, очень простой и понятный язык подачи, что редкость в наше время. Жаль что можно только один лайк поставить !)

[el_dorado]

Класс! Спасибо! Отдельная благодарность за фишечки из best practice.

[Ly-cnbd]

Очень, доступно, просто и легко объясняете, большое спасибо за этот урок!

[danilmedvedev]

спасибо тебе!!! ты настолько круто объясняешь, что я прихожу в восторг .
начал заниматься ещё летом : изучил HTML, а на остальное силы воли не хватило : всё было запутанно и я просто выгорел, но тут появился ты! теперь я всё понимаю. ценю)

[irasergienko]

Я менеджер проектов и прохожу ваши уроки, чтобы понимать программистов и хоть немного говорить с ними на одном языке))
Большое спасибо за урок! Всё, что вы объясняете у меня получается!

[ivangusev]

Огромное спасибо, за эту прекрасную возможность обучаться на понятном и грамотном примере. Огромный респект автору!!!

[gqoshuq]

Уважаемый Владилен! Огромное, огромное Вам спасибо! Очень приятно Вас слушать): во-первых, всё понятно; но также мне очень нравится Ваше чувство вкуса! Результат получается не только функциональным, но и эстетически красивым. Это - здорово! 🍀🐞 ❣

[liabuts]

Владилен, спасибо огромное за прекрасное руководство! Вы очень хороший преподаватель! :)

[bhgylxu]

Почти два часа! 👍 Огромное спасибо, Владилен, я долго это ждал.