Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. HTML CSS. ЧАСТЬ №2
ฝัง
- เผยแพร่เมื่อ 9 ก.ย. 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
🤟 Живи, а работай в свободное время! ©
![ไม่ต้องมีที่ที่ให้ฉันอยู่ แต่ขอแค่มีฉันอยู่ก็พอ (Spaceless) - getsunova [SHORT FILM]](http://i.ytimg.com/vi/MuT0d_cvJkc/mqdefault.jpg)
![[2024] Подключение шрифтов. Google Fonts. CSS font-face. Как подключить шрифты. УчимВместе](/img/n.gif)
Анализ пятого блока 3:55
Структура HTML пятого блока 4:45
Вёрстка пятого блока 12:31
Адаптив пятого блока 35:38
Анализ шестого блока 48:25
Структура HTML шестого блока 50:19
Вёрстка и Адаптив шестого блока 51:08
Структура HTML седьмого блока 58:32
Вёрстка седьмого блока 1:01:17
Адаптив седьмого блока 1:11:12
Структура HTML восьмого блока 1:17:10
Структура HTML девятого блока 1:38:01
Вёрстка девятого блока 1:40:13
Адаптив девятого блока 1:43:21
Структура HTML footer 1:44:55
Вёрстка footer 1:55:40
Адаптив footer 2:05:18
Спасибо большое за такой стрим!! Жду с нетерпением следующий! Я только учусь верстать, поэтому все было супер полезно и понятно!
Медиазапросами идет привязка к ширине вьюпорта и это во многом является проблемой для БЭМ структуры блоков. Дело в том, что теряется независимость блока, который может быть использован многократно где угодно и блок по методологии БЭМ должен быть независимым, т.е. не должен ничего знать о том, где он будет использоваться. Такому независимому блоку нужно адаптировать свои элементы не на основании вьюпорта, а на основании ширины контейнера, куда он будет помещен. Мы решили эту проблему в своей БЭМ-реализации путем прописывания атрибута data-beakpoints со значениями типа "1200, 1024, 600, 400" и далее JS уже творит чудеса, создавая необходимы модификаторы для описанных точек излома. И это очень классно работает. Теперь блок действительно обрел независимость и стал адаптивным - без разницы куда он будет помещен.
Ну сделайте видео реализации)))
Жека, спасибо тебе огромное! Благодаря твоему каналу столько вопросов разобрал непонятных для себя. Круть!
Как всегда все понятно, полезно и интересно. Спасибо за твои труды)
Жека ты молодчина! Спасибо тебе за всё.
Огромное спасибо за стрим! Первый стрим я кое-как повторил. Долго, муторно, с кучей ошибок, но повторил. Зато второй стрим увеличил мою скорость в разы. Я с каждой секундой видел, как я начинаю не только понимать, но даже предугадывать дальнейшие действия.
Хотя зачастую все равно предугадывал неправильно))) Повторяя твой проект, я все время ставил комментарии-пояснения для себя в коде. В итоге комментариев с половину кода)))
Ты очень крут! Большое спасибо и продолжай!
Спасибо большое за такой подробный разбор. Выявила для себя новые лайфхаки 🙂 Побольше таких видео, очень полезно для таких новичков как и я)
Спасибо, за запись стрима и подробный разбор. Очень познавательная информация и много различных лайфхаков. Удачи в дальнейших проектах!
Огромное спасибо, Евгений!!! Ты мне очень помогаешь во всем, я учусь на твоих уроках, стримах и тд... , в каждом видео очень много полезного... Еще раз огромное спасибо... Благодарен тебе за твои старания... Дай Бог тебе, всего самого наилучшего!!!
Буду ждать больше подобных видео! Очень интересно и познавательно, а различные лайфхаки во время самого процесса вообще бесценны. Спасибо вам, Жека, за то, что вы есть)))
да, это лучший видос по верстке по макету среди видосов на чистом css. 4 раз уже верстаю этот макет за это лето )
P.S Подобные если и будут, то не скоро. Во всяком случае, не на русском языке точно.
Спасибо, Жека! Макет вроде бы несложный, но куча полезных вещей. Хочу его теперь сверстать, чтобы закрепить знания.
Как же все доступно изложено. Материал очень высокого качества. Спасибо!
Очень классные и нужные стримы. Подписался на все твои каналы, лайк всем твоим урокам которые посмотрел. жду от тебя новых стримов по верстке для новичков.))) Спасибо тебе Женя, Ты делаешь очень классное и нужное дело!
Евгений, спасибо большое за вашу работу. Все очень доходчиво объясняете. С радостью смотрю ваш материал.
Женя, хотела сказать, огромное спасибо тебе. посмотрела 2 части и все поняла. Ты очень хорошо все объясняешь, многие вещи, когда-то непонятные, стали ясны как день. спасибо ещё раз огромное!!!!
JОчень нужны такие стримы)) В голове всё в порядок приводит)
Женя, спасибо! Очень все доходчиво объясняешь. У меня всегда была проблема с разбитием блоков. Теперь стало намного яснее!
Фух, я закончил , огромное спасибо за обучение, наверное первое видео где я смог сделать пару блоков совсем без опоры на видос !!!
Спасибо большое за очень доступное и вместе с тем качественное объяснение вёрстки сайта, за то что вы делитесь своими профессиональными навыками.
Спасибо большое за мастер-класс, очень многое узнал и картинка цельная сложилась о том как верстать подобные сайты. Сомневаюсь, что все запомню с первого раза, поэтому буду пересматривать стрим в случае необходимости)
Ура! я наконец-то его закончила, всё-всё получилось и работает) После вашего курса бесплатных уроков - это отличный способ применения и закрепления знаний. Женя, вы офигенный учитель, спасибо огромное. Надеюсь, текущие трудности не повлияют на ваш заразительный оптимизм!
Спасибо, информативно, нам это помогает. Мы на повторе ещё все повторяем, разбираем. Я недавно начала смотреть, очень интересно. 👍
Ты лучший, я в 2022 и учусь верстать, хотя раннее я изучал самостоятельно Python всё доходчиво и прозрачно объясняешь, легко начал усваивать вёрстку т.к. свободно владею английским, и есть понимание небольшое исходя из питона. Буду смотреть твои видосы, круто)))
Спасибо большое за стрим, что то сделал даже сам. Понял как делается адаптивная вёрстка. Спасибо так же за курс, очень полезно и информативно, мне 15 и я планирую стать фронтом, твои курсы в этом отлично помогают, спасибо!
Здраствуйте я из Узбекистана. Да полезно делать такие стримы я научился многому через этот стрим. СПАСИБО вам большое !!!
Женя! Спасибо тебе за твои стримы, смотрю и скилл растёт, просто проговариваю все теги, что куда и зачем я пишу, с утра просыпаюсь и понимаю , что могу уже что то сверстать! Спасибо Жень, от души! Твои уроки шикарны, понятны и любимы! Продолжай нести знания в этот тёмный мир) Благодарю!
Рад что полезно!
Спасибо Вам большое, благодаря вашим урокам многое понимаю. СПАСИБО 😀
Однозначно такие стримы нужны, важны и полезны! А для новичков особенно ...
Спасибо Вам огромное! Досмотрела бесплатный курс до Скриптов и все понятно! Иногда просто по невнимательности возникают ошибки. А так все просто Супер!!!
Евгений, я вам очень благодарен. Обучаюсь у вас 2 месяца, очень радует ваше старание, мне 16 лет и ваше старание я очень ценю
Дякую за цей урок. Завдяки йому, нарешті, зрозумів, що таке адаптивна верстка і як її виконувати. До цього взагалі, намагався якось її обійти, обмежувався тільки версткою десктоп екранів.
Спасибо за науку ! Понятно, доступно Пожелание от новичка: включайте пожалуйста JS и в проекты для новичков Уверен, с вашими комментариями, пояснениями сможем разобраться и JS-код не только не отпугнёт, но даже понравится и точно украсит любой проект
Женя, прими щиру подяку за цей чудовий стрім. Навчаюсь верстці по твоїм безкоштовним відео вже 5 місяців і, думаю, що вже багато чому навчилась. Це при умові того, що 5 місяців тому навіть слова верстка не знала що означає і з чим її їдять))) Ти чудовий вчитель. Так тримати!!!
Большое спасибо за познавательный стрим. Смотрю и верстаю уже после его выпуска, многое для себя отметила.
НО все терзает один момент - как каждый раз считаешь % для line-height. В фигме, прямо под значением пикселей, серым текстом указано соответствующее значение в %.
классный стрим!сил и удачи в новом году!
Евгений, благодарю за видео!
Спасибо за отличный стрим!
Огромное спасибо за обучающее видео!! Хотя, мне не всё было понятно, но я многое для себя вынес.
Лайк за доступное объяснение. И большое человеческое спасибо.
Женяяя!!! Спасибо тебе за труд !!!
Шикарно! Все подробно разжёвано!))
Большое спасибо! Думаю, когда чувствуешь, что "тупишь" во время стрима, то нужно поглядывать почаще в чат. Там - подсказки. Это, как в шахматах: со стороны всегда виднее ситуацию на доске. Так и здесь. 2:10:17: поставил 2 подряд медиазапроса на 992 (скопировал из предыдущего медиазапроса и не поменял на 700), а пытался увидеть результат как на 700. Я смотрел в записи, но в чате увидел подсказку. Которая так и осталась незамеченной. Думаю, для новичков это будет сложновато. Тем более, на такой скорости и в такой неразберихе в css: в одном файле, всё подряд - блоки, медиазапросы. Но тем и хорош этот формат, что все можно пересмотреть на разной скорости, подразжевать. Для меня это было очень, очень полезно. Тем более, когда я разлюбил препроцессоры, сборщики (у которых каждую секунду что-то меняется, что-то перестает поддерживаться и т.п.) и пытаюсь нативить, где можно . Большое еще раз спасибо. Успехов!
Спасибо большое! только пробую разобраться, но все доступно и понятно подано!
я многому научилось 😊 спасибо тебе огромное и удачи и успехов👍
Уважаемый , Евгений) Спасибо Вам, большое за вашу работу , уроки и знания, все очень интересно, очень хочется еще практики с Вами, на таком же материале, чтоб уж довести базу до автоматизма, и уверенно двигаться дальше)) Хотя бы пару раз в месяц, такие стримы!!! Это просто было бы здорово!!! с уважением Ваш ученик........ мне 50 ле)т, очень хочется быть продвинутым дядькой))
Привет. Как успехи? Я в том же возрастном сегменте ) Недавно ступил на стезю front-enda. Двигаюсь дальше. Ты уже сверстал свои пару страничек? Начальной тяги хватает или нет? Чем мотивируешься?
@@user-ru2hw9vv5h А как ваши дела ? У вас есть успехи ?
@@b2tf676 Был перерыв около месяца, изучаю JS. Проблема в том, что надо уделять больше времени и практики. Не всегда хватает время, пока не здаюсь. Думаю через месяц, два начать искать работу
@@user-ru2hw9vv5h Удачи вам !
Спасибище! такой формат мега-полезен, потому что показывает, как сложить всю теорию в кучу)) прям сижу, пересматриваю и конспектирую, как ты решаешь конкретные под-задачи.)
Пожалуйста!
Аналогично, тоже в тетрадку все примеры фиксирую.
спасибі велике , пишу мало бо нема сил писати адже всі присвятив ,цьому проекту , але не міг залишити твоє відео без коменту , дякую гарно , ти крутий
все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём желаю мира и спокойствия вашей стране и семье
Красавчик. Спасибо за урок!
Дуже дякую за інформативне відео. Для мене як для новачка було дуже корисно, адже я побачив, що можна зверстати сайт навіть без великої кількості знань. Всього найкращого
Жека твои лайфхаки это магия!!!!!!!!!!!
Спасибо! Все верстаю вместе с тобой только с использованием scss и переменные, под запись!
Пожалуйста!
Первая часть огонь! Спасибо! Однако по просмотрам многие не дошли до второй :D
крутой контент) по больше таких видео нужно )
Женя топовий викладач )! дякую за інфу )
Очень полезно! Большое спасибо!
даа. очень полезный стрим. Онлайн смотреть не получается, но позже я всё пересматриваю и очень хорошо учиться по таким видео. Хотелось бы еще такого плана , но с использованием scss
Будут!
верстал параллельно, прокручивая непонятные моменты по несколько раз. огромное спасибо
Жека!СПАСИБО ТЕБЕ ОГРОМНОЕ ЗА ТВОЮ РАБОТУ!!!!!!!
Пожалуйста!
Женя, привет.
Спасибо за знания которыми делишься.
Хочу подкинуть одну идею, по которой ты можешь сделать обучающее видео для новичков. Сейчас практически у всех есть Инстаграм и в шапке профиля можно написать совсем мало информации и вставить только одну ссылку. К примеру у тебя она идёт на твой Ютуб канал, а некоторые делают ссылку на страницу на которой размещают информацию о себе, контакты, или товары акции если это страница магазина или услуг и много другого. Очень часто используют для этого Тильду. Страница адаптирована под мобильный. Для новичков будет хорошая практика.
Спасибо большое за ваш труд
Огромное тебе спасибо! Очень сильно помогаешь
Женя спасибо тебе большое за твои уроки, привет из Беларуси, Украине желаю только добра
Кюсі! Закінчив макетик. Було дуже корисно!
спасибо за стрим! так интересно получается -вроде все повторяю но некоторые моменты не выходят например у меня _container толком не работает - стили которые в нем не подтягиваются искала ошибку - не нашла. Решила по-своему эту проблему! Начинаю в некоторых моментах не только повторять и конспектировать но и прикладывать голову) ага здесь именно внешний отступ и да его надо через ласт-чилд. это прям кайф))
Жека, в минулому відосі не залишив фідбек, тому напишу тут. бо той дивився під час блекауту в збережених.
контент, як завжди, топ, все на висоті. ти запитував, чи треба ще такий-звісно, треба. бо не всі одразу переходять до верстки зі збірниками. я набиваю руку на такому, щоб пришвидшити навик верстки та розширити розуміння деяких речей. так що тобі велика шана і дяка за твою роботу і твою мотивація. я з прифронтового міста Запоріжжя, твій контент допомагає тримати стрій та не опускати руки. все буде Україна!!!!
Я не довно начал учить IT и вся наша Академия смотрит ваши уроки стримы и как вы верстаете нам это очень нравиться и интересною. Иногда наш учитель даёт самостоятельную работу мы все смотрим ваши уроки и сдаем самостоятельную даже наш учитель предлогает и настаивает смотреть эти видео. СПАСИБО ОГРОМНОЕ !!!
Вот поэтому я не пошел в академию. В бесплатном доступе крутейшие приподаватели и Жека пожалуй лучший из них.
Жека красава! Удачи!
Здравствуйте, меня зовут Жавлонбек. Уроки, которые вы посещаете, великолепны. Я слежу и изучаю ваши уроки из Узбекистана. Большое спасибо за полезные уроки. Приглашаю вас в Узбекистан, где вы сможете познакомиться с историческими памятниками, Бухарой, Хивой, Самаркандом, Ташкентом и другими местами.
Я только что выучил русский язык, извините за ошибки и недочеты
Все круто!Много полезных фишек.Снимай побольше стримов для новичков))А архива кода нет?
Большое Вам спасибо!
Евгений, спасибо вам оромное!
такие стримы конечно делай очень помагает в тренировке
Очень полезная штука была озвучена на 17:45, спасибо
Спасибо! Конкретно помогло!
Жалко, что нельзя лайкнуть/поблагодарить Вас каждый раз, когда возвращаешься к тому или иному Вашему видео )) Спасибо
Жека большой молодец! Искренне благодарствую за проделанную работу. Интересно было бы узнать ещё о CSS переменных. Стоит ли их применять, и если да, то как и когда?
Когда значение используется несколько раз в разных местах. Например основные цвета темы. И тогда не придется помнить и писать коды цветов, а просто var(--color-main), var(--color-secondary) и тд
Спасибо огромное , очень полезно
Спасибо Вам огромное!!!
Дуже гарно. Дякуююю.
Жека ты умница! Спасибо тебе за всё.
Пожалуйста!
@@FreelancerLifeStyle Блин ну как ты на это все отвечаешь?) У тебя человек на зп? Курс, семья, соцсети, TH-cam, чаты, каналы, как?)) Сделай пожалуйста урок по time management )))))
Привет , я благодарен тебе безмерно . Спасибо большое
Пожалуйста!
Спасибо за интересные ролики, один минус конкуренция среди верстальщиков депингуют жестко.
Дякую за урок! З нетерпінням чекаю на новий!
Привет, хотелось бы видео о том как ужить несколько JS-библиотек вместе, к примеру Fancybox с Magnific на больших лендосах, где есть и галереи и попапы. Спасибо.
Спасибо! Очень хочется попасть на прямой стрим, но увы, работаю
Благодарствую!!!)))
Женя, если что можно опросы делать , так лучше )
Щиро дякую за Вашу роботу!
Спасибо, учусь на твоих видосах.
Подскажи какое розширения в VSC отображает иконки в HTML документе??
Спасибо!! Женя, хотелось бы с Патреон скачать файлы с кодом. Чисто, чтобы заглядывать туда, как в шпаргалку, когда сам верстаешь аналогичное)) Плиз.
Ще раз повернувся сюди, додивився до кінця. Кайфово, коли все зрозуміло! Дякую за лайф-хаки та цікаві рішення!! Дуже корисно. Тим, хто, як я конспектує, та робить ще собі скріни, на замітку - в адаптиві футера з колонками меню, Жека сказав 2 брейкпойнт - 700 px, де колонки перейдуть на 50 відсотків, остання 100%, то він забув поміняти 992 на 700 і воно там не дуже... Но то таке)))
Найкращий канал на Ютубі)))
1:04:35 процентный line-heigth: 133% вы дали к font-size поэтому размер шрифта был меньшим
только что тоже заметил
думаю почитаю коменты или еще кто то увидел
Дякую за твою працю.👍
Роби будь ласка такі верстки по частіше.
спасибо за урок
спасибо большое!!!
Женя, спасибо за уроки!!! Есть ли возможность перемещать блоки(допустим блок навигации) из хедера в футер, например, с помощью css или только js?
Есть, на js
Спасибо ☺️
Жека привет! Подскажи пожалуйста, что за программка, которой ты рисуешь рамочки, когда предварительно разбиваешь блок на коробочки?
Spasibo!!!