![MaxGraph - cайты как страсть](/img/default-banner.jpg)
- Видео 377
- Просмотров 2 710 539
MaxGraph - cайты как страсть
Россия
Добавлен 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
Полезные ссылки:
🤌 Макеты для верстк...
Макет: 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
Полезные ссылки:
🤌 Макеты для верстк...
Просмотров: 1 401
Видео
Адаптивная верстка сайта с нуля с пояснениями. Макет Avion. Часть 4. Страницы Product и Cart
Просмотров 96728 дней назад
Привет. Продолжаем марафон верстки небольшого многостраничного сайта - интернет-магазина. Верстать будем на чистом 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
Просмотров 731Месяц назад
Привет. Продолжаем марафон верстки небольшого многостраничного сайта - интернет-магазина. Верстать будем на чистом 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
Просмотров 981Месяц назад
Привет. Продолжаем марафон верстки небольшого многостраничного сайта - интернет-магазина. Верстать будем на чистом 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. Главная страница
Просмотров 4,8 тыс.Месяц назад
Привет. Этим видео начинаем новый марафон верстки небольшого многостраничного сайта - интернет-магазина. Верстать будем на чистом 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 тыс.4 месяца назад
В этом видео посмотрим плагин, позволяющий перемещать элементы на странице с помощью 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 тыс.5 месяцев назад
JS-решения №26. Создаем свой плагин видеоплеера
Адаптивная верстка сайта с нуля с пояснениями. Макет Photography. Часть 1. Верстка
Просмотров 10 тыс.7 месяцев назад
Адаптивная верстка сайта с нуля с пояснениями. Макет Photography. Часть 1. Верстка
UI-компоненты №19. Блок характеристик в интернет-магазинах
Просмотров 2,2 тыс.8 месяцев назад
UI-компоненты №19. Блок характеристик в интернет-магазинах
№6. Создание Яндекс.карты на сайте. Фильтрация меток на карте
Просмотров 3,5 тыс.8 месяцев назад
№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 тыс.11 месяцев назад
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,3 тыс.Год назад
Разбор тега picture. Для чего нужен, синтаксис, примеры
Будут ли яндекс карты на 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 Решил проблему через добавления уникального класса с помощью счётчика
отличная серия уроков 👌👌👌
Огромное спасибо!
Отдельное спасибо за объяснение js реализации счётчика. Не знал как еого делать правильно
Спасибо за ваш труд! Очень много почерпнул для себя из ваших уроков)
столько полезных хаков спасибо. вместе с вёрсткой изучаю английский язык и кажется product читается как продакт или праадакт
Да привычка уже называть определённые слова)
отлично! ещё давай!
Спасибо вам, очень крутой урок! Просто кайфую!
Спасисбо большое за видео, Максим! свой путь во фронте начинал с курсов на Skillbox и ты там был ментором) сейчас я работаю фронтом на реакте, поступила задача сверстать экраны для email и тут твоё видео! Видео очень помогло и даже макет почти совпал) Спасибо