Как создается адаптивная верстка сайта

Как создается адаптивная верстка сайта смотреть последние обновления за сегодня на .

Адаптивная верстка сайта за 10 минут. Отзывчивый сайт HTML CSS

42408
1450
43
00:15:36
02.02.2019

Чем отличается Отзывчивый сайт от Адаптивного? Как создаются сайты, которые работают на компьютерах, телефонах и планшетах? В этом уроке вы разберемся с принципами построения и создания адаптивности сайта. Исходные файлы: 🤍 Подписывайся на группы в социальных сетях: Вконтакте 🤍 Telegram 🤍 Понравилось видео? Подпишись 🤙 Поставь лайк 👍 Оставь комментарий 💬 И жди следующего урока) Если тебе надоело смотреть бесполезные курсы, которые не дают практических знаний. Хочешь стать полноценным Fullstack разработчиком в 2018 года - верстать сайты, создавать веб приложения и писать сервер? Делюсь собственным 5 летним опытов в программировании. Теги #адаптивная_верстка_сайта #адаптивный_сайт #bootstrap #cssgrid #flexbox #как_создать_сайт_за_час #как_создать_сайт #создание_сайта #html #css #html5 #css3 #js #javascript

Уроки CSS - Медиа запросы основы. Как сделать адаптивный сайт.

111714
4166
183
00:10:58
14.08.2017

В этом уроке css мы поговорим о медиа запросах. Медиа запросы очень важная тема, которой можно придать больше времени для изучения. Это начало вопроса о том как сделать адаптивный сайт своими руками очень просто. Уроки html css с медиа запросами приобретают новый смысл и интерес как у зрителей канала web developer blog так и у ведущего. Теперь вы можете сделать адаптивный сайт. CSS для начинающих дается не очень просто, особенно в css3 добавлено огромное количество свойств. ПОДПИШИСЬ на канал "Web Developer Blog" - 🤍 И не пропускай новые видео!!! ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА: JavaScript практика - 🤍 Основы JavaScript - 🤍 Уроки Bootstrap 4 - 🤍 Уроки Framework для верстки Foundation 6 - 🤍 Рубрика "Основы за 10 минут" - 🤍 Верстка сайта на Foundation 6 - 🤍 Основы препроцессора SASS - 🤍 Уроки по Sublime text 3 - 🤍 Видео про заработок на YouTube - 🤍 Создаем интернет магазин на PrestaShop - 🤍 Уроки jQuery - 🤍 ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - 🤍

Адаптивная верстка сайтов. Общая теория и примеры

6118
343
23
00:34:29
06.07.2020

Привет! Этим видео я открываю мини-цикл по адаптивной верстке сайта. В нем мы рассмотрим, как верстать сайты адаптивно, а в этом видео важно разобраться с очень важными фундаментальными понятиями. Поэтому сегодня - про фиксированную, резиновую, адаптивную верстку, медиа-запросы, бутстрап, принципы адаптивности. В следующих видео будет про адаптивные изображения, адаптивное меню, верстка сайта на vw, а так же просто практика адаптивной верстки. Содержание: 00:00 - Вступление 00:26 - Для чего нам адаптивная верстка? 02:42 - Фиксированная верстка 04:50 - Резиновая верстка 06:40 - Адаптивная верстка 08:10 - Медиа-запросы 14:22 - Какие именно запросы использовать? 21:05 - Про бутстрап, нужен ли? 25:34 - Пара слов о mobile-first 27:42 - Принципы и фишки при адаптиве 33:40 - Заключение 🤍 - марафон верстки 🤍 - слайдер на мобильных устройствах 🤍 - про то, какие проблемы бывают с натяжкой на WordPress 🤍 - исходники видео на GitHub Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка. Понравилось? 🤍 Моя страница вконтакте: 🤍 Мой блог: 🤍 Мой сайт: 🤍 Канал в телеграм: 🤍 Чат для верстальщиков: 🤍 #обучение #адаптивнаяверстка #бутстрап

Верстка сайта с нуля. Начало, шапка сайта.

476183
12584
829
00:20:07
21.11.2017

Наконец то на канале верстка адаптивного сайта с нуля. В этом видео я покажу процесс создания сайта для новичков. Мы начнем проект с самого начала, с создания index.html и последующей адаптивной версткой. В этом курсе верстки мы сделаем полноценный сайт с несколькими страницами за 10 уроков. В нем будут различные компоненты от применения flexbox с css grid до встраивания видео и слайдеров на сайт. Вообще html верстка это занятие не сложное но творческое и весьма время затратное. Курсы верстки я разделил на уровни. В данном курсе первого уровня будут самые простые моменты верстки. Промокод на 3 месяца бесплатного хостинга по тарифу Мак-10 - WebDeveloper (вводить при регистрации на сайте 🤍 ). Для активации бесплатного периода необходимо пополнить баланс на 100 руб. Активационный платеж не расходуется, оставаясь на балансе и является всего лишь барьером против злоупотреблений со стороны спамеров, мошенников и т.п. Группа вк: 🤍 Пост с логотипом в группе: 🤍

Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. HTML CSS

447305
12666
729
03:12:21
07.09.2021

Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. В этом видео я покажу подробную HTML CSS верстку простого макета FIGMA с кучей полезных решений и лайвхаков! Часть №1: 🤍 Часть №2: 🤍 ❓❓ Хотите чтобы стрим остался в записи? 👉Подписываемся на канал "СЛУШАЙ!" Истории из жизни простых людей: 🤍 И ЖМЁМ ЛАЙК! :) Полезные ссылки: 👉 Макет: 🤍 💪 Набор на курс по верстке: 🤍 👉Бесплатный курс по верстке: 🤍 👉 VS Code: 🤍 👉 Как правильно учиться: 🤍 👉 План развития фронтенд разработчика (+КАРТА): 🤍 🔴 Карта канала: 🤍 🔴 Получить доступ к плюшкам + поддержать канал: 🤍 🔴 Instagram: 🤍 🔴 Telegram канал: 🤍 (🤍 🔴 Telegram чат по верстке: 🤍 (🤍 🔴 Facebook: 🤍 👉 🤍IT-ПРИСТРАСТІ, українськомовний канал присвячений інтерв'ю з цікавими IT-спеціалістами - 🤍 👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками! Ссылка на канал: 🤍 🤟 Живи, а работай в свободное время! ©

Создание адаптивного сайта | Урок #1 - Начало

40312
513
19
00:07:01
04.12.2015

Приветствую всех в новом видеокурсе, в котором мы с вами научимся создавать адаптивные сайты. Вы научитесь создавать сайты таким образом, что они будут выглядеть прекрасно как на телефонах, так и на больших экранах телевизора! :) ✔ Основной сайт: 🤍 ✔ - Группа Вк - 🤍 Группа FaceBook - 🤍 Я в Google+ - 🤍 Страничка Twitter - 🤍 Страничка Вк - 🤍 ✔ Начните зарабатывать на YouTube - 🤍 ✔ Видео по заработку на YouTube - 🤍 Помощь в развитии канала. * Яндекс Деньги: 410014343706921 * Кошельки WebMoney: - Доллар: Z331064341236 - Гривна: U386388718252 - Рубль: R214610220703

Адаптивная верстка сайта на HTML CSS

48908
1917
101
02:00:35
27.05.2022

Адаптивная HTML верстка сайта для новичков на чистом HTML + CSS. Сайт портфолио фрилансера. Заверстаем по макету с Figma. Сделаем адаптацию для мобильных устройств, мобильную навигацию. Применим адаптивные изображения. Верстка на flexbox. Материалы к уроку: 🤍 :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Курс "Профессия HTML верстальщик": 🤍 Старт обучения: 27 Февраля 2023 года Обучение с наставником, 3 месяца, результат, гарантия. Научим создавать веб-сайты и зарабатывать на этом. 💻 Курс "JS Frontend разработчик": 🤍 Старт обучения: 20 Февраля 2023 года Обучение с наставником, 3 месяца, результат, гарантия. 🏁 Обучение с нуля 💁‍♂️ Обучение с наставником 🎯 Доведение с нуля до результата 🏢 Помощь с трудоустройством 💵 Поможем взять первый заказ на фрилансе 💳 возможна рассрочка 💳 если курс не понравится, вернём деньги в первую неделю :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3" 7 уроков по 30 мин: 🤍 :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Тайм коды: 00:00 Обзор проекта 01:10 Объявление 02:06 Создание проекта 04:30 Сброс стилей reset.css 07:05 Нарезка изображений 13:41 Подключение шрифтов 16:16 Верстка шапки сайта 24:12 Разметка под логотип и навигацию 26:44 Верстка логотипа 33:42 Верстка навигации 38:19 Контент в шапке 47:48 Верстка секции с услугами 54:26 Портфолио 1:03:15 Верстка Контакты 1:17:25 Мобильная навигация 1:31:51 Адаптация шапки 1:41:30 Адаптация секции Услуги 1:46:18 Адаптация Портфолио 1:48:27 Адаптация Контактов 1:50:35 Правка кнопки с навигацией 1:52:22 Добавление анимации 1:57:21 Настройки анимации 2:00:08 Финал Сайт: 🤍 Вконтакте: 🤍 Telegram канал: 🤍

Адаптивная верстка сайта с нуля по макету из Figma #1 Подготовка проекта

18088
753
76
00:31:17
15.02.2022

Курс адаптивная верстка сайта с нуля по макету из Figma нацелен на то чтобы научить вас создать верстку сайта с нуля. По макету из Figma я покажу шаг за шагом как создается адаптивная верстка сайта. Адаптивная верстка сайта это верстка заточенная под разные устройства такие как смартфоны и планшеты. По макету из Figma делается верстка сайта в редакторе кода с использованием языка HTML и CSS. В этом уроке мы рассмотрим макет сайта, который будем верстать из Figma. Ознакомимся с базовыми элементами фигмы. Скачаем редактор кода Visual Studio Code и я покажу какие плагины нам понадобятся для работы. Экспортируем макет сайта из Figma для дальнейшей верстки Pixel Perfect и создадим проект на компьютере и подготовим базовую структуру файлов и каталогов для комфортной работы над сайтом. ⚡️ Скачать готовый код вёрстки сайта из курса "Верстка сайта с нуля по макету из Figma": 🤍 Курс "Верстка сайта с нуля по макету из Figma": 🤍 Макет сайта Figma: 🤍 ⚡️ Эксклюзив на Boosty - 🤍 💡 Telegram канал - 🤍 🎥 Курсы на Stepik - 🤍 💰 Донаты на ЮMoney - 🤍 ВКонтакте - 🤍 Яндекс Дзен - 🤍 Rutube - 🤍 #html #css #figma #flexbox #grid #webdevelop #webdev #itdoctor

Урок 13. Адаптивная верстка | Курс Веб разработчик | Академия верстки

51771
53
00:20:41
21.08.2018

Ссылка на полный плейлист: 🤍 Это закрытые записи курса веб-разработчик 10.0. Получите полный доступ к домашкам, макетам и дипломному проекту. Переходите по ссылке 👉 🤍 Подпишитесь на канал, если вам нравятся эти видео: 🤍 Больше контента в нашей группе Вконтакте 🤍 Присоединяйтесь к нашему сообществу Discord 🤍 Чтобы записаться на мой курс по основам веб-разработки, напиши в нашу группу и мой ассистент скажет тебе, что делать дальше: 🤍 Прочитай мою историю в блоге: 🤍 Мой канал в telegram "Лысый из браузера" 🤍 Чтобы заказать рекламу на канале, пишите в личку вконтакте: 🤍 или telegram 🤍 - Я использую хостинг Link Host с 2014 года 🤍

Адаптивная вёрстка сайтов за 37 минут + макет. Тебе не нужен Bootstrap! [ENG SUBS]

924477
40303
2136
00:36:44
06.12.2019

Сейчас я познакомлю тебя с адаптивной версткой сайтов. Расскажу зачем она нужна и покажу на практике ряд основных подходов. Изучим медиа запросы и их конструкции. Поймем что тебе не нужен Bootstrap! Поговорим об mobile first, а так же о лучших практиках адаптива. Адаптивная вёрстка позволяет веб-страницам подстраиваться (адаптироваться) под различные размеры мониторов ПК, экранов планшетов и смартфонов. И чтобы эффективно потреблять трафик с мобильных устройств, нужно предлагать пользователям сайты с максимально удобным, адаптивным интерфейсом. Помимо этого, адаптивные сайты имеют приоритет при поисковой выдаче. Одним словом, адаптивная верстка сегодня крайне важна, и любому мастеру нужно уметь её делать и делать хорошо! 👉 Макет + напоминалка: 🤍 👉 Правильный адаптив картинок: 🤍 👉 Правильное адаптивное меню бургер: 🤍 👉 Как сделать спойлер: 🤍 🔴 Мастер-класс для начинающих по адаптивной верстке сайта: 🤍 🔴 Верстка макета из урока - 🤍 🔴 БЕСПЛАТНЫЙ курс по верстке сайтов (Front End). Уроки HTML CSS JS: 🤍 🔴 Если кому вдруг нужен пример верстки из урока то он доступен для подписчиков на Патреоне: 🤍 🔴 Получить доступ к плюшкам + поддержать канал: 🤍 🔴 Telegram канал: 🤍 (🤍 🔴 Telegram чат по верстке: 🤍 (🤍 🔴 Facebook: 🤍 🔴 Instagram: 🤍 Содержание: 00:00 - Вступление 01:05 - Подходы к верстке 01:30 - О контейнере 03:01 - Фиксированная верстка 06:46 - Отзывчивая верстка 11:52 - Адаптивная верстка (тебе не нужен Bootstrap) 17:29 - Отзывчиво адаптивная верстка 19:50 - Какой тип верстки использовать 20:34 - Медиа запросы 28:05 - Mobile First 29:00 - Хорошие практики адаптива 36:13 - Домашнее задание + макет 👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками! Ссылка на канал: 🤍 🤟 Живи, а работай в свободное время! ©

Mobile first метод. Верстка сайта html/css. Адаптивная верстка. ч.1

58066
2362
208
03:00:48
14.04.2020

Друзья, в видео я полностью расскажу, что такое метод верстки mobile first. Не только расскажу, но и как всегда, мы закрепим с вами все на практике, и сверстаем полностью сайтец с дизайном на 5 экранов. Посмотрим на другой подход к адаптиву в верстке. Макет: 🤍 Начальная сборка: 🤍 Шрифты делал тут: 🤍 Видео по препроцессорам: 🤍 Видео по gulp: ч1 - 🤍 ч2 - 🤍 Подпишитесь на канал, если вам понравилось данное видео: 🤍

Адаптивная верстка сайта

6551
407
64
02:01:10
11.01.2023

Полезные ссылки: Мой курс по верстке - 🤍 Телеграм канал - 🤍 Канал по вебдизайну - 🤍 макет + стартовые файлы - 🤍 Верстка этого макета: 1. 🤍 2. 🤍 3. 🤍 4. 🤍 Подпишитесь на канал, если вам понравилось данное видео: 🤍

Адаптивная верстка сайта с нуля для новичков. Полезные советы по верстке сайта

95981
3311
363
02:02:02
19.02.2021

Привет! Это уже четвертый марафон на канале, и его я хочу выделить отдельно, так как постарался сделать его для новичков, максимально рассказывая все нюансы. Возможно, я где-то поспешил - напишите об этом в комментариях. Содержание: 00:00 - Вступление 00:45 - Старт работы (разметка сайта) 32:13 - Работа с CSS (стилизация сайта) 01:49:28 - Адаптив сайта 02:00:33 - Заключение Ссылка на верстку: 🤍 Ссылка на макет: 🤍 В макете две страницы, вам нужна Page 2, где укороченная версия макета. Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка. Понравилось? 🤍 Канал в телеграм: 🤍 Чат для верстальщиков: 🤍 Моя страница вконтакте: 🤍 Мой блог: 🤍 Мой сайт: 🤍 #ityoutubersru #марафонверстки #для_новичков

Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. HTML CSS

284658
9337
394
03:55:52
28.01.2022

Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. В этом видео я покажу подробную HTML CSS верстку простого макета FIGMA с кучей полезных решений и лайвхаков! Полезные ссылки: 👉 Макет (открытый доступ): 🤍 👉 Результат верстки: 🤍 👉 Бесплатный курс по верстке: 🤍 👉 VS Code: 🤍 👉 Как правильно учиться: 🤍 👉 План развития фронтенд разработчика (+КАРТА): 🤍 🔴 Карта канала: 🤍 🔴 Получить доступ к плюшкам + поддержать канал: 🤍 🔴 Instagram: 🤍 🔴 Telegram канал: 🤍 (🤍 🔴 Telegram чат по верстке: 🤍 (🤍 🔴 Facebook: 🤍 За тайм коды спасибо Сергей Кудаев! 00:00:00 - Задорное вступление 00:02:54 - А вот и наш макет! Знакомство с макетом 00:05:54 - Файлы проекта 00:09:21 - Плагины проекта 00:11:42 - С чего начинается верстка? Цена работы 00:17:11 - Анализ макета. Плагин для Figma Font Fascia 00:21:15 - Поиск и подключение шрифтов. Плагин для Visual Studio Google Fonts 00:29:03 - Построение сетки. Ограничивающий контейнер 00:36:48 - Применение селектора-атрибута 00:39:43 - Анализ блока шапки 00:44:00 - Разметка макета и начало верстки шапки 00:52:34 - Верстка логотипа, меню, кнопки "Download" 01:11:52 - Настройка адаптивности для шапки 01:23:52 - Верстка бургера 01:30:30 - Настройка адаптивности для логотипа 01:37:14 - Открытие-закрытие меню средствами CSS3 01:38:30 - Применение псевдокласса Target, доработка бургера 01:51:00 - Верстка блока Main 02:10:54 - Использование конструкции :not(:last-child) 02:15:28 - Работа с декором блока Main 02:26:46 - Верстка блока Stay-safe 02:32:37 - Магия БЭМ в действии. Повторное использование кода 02:42:10 - Работа с декором блока Stay-safe 02:47:00 - Настройка адаптивности для блока Stay-safe 02:53:58 - Верстка блока Expert 03:01:06 - Альтернативный прием размещения декора в блоке 03:10:38 - Верста нижней части блока Expert 03:11:20 - И снова БЭМ в работе. Копирование текстового блока 03:14:45 - Вставка видео. Тег Iframe. Адаптивное видео 03:18:45 - Настройка адаптивности для блока Expert 03:24:16 - Верстка блока Healthcare 03:40:32 - Верстка декора с использованием псевдоэлементов :after и :before 03:48:00 - Верстка футера 03:50:20 - Текст в карточках футера 03:51:00 - Настройка адаптивности для блока Footer 👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками! Ссылка на канал: 🤍 🤟 Живи, а работай в свободное время! ©

#1 Верстка сайта с нуля для начинающих | HTML, CSS

2828755
78222
3074
00:50:43
27.02.2019

В этом видео начнем верстать сайт с нуля. Верстка сайта это процесс создания сайта из макета, который нарисовал дизайнер. Видео для начинающих, в нем не будет препроцессоров, сборщиков и каких-либо инструментов, только HTML и CSS! Основы HTML и CSS для начинающих: 🤍 Верстка сайта транспортной компании: 🤍 Файлы урока: 🤍 Главы видео: 00:00 - 03:10 - Подготовка к работе 03:10 - Создаем проект 05:35 - Шрифты 09:30 - Can I use? 11:50 - Начинаем верстать главный блок 16:30 - Верстаем шапку 25:40 - Верстаем заголовки 33:30 - Совет и ошибки начинающих 34:40 - Верстаем кнопку 39:00 - Верстаем нижнюю часть Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд. На сайте проекта 🤍 вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания. Мой ВК - 🤍 Группа BC - 🤍 Мой Instagram: 🤍 #верстка #версткасайта #html #css #css3

Верстка сайта для самых маленьких, html/css подробное объяснение

95626
3900
341
05:07:58
11.09.2022

Друзья, в этом видео я верстаю полный сайт для новичков в верстке, то есть прям для людей, которые делают самые первые шаги, начинают с самого начала. Эта верстка для самых маленьких в этой сфере, я объясню абсолютно все. Полезные ссылки: макет - 🤍 VSC - 🤍 Figma - 🤍 Все теги и свойства (справочник) - 🤍 Нормалайз - 🤍 Шрифты - 🤍 Мой курс по верстке (закрытая вечеринка=)) - 🤍 Телеграм канал - 🤍 Часть кода, который хотел оставить, сокращение для списка, youtube не разрешил, в целях безопасности. Весь готовый проект вы можете найти у меня на патреон 🤍 Рекомендую после этого видео, пройти марафон по верстке: 1. 🤍 2. 🤍 3. 🤍 Подпишитесь на канал, если вам понравилось данное видео: 🤍

Мой первый сайт. Создаём дизайн в Figma, адаптивная вёрстка, выкладываем на хостинг!

47831
1653
61
02:05:20
18.09.2019

На одной встрече мы разберем конкретные пути развития в профессии верстальщика и разработчика сайтов, а также их перспективы. Создать дизайн сайта, адаптивная вёрстка на html css и разместить сайт на хостинг за один вечер? Легко! Присоединяйся к просмотру, будет интересно! Другие мастер-классы по теме: 🔥 Основы JavaScript за 2 часа: 🤍 Создаем свою игру крестики-нолики на JavaScript: 🤍 Быстрая верстка сложного сайта из Figma: 🤍 Подписывайтесь на мой канал: 🤍

Адаптация сайта под мобильные устройства за 30 минут // Адаптивная верстка // Медиа запросы css3

35525
1002
53
00:37:11
15.05.2020

Последние 2 месяца я почти не отдыхал. Я готовил для Вас два пушечных интенсива. Самое крутое они также будут входить в общую подписку от 3 мес. Скорее залетай, если хочешь научиться писать приложения на React, писать backend на Node.js или просто верстать сайты. ► Интенсив React с нуля (приложение для тренировок) - 🤍 ► Интенсив Node.js + Express - Backend с нуля - 🤍 ► Интенсив по верстке сайта с 0 - 🤍 А также это крутая возможность поддержать автора. Сегодня мы полностью адаптируем сайт под мобильные устройства. На самом деле это очень просто. Приятного просмотра! Лучшие интерактивные уроки CSS - 🤍 Получить файл adaptive.css можно в нашем хранилище - 🤍 В этом ролике подробно рассказывается, что такое адаптивная верстка или адаптация сайта. Все это помогут нам сделать медиа запросы css3 (css media queries). 00:00 - Начало 01:15 - Базовая верстка 07:30 - Общие стили 23:00 - Адаптируем 36:00 - Что в итоге получилось? - ➡️Научим разрабатывать сайты - 🤍 ➡️Personal Instagram - 🤍 ➡️Personal YT - 🤍 💸 Улучшить качество видео - 🤍 ➡️Мой сетап VS Code - 🤍 ➡️Мой сетап Sublime Text 3 - 🤍 Немного обо мне: меня зовут Максим, я уже 7 лет занимаюсь веб-разработкой. На данный момент являюсь основателем двух крутых проектов redstudio.world и htmllessons.ru. Последний, был моей дипломной работой в колледже. Как и все, начинал с изучения верстки html, css, js. Затем появилась потребность в изучении Laravel для разработки образовательного проекта. На данный момент, мой стэк технологий выглядит так: html, css, javascript, jquery, bootstrap, flex, svg, vuejs, php, laravel и различные cms. Основная миссия нашей команды – создавать крутые продукты, которые будут помогать людям и менять мир. Буду рад, если Вы нас поддержите и подпишитесь на наш канал. Спасибо 😊

😱 ТОП-6 ошибок при верстке адаптива сайта

22739
1001
35
00:08:39
28.04.2021

Освойте анализ поведения пользователей с нуля на курсе «Факультет UX-аналитики» от GeekBrains: 🤍 Видео с версткой сайта, о котором идёт речь - 🤍 Файл с работами участников- 🤍 Итоговая верстка (мой пример) - 🤍 Демо - annblok.github.io/onlinetv/src/ ✅ Поддержать канал — 🤍 ✅ Instagram — 🤍 ✅ TikTok — 🤍 ✅ Сайт — 🤍 ✅ ВК — 🤍 ✅ Telegram — 🤍 ✅ Чат Telegram — 🤍 Обучение Frontend-разработке — 🤍 Frontend Book PDF — 🤍 Задать вопрос про фронтенд или верстку — 🤍

#1 Верстка сайта по шаблону для начинающих | Верстаем вместе | Сайт ресторана - делаем меню

152808
4599
262
00:19:29
18.02.2022

Привет, друг! Это новая тематика на канале - Верстаем вместе, где ты точно так же можешь повторять за мной шаг за шагом каждое действие, чтобы набраться опыта и в будущем верстать все более сложные сайты! В этом видео я показывай шаг за шагом процесс создания сайта, на этот раз это сайт ресторана. Это только одно из множества видео, дальше будет окончательная верстка, адаптация под мобильные устройства и загрузка на хостинг. То есть мы пройдем вместе весь путь создания сайта. А чтобы не пропустить новые части подпишись! Все ссылки: Ссылка на шаблон: 🤍 Ссылка на проект: 🤍 Ссылка на шрифты: 🤍 Социальные сети: Телеграм канал: 🤍 Инстаграм: 🤍 ВК: 🤍 Нужен сайт? Переходи: 🤍 Поддержать канал: 🤍 Не забудь подписаться!

Адаптивная верстка сайта с нуля по макету из Figma #13 Профессия верстальщик

2026
117
35
00:23:37
02.04.2022

Курс адаптивная верстка сайта с нуля по макету из Figma нацелен на то чтобы научить вас создать верстку сайта с нуля. По макету из Figma я покажу шаг за шагом как создается адаптивная верстка сайта. Адаптивная верстка сайта это верстка заточенная под разные устройства такие как смартфоны и планшеты. По макету из Figma делается верстка сайта в редакторе кода с использованием языка HTML и CSS. В этом видео мы оценим код, который написали на языке HTML и CSS. Я расскажу немного о профессии верстальщика и почему она будет востребована еще долгое время. Надеюсь это придаст вам мотивацию и больше желания и сил заниматься этим делом! Это НЕ последний урок в этом курсе. Мы еще будем делать интерактивные элементы на сайте. ⚡️ Скачать готовый код вёрстки сайта из курса "Верстка сайта с нуля по макету из Figma": 🤍 00:00 Анализ кода 10:39 Нужны ли верстальщики 21:49 Выводы Эксклюзив на Boosty - 🤍 Telegram канал - 🤍 Курсы на Stepik - 🤍 Донаты: 1. ЮMoney - 🤍 2. VISA - 4274 3200 3233 1582 ВКонтакте - 🤍 Яндекс Дзен - 🤍 Rutube - 🤍 💡 На каких платформах можно найти мои уроки: 🤍 (интерактивная pdf карта) 🎥 Большой практический КУРС "Frontend разработчик на HTML, CSS и JavaScript": 🤍 🎥 Курс "Верстка сайта с нуля по макету из Figma": 🤍 📌 Макет сайта Figma: 🤍 #html #css #figma #flexbox #grid #webdevelop #webdev #itdoctor

Адаптивная HTML CSS верстка сайта из Figma c нуля для новичков. Пошагово и подробно. Советы от профи

72561
2301
90
05:30:25
17.10.2021

↓↓↓ Макет и ссылка на материалы в описании под видео ↓↓↓ Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. В этом видео уроке я подробную покажу HTML CSS верстку простого макета из FIGMA. Поделюсь полезными приемами как быстро сделать адаптивную верстку, добавить мобильную навигацию и разместить видео на вашем сайте. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Курс "Профессия HTML верстальщик": 🤍 Обучение с наставником, 3 месяца, результат, гарантия. Старт курса: 27 Февраля 2023 года 💻 Курс "JS Frontend разработчик + React": 🤍 Обучение с наставником, 3 месяца, результат, гарантия. Старт курса: 20 Февраля 2023 года 🏁 Обучение с нуля 💁‍♂️ Обучение с наставником 🎯 Доведение с нуля до результата 🏢 Помощь с трудоустройством 💵 Поможем взять первый заказ на фрилансе :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Бесплатный курс по верстке сайтов: 🤍 :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: МАТЕРИАЛЫ К УРОКУ: • Макет: 🤍 • Код с урока: 🤍 • Урок по VS Code: 🤍 • Основы HTML: 🤍 • Сброс стилей reset.css: 🤍 ТАЙМ КОДЫ: 00:00 Знакомство с макетом и старт проекта 03:38 Сброс стилей 18:02 Базовые стили, контейнер, шрифты 29:57 Контейнер 33:40 Верстка шапки с навигацией 1:10:30 Верстка верхней секции 1:47:35 Секция How It Works - заголовок 2:04:48 Секция How It Works - колонки 2:32:34 Секция Story 2:56:56 Секция Our Product 3:27:54 Подвал 3:34:16 Правка багов 3:37:37 Читкод для отображения десктопной версии на смартфонах 3:41:58 Адаптивная верстка шапки и навигации 3:50:20 Адаптация первой секции 3:56:10 Адаптивная верстка секции How It Works - заголовок 4:00:30 Адаптивная верстка секции How It Works - колонки 4:07:42 Адаптивная верстка Story 4:12:51 Адаптив для секции Product 4:38:05 Адаптив для подвала 4:43:02 Мобильная навигация, скрипты 5:06:24 Видео в секции Story, Скрипты :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Меня зовут Юрий Ключевский. Я занимаюсь разработкой сайтов уже много лет, специализируюсь на front-end разработке и верстке сайтов, JavaScript и PHP программировании. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, JavaScript, jQuery, PHP, MySQL, React, Gulp. На нашем канале 🤍 вы найдете много полезных обучающих материалов, а так же сможете поработать со мной лично пройдя мои курсы. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Сайт школы ВебКадеми: 🤍 Наша группа Вконтакте: 🤍 Telegram канал: 🤍

Адаптивная вёрстка лендинга. Как сделать верстку сайта. Правильная верстка сайта. Респонсив.

232517
4897
613
01:56:17
18.12.2019

В этом мастер-классе покажу как сделать отзывчивый (responsive) адаптив. Научимся делать правильную адаптивную вёрстку лендинга используя HTML(KIT) CSS(SCSS) БЭМ и JS(jQuery). 🤟 Макет + напоминалка: 🤍 🤟 Применение класса "ibg" - 🤍 👉 Адаптивная верстка - 🤍 👉 Адаптивное меню бургер - 🤍 👉 Настройка Sublime Text 3 - 🤍 👉 Про Avocode - 🤍 👉 Про Prepros/ Препроцессор .kit - 🤍 👉 Препроцессор SASS/SCSS - 🤍 👉 Про БЭМ - 🤍 👉 Подключение шрифтов - 🤍 💪 Результат верстки доступен для подписчиков на патреоне: 🤍 💪 Стартовый шалон "Чертоги фрилансера": 🤍 💪 Инструкция к шаблону: 🤍 🔴 Получить доступ к плюшкам + поддержать канал: 🤍 🔴 Telegram канал: 🤍 (🤍 🔴 Telegram чат по верстке: 🤍 (🤍 🔴 Facebook: 🤍 🔴 Instagram: 🤍 👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками! Ссылка на канал: 🤍 🤟 Живи, а работай в свободное время! ©

Как создать одностраничный сайт из PSD. Адаптивная верстка. Выпуск #5 [2021]

206
11
0
00:25:21
09.01.2021

Современная верстка одностраничного сайта из PSD с помощью HTML/CSS/JS. В этом видеокурсе вы поймете как сделать верстку одностраничного сайта(лендинга). 📍 Вы узнаете: 👉 Как создать одностраничный сайт 👉 Как создать сайт с нуля 👉 Адаптивная верстка, как и зачем 👉 Как сверстать сайт 👉 Что такое верстка сайта 👉 С чего начать верстку сайтов 👉 Как сделать адаптивность сайта. 👉 Как работать с медиа-запросами 📍 Таймкоды: 0:00 Вступление 1:20 Адаптив Intro 4:05 Адаптив Steps 5:35 Адаптив Services 10:50 Адаптив Portfolio 13:03 Адаптив About 18:24 Адаптив Contacts 20:55 Адаптив на планшете Ссылка на PSD: 🤍 Это будет полноценная практика создания лендинга с нуля и до выкладывания на хостинг. Я решил взять небольшой макет, с котором мы будем подробно разбираться. Этот курс рассчитан для начинающих. Желательно, чтобы вы знали что такое HTML, CSS, базовые теги и свойства, имели представление с чем мы будем работать. На практике с объяснениями мы будем закреплять ваши знания. Ролики постепенно будут выходить на Youtube и соответственно в конце вы получите готовый лендинг на работающем хостинге. При просмотре данного курса вы получите ответы на следующие вопросы: Как сделать верстку сайта, как сделать лендинг страницу, как правильно сделать лендинг. Если у вас появятся вопросы или пожелания - пишите в комментариях. = Привет. Меня зовут Всеволод Курочка и я занимаюсь фронтенд-разработкой уже 6 лет. За это время я сверстал более 200 сайтов. Принимал участие в стартапах, работал в офисе и удаленно, фрилансил. Принимал участие в мелких, средних и крупных проектах. Разрабатывал проекты в интернациональных командах. На этом канале буду делиться своим опытом в сфере web-разработки, верстки лендингов, верстки сайтов, натяжки сайтов на CMS и многое другое. #верстка, #видео, #уроки, #курсы, #html, #css, #psd, #grid, #layout, #css3, #html5, #js, #лендинг Мой сайт: 🤍

Адаптивная верстка сайта с нуля по макету из Figma #18 Наставления и макет для верстки в подарок

2191
85
16
00:13:51
03.05.2022

Курс адаптивная верстка сайта с нуля по макету из Figma нацелен на то чтобы научить вас создать верстку сайта с нуля. По макету из Figma я покажу шаг за шагом как создается адаптивная верстка сайта. Адаптивная верстка сайта это верстка заточенная под разные устройства такие как смартфоны и планшеты. По макету из Figma делается верстка сайта в редакторе кода с использованием языка HTML и CSS. Для практики и лучшего усвоения материала предлагаю скачать макет сайта из этого поста. Открыть его в Figma, посмотреть видео с моими подробными комментариями и сверстать данный сайт самостоятельно. Такая практика позволит тебе прокачать навыки в верстке и узнать много нового. Этот макет проще чем тот который мы верстали в этом курсе, поэтому он будет идеальным для тренировки и проверки своих знаний. ⚡️ Скачать готовый код вёрстки сайта из курса "Верстка сайта с нуля по макету из Figma": 🤍 00:00 Курс на Stepik 01:30 Благодарности 01:54 Наставления и ДЗ Код и макет на Boosty (поддержать автора): 🤍 Код и макет на GitHub: 🤍 Эксклюзив на Boosty - 🤍 Telegram канал - 🤍 Курсы на Stepik - 🤍 Донаты: 1. ЮMoney - 🤍 2. VISA - 4274 3200 3233 1582 ВКонтакте - 🤍 Яндекс Дзен - 🤍 Rutube - 🤍 💡 На каких платформах можно найти мои уроки: 🤍 (интерактивная pdf карта) 🎥 Большой практический КУРС "Frontend разработчик на HTML, CSS и JavaScript": 🤍 🎥 Курс "Верстка сайта с нуля по макету из Figma": 🤍 📌 Макет сайта Figma: 🤍 #html #css #figma #flexbox #grid #webdevelop #webdev #itdoctor

#2 Адаптивная верстка сайта на Bootstrap 5 для начинающих | Основа сетки Bootstrap

20821
872
94
00:12:32
18.02.2021

Исходники к видео: 🤍 Подписывайся на альтернативные каналы: — 🤍 — 🤍 В прошлом видео мы рассмотрели основы сетки Bootstrap, и даже написали начальную разметку для нашего макета. Сегодня мы пойдем еще дальше и сделаем нашу страницу адаптивной. Ведь Bootstrap предоставляет для этого все необходимое. 0:00 - Предисловие 0:29 - Проблема статических сайтов 1:32 - Desktop First 3:27 - Mobile First 4:41 - Контрольные точки (breakpoints) 6:20 - Классы адаптивной сетки 7:07 - Приступаем к практике 7:26 - Шапка сайта 8:07 - Вертикальные отступы 8:49 - Промо-информация 9:03 - Ряд с клиентами 9:47 - Секция с ценами 10:10 - Ряд сотрудников 10:41 - Подвал сайта 11:21 - Итоговый обзор адаптивного макета 11:50 - Подведение итогов Если тебе интересна данная тематика, подпишись на канал! Для меня это также станет дополнительным стимулом продолжать свою работу. Также жду вас на моем сайте 🤍 Здесь вы найдете подробные интерактивные курсы по веб-разработке.

Что такое адаптивная вёрстка?

626
16
0
00:05:04
15.03.2020

Адаптивная вёрстка сайта позволяет веб-страницам автоматически подстраиваться под экраны планшетов и смартфонов. Мобильный интернет-трафик растёт с каждым годом и нужно предлагать пользователям адаптивные сайты с удобным интерфейсом. Поисковые системы используют ряд критериев для оценки адаптивности сайта при просмотре на мобильных устройствах. Каким критериям должна соответствовать адаптивная вёрстка? 1) Отсутствие горизонтальной полосы 2) Масштабируемые области 3) Читабельный текст 4) Большие области для кликабельных элементов Расшифруем: Отсутствие горизонтальной полосы - сайт должен помещаться в экран устройства целиком, без доп.прокрутки Масштабируемые области - при этом содержимое сайта (контент), должно быть хорошо видно, и на меньших экранах занимать больше места Читабельный текст - так же текст должно быть хорошо видно, и скорее всего для этого размер шрифта нужно будет увеличить Большие области для кликабельных элементов - это ссылки и кнопки. на них должно быть удобно кликать/нажимать без увеличения сайта Как сделать сайт адаптивным? Тут помогут 2 главных атрибута адаптивной вёрстки. 1) Метатег в HTML, который будет говорить браузеру, чтобы он контролировал ширину сайта в зависимости от устройства: meta name="viewport" content="width=device-width, initial-scale=1" width=device-width - устанавливает ширину окна просмотра к ширине устройства. initial-scale=1 - устанавливает начальный уровень масштабирования при посещении страницы. 2) Медиа-запросы в css, внутри которых можно будет переопределить стили если запрос будет выполнен 🤍media screen and (max-width: 600px) { … } Например, если максимальная ширина экрана устройства (screen max-width) будет не более 600px, тогда нужно будет применить стили из фигурных скобок ({ ... }). Например сделать шрифт больше: { font-size: 18px; }

Верстка сайта с нуля по макету - Адаптивное меню

121377
2971
459
00:13:02
04.04.2018

Всем привет, мы продолжаем тему верстка сайта с нуля по psd макету и в этом видео я вам покажу как сделать адаптивное меню для сайта. Адаптивное меню в верстке сайта у новичков очень часто вызывает трудности, но я покажу пошаговое создание адаптивного меню в проекте, если вы повторите за мной то сможете потом сделать его и самостоятельно. WBLOGHOST – скидка 40% на любой пакет виртуального хостинга по ссылке 🤍 Если надоел ваш текущий хостинг, то HOSTiQ перевезет бесплатно на оставшийся оплаченный срок у старого хостера. Подробнее: 🤍 Ссылка на макет: 🤍

#11 Адаптивная верстка | Адаптивная верстка сайта с нуля

847
39
14
00:49:03
27.08.2022

В этом видео уроке по адаптивной верстке мы зафиксируем наш меню, с помощью позиционирования. Добавим анимацию для каждого заголовка секции, а так же для отдельных блоков с помощью библиотеки AOS js, проверим как это все работает на разных экранах. В конце видео я расскажу, что делать с этой работой дальше, как можно применить этот макет. Будет интересно и увлекательно ) Досмотри ролик до конца - в конце самое интересное! Патреон автора: 🤍 Горячие клавишу (hot keys vs code) ➤ Ctrl + F ищем в файле, ➤ Ctrl + N создает новый файл, ➤ Ctrl + O добавляем проект в редактор, ➤ Ctrl + G ищем нужную строку в файле, ➤ Ctrl + C копируем ➤ Ctrl + X вырезаем(удаляем) ➤ Ctrl + V вставляем ➤ Ctrl + Shift + P выровнять элементы в файле Полезные ссылки: Верстка сайта с нуля Header Часть №1: 🤍 Верстка сайта с нуля Header Часть №2: 🤍 Верстка сайта с нуля Location Часть №3: 🤍 Верстка сайта с нуля Slider Часть №4: 🤍 Верстка сайта с нуля News Часть №5: 🤍 Верстка сайта с нуля Footer Часть №6: 🤍 Адаптивная Верстка Header Часть №7 🤍 Адаптивная Верстка Location Часть №8 🤍 Адаптивная Верстка Slider Часть №9 🤍 Адаптивная Верстка News and Fooner Часть №10 🤍 👉 Макет: 🤍 👉 Русская документация jQuery: 🤍 👉 AOS js - 🤍 👉 AOS github - 🤍 👉 Я верю - ты сможешь, у тебя получиться ​​🏆​ 👋 Меня зовут Илья Стоянов, и я верстаю сайты, занимаюсь разработкой сайтов более 9 лет. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!

Адаптивная верстка сайта с нуля по макету из Figma #1-18 Курс марафон по верстке сайта

7327
282
31
07:09:39
07.05.2022

Курс адаптивная верстка сайта с нуля по макету из Figma нацелен на то чтобы научить вас создать верстку сайта с нуля. По макету из Figma я покажу шаг за шагом как создается адаптивная верстка сайта. Адаптивная верстка сайта это верстка заточенная под разные устройства такие как смартфоны и планшеты. По макету из Figma делается верстка сайта в редакторе кода с использованием языка HTML и CSS. В этом видео мы верстаем сайт по макету из Figma с нуля и до его завершения. Это видео содержит в себе все уроки из курса "Верстка сайта с нуля по макету из Figma" и является руководством по созданию адаптивной верстки по макету Figma от А до Я. А также для того, чтобы вам было удобно его смотреть я сделал для вас интерактивное содержание. ⚡️ Скачать готовый код вёрстки сайта из курса "Верстка сайта с нуля по макету из Figma": 🤍 00:00 Про курс "Frontend разработчик на HTML, CSS и JavaScript" и благодарности 02:14 Figma, Редактор кода, Плагины и подготовка проекта 32:27 Шрифты, Настройки Редактора, Разметка шапки сайта 01:12:14 Pixel Perfect, Переменные, Стили текста и оформление шапки сайта 02:04:14 CSS Grid делаем сетку и адаптивную версию на медиа запросах 02:38:12 CSS Flexbox делаем три столбца и адаптивную версию 02:56:36 Раздел "Ваш запрос" и адаптивная версия 03:13:17 Раздел "Услуги", делаем сетку 3 на 2 03:39:30 Делаем портфолио на CSS Grid 03:49:16 Делаем раздел с текстом, который можно скрыть и показать 04:14:40 Верстка раздела "Наши партнеры" с логотипами компаний на Flexbox 04:33:24 Верстка раздела "Отзывы" и создание трех столбцов 04:56:42 Верстка раздела "Контакты" и "Футер" 05:17:23 Профессия верстальщик и мотивация 05:40:18 Интерактив на HTML, спойлеры и ссылки в футере 05:55:47 Интерактивное меню сайта на Materialize CSS 06:37:03 Модальное окно на сайте с помощью фреймворка Materialize CSS 06:51:59 Галерея изображений с помощью фреймворка Materialize CSS 06:58:00 Наставления и макет для самостоятельной верстки в подарок 🎥 Плейлист "Верстка сайта с нуля по макету из Figma" с отдельными уроками: 🤍 📌 Макет сайта Figma: 🤍 ⚡️ Бонусный код и макет на Boosty (поддержать автора): 🤍 📌 Бонусный код и макет на GitHub: 🤍 💡 На каких платформах можно найти мои уроки: 🤍 (интерактивная pdf карта) 🎥 Большой практический КУРС "Frontend разработчик на HTML, CSS и JavaScript": 🤍 Эксклюзив на Boosty - 🤍 Telegram канал - 🤍 Курсы на Stepik - 🤍 Донаты: 1. ЮMoney - 🤍 2. VISA - 4274 3200 3233 1582 ВКонтакте - 🤍 Яндекс Дзен - 🤍 Rutube - 🤍 #html #css #figma #flexbox #grid #webdevelop #webdev #itdoctor

Адаптивная верстка. HTML для JS разработчиков

13716
493
23
00:12:45
24.06.2020

Курс: 🤍 Все курсы: 🤍 Телеграмм: 🤍 Позиционирование элементов в html.

Адаптивная верстка сайта с нуля по макету из Figma #4 CSS Grid и медиа запросы

6393
289
54
00:31:57
01.03.2022

Курс адаптивная верстка сайта с нуля по макету из Figma нацелен на то чтобы научить вас создать верстку сайта с нуля. По макету из Figma я покажу шаг за шагом как создается адаптивная верстка сайта. Адаптивная верстка сайта это верстка заточенная под разные устройства такие как смартфоны и планшеты. По макету из Figma делается верстка сайта в редакторе кода с использованием языка HTML и CSS. В этом уроке мы будем верстать раздел о компании. Я покажу как выравнивать элемент с абсолютным позиционированием и мы сверстаем сетку из 4-х столбцов с помощью CSS Grid, а так же сделаем адаптивную версию сайта с помощью медиа запросов 🤍media на CSS для разных устройств. ⚡️ Скачать готовый код вёрстки сайта из курса "Верстка сайта с нуля по макету из Figma": 🤍 Курс "Верстка сайта с нуля по макету из Figma": 🤍 Макет сайта Figma: 🤍 ▶▶ Видео, которые будут вам полезны ◀◀ Видео урок по CSS Grid: 🤍 БЭМ методология от Яндекс: 🤍 Курс по вёрстке HTML+CSS для начинающих: 🤍 CSS 🤍media: 🤍 Медиа запросы в языке CSS: 🤍 Поддержать автора ₽ублем: 1. Сбер: 4274 3200 3233 1582 2. YooMoney: 🤍 3. PayPal: 🤍 Телеграм: 🤍 #html #css #figma #flexbox #grid #webdevelop #webdev #itdoctor

Верстка адаптивной страницы с CSS Grid в Visual Studio Code

16654
549
40
00:28:15
12.02.2021

Вместе с преподавателем по программированию Алексеем Кадочниковым мы запускаем мини-курс. В трех 15-минутных роликах вся необходимая информация, чтобы начать путь в мир кода! В третьем завершающем выпуске мы перейдём к практике с бесплатным редактором кода Visual Studio Code! Ссылка на макет: 🤍 Начать обучаться веб-разработке можно на портале GeekBrains – 🤍 Мы в социальных сетях: 🤍 🤍 🤍 🤍

Адаптивная верстка сайта с нуля для новичков №8. Полезные советы по верстке сайта

15242
582
95
02:03:16
29.04.2022

Привет! В этом видео я покажу, как верстать несложный лендинг (преимущественно для новичков) с нуля до результата. Здесь будет все те мелочи, которые я учитываю в каждом проекте - почему отступы именно такие, зачем нужен контейнер и так далее 🤍 - макет 🤍 - готовая верстка 🤍 - Типограф 🤍 - Конвертер шрифтов Понравилось? 🤍 Поддержать канал: boosty.to/maxgraph Моя страница вконтакте: vk.com/maxdenaro Мой блог: blog.maxgraph.ru Карта канала: blog.maxgraph.ru/ytmap/ Яндекс.Дзен: zen.yandex.ru/maxgraph Мой сайт: maxgraph.ru Канал в телеграм: t.me/maxgraph Чат для верстальщиков: t.me/maxgraph_chat #ityoutubersru #марафонверстки #для_новичков

#1 Верстка сайта портфолио по шаблону с нуля!

166434
3806
238
00:43:33
05.08.2019

Видеокурс по верстке сайта-портфолио с нуля используя HTML, препроцессор LESS и Adobe XD или Photoshop. Хостинг: 🤍 Скидки по моей ссылке: на виртуальный хостинг 10%, VPS/VPN 5%/10%, AntiDDoS 10% и другие услуги от 2-10%! // Ссылки = Основы создания сайтов на HTML и CSS: 🤍 Промокод: youtube (-500 руб.) - Справочник HTML и CSS: 🤍 Материалы урока: 🤍 Макет: 🤍 Автор макета: 🤍 БЭМ: 🤍 // О проекте = Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разрабокте - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд. На сайте проекта 🤍 вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания. // Соц. сети = Мой ВК - 🤍 Группа BC - 🤍 Мой Instagram: 🤍 #верстка #версткасайта #html #less

Верстка сайта Bootstrap 5 - Начало. Адаптивное меню

49836
1006
147
00:10:43
12.10.2020

Мы начинаем новый курс верстка сайта на Bootstrap 5 с нуля. В этом курсе мы сделаем классный работающий сайт стилизованный благодаря Bootstrap 5. В первом видео мы начнем верстку сайта и сделаем адаптивное меню на бутстрап и кастомизируем его под свои нужды. Расскажу как делается кастомизация сайтов Bootstrap 5 и как менять классы. В обще верстка сайта на Bootstrap 5 начало. По промокоду WDB20 скидка на хостинг от HOSTIQ.ua при оплате за 3 месяца - 🤍

Адаптивная верстка сайта с нуля по макету из Figma #2 Шрифты и шапка сайта

9512
426
57
00:40:34
22.02.2022

Курс адаптивная верстка сайта с нуля по макету из Figma нацелен на то чтобы научить вас создать верстку сайта с нуля. По макету из Figma я покажу шаг за шагом как создается адаптивная верстка сайта. Адаптивная верстка сайта это верстка заточенная под разные устройства такие как смартфоны и планшеты. По макету из Figma делается верстка сайта в редакторе кода с использованием языка HTML и CSS. В этом уроке мы подключим шрифты с сайта Google Fonts, и экспортируем некоторые изображения из Figma. Я покажу много полезных фишек и трюков по работе с редактором кода Visual Studio Code и расскажу о некоторых плагинах и настройках редактора VS Code. Подключим шрифты к нашему сайту и сделаем разметку шапки сайта на языке HTML. ⚡️ Скачать готовый код вёрстки сайта из курса "Верстка сайта с нуля по макету из Figma": 🤍 Курс "Верстка сайта с нуля по макету из Figma": 🤍 Макет сайта Figma: 🤍 ▶▶ Видео, которые будут вам полезны ◀◀ Курс по вёрстке HTML+CSS для начинающих: 🤍 Emmet лучший плагин для вёрстки: 🤍 Обзор редактора VS Code: 🤍 Блочная модель CSS: 🤍 БЭМ методология от Яндекс: 🤍 Поддержать автора ₽ублем: 1. Сбер: 4274 3200 3233 1582 2. YooMoney: 🤍 3. PayPal: 🤍 Телеграм: 🤍 #html #css #figma #flexbox #grid #webdevelop #webdev #itdoctor

#8 Верстка сайта с нуля для начинающих | Адаптивная верстка

92589
2825
230
00:39:36
08.03.2019

В этом видео мы продолжаем верстать сайт используя HTML и CSS и сегодня мы начинаем делать нашу верстку адаптивной. Сделаем несколько блоков адаптивными, поговорим о медиа запросах и разберемся, как же все-таки адаптировать сайт под разные устройства. Основы HTML и CSS для начинающих: 🤍 Верстка сайта транспортной компании: 🤍 Файлы урока: 🤍 Главы видео: 00:00 - Мета тег 01:47 - Про медиа запросы 02:45 - Пишем первый медиа запрос 05:10 - Адаптируем intro 11:45 - Адаптируем шапку секций 14:30 - Адаптируем карточки 19:18 - Адаптируем блок статистики 24:45 - Адаптируем блок сервисов 31:33 - Адаптируем блок с девайсами Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд. На сайте проекта 🤍 вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания. Мой ВК - 🤍 Группа BC - 🤍 Мой Instagram: 🤍 #верстка #версткасайта #html #css #css3

Bootstrap верстка современного сайта за 45 минут!

477102
10569
681
00:46:43
30.03.2017

Урок на сайте itProger: 🤍 Как создать сайт на Bootstrap 4? В этом видео мы с вами создадим полноценный адаптивный сайт на Bootstrap всего за 45 минут. Верстка сайта дело несложное, поэтому вы научитесь делать отличные сайты всего за 45 минут! ✔ Основной сайт: 🤍 ✔ - Группа Вк - 🤍 Группа FaceBook - 🤍 Instagram: 🤍 Я в Google+ - 🤍 Страничка Twitter - 🤍 Страничка Вк - 🤍 ✔ Начните зарабатывать на YouTube - 🤍 ✔ Видео по заработку на YouTube - 🤍 Помощь в развитии канала. * Яндекс Деньги: 410014343706921 * Кошельки WebMoney: - Доллар: Z331064341236 - Гривна: U386388718252 - Рубль: R214610220703

Адаптивное (отзывчивое) CSS свойство. Как быстро адаптировать элементы.

81013
5449
467
00:11:08
10.12.2020

Как быстро адаптировать различные элементы на странице? Спешу поделиться с вами очередным экспериментом. На этот раз решил сделать любое CSS свойство отзывчивым! 💪 Надежный провайдер IT-инфраструктуры Selectel - 🤍 👉Урок по адаптивной верстке: 🤍 👉Урок по адаптивной верстке картинок: 🤍 👉 Файлы урока: 🤍 🔴 Получить доступ к плюшкам + поддержать канал: 🤍 🔴 Telegram канал: 🤍 (🤍 🔴 Telegram чат по верстке: 🤍 (🤍 🔴 Facebook: 🤍 🔴 Instagram: 🤍 00:00 - В выпуске 01:29 - РЕКЛАМА - Selectel 02:34 - Исходные данные 03:00 - Отзывчивость внутри контейнера 06:38 - Отзывчивость по всей ширине 09:14 - Отзывчивость за пределами контейнера 10:15 - Заключение 👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками! Ссылка на канал: 🤍 🤟 Живи, а работай в свободное время! ©

Назад
Что ищут прямо сейчас на
как создается адаптивная верстка сайта русский и филиппинка woavid ANAMPA ИСКУССТВО ХАРИЗМЫ rainbow friends plush claw machine Fazox Jive Gunna RE4 bike oclock sarah nonikz 음악듣기 BeKei oxxxymiron — ойда реакция messi sbc fifa 23 Akmu Roblox BrookHaven RP нашел в стоке