Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. 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
🤟 Живи, а работай в свободное время! ©
Пікірлер: 782
Не сохранить стрим нужно приравнивать к преступлению или наказывать приседаниями). Спасибо за работу.
@FreelancerLifeStyle
2 жыл бұрын
Ахах
@user-en8nc5zk1w
2 жыл бұрын
Если все такие умные, а верстка для начинающих, почему тогда я не понимаю, может мне нужны курсы ДО?
@artyomvoytenko1237
2 жыл бұрын
@@user-en8nc5zk1w посмотри базовый курс по верстке на этому канале, станет все понятнее, потом вернись к этому видео
@user-vr2jo3yz5p
2 жыл бұрын
@@user-en8nc5zk1w потому что это урок по практике. видимо теорию вы пропустили. Начните с плейлиста базового курса html и CSS
@user-dw4zr3ne1l
2 жыл бұрын
@@user-en8nc5zk1w это урок по верстке для людей, которые обладают минимальным набором знаний в области HTML и CSS, а не для человека, который вообще ничего не знает
Благодарю за доступное образование, ты делаешь действительно один из лучших контентов по этой тематике.
34:25 wrapper Структура шапки 52:47 Хедер выравнивание 55:57 Прилипание 1:05:08 Ломание пунктов 1:06:07 Адаптив Шапки 1:07:58
@Sweet_and_joy
Жыл бұрын
Анализ первого блока 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
@grindrust6127
Жыл бұрын
у меня выравнивание не так работает хз почему так, по сути сделал . в . как на стриме но не вышло, оно все в левом углу
Спасибо за верстку "для самых маленьких". Все было полезно и интересно. Жду вторую часть. Такие стримы очень нужны.
"Не нужно грузить новичков всякой фигней, вместо того, чтобы человек учился верстать." Очень точное выражение, отображающее, к сожалению, бОльшую часть платных онлайн-курсов. Из этого канала я поняла гораздо больше, чем за 4 месяца обучения на платных курсах. Спасибо огромное за такую доступную и понятную подачу материала, это бесценно!
@FreelancerLifeStyle
2 жыл бұрын
Пожалуйста!
@user-pe7ob1rv7v
10 ай бұрын
@@FreelancerLifeStyle я не лівша,але страждаю за тебе 😃
@annkurynova2321
9 ай бұрын
Вот лопата, покажите как копать, не нужно рассказывать как добывают железо 👍
Евгений, материал просто пушка, спасибо за невероятно полезные уроки и мастер-классы, долгих лет жизни
С какой же радостью я снова учусь в свои 56! Спасибо Евгений!
@yume071
2 жыл бұрын
я думал я один тут такой )))
@iurabogomazov7653
2 жыл бұрын
Мне 50. С ув. Юрий
@antonsukhanov4651
2 жыл бұрын
Мне 55, начинаю менять профессию. Спасибо за курсы, Женя!
@helmut_elder
2 жыл бұрын
52
@enterkvas
2 жыл бұрын
Привет от учащегося ровесника: 1966. Лишь бы не стать "вечным студентом" в плохом смысле этого словосочетания
Отличный стрим для новичка!!!!!! Обучаюсь у вас по бесплатному курсу и этот стрим именно то , что было нужно в качестве отличной практики на самом начальном этапе 👍👍👍👍
Посмотрел 30 минут видео, не смог удержаться, чтобы не написать слова благодарности. Женя спасибо. Очень классный формат. Ты затрагиваешь очень много вопросов, которые возникают у новичков, но ответов на них почти нигде нет. Для профи это не вопросы, а смех один. Но на то мы и новички чтобы разбираться и учиться. Низкий поклон Тебе.
Отличное видео , очень доступно . Проделав все с Женей от начала и до конца многие вещи встают на места. Без сомнений каждый обучающийся хотел бы больше таких уроков
Спасибо за колоссальный труд и за выделенное время для всех нас. Этот стрим прямо вообще ТОП для начинающих ! Огромное человеческое СПАСИБО !
Очень рада, что нашла ваш стрим по верстке. Доступно, как раз для новичка как я. Спасибо большое! Действительно очень помогли. ✨
Спасибо за стрим! Очень полезно! Бодрость всю вёрстку как на одной ноте! Спасибо, что делитесь🤗
Спасибо огромное за вашу работу , все как будто в голове становится на свои места. С нетерпением ждем еще подобные стримы
Жека, большое спасибо за этот стрим. Это именно то, что нужно тем, кто только изучил ваши уроки по html и css, и кому еще пока рано делать сложные штуки, и тем более рано браться за js.
@FreelancerLifeStyle
2 жыл бұрын
Пожалуйста!
@user-ml9ir8jl5l
2 жыл бұрын
@@FreelancerLifeStyle Спасибо!
Спасибо Жень, что помогаешь разобраться начинающим как я, очень все подробно, я как раз перехожу на Gulp и SASS. Как по мне, этот урок как раз то, что надо, чтобы перейти от чистого CSS на препроцессор. Здоровья тебе и такого же запала на всю жизнь!!!
Женя! От души, каждый твой стрим пересматриваю по несколько раз, верстаю прям за тобой! Отлично объясняешь, всё чётко понятно. Спасибо тебе огромное! Продолжай!)
Спасибо большое за стрим! Буду благодарна если как можно чаще будут такие стримы для новичков🙏
Евгений, спасибо большое тебе за такие стримы и понятное объяснение материала , что к чему 🤝🔥
Очень классный стрим, смотрю уже в записи. То как ты делаешь верстку, аж глаза загораются самому бежать и делать. Спасибо большое, продолжай пожалуйста стримы такого типа
Женечка, как же классно все выстроено в систему. Как раз этого видения не хватало для полного понимания. Бесконечная благодарность💞💞💞💞
Огромное спасибо! Отличный стрим, все четко и по делу. Могу только похлопать 👏👏👏 Так легко сложную информацию мало кто реподносит . Топ!
Огромная благодарность за такие стримы, Вы делясь своим опытом сокращаете срок обучения. P. S Мои нервные клетки аплодируют стоя)
ОГРОМНЫЙ РЕСПЕКТ!!!!! Смотрю видео, пишу конспекты, верстаю, донастраиваю vs code +плагины которых нет, а здесь нужны были, в общем день пролетел незаметно, очень круто!
Спасибо за интересный и полезный стрим, с нетерпением ждем продолжения
Хороший стрим для начинающих верстальщиков Топчик! Когда знаешь частями как что работает но компоновать воедино еще нужно учиться и учиться)
Жека! Спасибо за все что ты делаешь, очень приятно учиться у такого человека. Всего тебе самого-самого лучшего!
Евгений, спасибо вам за ваш опыт предоставленный в таком удобном формате, спасибо большое за то что вы делаете, по больше вам терпения вдохновения продолжать заниматься подобными вещами. За пол года самообучения вы лучший на кого я наткнулся на просторах ютуба из всех кто делает подобный контент. Еще раз огромное вам спасибо.
@Runawaypub
Жыл бұрын
А почему сначала учились в саблайме, а сейчас делаем в вскод? Ответьте пожалуйста
Отдельная благодарность за простой макет и подробные объяснения. Пробовал смотреть сложную верстку, но все эти препроцессоры, миксины, сборщики + миллион файлов в папке реально трудно усвоить на лету. Хочется как-то поэтапно развиваться и переходить к усложнению когда уже к этому готов. Спасибо Женя. Побольше простой вёрстки, но со своими фишечками. Лайк с 3-х аккаунтов))
@FreelancerLifeStyle
2 жыл бұрын
Пожалуйста!
@user-ml9ir8jl5l
2 жыл бұрын
@@FreelancerLifeStyle Спасибо!
Жека, спасибо за стрим, как всегда интересно. Подача инфы у тебя замечательная, почти 100% контента остается в голове и жаждет применения). Думаю, твой опыт еще не раз направит ребят в нужную сторону)
Спасибо за стрим, просто куча полезной инфы, жду нового выпуска.
Приветствую! Я посмотрел это видео дважды, чтобы на его основе сделать свой первый сайт, но понял, что упускаю кучу важных деталей. Поэтому сейчас я полностью повторяю верстку за тобой ( и все равно умудряюсь ошибаться по невнимательности). Я поражаюсь тому, как ты классно все проговариваешь! Очень часто моя рука тянется поставить лайк твоему видео, а лайк уже поставлен. Жаль, что нельзя поставить их еще. Большое тебе спасибо за контент!
Уникальный контент! Потрясающе простая и веселая подача материала! Огромная благодарность Вам, Евгений за бесплатное обучение!
Женя большое спасибо за очень полезный материал! Я повторил весь урок и сейчас буду браться за следующую часть! Очень, очень годная информация. Особенно про выравнивание карточек и подробное объяснение о схеме организации самого проекта и кода!
Объяснение космос. Доходчиво настолько, насколько это вообще возможно. По порядку и без воды. С огромной благодарностью!
2:05:56 Женя, ты как преподаватель силён! Учиться у тебя просто здорово!!! Твой подход в обучении вдохновляет и вызывает желание продолжать учиться. Поэтому продолжай гнуть свою линию!
@user-xb1ks6cr1z
2 жыл бұрын
Да, я сам рад, что нашел этот канал. Это несколько шире, чем просто вёрстка. Здесь также присутствует философская лирика.
Огромное спасибо Вам, Евгений! Законспектил 1-ю часть на листочках, выделил текстовыделителем. Надеюсь, буду по шаблону применять эти фичи при верстке будущих и ПЕРЕверстке текущего макетов. Надеюсь также законспектить с той же целью и 2-ю часть. Успехов!
Огромное спасибо за видео!! Это прекрасно! А еще прекрасен новый формат шортов)) Я от них вообще в восторге!
Очень понравилось, большое спасибо за то, что ты делаешь! Такие штуки очень нужны, особенно для новичков.
Хочу ещё добавить, что по такому видео я узнала массу нюансов. Когда учишь тот или иной навык, дают много несомненно полезной теории, вроде всё понятно и даже понятно, как его применять в приведённых примерах. Но, когда тебе показывают применение этого навыка непосредственно в вёрстке макета, это уже совершенно другой уровень образования. Когда тебе показывают, как при помощи одного штриха можно просто решить неприятную проблему - это совершенно другой уровень. Поэтому многие считают твой канал очень информативным и полезным для себя. Для получения практического опыта и закрепления теории, твой канал один из самых лучших. Отдельный плюс за подачу материала и подробное объяснение каждой манипуляции. Выяснить почему сделать лучше так, а не по-другому - это тоже важный элемент в понимании и образовании. Ну и просто красивый, приятный мужчина, которого интересно слушать.
Огромное спасибо за такого рода МК! Зачастую очень сложно, даже зная все теги и их css свойства, просто начать верстать. Мало кто дает основы подхода к верстке и еще меньше тех, кто учит делать сайт удобным, максимально адаптивным и "с запасом прочности" на случай изменения объема контента в блоке и т.п. Респектище тебе!
Спасибо за науку ! Очень нравится подача, приятно слушать, внимательность к деталям, понимание необходимости повторения казалось бы очевидных вещей, для людей которые уже изучали теорию, но недавно приступили к практике, объяснения множества тонкостей и нюансов Отдельная благодарность за выложенный код урока
@azatsaparbekov7441
2 жыл бұрын
Сергей, а где ссылка на код урока? завершенный
Отличный стрим, ждем продолжения! Полезно и поучительно.
Отличние у тебя видео и стримы, Жека! Спасибо тебе большое, как же хорошо можно с тобой развивать и учиться, очень много полезного узнал с твоих стримов\видео, твои рекомендации и уроки это просто класс!!!)) Спасибо тебе за всё, как начну работать в этой сфере - точно тебя на патроне отблагодарю)
Женя, спасибо тебе огромное! Пожалуйста, продолжай делать подобные видео и не забрасывай канал!
Жека,Спасибо огромное!Это очень ценный материал!Надеюсь, будут еще подобные стримы!Удачи тебе!!!
Самый толковый и подробный урок для новичков! Огромное спасибо! Четко, понятно и с юмором! Буду смотреть все!
Огромное спасибо!!! Я ваша преданная поклонница-когда нашла ваш канал просто обалдела!!!
Спасибо большое за предоставленный вами стрим, я остался им доволен ,узнав новые фичи!
Спасибо за доступный и качественный разбор материала. Все изложено максимально доходчиво и как всегда в позитивной манере.
Отличный стрим. Думаю что такие простые сайты очень полезны для новичков. Спасибо Женя, за то что делишься с нами полезным опытом.
Это именно тот стрим в котором я все понимал. Было интересно. Спасибо
Как приятно слушать профессиональную речь. Уши мои радуются.
Спасибо! Это большая работа, еще и в реальном времени! Отличная возможность практиковать верстку для начинающих. Если получится не спешить сильно и не бояться повторять простые вещи, хотя бы в данной рубрике - будет еще круче!
Классный стрим. Интересно было увидеть вёрстку блока с видео и тут😭. Буду ждать продолжения. Подобные стримы интересно смотреть, узнавать некоторые маленькие но полезные фишки. Жирный "+" за подобные стримы.
Спасибо большое за стрим! Очень много полезных моментов для себя вынесла))
Как раз тот материал, который я ждал, лайкосик
И стримы конечно же продолжайте! Всё супер полезно для новичков и не только!
Женя, большое спасибо за мастер-класс по верстке от профи!
Контент, как всегда супер! И подача, и наполнение на высоте. Спасибо за труд!
Жэка, огромная благодарность тебе! Долго собирался с мыслями и знаниями для того, чтобы начать верстать. С этим стримом в первый раз верстал макет, и достаточно неплохо получается, я считаю. Какие-то блоки макета делаю вперед тебя, потом сравниваю, исправляю, иногда даже и НЕ исправляю. Смотрю на то, что получается, и доволен собой, появляется какая-та уверенность чтоли.. Круто! спасибо 100500 раз!
спасибо за полезный стрим!! Как всегда браво, Женя! Доступно и теперь я знаю и умею верстать легко карточки
Спасибо, очень не хватало подобных видео новичку!
Спасибо! И поздравляю с 200к!
Просто пушка!!! Узнал новое. Осталось разобраться с тем, что не понял. Ты супер крутой
Ооооу маааай, огромное спасибо!!!! У вас действительно очень полезный, простой, а главное, бесплатный контент!!!! Обожаю ваши видео😍😍😍😍
пишу комментарий для продвижения твоего канала!!! Давно смотрю :) многому научилась, спасибо)
Очень полезный стрим! Как всегда, крутое объяснение и заряд мотивации
Женя, спасибо тебе большое!!!!поняла все то, что ты показал, а раньше я даже бы и близко не смогла внять этому. обожаю смотреть тебя, ты очень и очень классный, оставайся всегда таким!!!!
Спасибо Жека за мощный стрим, было очень полезно))
Женя, спасибо тебе большое за контент!!!! Прошёл платный курс на одном известном учебном портале, и скажу, что ты даёшь очень много!! Структурированные знания!! Я Скачиваю макет и верстаю вместе с тобой! Дякую велике тобi !!
Женя, ты лучший преподаватель по верстке на просторах интернета. Твой канал - это такая крутизна. Я всю жизнь занимался бэк-ендом, фронт был для меня что-то чуждое. Благодаря твоему каналу я открыл для себя прелесть фронта, теперь заниматься версткой - это что то вроде хобби, интересно и увлекательно. Очень много подчерпнул из уроков, но такие повторяющие стримы очень нужны, чтобы еще раз пройти то, что ты освоил. Спасибо огромное.
@FreelancerLifeStyle
2 жыл бұрын
Пожалуйста!
Большое спасибо за такой полезный урок! Ведь такой контент мало где можно найти, особенно для новичков.👍
Спасибо за стрим! Было не просто, но вроде получилось повторить и даже что-то записать! Женя, спасибо большое! Очень полезно!
Жека, огромное спасибо тебе! Твоя вёрстка - это реально творчество, причём позитивное :) И всегда можно что-то новое для себя подчеркнуть. 🙏😊
Один из самых полезных каналов для обучения вёрстке! 80% знаний в этой сфере у меня почерпнуто именно отсюда. Спасибо!
@FreelancerLifeStyle
2 жыл бұрын
Пожалуйста!
Це просто супер! Дуже крутий майстер-клас. Саме те, що потрібно початківцю :)
Спасибо! Благодаря тебе я смог начать писать адаптив для своих сайтов и в целом я начал разбираться в этом. Ты действительно мне помог.
Жень, спасибо болшое за работу!!! И канал и материалы действительно высшего качества! Еще раз спасибо!
Я недооценивала важность таких видео, думала, что ничего нового не подчерпну, но блин, как же я ошибалась. Верстала однажды макет, где header также надвисал над следующим блоком с фоновым изображением. Сколько же нервов я убила на то, чтобы это адекватно сверстать, а всё оказалось в разы проще. Спасибо 👍
спасибо Жека, это очень нужное видео, переход от самого простого к самому сложному (ступенька).
Очень, очень-очень полезное видео, как закрепление полученных знаний на практике! Спасибо огромное!
Евгений, спасибо за интересные и познавательные видео. Хотел вас попросить записать видео по верстке полноценного сайта, то есть где используется HTML, CSS, JS, PHP, было бы очень мощно!
Мне очень нравится смотреть ваши видео, продолжайте пожалуйста!
Как всегда очень понятно и полезно! Спасибо за контент!))
Лучший разбор простой верстки который я видел! Абсолютно все просто и понятно объяснил
по больше бы таких стримов с версткой не сложных макетов и среднего уровня , подымайте в топ ребзя!)
Да, Жека, было очень интересно и полезно, спасибо за труд и запись!!
Спасибо огромное за практически полезную обучающую информацию! Лайк! Дякую також за приємне спілкування і цікавих особистостей, яких Ви запрошували на інтерв'ю...
Огромное Спасибо за Вашу Работу!
Жека, я просто получаю колоссальное моральное удовольствие от твоего мастерства. Я перфекционист, и мне все хочется с самого начала делать хорошо. А у тебя верстка всегда идеальная. Учусь с огромным удовольствием, спасибо!
@enterkvas
2 жыл бұрын
Привет от коллеги-перфекциониста😂
Супер стрим! Спасибо тебе Жека!!!!!
Получила пачку новых знаний. Спасибо тебе, Жека!
Ти красавчик, дякую тобі)) стільки якісного і безкоштовного контенту 👍
Спасибо. Только с вами и учусь с нуля. Пока все последовательно. Очень нравится
Ждем еще!Спасибо.
Низкий поклон за стрим 🛐。◕‿◕。
Это отличный разбор! Огромное за него спасибо! И макет с этими нависающими блоками хорошо выбран! Так и запонимается потихоньку, там такое было, там такое и уже больше всяких деталей потом самостоятельно знаешь как повторять
Просто лучший бесплатный и супер полезный, параллельно качественный контент ) Респект автору
Евгений, благодарю за данное видео!