Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. HTML CSS
Вставка
- Опубліковано 6 вер 2021
- Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. В этом видео я покажу подробную 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
🤟 Живи, а работай в свободное время! ©
![[2023] Основы верстки сайта с нуля! HTML5 и CSS3 - верстка макета](/img/n.gif)
Не сохранить стрим нужно приравнивать к преступлению или наказывать приседаниями). Спасибо за работу.
Ахах
Если все такие умные, а верстка для начинающих, почему тогда я не понимаю, может мне нужны курсы ДО?
@@user-en8nc5zk1w посмотри базовый курс по верстке на этому канале, станет все понятнее, потом вернись к этому видео
@@user-en8nc5zk1w потому что это урок по практике. видимо теорию вы пропустили. Начните с плейлиста базового курса html и CSS
@@user-en8nc5zk1w это урок по верстке для людей, которые обладают минимальным набором знаний в области HTML и CSS, а не для человека, который вообще ничего не знает
С какой же радостью я снова учусь в свои 56! Спасибо Евгений!
я думал я один тут такой )))
Мне 50. С ув. Юрий
Мне 55, начинаю менять профессию. Спасибо за курсы, Женя!
52
Привет от учащегося ровесника: 1966. Лишь бы не стать "вечным студентом" в плохом смысле этого словосочетания
Благодарю за доступное образование, ты делаешь действительно один из лучших контентов по этой тематике.
Спасибо за верстку "для самых маленьких". Все было полезно и интересно. Жду вторую часть. Такие стримы очень нужны.
"Не нужно грузить новичков всякой фигней, вместо того, чтобы человек учился верстать." Очень точное выражение, отображающее, к сожалению, бОльшую часть платных онлайн-курсов. Из этого канала я поняла гораздо больше, чем за 4 месяца обучения на платных курсах. Спасибо огромное за такую доступную и понятную подачу материала, это бесценно!
Пожалуйста!
@@FreelancerLifeStyle я не лівша,але страждаю за тебе 😃
Вот лопата, покажите как копать, не нужно рассказывать как добывают железо 👍
34:25 wrapper
Структура шапки 52:47
Хедер выравнивание 55:57
Прилипание 1:05:08
Ломание пунктов 1:06:07
Адаптив Шапки 1:07: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
у меня выравнивание не так работает хз почему так, по сути сделал . в . как на стриме но не вышло, оно все в левом углу
Отличный стрим для новичка!!!!!! Обучаюсь у вас по бесплатному курсу и этот стрим именно то , что было нужно в качестве отличной практики на самом начальном этапе 👍👍👍👍
Евгений, материал просто пушка, спасибо за невероятно полезные уроки и мастер-классы, долгих лет жизни
Спасибо за колоссальный труд и за выделенное время для всех нас. Этот стрим прямо вообще ТОП для начинающих ! Огромное человеческое СПАСИБО !
Очень рада, что нашла ваш стрим по верстке. Доступно, как раз для новичка как я. Спасибо большое! Действительно очень помогли. ✨
Спасибо за стрим! Очень полезно! Бодрость всю вёрстку как на одной ноте! Спасибо, что делитесь🤗
Посмотрел 30 минут видео, не смог удержаться, чтобы не написать слова благодарности. Женя спасибо. Очень классный формат. Ты затрагиваешь очень много вопросов, которые возникают у новичков, но ответов на них почти нигде нет. Для профи это не вопросы, а смех один. Но на то мы и новички чтобы разбираться и учиться. Низкий поклон Тебе.
Спасибо огромное за вашу работу , все как будто в голове становится на свои места. С нетерпением ждем еще подобные стримы
Женя! От души, каждый твой стрим пересматриваю по несколько раз, верстаю прям за тобой! Отлично объясняешь, всё чётко понятно. Спасибо тебе огромное! Продолжай!)
Отличное видео , очень доступно . Проделав все с Женей от начала и до конца многие вещи встают на места. Без сомнений каждый обучающийся хотел бы больше таких уроков
Спасибо Жень, что помогаешь разобраться начинающим как я, очень все подробно, я как раз перехожу на Gulp и SASS. Как по мне, этот урок как раз то, что надо, чтобы перейти от чистого CSS на препроцессор.
Здоровья тебе и такого же запала на всю жизнь!!!
Жека, большое спасибо за этот стрим. Это именно то, что нужно тем, кто только изучил ваши уроки по html и css, и кому еще пока рано делать сложные штуки, и тем более рано браться за js.
Пожалуйста!
@@FreelancerLifeStyle Спасибо!
Спасибо большое за стрим! Буду благодарна если как можно чаще будут такие стримы для новичков🙏
Очень классный стрим, смотрю уже в записи. То как ты делаешь верстку, аж глаза загораются самому бежать и делать. Спасибо большое, продолжай пожалуйста стримы такого типа
Женечка, как же классно все выстроено в систему. Как раз этого видения не хватало для полного понимания. Бесконечная благодарность💞💞💞💞
Евгений, спасибо большое тебе за такие стримы и понятное объяснение материала , что к чему 🤝🔥
ОГРОМНЫЙ РЕСПЕКТ!!!!! Смотрю видео, пишу конспекты, верстаю, донастраиваю vs code +плагины которых нет, а здесь нужны были, в общем день пролетел незаметно, очень круто!
Огромное спасибо! Отличный стрим, все четко и по делу. Могу только похлопать 👏👏👏
Так легко сложную информацию мало кто реподносит . Топ!
Огромная благодарность за такие стримы, Вы делясь своим опытом сокращаете срок обучения. P. S Мои нервные клетки аплодируют стоя)
Уникальный контент! Потрясающе простая и веселая подача материала! Огромная благодарность Вам, Евгений за бесплатное обучение!
Огромное спасибо Вам, Евгений! Законспектил 1-ю часть на листочках, выделил текстовыделителем. Надеюсь, буду по шаблону применять эти фичи при верстке будущих и ПЕРЕверстке текущего макетов. Надеюсь также законспектить с той же целью и 2-ю часть. Успехов!
Спасибо за интересный и полезный стрим, с нетерпением ждем продолжения
Жека! Спасибо за все что ты делаешь, очень приятно учиться у такого человека. Всего тебе самого-самого лучшего!
Евгений, спасибо вам за ваш опыт предоставленный в таком удобном формате, спасибо большое за то что вы делаете, по больше вам терпения вдохновения продолжать заниматься подобными вещами. За пол года самообучения вы лучший на кого я наткнулся на просторах ютуба из всех кто делает подобный контент. Еще раз огромное вам спасибо.
А почему сначала учились в саблайме, а сейчас делаем в вскод? Ответьте пожалуйста
Приветствую! Я посмотрел это видео дважды, чтобы на его основе сделать свой первый сайт, но понял, что упускаю кучу важных деталей. Поэтому сейчас я полностью повторяю верстку за тобой ( и все равно умудряюсь ошибаться по невнимательности).
Я поражаюсь тому, как ты классно все проговариваешь! Очень часто моя рука тянется поставить лайк твоему видео, а лайк уже поставлен. Жаль, что нельзя поставить их еще.
Большое тебе спасибо за контент!
Очень понравилось, большое спасибо за то, что ты делаешь! Такие штуки очень нужны, особенно для новичков.
Объяснение космос. Доходчиво настолько, насколько это вообще возможно. По порядку и без воды. С огромной благодарностью!
Женя большое спасибо за очень полезный материал! Я повторил весь урок и сейчас буду браться за следующую часть! Очень, очень годная информация. Особенно про выравнивание карточек и подробное объяснение о схеме организации самого проекта и кода!
Отдельная благодарность за простой макет и подробные объяснения. Пробовал смотреть сложную верстку, но все эти препроцессоры, миксины, сборщики + миллион файлов в папке реально трудно усвоить на лету. Хочется как-то поэтапно развиваться и переходить к усложнению когда уже к этому готов. Спасибо Женя. Побольше простой вёрстки, но со своими фишечками.
Лайк с 3-х аккаунтов))
Пожалуйста!
@@FreelancerLifeStyle Спасибо!
Хороший стрим для начинающих верстальщиков
Топчик!
Когда знаешь частями как что работает
но компоновать воедино еще нужно учиться и учиться)
Спасибо за стрим, просто куча полезной инфы, жду нового выпуска.
2:05:56 Женя, ты как преподаватель силён! Учиться у тебя просто здорово!!! Твой подход в обучении вдохновляет и вызывает желание продолжать учиться. Поэтому продолжай гнуть свою линию!
Да, я сам рад, что нашел этот канал.
Это несколько шире, чем просто вёрстка.
Здесь также присутствует философская лирика.
Спасибо за науку ! Очень нравится подача, приятно слушать, внимательность к деталям, понимание необходимости повторения казалось бы очевидных вещей, для людей которые уже изучали теорию, но недавно приступили к практике, объяснения множества тонкостей и нюансов Отдельная благодарность за выложенный код урока
Сергей, а где ссылка на код урока? завершенный
Жека, спасибо за стрим, как всегда интересно. Подача инфы у тебя замечательная, почти 100% контента остается в голове и жаждет применения). Думаю, твой опыт еще не раз направит ребят в нужную сторону)
Отличние у тебя видео и стримы, Жека! Спасибо тебе большое, как же хорошо можно с тобой развивать и учиться, очень много полезного узнал с твоих стримов\видео, твои рекомендации и уроки это просто класс!!!)) Спасибо тебе за всё, как начну работать в этой сфере - точно тебя на патроне отблагодарю)
Огромное спасибо за такого рода МК! Зачастую очень сложно, даже зная все теги и их css свойства, просто начать верстать. Мало кто дает основы подхода к верстке и еще меньше тех, кто учит делать сайт удобным, максимально адаптивным и "с запасом прочности" на случай изменения объема контента в блоке и т.п. Респектище тебе!
Спасибо! Это большая работа, еще и в реальном времени! Отличная возможность практиковать верстку для начинающих. Если получится не спешить сильно и не бояться повторять простые вещи, хотя бы в данной рубрике - будет еще круче!
Женя, ты лучший преподаватель по верстке на просторах интернета. Твой канал - это такая крутизна. Я всю жизнь занимался бэк-ендом, фронт был для меня что-то чуждое. Благодаря твоему каналу я открыл для себя прелесть фронта, теперь заниматься версткой - это что то вроде хобби, интересно и увлекательно. Очень много подчерпнул из уроков, но такие повторяющие стримы очень нужны, чтобы еще раз пройти то, что ты освоил. Спасибо огромное.
Пожалуйста!
Хочу ещё добавить, что по такому видео я узнала массу нюансов. Когда учишь тот или иной навык, дают много несомненно полезной теории, вроде всё понятно и даже понятно, как его применять в приведённых примерах.
Но, когда тебе показывают применение этого навыка непосредственно в вёрстке макета, это уже совершенно другой уровень образования. Когда тебе показывают, как при помощи одного штриха можно просто решить неприятную проблему - это совершенно другой уровень.
Поэтому многие считают твой канал очень информативным и полезным для себя. Для получения практического опыта и закрепления теории, твой канал один из самых лучших. Отдельный плюс за подачу материала и подробное объяснение каждой манипуляции. Выяснить почему сделать лучше так, а не по-другому - это тоже важный элемент в понимании и образовании.
Ну и просто красивый, приятный мужчина, которого интересно слушать.
Отличный стрим, ждем продолжения! Полезно и поучительно.
Самый толковый и подробный урок для новичков! Огромное спасибо! Четко, понятно и с юмором! Буду смотреть все!
Огромное спасибо!!! Я ваша преданная поклонница-когда нашла ваш канал просто обалдела!!!
Один из самых полезных каналов для обучения вёрстке! 80% знаний в этой сфере у меня почерпнуто именно отсюда. Спасибо!
Пожалуйста!
Спасибо за доступный и качественный разбор материала. Все изложено максимально доходчиво и как всегда в позитивной манере.
Это именно тот стрим в котором я все понимал. Было интересно. Спасибо
спасибо за полезный стрим!! Как всегда браво, Женя! Доступно и теперь я знаю и умею верстать легко карточки
Отличный стрим. Думаю что такие простые сайты очень полезны для новичков. Спасибо Женя, за то что делишься с нами полезным опытом.
Ооооу маааай, огромное спасибо!!!! У вас действительно очень полезный, простой, а главное, бесплатный контент!!!! Обожаю ваши видео😍😍😍😍
Огромное спасибо за видео!! Это прекрасно! А еще прекрасен новый формат шортов)) Я от них вообще в восторге!
Жэка, огромная благодарность тебе! Долго собирался с мыслями и знаниями для того, чтобы начать верстать. С этим стримом в первый раз верстал макет, и достаточно неплохо получается, я считаю. Какие-то блоки макета делаю вперед тебя, потом сравниваю, исправляю, иногда даже и НЕ исправляю. Смотрю на то, что получается, и доволен собой, появляется какая-та уверенность чтоли.. Круто! спасибо 100500 раз!
Спасибо, очень не хватало подобных видео новичку!
Спасибо большое за предоставленный вами стрим, я остался им доволен ,узнав новые фичи!
Жека,Спасибо огромное!Это очень ценный материал!Надеюсь, будут еще подобные стримы!Удачи тебе!!!
Женя, спасибо тебе огромное! Пожалуйста, продолжай делать подобные видео и не забрасывай канал!
Женя, большое спасибо за мастер-класс по верстке от профи!
Классный стрим. Интересно было увидеть вёрстку блока с видео и тут😭. Буду ждать продолжения. Подобные стримы интересно смотреть, узнавать некоторые маленькие но полезные фишки. Жирный "+" за подобные стримы.
Женя, спасибо тебе большое за контент!!!! Прошёл платный курс на одном известном учебном портале, и скажу, что ты даёшь очень много!! Структурированные знания!! Я Скачиваю макет и верстаю вместе с тобой! Дякую велике тобi !!
Спасибо большое за стрим! Очень много полезных моментов для себя вынесла))
Евгений, спасибо за интересные и познавательные видео. Хотел вас попросить записать видео по верстке полноценного сайта, то есть где используется HTML, CSS, JS, PHP, было бы очень мощно!
Как приятно слушать профессиональную речь. Уши мои радуются.
Женя, спасибо тебе большое!!!!поняла все то, что ты показал, а раньше я даже бы и близко не смогла внять этому. обожаю смотреть тебя, ты очень и очень классный, оставайся всегда таким!!!!
Просто пушка!!! Узнал новое. Осталось разобраться с тем, что не понял. Ты супер крутой
Контент, как всегда супер! И подача, и наполнение на высоте. Спасибо за труд!
Очень полезный стрим! Как всегда, крутое объяснение и заряд мотивации
Большое спасибо за такой полезный урок! Ведь такой контент мало где можно найти, особенно для новичков.👍
Я недооценивала важность таких видео, думала, что ничего нового не подчерпну, но блин, как же я ошибалась. Верстала однажды макет, где header также надвисал над следующим блоком с фоновым изображением. Сколько же нервов я убила на то, чтобы это адекватно сверстать, а всё оказалось в разы проще. Спасибо 👍
Жека, я просто получаю колоссальное моральное удовольствие от твоего мастерства. Я перфекционист, и мне все хочется с самого начала делать хорошо. А у тебя верстка всегда идеальная. Учусь с огромным удовольствием, спасибо!
Привет от коллеги-перфекциониста😂
Спасибо! Благодаря тебе я смог начать писать адаптив для своих сайтов и в целом я начал разбираться в этом. Ты действительно мне помог.
Как раз тот материал, который я ждал, лайкосик
И стримы конечно же продолжайте! Всё супер полезно для новичков и не только!
пишу комментарий для продвижения твоего канала!!! Давно смотрю :) многому научилась, спасибо)
Спасибо Жека за мощный стрим, было очень полезно))
Спасибо за стрим, после ряда бесплатных курсов этот стрим очень сильно помог упорядочить систему знаний в голове, да и указал на пробелы в механике работы отдельных атрибутов (местами с отступами помучился немного из-за ошибок в структуре html)
подскажите пожалуйста бесплатные курсы где проходили?
Спасибо за стрим! Было не просто, но вроде получилось повторить и даже что-то записать! Женя, спасибо большое! Очень полезно!
Жень, спасибо болшое за работу!!!
И канал и материалы действительно высшего качества!
Еще раз спасибо!
Спасибо. Только с вами и учусь с нуля. Пока все последовательно. Очень нравится
Спасибо большое, крутой стрим! Посмотрела все бесплатные уроки по HTML и CSS, и это мотивирует когда слушаешь мастер-класс и понимаешь то очем говоришь и как делаешь)) + к уверенности)
Я рад!
@@FreelancerLifeStyle Евгений , сколько стоят ваши частные уроки или за сколько вы сможете сделать из меня фронтендера???)
@@user-iv6fk1ot2z и так делает из тебя фронтендера
@@user-iv6fk1ot2z приветствую , ссылка на макет не работает😔
Жека, огромное спасибо тебе! Твоя вёрстка - это реально творчество, причём позитивное :)
И всегда можно что-то новое для себя подчеркнуть.
🙏😊
Спасибо за проделанную работу. Три часа как на одном дыхании пролетели! Представляю, какой колоссальный труд тебе предстояло выполнить! Продолжу дальше учиться по твоим стримам и другим видео. Твой материал отлично дополняет изучение по учебникам. Спасибо, будь здоров и счастлив!
привет, я, как и ты, недавно пробовал верстать за ним
у тебя не возникло проблемы с картинкой в шапке, где "мужчина пальцем в компьютер показывает"?
у меня из-за класса _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 ".....
классика на самом деле, одна опечатка стоила такого количества нервов и тильта, что простейшее делать не могу
еще раз спасибо:)
Просто лучший бесплатный и супер полезный, параллельно качественный контент ) Респект автору
Очень, очень-очень полезное видео, как закрепление полученных знаний на практике! Спасибо огромное!
Очень полезный контент для новичков. Просто, интересно и понятно! Спасибо вам большое
спасибо Жека, это очень нужное видео, переход от самого простого к самому сложному (ступенька).
Как всегда очень понятно и полезно! Спасибо за контент!))
Мне очень нравится смотреть ваши видео, продолжайте пожалуйста!
по больше бы таких стримов с версткой не сложных макетов и среднего уровня , подымайте в топ ребзя!)
Лучший разбор простой верстки который я видел! Абсолютно все просто и понятно объяснил
это мой первый сайт по макету, и действительно здорово получается, я научился работать с фигмой и большая благодарность за труд автору
Низкий поклон за стрим 🛐｡◕‿◕｡
Жека, здравствуй!! Прекрасный стрим для новичка! Превосходное качество в результате -я в восторге! Спасибо большое! С уважением и наилучшими пожеланиями ТЕБЕ!!!
Вы супер ❤как всегда ! Процветания Вам и всех Благ !
Ждем еще!Спасибо.
Спасибо за прекрасный контент. Большое субъективное пожелание, по возможности, показывать больше семантической верстки.
Первый канал, который я проспонсировал. Дело не конкретно в этом видео, а в целом, во всем контенте. Спасибо
спасибо огромное за вклад который вы делаете для нас, с удовольствием с братиком смотрим и верстаем)
Присоединяюсь к вышесказанному!!! Мы тоже с братом смотрим, учимся, обсуждаем и делаем вёрстку...