Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. HTML CSS
Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. В этом видео я покажу подробную HTML CSS верстку простого макета FIGMA с кучей полезных решений и лайвхаков!
Часть №1: • Адаптивная верстка сай...
Часть №2: • Адаптивная верстка сай...
❓❓ Хотите чтобы стрим остался в записи?
👉Подписываемся на канал "СЛУШАЙ!" Истории из жизни простых людей: / listenstories
И ЖМЁМ ЛАЙК! :)
Полезные ссылки:
👉 Макет: / maket-dlia-figma-55661134
💪 Набор на курс по верстке: edu.fls.guru
👉Бесплатный курс по верстке: • БЕСПЛАТНЫЙ курс по вер...
👉 VS Code: • VS Code настройка уста...
👉 Как правильно учиться: • Как правильно учиться ...
👉 План развития фронтенд разработчика (+КАРТА): • ПЛАН РАЗВИТИЯ ФРОНТЕНД...
🔴 Карта канала: miro.com/app/board/o9J_lZB3YKI=/
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
👉 @IT-ПРИСТРАСТІ, українськомовний канал присвячений інтерв'ю з цікавими IT-спеціалістами - / @itpassions
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
Не сохранить стрим нужно приравнивать к преступлению или наказывать приседаниями). Спасибо за работу.
Ахах
Если все такие умные, а верстка для начинающих, почему тогда я не понимаю, может мне нужны курсы ДО?
@@user-en8nc5zk1w посмотри базовый курс по верстке на этому канале, станет все понятнее, потом вернись к этому видео
@@user-en8nc5zk1w потому что это урок по практике. видимо теорию вы пропустили. Начните с плейлиста базового курса html и CSS
@@user-en8nc5zk1w это урок по верстке для людей, которые обладают минимальным набором знаний в области HTML и CSS, а не для человека, который вообще ничего не знает
С какой же радостью я снова учусь в свои 56! Спасибо Евгений!
я думал я один тут такой )))
Мне 50. С ув. Юрий
Мне 55, начинаю менять профессию. Спасибо за курсы, Женя!
52
Привет от учащегося ровесника: 1966. Лишь бы не стать "вечным студентом" в плохом смысле этого словосочетания
"Не нужно грузить новичков всякой фигней, вместо того, чтобы человек учился верстать." Очень точное выражение, отображающее, к сожалению, бОльшую часть платных онлайн-курсов. Из этого канала я поняла гораздо больше, чем за 4 месяца обучения на платных курсах. Спасибо огромное за такую доступную и понятную подачу материала, это бесценно!
Пожалуйста!
@@FreelancerLifeStyle я не лівша,але страждаю за тебе 😃
Вот лопата, покажите как копать, не нужно рассказывать как добывают железо 👍
Благодарю за доступное образование, ты делаешь действительно один из лучших контентов по этой тематике.
<a href="#" class="seekto" data-time="2065">34:25</a> wrapper Структура шапки <a href="#" class="seekto" data-time="3167">52:47</a> Хедер выравнивание <a href="#" class="seekto" data-time="3357">55:57</a> Прилипание <a href="#" class="seekto" data-time="65">1:05</a>:08 Ломание пунктов <a href="#" class="seekto" data-time="66">1:06</a>:07 Адаптив Шапки <a href="#" class="seekto" data-time="67">1:07</a>:58
Анализ первого блока 1:13:17 Прибиваем footer к низу 1:16:32 Структура HTML первого блока 1:18:57 Вёрстка в CSS класса ibg 1:26:15 Вёрстка в CSS первого блока 1:27:00 Адаптив первого блока 1:40:35 Структура HTML второго блока 1:48:30 Вёрстка в CSS второго блока 1:54:58 Адаптив второго блока 2:11:30 Анализ третьего блока 2:21:44 Структура HTML третьего блока 2:22:39 Вёрстка в CSS третьего блока 2:28:28 Адаптив третьего блока 2:44:29 Анализ четвёртого блока 2:49:05 Структура HTML четвёртого блока 2:50:46 Вёрстка в CSS четвёртого блока 2:55:17 Адаптив четвёртого блока 3:06:25
у меня выравнивание не так работает хз почему так, по сути сделал . в . как на стриме но не вышло, оно все в левом углу
Спасибо за верстку "для самых маленьких". Все было полезно и интересно. Жду вторую часть. Такие стримы очень нужны.
Жека, большое спасибо за этот стрим. Это именно то, что нужно тем, кто только изучил ваши уроки по html и css, и кому еще пока рано делать сложные штуки, и тем более рано браться за js.
Пожалуйста!
@@FreelancerLifeStyle Спасибо!
Евгений, материал просто пушка, спасибо за невероятно полезные уроки и мастер-классы, долгих лет жизни
Отдельная благодарность за простой макет и подробные объяснения. Пробовал смотреть сложную верстку, но все эти препроцессоры, миксины, сборщики + миллион файлов в папке реально трудно усвоить на лету. Хочется как-то поэтапно развиваться и переходить к усложнению когда уже к этому готов. Спасибо Женя. Побольше простой вёрстки, но со своими фишечками. Лайк с 3-х аккаунтов))
Пожалуйста!
@@FreelancerLifeStyle Спасибо!
Отличный стрим для новичка!!!!!! Обучаюсь у вас по бесплатному курсу и этот стрим именно то , что было нужно в качестве отличной практики на самом начальном этапе 👍👍👍👍
Посмотрел 30 минут видео, не смог удержаться, чтобы не написать слова благодарности. Женя спасибо. Очень классный формат. Ты затрагиваешь очень много вопросов, которые возникают у новичков, но ответов на них почти нигде нет. Для профи это не вопросы, а смех один. Но на то мы и новички чтобы разбираться и учиться. Низкий поклон Тебе.
Один из самых полезных каналов для обучения вёрстке! 80% знаний в этой сфере у меня почерпнуто именно отсюда. Спасибо!
Пожалуйста!
Спасибо за колоссальный труд и за выделенное время для всех нас. Этот стрим прямо вообще ТОП для начинающих ! Огромное человеческое СПАСИБО !
Женя, ты лучший преподаватель по верстке на просторах интернета. Твой канал - это такая крутизна. Я всю жизнь занимался бэк-ендом, фронт был для меня что-то чуждое. Благодаря твоему каналу я открыл для себя прелесть фронта, теперь заниматься версткой - это что то вроде хобби, интересно и увлекательно. Очень много подчерпнул из уроков, но такие повторяющие стримы очень нужны, чтобы еще раз пройти то, что ты освоил. Спасибо огромное.
Пожалуйста!
Спасибо за стрим! Очень полезно! Бодрость всю вёрстку как на одной ноте! Спасибо, что делитесь🤗
Спасибо огромное за вашу работу , все как будто в голове становится на свои места. С нетерпением ждем еще подобные стримы
Отличное видео , очень доступно . Проделав все с Женей от начала и до конца многие вещи встают на места. Без сомнений каждый обучающийся хотел бы больше таких уроков
Евгений, спасибо вам за ваш опыт предоставленный в таком удобном формате, спасибо большое за то что вы делаете, по больше вам терпения вдохновения продолжать заниматься подобными вещами. За пол года самообучения вы лучший на кого я наткнулся на просторах ютуба из всех кто делает подобный контент. Еще раз огромное вам спасибо.
А почему сначала учились в саблайме, а сейчас делаем в вскод? Ответьте пожалуйста
Спасибо Жень, что помогаешь разобраться начинающим как я, очень все подробно, я как раз перехожу на Gulp и SASS. Как по мне, этот урок как раз то, что надо, чтобы перейти от чистого CSS на препроцессор. Здоровья тебе и такого же запала на всю жизнь!!!
Очень рада, что нашла ваш стрим по верстке. Доступно, как раз для новичка как я. Спасибо большое! Действительно очень помогли. ✨
Спасибо большое за стрим! Буду благодарна если как можно чаще будут такие стримы для новичков🙏
Евгений, спасибо большое тебе за такие стримы и понятное объяснение материала , что к чему 🤝🔥
Спасибо за науку ! Очень нравится подача, приятно слушать, внимательность к деталям, понимание необходимости повторения казалось бы очевидных вещей, для людей которые уже изучали теорию, но недавно приступили к практике, объяснения множества тонкостей и нюансов Отдельная благодарность за выложенный код урока
Сергей, а где ссылка на код урока? завершенный
Женя! От души, каждый твой стрим пересматриваю по несколько раз, верстаю прям за тобой! Отлично объясняешь, всё чётко понятно. Спасибо тебе огромное! Продолжай!)
Очень классный стрим, смотрю уже в записи. То как ты делаешь верстку, аж глаза загораются самому бежать и делать. Спасибо большое, продолжай пожалуйста стримы такого типа
Женечка, как же классно все выстроено в систему. Как раз этого видения не хватало для полного понимания. Бесконечная благодарность💞💞💞💞
Огромная благодарность за такие стримы, Вы делясь своим опытом сокращаете срок обучения. P. S Мои нервные клетки аплодируют стоя)
ОГРОМНЫЙ РЕСПЕКТ!!!!! Смотрю видео, пишу конспекты, верстаю, донастраиваю vs code +плагины которых нет, а здесь нужны были, в общем день пролетел незаметно, очень круто!
Огромное спасибо! Отличный стрим, все четко и по делу. Могу только похлопать 👏👏👏 Так легко сложную информацию мало кто реподносит . Топ!
Спасибо за интересный и полезный стрим, с нетерпением ждем продолжения
<a href="#" class="seekto" data-time="125">2:05</a>:56 Женя, ты как преподаватель силён! Учиться у тебя просто здорово!!! Твой подход в обучении вдохновляет и вызывает желание продолжать учиться. Поэтому продолжай гнуть свою линию!
Да, я сам рад, что нашел этот канал. Это несколько шире, чем просто вёрстка. Здесь также присутствует философская лирика.
Хороший стрим для начинающих верстальщиков Топчик! Когда знаешь частями как что работает но компоновать воедино еще нужно учиться и учиться)
Жека! Спасибо за все что ты делаешь, очень приятно учиться у такого человека. Всего тебе самого-самого лучшего!
Спасибо за стрим, просто куча полезной инфы, жду нового выпуска.
Жека, спасибо за стрим, как всегда интересно. Подача инфы у тебя замечательная, почти 100% контента остается в голове и жаждет применения). Думаю, твой опыт еще не раз направит ребят в нужную сторону)
Объяснение космос. Доходчиво настолько, насколько это вообще возможно. По порядку и без воды. С огромной благодарностью!
Очень понравилось, большое спасибо за то, что ты делаешь! Такие штуки очень нужны, особенно для новичков.
Жека, я просто получаю колоссальное моральное удовольствие от твоего мастерства. Я перфекционист, и мне все хочется с самого начала делать хорошо. А у тебя верстка всегда идеальная. Учусь с огромным удовольствием, спасибо!
Привет от коллеги-перфекциониста😂
Уникальный контент! Потрясающе простая и веселая подача материала! Огромная благодарность Вам, Евгений за бесплатное обучение!
Огромное спасибо Вам, Евгений! Законспектил 1-ю часть на листочках, выделил текстовыделителем. Надеюсь, буду по шаблону применять эти фичи при верстке будущих и ПЕРЕверстке текущего макетов. Надеюсь также законспектить с той же целью и 2-ю часть. Успехов!
Женя большое спасибо за очень полезный материал! Я повторил весь урок и сейчас буду браться за следующую часть! Очень, очень годная информация. Особенно про выравнивание карточек и подробное объяснение о схеме организации самого проекта и кода!
Я недооценивала важность таких видео, думала, что ничего нового не подчерпну, но блин, как же я ошибалась. Верстала однажды макет, где header также надвисал над следующим блоком с фоновым изображением. Сколько же нервов я убила на то, чтобы это адекватно сверстать, а всё оказалось в разы проще. Спасибо 👍
Как раз тот материал, который я ждал, лайкосик
Приветствую! Я посмотрел это видео дважды, чтобы на его основе сделать свой первый сайт, но понял, что упускаю кучу важных деталей. Поэтому сейчас я полностью повторяю верстку за тобой ( и все равно умудряюсь ошибаться по невнимательности). Я поражаюсь тому, как ты классно все проговариваешь! Очень часто моя рука тянется поставить лайк твоему видео, а лайк уже поставлен. Жаль, что нельзя поставить их еще. Большое тебе спасибо за контент!
Это именно тот стрим в котором я все понимал. Было интересно. Спасибо
Отличный стрим, ждем продолжения! Полезно и поучительно.
Огромное спасибо за такого рода МК! Зачастую очень сложно, даже зная все теги и их css свойства, просто начать верстать. Мало кто дает основы подхода к верстке и еще меньше тех, кто учит делать сайт удобным, максимально адаптивным и "с запасом прочности" на случай изменения объема контента в блоке и т.п. Респектище тебе!
Отличние у тебя видео и стримы, Жека! Спасибо тебе большое, как же хорошо можно с тобой развивать и учиться, очень много полезного узнал с твоих стримов\видео, твои рекомендации и уроки это просто класс!!!)) Спасибо тебе за всё, как начну работать в этой сфере - точно тебя на патроне отблагодарю)
Огромное спасибо за видео!! Это прекрасно! А еще прекрасен новый формат шортов)) Я от них вообще в восторге!
Хочу ещё добавить, что по такому видео я узнала массу нюансов. Когда учишь тот или иной навык, дают много несомненно полезной теории, вроде всё понятно и даже понятно, как его применять в приведённых примерах. Но, когда тебе показывают применение этого навыка непосредственно в вёрстке макета, это уже совершенно другой уровень образования. Когда тебе показывают, как при помощи одного штриха можно просто решить неприятную проблему - это совершенно другой уровень. Поэтому многие считают твой канал очень информативным и полезным для себя. Для получения практического опыта и закрепления теории, твой канал один из самых лучших. Отдельный плюс за подачу материала и подробное объяснение каждой манипуляции. Выяснить почему сделать лучше так, а не по-другому - это тоже важный элемент в понимании и образовании. Ну и просто красивый, приятный мужчина, которого интересно слушать.
Как приятно слушать профессиональную речь. Уши мои радуются.
Самый толковый и подробный урок для новичков! Огромное спасибо! Четко, понятно и с юмором! Буду смотреть все!
Отличный стрим. Думаю что такие простые сайты очень полезны для новичков. Спасибо Женя, за то что делишься с нами полезным опытом.
Женя, спасибо тебе огромное! Пожалуйста, продолжай делать подобные видео и не забрасывай канал!
Очень полезный стрим! Как всегда, крутое объяснение и заряд мотивации
Спасибо за доступный и качественный разбор материала. Все изложено максимально доходчиво и как всегда в позитивной манере.
по больше бы таких стримов с версткой не сложных макетов и среднего уровня , подымайте в топ ребзя!)
Жека,Спасибо огромное!Это очень ценный материал!Надеюсь, будут еще подобные стримы!Удачи тебе!!!
Спасибо! Это большая работа, еще и в реальном времени! Отличная возможность практиковать верстку для начинающих. Если получится не спешить сильно и не бояться повторять простые вещи, хотя бы в данной рубрике - будет еще круче!
Женя, большое спасибо за мастер-класс по верстке от профи!
Спасибо, очень не хватало подобных видео новичку!
Спасибо за стрим, после ряда бесплатных курсов этот стрим очень сильно помог упорядочить систему знаний в голове, да и указал на пробелы в механике работы отдельных атрибутов (местами с отступами помучился немного из-за ошибок в структуре html)
подскажите пожалуйста бесплатные курсы где проходили?
Спасибо Жека за мощный стрим, было очень полезно))
спасибо за полезный стрим!! Как всегда браво, Женя! Доступно и теперь я знаю и умею верстать легко карточки
Классный стрим. Интересно было увидеть вёрстку блока с видео и тут😭. Буду ждать продолжения. Подобные стримы интересно смотреть, узнавать некоторые маленькие но полезные фишки. Жирный "+" за подобные стримы.
Огромное спасибо!!! Я ваша преданная поклонница-когда нашла ваш канал просто обалдела!!!
Спасибо большое за стрим! Очень много полезных моментов для себя вынесла))
Жэка, огромная благодарность тебе! Долго собирался с мыслями и знаниями для того, чтобы начать верстать. С этим стримом в первый раз верстал макет, и достаточно неплохо получается, я считаю. Какие-то блоки макета делаю вперед тебя, потом сравниваю, исправляю, иногда даже и НЕ исправляю. Смотрю на то, что получается, и доволен собой, появляется какая-та уверенность чтоли.. Круто! спасибо 100500 раз!
И стримы конечно же продолжайте! Всё супер полезно для новичков и не только!
Спасибо! Благодаря тебе я смог начать писать адаптив для своих сайтов и в целом я начал разбираться в этом. Ты действительно мне помог.
Контент, как всегда супер! И подача, и наполнение на высоте. Спасибо за труд!
Спасибо большое за предоставленный вами стрим, я остался им доволен ,узнав новые фичи!
Ждем еще!Спасибо.
Спасибо большое, крутой стрим! Посмотрела все бесплатные уроки по HTML и CSS, и это мотивирует когда слушаешь мастер-класс и понимаешь то очем говоришь и как делаешь)) + к уверенности)
Я рад!
@@FreelancerLifeStyle Евгений , сколько стоят ваши частные уроки или за сколько вы сможете сделать из меня фронтендера???)
@@user-iv6fk1ot2z и так делает из тебя фронтендера
@@user-iv6fk1ot2z приветствую , ссылка на макет не работает😔
Спасибо! И поздравляю с 200к!
Большое спасибо за такой полезный урок! Ведь такой контент мало где можно найти, особенно для новичков.👍
Просто пушка!!! Узнал новое. Осталось разобраться с тем, что не понял. Ты супер крутой
Ооооу маааай, огромное спасибо!!!! У вас действительно очень полезный, простой, а главное, бесплатный контент!!!! Обожаю ваши видео😍😍😍😍
Женя, спасибо тебе большое за контент!!!! Прошёл платный курс на одном известном учебном портале, и скажу, что ты даёшь очень много!! Структурированные знания!! Я Скачиваю макет и верстаю вместе с тобой! Дякую велике тобi !!
Спасибо за стрим! Было не просто, но вроде получилось повторить и даже что-то записать! Женя, спасибо большое! Очень полезно!
Спасибо, как всегда класс!!!
Евгений, спасибо за интересные и познавательные видео. Хотел вас попросить записать видео по верстке полноценного сайта, то есть где используется HTML, CSS, JS, PHP, было бы очень мощно!
Низкий поклон за стрим 🛐｡◕‿◕｡
спасибо Жека, это очень нужное видео, переход от самого простого к самому сложному (ступенька).
Женя, спасибо тебе большое!!!!поняла все то, что ты показал, а раньше я даже бы и близко не смогла внять этому. обожаю смотреть тебя, ты очень и очень классный, оставайся всегда таким!!!!
Как всегда очень понятно и полезно! Спасибо за контент!))
Спасибо за проделанную работу. Три часа как на одном дыхании пролетели! Представляю, какой колоссальный труд тебе предстояло выполнить! Продолжу дальше учиться по твоим стримам и другим видео. Твой материал отлично дополняет изучение по учебникам. Спасибо, будь здоров и счастлив!
привет, я, как и ты, недавно пробовал верстать за ним у тебя не возникло проблемы с картинкой в шапке, где "мужчина пальцем в компьютер показывает"? у меня из-за класса _ibg{position: relative} картинка 855x0, если убрать его то все работает нормально, по крайней мере на том моменте, где я забуксовал - 1 - 26 -00 примерно Прости, что докопался, но вдруг ты знаешь причину:)
@@egoregor3024 Привет!) Я этот момент с техническим классом _ibg разбирал с более опытным программистом. Тут в принципе все понятно становится, если разобраться. Картинка фонового изображения вложена в этот технический класс _ibg для того, чтобы она лежала в блоке с абсолютным позиционированием и примыкала к нему с координатами top: 0:; left: 0;. А блок с элементом изображения в свою очередь будет идти в общем потоке. И для него уже будут создаваться правила для позиционирования относительно всего контента. Я тебе скину правила к этому блоку. Попробуй вставить их и проверь, все ли работает. Может где-то ошибся в CSS или вложенность HTML проверь. ._ibg{ position: relative; } ._ibg img{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; }
@@user-mq7nd5pq9q дружище, спасибо тебе начал проверять вложенность и заметил, что класс назвал "main-block-image", а в css "main-block__image "..... классика на самом деле, одна опечатка стоила такого количества нервов и тильта, что простейшее делать не могу еще раз спасибо:)
Тоже тольку учусь и прохожу платный курс. Спасибо огромное за этот выпуск, в котором: тонкости, внимание к деталям, настрой, психология, м многое другое! Контен очень познавательный, полезный и обучающий. Спасибо еще раз Вам Евгений. Всех благ!
привет.Помог платний курс для продвижении в ІТ? Чего достигли за єто время
Супер стрим! Спасибо тебе Жека!!!!!
Огромное Спасибо за Вашу Работу!
Очень, очень-очень полезное видео, как закрепление полученных знаний на практике! Спасибо огромное!
пишу комментарий для продвижения твоего канала!!! Давно смотрю :) многому научилась, спасибо)
Да, Жека, было очень интересно и полезно, спасибо за труд и запись!!
Жень, спасибо болшое за работу!!! И канал и материалы действительно высшего качества! Еще раз спасибо!
Спасибо. Только с вами и учусь с нуля. Пока все последовательно. Очень нравится
Спасибо тебе за то, что ты делаешь и показываешь нам)
Мне очень нравится смотреть ваши видео, продолжайте пожалуйста!
Просто лучший бесплатный и супер полезный, параллельно качественный контент ) Респект автору
Спасибо! Очень познавательно.
Очень полезный контент для новичков. Просто, интересно и понятно! Спасибо вам большое