![MaxGraph - cайты как страсть](/img/default-banner.jpg)
- 377
- 2 717 649
MaxGraph - cайты как страсть
Russia
Приєднався 28 лип 2017
Привет! Это MaxGraph!
Меня зовут Максим. Верстальщик, занимаюсь веб-разработкой 7 лет
На этом канале я делюсь всеми своими знаниями в html-верстке сайтов, раскрываю возможности заработка, делюсь реальными кейсами из своей собственной работы.
За последние 7 лет я успешно выполнил большое количество заказов из разных уголков мира, работаю преподавателем в онлайн-университете, написал целый обучающий курс по верстке сайтов с нуля.
- Расскажу как начать верстать сайты с полного нуля.
- Поделюсь реальными кейсами из своей работы, над которыми я свое время потел.
- Расскажу, куда двигаться дальше, чтобы быть всегда востребованным.
Увидимся на видео!
Подписывайся: www.youtube.com/@maxgraph?sub_confirmation=1
Меня зовут Максим. Верстальщик, занимаюсь веб-разработкой 7 лет
На этом канале я делюсь всеми своими знаниями в html-верстке сайтов, раскрываю возможности заработка, делюсь реальными кейсами из своей собственной работы.
За последние 7 лет я успешно выполнил большое количество заказов из разных уголков мира, работаю преподавателем в онлайн-университете, написал целый обучающий курс по верстке сайтов с нуля.
- Расскажу как начать верстать сайты с полного нуля.
- Поделюсь реальными кейсами из своей работы, над которыми я свое время потел.
- Расскажу, куда двигаться дальше, чтобы быть всегда востребованным.
Увидимся на видео!
Подписывайся: www.youtube.com/@maxgraph?sub_confirmation=1
Адаптивная верстка сайта с нуля с пояснениями. Макет Avion. Часть 5. Доработки и адаптив
Привет. Продолжаем марафон верстки небольшого многостраничного сайта - интернет-магазина. Верстать будем на чистом html, css, js, чтобы понятно было даже самым новичкам. Погнали)
Макет: www.figma.com/file/RArY7BvPfHO9SAU0cYgWPM/Avion?type=design&node-id=119%3A3664&mode=design&t=YxFJ0k5MlBxQecIS-1
Стартовая папка: drive.google.com/drive/folders/18TPL_-jWPzSuzIdgKdP_clc4iPGPqZNa?usp=sharing
Типограф: www.artlebedev.ru/typograf/
Библиотека перемещения элементов: github.com/SineYlo/transfer-elements/blob/main/readme-ru.md
Готовый код доступен по подписке: boosty.to/maxgraph
Доп. контент и поддержка канала:
❤️ boosty.to/maxgraph
❤️ www.donationalerts.com/r/maxdenaro
Полезные ссылки:
🤌 Макеты для верстки: verstaem.online/projects/
🤌 Задачки по верстке с решениями: verstaem.online/tasks/
🤌 Курс по верстке html-писем: verstaem.online/courses/html-emails/
🤌 Канал с полезностями в телеграм: t.me/maxgraph
🤌 Чат для верстальщиков: t.me/maxgraph_chat
🤙 ВК Видео: video/@maxgraph
👋 Меня зовут Максим. Верстальщик, занимаюсь веб-разработкой 7 лет
Подписывайся: www.youtube.com/@maxgraph?sub_confirmation=1
#верстка #html #css
Макет: www.figma.com/file/RArY7BvPfHO9SAU0cYgWPM/Avion?type=design&node-id=119%3A3664&mode=design&t=YxFJ0k5MlBxQecIS-1
Стартовая папка: drive.google.com/drive/folders/18TPL_-jWPzSuzIdgKdP_clc4iPGPqZNa?usp=sharing
Типограф: www.artlebedev.ru/typograf/
Библиотека перемещения элементов: github.com/SineYlo/transfer-elements/blob/main/readme-ru.md
Готовый код доступен по подписке: boosty.to/maxgraph
Доп. контент и поддержка канала:
❤️ boosty.to/maxgraph
❤️ www.donationalerts.com/r/maxdenaro
Полезные ссылки:
🤌 Макеты для верстки: verstaem.online/projects/
🤌 Задачки по верстке с решениями: verstaem.online/tasks/
🤌 Курс по верстке html-писем: verstaem.online/courses/html-emails/
🤌 Канал с полезностями в телеграм: t.me/maxgraph
🤌 Чат для верстальщиков: t.me/maxgraph_chat
🤙 ВК Видео: video/@maxgraph
👋 Меня зовут Максим. Верстальщик, занимаюсь веб-разработкой 7 лет
Подписывайся: www.youtube.com/@maxgraph?sub_confirmation=1
#верстка #html #css
Переглядів: 1 536
Відео
Адаптивная верстка сайта с нуля с пояснениями. Макет Avion. Часть 4. Страницы Product и Cart
Переглядів 1 тис.Місяць тому
Привет. Продолжаем марафон верстки небольшого многостраничного сайта - интернет-магазина. Верстать будем на чистом html, css, js, чтобы понятно было даже самым новичкам. Погнали) Макет: www.figma.com/file/RArY7BvPfHO9SAU0cYgWPM/Avion?type=design&node-id=119:3664&mode=design&t=YxFJ0k5MlBxQecIS-1 Стартовая папка: drive.google.com/drive/folders/18TPL_-jWPzSuzIdgKdP_clc4iPGPqZNa?usp=sharing Типогра...
Адаптивная верстка сайта с нуля с пояснениями. Макет Avion. Часть 3. Страница Catalog
Переглядів 776Місяць тому
Привет. Продолжаем марафон верстки небольшого многостраничного сайта - интернет-магазина. Верстать будем на чистом html, css, js, чтобы понятно было даже самым новичкам. Погнали) Макет: www.figma.com/file/RArY7BvPfHO9SAU0cYgWPM/Avion?type=design&node-id=119:3664&mode=design&t=YxFJ0k5MlBxQecIS-1 Стартовая папка: drive.google.com/drive/folders/18TPL_-jWPzSuzIdgKdP_clc4iPGPqZNa?usp=sharing Типогра...
Адаптивная верстка сайта с нуля с пояснениями. Макет Avion. Часть 2. Страница About
Переглядів 1 тис.Місяць тому
Привет. Продолжаем марафон верстки небольшого многостраничного сайта - интернет-магазина. Верстать будем на чистом html, css, js, чтобы понятно было даже самым новичкам. Погнали) Макет: www.figma.com/file/RArY7BvPfHO9SAU0cYgWPM/Avion?type=design&node-id=119:3664&mode=design&t=YxFJ0k5MlBxQecIS-1 Стартовая папка: drive.google.com/drive/folders/18TPL_-jWPzSuzIdgKdP_clc4iPGPqZNa?usp=sharing Типогра...
Адаптивная верстка сайта с нуля с пояснениями. Макет Avion. Часть 1. Главная страница
Переглядів 5 тис.Місяць тому
Привет. Этим видео начинаем новый марафон верстки небольшого многостраничного сайта - интернет-магазина. Верстать будем на чистом html, css, js, чтобы понятно было даже самым новичкам. Погнали) Макет: www.figma.com/file/RArY7BvPfHO9SAU0cYgWPM/Avion?type=design&node-id=119:3664&mode=design&t=YxFJ0k5MlBxQecIS-1 Стартовая папка: drive.google.com/drive/folders/18TPL_-jWPzSuzIdgKdP_clc4iPGPqZNa?usp=...
Знакомство с Container Queries
Переглядів 1,5 тис.2 місяці тому
Привет! В этом видео расскажу, что такое Container Queries, для чего он нужен. Также напишем небольшую страницу с использованием container queries. Содержание: 00:00 - Интро 00:16 - Что это такое 01:36 - Базовый пример 07:15 - Реальный пример 24:48 - Поддержка свойства 25:30 - Немного о единицах измерения контейнера 28:42 - Аутро Готовый код: github.com/maxdenaro/maxgraph-youtube-source/tree/ma...
CSS-Задачи №1. Починка дома. Задача на отработку свойства display для начинающих
Переглядів 1,5 тис.3 місяці тому
Привет! В этом видео (и последующих видео плейлиста) я буду разбирать различные задачки или верстать небольшие макеты с какими-то интересными элементами внутри. Предлагайте свои варианты для видео сюда) t.me/maxgraph_chat verstaem.online/tasks/pochinka-doma/ - задание Доп. контент и поддержка канала: ❤️ boosty.to/maxgraph ❤️ www.donationalerts.com/r/maxdenaro Полезные ссылки: 🤌 Макеты для верст...
Figma Dev Mode стал платным. Что делать? Плагин Inspect Styles
Переглядів 9 тис.4 місяці тому
В этом видео рассказываю о плагине Inspect Styles, который начал разрабатывать еще в самом начале существования Dev Mode. Показываю, почему это лучшее решение из имеющихся. Содержание: 00:00 - Интро 00:35 - Иные решения (inspect в Figma или Pixso) 04:14 - Как установить плагин 05:37 - Вкладка "основное" 08:07 - Вкладка "стили" 09:45 - Вкладка "настройки" 13:23 - Ресайз плагина 14:00 - Вывод SVG...
JS-плагины №16. Перемещение элементов в разметке на разной ширине экрана
Переглядів 1,8 тис.5 місяців тому
В этом видео посмотрим плагин, позволяющий перемещать элементы на странице с помощью JS. Очень полезно при создании адаптивных версий сайта. 👉 Плагин: github.com/SineYlo/transfer-elements/blob/main/readme-ru.md 👉 Готовый код: t.me/maxgraph_chat/167143/282768 Содержание: 00:00 - Интро 00:35 - Разбор плагина 07:03 - Аутро Доп. контент и поддержка канала: ❤️ boosty.to/maxgraph ❤️ www.donationalert...
UI-компоненты №20. Показ акций на сайте в зависимости от даты
Переглядів 1,2 тис.5 місяців тому
В этом видео посмотрим, как можно сделать акции на сайте, которые будут выводиться из JSON в зависимости от текущей даты. В том числе добавим вывод серверной даты. 👉 Готовый код: t.me/maxgraph_chat/167143/278499 Содержание: 00:00 - Интро 01:06 - Верстаем карточку 02:22 - Пишем стили 04:01 - Пишем скрипт 18:28 - Используем серверную дату 22:29 - Аутро Доп. контент и поддержка канала: ❤️ boosty.t...
Итоги 2023 года. Планы на 2024. Поздравления
Переглядів 8955 місяців тому
Итоги 2023 года. Планы на 2024. Поздравления
JS-решения №26. Создаем свой плагин видеоплеера
Переглядів 2,8 тис.6 місяців тому
JS-решения №26. Создаем свой плагин видеоплеера
Адаптивная верстка сайта с нуля с пояснениями. Макет Photography. Часть 1. Верстка
Переглядів 10 тис.7 місяців тому
Адаптивная верстка сайта с нуля с пояснениями. Макет Photography. Часть 1. Верстка
UI-компоненты №19. Блок характеристик в интернет-магазинах
Переглядів 2,2 тис.8 місяців тому
UI-компоненты №19. Блок характеристик в интернет-магазинах
№6. Создание Яндекс.карты на сайте. Фильтрация меток на карте
Переглядів 3,5 тис.9 місяців тому
№6. Создание Яндекс.карты на сайте. Фильтрация меток на карте
JS-решения №25. Простое переключение страниц без перезагрузки (Ajax)
Переглядів 7 тис.9 місяців тому
JS-решения №25. Простое переключение страниц без перезагрузки (Ajax)
JS-решения №24. Превращение блоков в слайдер (swiper.js) при ресайзе. Универсальная функция
Переглядів 8 тис.10 місяців тому
JS-решения №24. Превращение блоков в слайдер (swiper.js) при ресайзе. Универсальная функция
Вложенность в чистом CSS. CSS Nesting
Переглядів 2,1 тис.10 місяців тому
Вложенность в чистом CSS. CSS Nesting
Кому нужна платная фигма, когда есть это? Плагин Inspect Styles
Переглядів 7 тис.11 місяців тому
Кому нужна платная фигма, когда есть это? Плагин Inspect Styles
Figma Dev Mode. Новые фишки, мое мнение, и что нам делать дальше
Переглядів 7 тис.Рік тому
Figma Dev Mode. Новые фишки, мое мнение, и что нам делать дальше
Правильный порядок состояний (focus, hover, active) для элементов
Переглядів 3,5 тис.Рік тому
Правильный порядок состояний (focus, hover, active) для элементов
Как сверстать сайт по макету. Пошаговый план
Переглядів 5 тис.Рік тому
Как сверстать сайт по макету. Пошаговый план
Единицы измерения CSS. Px, em или rem - что использовать?
Переглядів 5 тис.Рік тому
Единицы измерения CSS. Px, em или rem - что использовать?
Назначение HTML-тегов в верстке №5. Теги картинок, ссылок, списков и интерактива
Переглядів 1,5 тис.Рік тому
Назначение HTML-тегов в верстке №5. Теги картинок, ссылок, списков и интерактива
Мой новый проект для развития навыков верстки - verstaem.online
Переглядів 5 тис.Рік тому
Мой новый проект для развития навыков верстки - verstaem.online
Назначение HTML-тегов в верстке №4. Теги форм
Переглядів 1,4 тис.Рік тому
Назначение HTML-тегов в верстке №4. Теги форм
Адаптивная верстка сайта с нуля с пояснениями. Gulp, SCSS, CSS Grid, БЭМ. Макет Recidiviz
Переглядів 25 тис.Рік тому
Адаптивная верстка сайта с нуля с пояснениями. Gulp, SCSS, CSS Grid, БЭМ. Макет Recidiviz
Назначение HTML-тегов в верстке №3. Семантические теги
Переглядів 2,7 тис.Рік тому
Назначение HTML-тегов в верстке №3. Семантические теги
Разбор тега picture. Для чего нужен, синтаксис, примеры
Переглядів 4,4 тис.Рік тому
Разбор тега picture. Для чего нужен, синтаксис, примеры
Здравствуйте, подскажите, пожалуйста, не работает темная тема, в чем может быть ошибка? Где искать проблему?
Чем дальше верстаю тем больше начинаю понимать как много ты сюда знаний выложил это большая редкость спасибо большое.
Прекрасные и полезные уроки ! Спасибо вам за контент
очень хорошо объясняешь очень понятно. Я еще не пробовал верстать с препроцессорами, но думаю наличие такого большого разделения css файлов именно от туда.
немного сложновато написано в том плане что много классов и пока я в начале, но вижу расхождение это оплошность или дизайнера или верстальщика header у нас по ширине в макете не входит в container он должен быть по макету за ним на всю ширину экрана просто нижний сделать header__botom{display:flex; justify-content: center;}.Но много нового узнал спасибо за урок например то что в flex можно gap использовать а то до этого лепил margin вместо него.
25 минута - начало верстки страницы- карточка
Большое спасибо
Будут ли яндекс карты на react?)
Нет)
Круто
Стрелками удобнее по всему сайту ходить так-то. И вообще у nvda очень много элементов навигации. Самое удобное - заголовки. Также можно ходить по кнопкам, редакторам, ориентирам и т.п. но нужно знать сайт, чтобы ходить по всем элементам навигации, кроме заголовков. Самое удобная навигация на незнакомом сайте - по заголовкам. Когда сайт уже знаком, извратиться можно любым способом. Особенно удобен поиск по экрану. Его открываешь, пишешь туда то, что хочешь найти, иищутся все объекты, на которых есть текст. Конечно, на странице должна быть определённая разметка. Бывает, что разметкинет, и тогда спасают только стрелочки и поиск по экрану.
кайф
Спасибо, полезный ролик. вопрос а можно ли всей карточке в той же "cart" задавать шрифты -weight, height,size,color - а потом отдельные значения заменять для title, descr, и тд
Можно
Чувак!!! Огромнейшее спасибо за видос!!
Кайф. Было бы круто, если в разделе "Шрифты в макете" можно было тыкать по названиям шрифта и он бы подсвечивал или там выделял блоки, где используется данный шрифт на макете.
Плагин и так нагружен,поэтому не делал это
здравствуйте! для данных уроков нужно знать php?
Здравствуйте. Немного) но необязательно
Thank you very much ❤😊
Спасибо мастер
СПА-СИ-БО!
Так а эта карта будет масштабироваться на сайте? Обычно же масштабируются, чтобы человек мог посмотреть ближайшие ориентиры
Прям круто писать программу ну мен я заебла то что все время в лядыватьс я нудно чес слово ибыстро говоришь. А так норм спасибо 0:00
11:30 Burger
модальное окно 1:30:00
smooth-scroll 1:20:00 =)
Привет Макс, не могу понять это только у меня не работает твой плагин в Фигме "Inspect Styles" или его у всех заблокировали?
Ничего не блокировали)
@@maxgraph уже заработало, а то какую то ошибку выдавало, перепугался, думал заблочили, спасибо за крутой плагин 🤝
Максим лучший блогер, спасибо - раз два и вставил видео на сайт - ты лучший чел в ютуб блогерах и что уж там в вёрстке тоже
кстати спасибо огромное, а то я не знал как из директории выйти и приходилось полный путь писать, лучший!!!!!!!!!!
Отличное объяснение, спасибо за урок. Понравился пример
а если мне надо по вертикали сделать
Поменять трансформ надо)
@@maxgraph хорошо, если у меня разные объекты, в моей ситуации SVG изображения разного размера, данный метод уже не сработает?
Спасибо. ❤❤❤
СПАСИБО
сборка после обновления ошибку выдает, [ERR_REQUIRE_ESM]: require() of ES Module. как минимум нужно npm install del@6.1.1 (откатить).
Сделал несколько своих проектов и хотел понять, что я делаю не так, как могу улучшить, да и вообще сравнить с работой опытного верстальщика. Спасибо, за труд, подметил много нюансов для себя, теперь буду делать значительно лучше)
на 47:14 если мы вводим в инпут число равное максимальному, + должен быть disabled, следовательно нужно добавить проверку на равенство введенного числа в инпут, максимальному. А по коду у нас 2 условия, либо больше, либо меньше, тобишь еще одно условие if (stepperInputEl.value == stepperMax) { stepperInputEl.value = stepperMax; stepperBtnPlusEl.classList.add('stepper__btn--disabled'); }
Я из Стамбула не могу платить за boosty . Есть другой вариант за донатит и смотреть на ваш код ?
Здравствуйте. Другого варианта сейчас увы нет
Спасибо за контент.
Что за редактор?
VS code
А почему substring а не slice?)
Да просто)
🤩🤩🤩
1:31:00 у <img> нет "дефекта", который оставляет пропуск под ними, это стандартное поведение картинки - так и должно быть. картинка это inline элемент, фактически картинка это текст. а раз в html это текстовый элемент, значит что бы убрать снизу пропуск, достаточно опустить картинку как текст вниз строки - vertical-align: middle; всё.
Дисплеем проще исправить)
Подскажите, почему при отправке данных, у меня не приходит данные в телеграм бот, а открывается страница в браузере с php кодом?
Где-то ошиблись в коде, так догадаться сложно
Зашел на сайт но у меня не анимируются разные команды и надпись вообще никак не меняется. Что делать, кто сталкивался ?
соседи ремонт делают? звук перфоратора слышен🙃
Ага) есть такое
Добрый день! Всё замечательно, но у меня при вставке в DOM 3-го селектора возникает ошибка: "Trying to initialise Choices on element already initialised".
Значит ошибка в коде, уже инициализирован данный элемент
@@maxgraph Решил проблему через добавления уникального класса с помощью счётчика
отличная серия уроков 👌👌👌