- Видео 34
- Просмотров 347 410
CodeQuest
Россия
Добавлен 3 окт 2018
😃 Меня зовут Сергей Миков и вот уже более 17 лет я занимаюсь веб-разработкой. За это время я накопил большой багаж знаний и опыта, которым хочу поделиться:
- Верстка сайтов (HTML, CSS, сетки, редакторы, терминалы, Git)
- Препроцессоры и шаблонизаторы (Less, Sass, Stylus, Pug)
- Варианты оптимизация и сборки проектов (Gulp, WebPack)
- JavaScript и его фреймворки (React, Vue, Angular)
- PHP и его фреймворки (Laravel, Yii2) + CMS (Wordpress, ModX, Bitrix)
🚀 Являюсь основателем и автором курсов по веб-разработке codequest.ru:
- Обучение с полного нуля до уверенных специалистов
- Никаких потоков, обучайтесь в любое удобное для вас время прямо на сайте
- Постоянное пополнение новыми курсами, за которые не нужно доплачивать
👀 Также следите за мной и моими проектами в социальных сетях:
- codequest
- t.me/codequest
Надеюсь на вашу поддержку и интересные вопросы!
- Верстка сайтов (HTML, CSS, сетки, редакторы, терминалы, Git)
- Препроцессоры и шаблонизаторы (Less, Sass, Stylus, Pug)
- Варианты оптимизация и сборки проектов (Gulp, WebPack)
- JavaScript и его фреймворки (React, Vue, Angular)
- PHP и его фреймворки (Laravel, Yii2) + CMS (Wordpress, ModX, Bitrix)
🚀 Являюсь основателем и автором курсов по веб-разработке codequest.ru:
- Обучение с полного нуля до уверенных специалистов
- Никаких потоков, обучайтесь в любое удобное для вас время прямо на сайте
- Постоянное пополнение новыми курсами, за которые не нужно доплачивать
👀 Также следите за мной и моими проектами в социальных сетях:
- codequest
- t.me/codequest
Надеюсь на вашу поддержку и интересные вопросы!
#2 Верстка сайта из Figma для начинающих | Марафон по верстке с GULP, SASS, БЭМ и Pixel Perfect
Все видео и материалы марафона (закрытые трансляции + все исходники):
boosty.to/codequest/posts/77cc4a11-119d-4a64-8a4e-fccf89ba4e71?share=post_link
Подписывайся на альтернативные каналы:
- codequest
- t.me/codequest
🔥 Бонусом ты получишь готовую сборку Gulp и более 20 макетов Figma, которые пополняются каждую неделю.
Продолжаем наш марафон по верстке сайта с использованием всех современных подходов: Gulp, Sass, БЭМ и Pixel Perfect. В этом видео мы сверстаем три следующих блока нашего макета на Figma. И все это без воды и лишних разговоров, только практика, только хардкор!
0:00 - План урока
0:54 - Разметка формы поиска
3:59 - Оформление блока формы
13:11 - Разметка секции услуг
16:45 - Стили ...
boosty.to/codequest/posts/77cc4a11-119d-4a64-8a4e-fccf89ba4e71?share=post_link
Подписывайся на альтернативные каналы:
- codequest
- t.me/codequest
🔥 Бонусом ты получишь готовую сборку Gulp и более 20 макетов Figma, которые пополняются каждую неделю.
Продолжаем наш марафон по верстке сайта с использованием всех современных подходов: Gulp, Sass, БЭМ и Pixel Perfect. В этом видео мы сверстаем три следующих блока нашего макета на Figma. И все это без воды и лишних разговоров, только практика, только хардкор!
0:00 - План урока
0:54 - Разметка формы поиска
3:59 - Оформление блока формы
13:11 - Разметка секции услуг
16:45 - Стили ...
Просмотров: 3 677
Видео
#1 Верстка сайта из Figma для начинающих | Марафон по верстке с GULP, SASS, БЭМ и Pixel Perfect
Просмотров 6 тыс.2 года назад
Все видео и материалы марафона (закрытые трансляции все исходники): boosty.to/codequest/posts/77cc4a11-119d-4a64-8a4e-fccf89ba4e71?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest 🔥 Бонусом ты получишь готовую сборку Gulp и более 20 макетов Figma, которые пополняются каждую неделю. Профессиональная верстка сайта со всеми современными подходами только у ...
Git и GitHub для начинающих | Работа с GitHub Pages с нуля
Просмотров 8 тыс.2 года назад
Шпаргалка по Git: boosty.to/codequest/posts/50ffa57b-d135-445a-844c-b4ed523b3164?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest Урок по основам Git и Github для начинающих. Покажу вам базовое использование Git для нашего проекта на Gulp. Вы узнаете, как установить Git на Windows и поставить GitBash в консоль редактора VsCode. Посмотрим на основные ком...
#0 Базовая сборка Gulp для участников марафона
Просмотров 3,2 тыс.3 года назад
Исходники к видео: boosty.to/codequest/posts/954f704b-4cbe-4208-96b3-9e46654a93e4?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest Присоединяйся и ты!
Slick Slider и jQuery в 2022 | Установка через NPM и подключение к Gulp
Просмотров 8 тыс.3 года назад
Исходники к видео: boosty.to/codequest/posts/80e44095-6819-4e13-a15b-6f8679b67f21?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest Slick Slider - один из самых популярных слайдеров, написанных на jQuery. В этом видео я покажу вам, как можно подключить и использовать эту библиотеку в своей сборке Gulp. 0:00 - Вступление 0:14 - Библиотека Slick Slider 0:4...
Как добавить FAVICON для сайта в 2021 году | Иконка Apple Android Safari вручную и через Gulp
Просмотров 4,2 тыс.3 года назад
Современная сборка Gulp Starter: boosty.to/codequest/posts/0dc02831-c225-4320-9b1b-869d9ad59281?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest В этом видео я покажу вам как правильно добавлять favicon на сайт в 2021 году с учетом всех устройств: - Старых и современных браузеров - Apple iOS - Android - и т.д. Рассмотрим какие размеры и форматы иконок н...
Gulp сборка 2023 с нуля | Установка настройка и запуск - полный курс по Gulp для верстки сайтов
Просмотров 62 тыс.3 года назад
Готовая сборка Gulp Starter 2023: boosty.to/codequest/posts/0dc02831-c225-4320-9b1b-869d9ad59281?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest В этом курсе мы рассмотрим что такое Gulp и для чего он нужен, как правильно выполнить его установку и запустить на windows, какие плагины использовать для работы с HTML, CSS, JavaScript, изображениями и шрифт...
Полный гайд по NPM для новичков | Как установить, обновить удалить пакеты - настройка NPM для работы
Просмотров 41 тыс.3 года назад
Шпаргалка по командам NPM: boosty.to/codequest/posts/e434518f-a073-46aa-80d0-b4b8ae9a113a?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest Это полный гайд для начинающих о том, как использовать NPM в своей работе. Из него вы узнаете, что такое NPN и зачем он нужен верстальщику. После чего я покажу, как установить его на windows, чтобы не было ошибок. Вы...
Анимация карточки товара при наведении мыши | Практика HTML и CSS анимации для начинающих
Просмотров 10 тыс.3 года назад
Исходники к видео: boosty.to/codequest/posts/aa88ab41-2cfe-4683-b686-d9060f628c8f?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest Cегодня я покажу вам, как сделать крутую анимированную карточку товара на чистом HTML и CSS. 0:00 - Вступление 0:25 - Подготовка проекта 0:59 - HTML разметка карточки товара 2:42 - Оформление карточки 3:25 - Центрирование эл...
Адаптивная форма с анимацией на HTML, CSS и JavaScript | Практика верстки для начинающих
Просмотров 26 тыс.3 года назад
Исходники к видео: boosty.to/codequest/posts/00bb930b-f0c7-4847-acf2-184bcf5567b6?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest В этом видео я хотел бы показать вам создание крутой формы регистрации и авторизации на сайте. Напишем ее полностью с нуля, добавим анимацию перехода и адаптируем под мобильные устройства. 0:00 - Демонстрация формы 0:40 - Ба...
Практика JavaScript и CSS анимации | Крутой эффект при наведении курсора на текст
Просмотров 6 тыс.3 года назад
Исходники к видео: boosty.to/codequest/posts/48347b07-c22b-468c-a696-050cd49843a0?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest В этом уроке я покажу вам принцип создания крутых эффектов при наведении мыши на текст. Думаю, что это будет для вас хорошей практикой в работе с JavaScript, CSS-переходами и CSS-анимацией. 0:00 - Демонстрация эффекта 0:30 -...
Калькулятор на чистом JavaScript и Grid CSS с нуля | Верстка, скрипт и его безопасность
Просмотров 19 тыс.3 года назад
Исходники к видео: boosty.to/codequest/posts/8ce86733-89e1-4196-ab2a-76c7d2bb4162?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest В этом практическом уроке я хочу показать вам реализацию калькулятора на чистом JavaScript. Также в ходе работы мы будем использовать Grid CSS и немного поговорим о безопасности нашего скрипта. 0:00 - Вступление 0:29 - Настр...
#3 Пишем свой Bootstrap с нуля | Адаптивная сетка на Sass
Просмотров 2,3 тыс.3 года назад
Исходники к видео: boosty.to/codequest/posts/6a4fac65-3f86-4933-90fe-300143cfbbae?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest Адаптивность сетки Bootstrap реализована через специальные классы, которые позволяют установить элементу нужное количество колонок в каждой контрольной точке. В этом уроке мы подробнее поговорим про адаптивность, а также нап...
#2 Пишем свой Bootstrap с нуля | Классы колонок на Sass
Просмотров 2,2 тыс.3 года назад
Исходники к видео: boosty.to/codequest/posts/4b82c57b-c3d1-4ade-a92c-489aa8825b0d?share=post_link Подписывайся на альтернативные каналы: - codequest - t.me/codequest В прошлом уроке мы начали писать свою реализацию Bootstrap. И на данный момент у нас уже есть основа для сетки: - класс контейнера - ряда - и гибкой колонки Этого уже достаточно, чтобы создавать макеты с симметричными элемен...
#1 Пишем Bootstrap с нуля | Основа сетки на Sass и Flexbox
Просмотров 4 тыс.3 года назад
#1 Пишем Bootstrap с нуля | Основа сетки на Sass и Flexbox
Как стать программистом с нуля | Мой полный путь в IT
Просмотров 7833 года назад
Как стать программистом с нуля | Мой полный путь в IT
#4 Bootstrap миксины на SCSS | Построение адаптивной сетки без классов
Просмотров 6 тыс.3 года назад
#4 Bootstrap миксины на SCSS | Построение адаптивной сетки без классов
#3 Настройка сетки Bootstrap 5 под себя | Как поменять количество колонок сетки и другие переменные
Просмотров 11 тыс.3 года назад
#3 Настройка сетки Bootstrap 5 под себя | Как поменять количество колонок сетки и другие переменные
#2 Адаптивная верстка сайта на Bootstrap 5 для начинающих | Основа сетки Bootstrap
Просмотров 30 тыс.3 года назад
#2 Адаптивная верстка сайта на Bootstrap 5 для начинающих | Основа сетки Bootstrap
#1 Сетка Bootstrap 5 для начинающих | Быстрая верстка сайта при помощи колоночной сетки
Просмотров 45 тыс.3 года назад
#1 Сетка Bootstrap 5 для начинающих | Быстрая верстка сайта при помощи колоночной сетки
Какой язык программирования учить в 2021 году?
Просмотров 2,1 тыс.4 года назад
Какой язык программирования учить в 2021 году?
HTML теги I и EM | Разница, сравнение, практические примеры
Просмотров 2,6 тыс.4 года назад
HTML теги I и EM | Разница, сравнение, практические примеры
HTML теги B и STRONG | Разница, сравнение, практические примеры
Просмотров 3 тыс.4 года назад
HTML теги B и STRONG | Разница, сравнение, практические примеры
Практика Flexbox CSS для начинающих | Игральные кости на HTML и CSS
Просмотров 2,9 тыс.4 года назад
Практика Flexbox CSS для начинающих | Игральные кости на HTML и CSS
Прохождение Flexbox Froggy, все 24 уровня с пояснениями | Практика Flexbox CSS
Просмотров 19 тыс.4 года назад
Прохождение Flexbox Froggy, все 24 уровня с пояснениями | Практика Flexbox CSS
Прохождение Flexbox Defense с объяснением | Практика Flexbox CSS в формате игры
Просмотров 3,1 тыс.4 года назад
Прохождение Flexbox Defense с объяснением | Практика Flexbox CSS в формате игры
#6 Верстка сайта с нуля для начинающих | Завершаем последние блоки нашего макета
Просмотров 9644 года назад
#6 Верстка сайта с нуля для начинающих | Завершаем последние блоки нашего макета
#5 Верстка сайта с нуля для начинающих | Верстаем 4 и 5 блоки сайта на HTML и CSS
Просмотров 1,2 тыс.4 года назад
#5 Верстка сайта с нуля для начинающих | Верстаем 4 и 5 блоки сайта на HTML и CSS
#4 Верстка сайта с нуля для начинающих | Практика Flexbox CSS
Просмотров 1,9 тыс.4 года назад
#4 Верстка сайта с нуля для начинающих | Практика Flexbox CSS
#3 Верстка сайта с нуля для начинающих | Верстаем первый блок на HTML и CSS
Просмотров 4,3 тыс.4 года назад
#3 Верстка сайта с нуля для начинающих | Верстаем первый блок на HTML и CSS
Спасибо, очень круто
npm в терминале не выводит...всплывает окно - спрашивает с помощью какого приложения открыть. Что это? 100 раз удалял и переустанавливал и vsc и node js и ноут перезагружал...не помогает
Здравствуйте Сергей. У сборки для марафона внутри папки sass есть две папки _mixins и _config. Вот эти папки создается для каждого проекта отдельно? Если можно про это тоже подробно скажите. Заранее спасибо.
Урок просто супер. Как можно найти автора этого курса ?
@@alonewolf2610 добрый вечер, а зачем меня искать? Я здесь =)
зачет..,)) толковая подача.
Текущая gulp-size не поддерживает require, для данного урока, устанавливайте конкретную: npm i -D gulp-size@4.0.1
Хорошее, грамотное видео. Спасибо!
Очень познавательный урок, спасибо большое делайте больше таких уроков
Смотрел у других блогеров различные видео про верстку, но ты единственный человек который объясняет так, что я понимаю каждое твое слово ! Спасибо тебе большое !!!!!!!
Спасибо, старался =)
Большое спасибо за видос!)
9:25
Как приятно слушать, когда грамотная речь
Просто и очень чисто.
Снимаю шляпу. Маэстро браво
Даёшь адаптив!!!😁
Спасибо. Подписался.
зачем приплетать в урок другие технологии ? сделай ты по простому, с самого начала исполнил что то не понятное, смысл дальше смотреть(повторять) отпал....
Бывает
Огромное спасибо за урок, пришлось переделывать лет 6 назад собраный сборщик. Частично неактуален, тот же size и csso уже не работает через require
Единственное видео где я понял про сетки.автор канала ты красавчик, не забрасывай своей канал🎉
Круто, классно! Нет слов, одни эмоции! Доходчиво объяснил, разжевал, хорошая подача. Лайк и подписка однозначно.
Спасибо вам большое, я никак не мог понять данный урок по сеткам в платном курсе ! P. S. Ещё раз огромное вам спасибо !!!!
Дай бог тебе здоровья))) ты меня спас)
Лучший формат видео который я когда-либо смотрел по IT тематике .. Спасибо вам Автор за этот урок)
Спасибо, приятно)
Где я упустил момент, ведь функция clean удаляет все файлы с папками из public и gulp dev запускает все задачи включая опять сжатие картинок по кругу Может добавить в clean массив удаления return del([`${path.root}/css`, `${path.root}/js`]); только двух папок ???
Лучший мануал что я видела! Это ТОП из ТОПов! Смотрю запоем, не знаю что ещё сказать)
супер!
У меня проблема, есть проект. В нем уже есть package.json, мне нужно установить пакет node modules, но команда npm install не работает не в VS Code не в терминале. Помогите пожалуйста
Большое спасибо. Очень понятно и подробно.
CodeQuest благодарю Вас, - полезный и хорошо систематизированный контент. Сборка не выводит изображение в браузер. При этом в тулзах отображается загрузка и выводятся Alt=" ". К тому же отображается изображение исключительно svg-формата. Несколько раз переделал таск изображений (пути, версии, параметры...). Добавлю что не использую pug - верстаю html с @@ include -ами. Вопрос: в чем 'закралась' ошибка? p.S. В тулзах (Сеть) по файлу .png указан Статус 206 Partial Content; по файлу .svg - 304 Not Modified . P.P.S. по файлу .png указан также и Статус 304. Интересно что используя data/'file'.json где хранится путь к изображению; потом используя его в блоке html с помощью конструкции : src="@@image" выдает ошибку Error: Cannot read properties of null (reading '0'). Похоже ряд ошибок - при включении в поток .pipe(webpHtml()) Еще раз благодарю
Спасибо. Стало лучше понятно насчет npm
Огромное спасибо
А что в папке НОД модульс?
Пакеты
Благодарю за полезный контент! Очень жаль, что вам пришлось оставить контент-мейкинг.
не не не не не чувак это реально круто!!!😎😎😎
Спасибо)
Спасибо за хорошую визуализацию и подачу. Очень полезное видео.
опять архив за бабки, там ничего сакрального нету, скиньте архивы, хотя бы на гитхаб.
тебе чего три доллара жалко?
вау, спасибо большое. ещё посмотрел видео про gulp. очень понравилось.
Рад, спасибо =)
Молодец! Хорошо объясняешь! Очень пригодилось
Спасибо)
ВЫ МОЙ СПАСИТЕЛЬ, СПАСИБО ОГРОМНОЕ ❤
Очень понятно объясняешь, спасибо
Спасибо, очень полезное видео!
Надо бы еще рассмотреть проблемку: если вписать большое число цифры заходят на обочину самого калькулятора .
0 объяснений, очень сухо, для новичков будет вообще непонятно
Бывает
А есть другие подобные игры\тренажеры ?
Да, в одном из предыдущих видео я показывал игру с башнями. Еще есть огород для изучения гридов и другие)
@@CodeQuestRu Посмотрю. Спасибо !
Отлично! Спасибо!
Дословно всё переписал. При анимации формы друг на друга залазят в любом случае. Ошибку не нашёл после детального просмотра. Из этого хочется сделать вывод, что код в редакторе отличается от кода того, что видно у вас в браузер
Так что лучше на это видео время не тратить. Автор обманул
даже переписать нормально не смог? у меня все работает
Круто! Пасиба
Спасибо