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

[@VladilenMinin]

Исходники тут: t.me/js_by_vladilen/409 Присоединяйтесь к моему бесплатному марафону для начинающих! За 5 дней вы создадите 5 крутых проектов на HTML, CSS и JavaScript: bit.ly/3ljZsow

[@sun_and_wind]

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

[@КомнатаМарса]

Имя этому - монетизация.

[@kvadro_id]

@@КомнатаМарса не только! У него ведь есть ещё и платные курсы за сотни тысяч... а эти огрызки хорошо привлекают ;)

[@Wolf7922]

@@kvadro_id говно это, а не "курсы"

[@ScamMina]

@@kvadro_idпрежде чем кидаться огрызками необходимо научиться правильно кидать те самые огрызки. А если кто то просто выучил алфавит и может лишь писать набор😅 слов,тем самым объясняя свою сущность, Просто завидуй молча, и смотри дальше😊

[@НикитаЗабаштин]

Таймкоды, так как ниже их никто вроде не расписал, а также их нет в видео: 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 - Работа с картинками . Работа со свойствами width, border-radius. Изучение атрибутов тега . 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 - Стилизация карточки "KZbin курсы". Пример стилизации списка с ссылками. 1:20:02 - Стилизация секции "Связаться со мной". Достаточно показательный пример стилизации формы обратной связи. Важные моменты стилизации тегов и . 1:27:26 - Несколько слов о СSS FlexBox на примере выравнивания тегов в форме. Свойство 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. Буду признателен, если Владилен добавит в закреп или в описание к видео )

[@VladilenMinin]

Добавлю, как буду у компьютера, благодарю)

[@НикитаЗабаштин]

@@VladilenMinin не за что, рад помочь )

[@iryandriver]

ты на 54-ой минуте забыл про комара написать

[@nchufyrina4797]

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

[@Уралочка-ы2р]

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

[@Par4uk]

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

[@ecstasy5101]

Как успехи?)

[@VladilenMinin]

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

[@romaskhin]

о, css подъехала)

[@ВалерийХарламов-ь4в]

Рекомендую всем - прошлый марафон был очень интересным!

[@sunquake]

привет! классно объясняешь! у тебя одну ошибку нашел. напишу по мейлу

[@andykud63]

@@romaskhinсразу лайк

[@greenvirsdev7820]

Почему ты не объяснил про специфичность и каскад? Это самая частая ошибка, где плавают новички!

[@FoxMindShow]

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

[@danilmedvedev1473]

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

[@dark.lizzard]

Спасибо за курс, Владилен. Очень полезно. Как на счёт совместить HTML+CSS +JS на примере создания сайта со всей динамикой? Было бы круто!

[@oluhovskiy]

Это слишком сложно.

[@trev1665]

@@oluhovskiy слишком платно

[@ResultSchool]

Для тех, кто хочет освоить профессию Frontend разработчика за 7 месяцев - bit.ly/3Oxn4Df Освоить основы веб-разработки бесплатно. Курс по HTML & CSS - bit.ly/3NwJaVh

[@irasergienko229]

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

[@robbyandreasian]

Владилен, две недели назад понятия не имел, что такое ХТМЛ. сейчас уже вделал разметку и очень радуюсь ! у вас дар учителя ! То, как вы доносите материал - талант ! Я никогда бы не подумал. что меня заинтересует кодировка! Это Благодаря Вам ! спасибо за ваш труд! пусть Господь благословит !

[@АртурБеленченко]

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

[@vaheavetisyan1643]

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

[@ivangusev8752]

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

[@КсенияОлейникова-ф3в]

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

[@System-fm7kg]

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

[@Pan_Jan_Wroclawski]

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

[@ЕлизаветаЧернякова-п8п]

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

[@el_dorado]

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

[@СергейТатарских-н2б]

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

[@spacetab1]

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

[@Ly-cn8bd]

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

[@nikitaromanenko2599]

Спасибо! Одолел это видео за 3 часа. Буду ещё его прогонять несколько раз. Владилен, вы лучший! Никто и близко так понятно не объясняет.

[@МарияСчастливая-л7м]

Огромное человеческое спасибо Владилен! Всё очень понятно! Всё получилось! Я счастлива!!!

[@ВладКрэйвэн]

35:17 - курсив 36:10 underline - нижн.подчёркивание

[@sith3n]

Спасибо Вам большое за этот прекрасный курс, я очень многому научился и теперь умею создавать HTML+CSS сайты! 🎉🙏

[@МишаМихаил-ф7х]

Спасибо, друг ) всего тебе доброго, а мы идем за тобой

[@awesome5708]

Только проснулся, а тут уже такой контент. Молодец, респект за огромный вклад!

[@liabuts5603]

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

[@ВалерийХарламов-ь4в]

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

[@desenger82]

Владилен огромное спасибо!) Всё получилось! Хорошо и понятно всё обьясняешь! Единственное: ты забыл показать как увеличить шрифт на кнопке и подключить форму, чтобы она стала рабочей! Я подписался на канал, буду с нетерпением ждать следующих видео!

[@woonshpoonsh]

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

[@eugenia9999]

ого !!!!))) для освежения в памяти --будет в самый раз !!!)) спасибо за видео!!!)))

[@theythinkimjoking]

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

[@eugenia9999]

с Днём рождения !!!))) Всех всех благ !!!)))) Исполнения желаний!!)) Успехов в делах и конечно же в развитии канала ))))

[@VladilenMinin]

Благодарю)

[@sergeysamius1128]

@@VladilenMinin Крепкого здоровья, успехов во всем!

[@ikolchanov14]

Владилен, спасибо большое! реально ценная информация закрепленная практикой. Жду третью часть по JS, чтобы сделать сайт динамическим) И доработать блок "обратной связи"

[@VladilenMinin]

Курс на 6 часов на канале)

[@avk8008]

Владилен, очень легко и доходчиво объясняешь всегда, тебе удачи и развития твоего канала)

[@carlparker4057]

Владилен, вы просто КОСМОС!

[@Devivl]

Благодарю, Владилен. То что делишься своим опытом - это очень благородно. Занимаюсь бекендом. Нужны были общие знания по HTML, CSS. Понимание получил и за это огромнейшее спасибо. В конце видео, на мой взгляд, было бы прям очень круто затронуть тему использования библиотеки bootstrap. На очереди JS.

[@livinti_ol]

У Вас талант доносить хорошо информацию. Спасибо большое за урок!!! Пожалуйста, продолжайте в том же духе. :)

[@artiomstartev1294]

@Владилен Минин, будьте добры ответить на очень важный вопрос. Просмотрев, много видеороликов по изучению CSS, у меня возник вопрос по раставлению блоков в HTML и раббота с этими блоками в CSS. Некоторые в своих видеороликах показывают как правильно разбивать страничку на блоки, в вашем случае, вы разбивали страничку на контейнеры и работали с ними. В других видеороликах, говорят, что на в данный период времени обязательно работать с такими тэгами, как , , , , , , etc... И таким образом разбивать свою страничку на блоки. И в 3 случае я увидел, что люди разделяют на контейнеры и в ниих обязательно используют такие атрибуты, как class="", id="", и в эти атрибуты обязательно вписывают по принципу как во втором случае: header, main, article, section, aside, footer , etc.. Будьте добры объяснить и разъяснить пожалуйста, спасибо!)

[@RomanZverev-yc5qc]

Как мне кажется,тут больше срабатывают правила программисткого этикета)То есть,есть семантические теги - элементы у которых есть чёткое значение(например, , , , , , , etc...) в отличии от div.

[@JIu4Ho]

Всё очень понятно, спасибо. Единственное говорят, что пользоваться дивами не желательно, а стоит использовать такие теги как и . Было бы интересно узнать ведут ли они себя как дивы или нет.

[@konstantinkuksov914]

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

[@foldisnomistake]

Супер! Снова годнота. Приступим:) Спасибо, Владилен.

[@evreiq]

Ты просто молодец, я не знаю как бы я это все учил, и сколько бы времени это у меня заняло бы. Спасибо огромное!!!

[@h_worker1826]

Супер. Спасибо из Кыргызстана 🇰🇬

[@АдильханБолотбеков-в1щ]

уверен как всегда качественно

[@AsaAlexa]

Спасибо Владилену Все объясняет понятно и доходчиво. То что раньше не мог понять , сейчас понимаю благодаря этим видео.

[@Fsib94]

Владилен, Твои уроки - лучшее что я встречал !

[@xapbu8883]

В восторге от урока, спасибо и успехов вам по жизни!

[@windowsaccount6209]

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

[@ProProgrammist_IT]

Спасибо! как раз учу новый язык программирования нашёл этот ролик я так и слушал и практиковался всё даже заработало!👍👍

[@pupizoid100]

Cпасибо вам столько раз возвращался к вашему видео чтоб освежить знания.

[@Тима-у5у3ш]

Ставлю своего лукашенко, мне очень зашло, спасибо. Везде уроки +/- "вот так выглядит готовое", а у Владилена идёт от начального отстойного каркаса к красивому итогу! Видно, как нужно двигаться к совершенству.

[@neobulk3761]

Огромнейшее спасибо за Ваши супер-курсы! Очень просто и понятно!

[@sashatkstandoff]

Оччень класный курс по css наконецто разобрался в css всем советую🎉🎉🎉

[@ИльяКарпин-д9с]

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

[@мансуразизов-ю6ч]

Огромное спасибо! Это был большой труд.

[@olehy5000]

Как всегда на высоте! Отличный контент!

[@МахмудКосимов-з9и]

Владилен тебе огромное мой благодарность. Ты объясняешь классно. Еще одновременно проктикуешь нас сразу. Удачи тебе и твоим близким.

[@svit25]

Владилен, я понимаю что это уже за рамками темы html и css, но было бы интересно увидеть как ты завершишь блок обратной связи. За объяснения спасибо, учу второй месяц и за 2 твоих урока понял намного больше чем отовсюду)

[@vp8639]

а в реальной вёрстке всё это вручную нужно кодить? Или используют Dreamweawer?

[@grindrust6127]

я уже начал понимать что такое html и css, я всегда думал это скучно и сидел в пк тупо играл, но сейчас понял что это интересно.

[@topfilms9051]

Ви дуже добре пояснюєш,блін супер.Ви дуже хороша людина 🥰

[@adeptusCustodius]

Спасибки, Владилен! Классный контент, делай еще!!!

[@АртёмМорозов-ц3р]

Спасибо за такие подробности в компактном виде!

[@serdar7703]

Владилен, видео супер !!!!!!!!! Огромное спасибо за твою работу !!!!!!!!

[@yesno9073]

ого, про position:fixed - круто! ролик классный спасибо

[@albertrockalfredo8250]

Владилен! Удачи тебе и спасибо за доступное объяснение!

[@redcrown5789]

Как всегда - лучший и по контенту и по стилю изложения !=))

[@ИванГерасимов-ч3к]

большое спасибо !! все доходчиво. буду осваивать.....

[@ImAima21755]

Cпасибо Владилен за этот труд)Ты очень хорошо объясняешь!Лучший курс по СSS для меня)

[@bugsssssss]

Большой респект! Побольше бы таких людей)

[@encha_forest]

Большое спасибо за материал, он меня спас х) Учусь в ИТ школе, проходили бегло html и css. Если по html - проблем не было, было все понятно. То в css - преподаватель говорил запутанно и сам не разбирался в этой теме, и с любым вопросом, когда к нему подходили - отправлял нас в гугл. С помощью этого видео, наконец-то смогла сделать качественную страницу о своем хобби и исправить то, где были непонятки (да, даже гугл мне не помог, и препод тоже не смог понять где у меня ошибки... весело было...) Преподаватель нам рассказал только за div максимально кратко, что можно менять цвет и дизайн сайта - и все :) Дальше отправил делать что-то - не пойми что

[@adeliin]

Спасибо тебе!!!! Это лучший тьютор на Ютуб!!!!!!!!!

[@David-uy3ux]

Спасибо вам Владилен. Как всегда видео топ. Теперь буду и css учить

[@zabolotnov]

Спасибо. Все по делу, без лишней воды и доступно!

[@cossackcortes]

Я хочу знать CSS и HTML для работы с онлайн-баннерами, фирмы это требуют. Есть ли смысл пройти платный курс Фронтенд (CSS+HTML+Java) или есть путь полегче? Что именно нужно освоить для работы с онлайн-баннерами?

[@lollollol4029]

Невероятная работа, спасибо большое!

[@КсенияЩербакова-и8г]

Спасибо за понятные объяснения! Очень помогло в школьном проекте!

[@crashcrash8009]

Супер! Спасибо большое! Доступно и понятно.

[@fly9345]

Лучший курс, вся информация подана максимально понятно и структурировано, спасибо! Подскажи, где можно попрактиковаться для себя, может какие-то хорошие сайты с материалами и задачами. буду очень благодарна:)

[@ScamMina]

Я пересмотрел 100_ни инфоцыган ютуба, сами знаете кто это, и нихрена не понял за 3 месяца. Посмотрел одно это видео и ска Поня все.🎉 дядь ты объясняешь четко, спасибо что ты есть 😊

[@aindzenneko215]

Огромное спасибо за видео. Сразу понимаешь основы и логику CSS.

[@yaprostoytip7711]

Огромное вам спасибо! Не у всех есть возможность платно обучиться ! По больше бы таких людей добрых людей и мир бы был по проще ! а то в наше время все продажные ... .

[@LUCKY-ze7lp]

Лучший курс для начинающих! Спасибо большое

[@CathodeUT]

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

[@БедныйЙорик-ъ5м]

Уже месяц долблю css, обязательно посмотрю)

[@VladilenMinin]

Приятного просмотра)

[@БедныйЙорик-ъ5м]

@@VladilenMinin спасибо!

[@alexandera7398]

Владилен, спасибо большое за видео! Все очень доступно :)

[@grenzhochspannungshindernis]

Спасибо за все твои видео, очень интересно

[@Van_Tour_DAG]

Просто нет слов объясняет хорошо просто в шоке огромное спасибо

[@петрмихайлов-в8г]

Привет, на 32:40, не понял как ты сместил выделенный текст влево, потратил на это 20 минут в поисках в гугле, так и не нашел, подскажи как ты это делаешь, пожалуйста

[@lika2591]

Крутой курс! Отличная подача и все понятно. Спасибо 👏

[@АзизМухаммедзянов-е3ф]

очень хороший канал этот канал мне помог с css и html

[@vladimirmaximoff8005]

Спасибо, это помогло в понимание и изучение CSS😎🤟😜

[@WoodGwH]

Спасибо! Получил кучу мотивации заниматься программированием смотря именно Ваши ролики. Буду продолжать изучать информацию дальше, вместе с Вами. А мое дело простое - лайк, подписка. :)

[@whitecatsteam6299]

Благодарю за такие ценные знания!

[@АнтонГришин-з9п]

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