Верстка сайта HTML, GULP, SASS | Персональный блог #1

В этом видео начинаем курс по верстке сайта html css используя gulp и препроцессор sass. Будем делать многостраничный сайт - персональный блог. Макет сайта нарисован в Figma.
Хороший и надежный хостинг: bit.ly/31GicoZ
Промокоды:
brainscloudstart - ускоритель сайта на месяц (при оплате месяца)
brainscloudyear - месяц хостинга в подарок (при оплате года)
brainscloudyear2x - 3 месяца хостинга в подарок (при оплате 2х лет)
Подробно по активации: bit.ly/3miCtsx
Как воспользоваться промокодом?
После регистрации аккаунта и до оплаты услуги необходимо активировать полученный от вебмастера промокод в разделе "Бонусы и промокоды".
Оплатить услугу хостинга на требуемый период.
Ссылки
-------------------------------------------
Gitbash: git-scm.com/do...
Node.js: nodejs.org/en/
Gulp: gulpjs.com/
ncu: www.npmjs.com/...
Материалы урока, Gulp 4 сборка, Дизайн в Figma: bit.ly/2UvOkYy
Главы видео:
00:00:00 - 00:00:51 - Вступление
00:00:51 - Подготовительные работы
00:03:47 - Разбор gulpfile.js
00:10:39 - Создание проекта
00:17:00 - Создание структуры сайта
О проекте
-------------------------------------------
Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.
На сайте проекта brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.
Соц. сети
-------------------------------------------
Мой ВК - odimaz
Группа BC - brainsc...
Мой Instagram: / dmitryvalak
#верстка #html #css #sass #gulp

[@BrainsCloud]

Если сборка выдает ошибку "Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: ...", то замените плагин gulp-imagemin на gulp-image - www.npmjs.com/package/gulp-image

[@havoc5246]

СПАСИБО!! 3 дня мучался, на 2 разных системах, не мог понять в чем ошибка. 17 лет. Учусь на web разработчика, хочу заранее научиться верстать сайты, а то только к лету будем HTML учить.

[@MelkoR4111]

напиши как правильно прописывать gulp-image

[@Grader2be]

ух я замучился дебажить)) много чего обновилось) это не единственная проблема)) но в итоге запустил!

[@fffffristaylo]

Sass тоже по другому,вроде как

[@user-xh9jl7bn6u]

после этого ошибка в Error in plugin "gulp-sass" ((

[@KanalReal]

Еще не разобрался с одностраничниками, а тут уже многостраничники) но нужно зайти и поставить лайк!

[@centuryfox7965]

настолько грамотная верстка, профессионал. Я до сих пор в шоке)

[@LuckyBobstyle]

Буду смотреть , спасибо Вам) Если ещё в этом курсе будет js , допустим логин окно , регистрация , табы,работа с локалсторедж. Много хочу, но думаю это будет очень полезно)

[@user-gl8sg6ui6y]

В который раз убеждаюсь, что ваши уроки - это кладезь полезно проведенного времени!)

[@igr3943]

Уроки и подача - супер!! Вообще тащусь от того, какой ты подход используешь к реализации проекта! Моё почтение!

[@sashachichvarkin2109]

Ну так поцелуйтесь еще

[@Dani-pk2wp]

Новая верстка? Боже как я ждал! Лайк не глядя

[@alexwild5605]

Спасибо за данную серию уроков с прикрепленными материалами! Ты один из лучших в рунете! Успехов тебе и с 100к. подписчикам тебя!!!!

[@user-zv8du4gl5e]

не подскажете как разобрались с проблемой брекетса? Его больше не поддерживает Adobe в связи с чем на первой строке кода js, сразу вылетает ошибка. Попытался перейти на VS - gulp все равно пишет ERR! при вводе команды npm i. ПОМОГИТЕЕЕЕЕ!

[@Anahitacode]

Ура, Новый плейлист с сайтом. Спасибо Вам Дмитрий.

[@user-tv6gg9tu4b]

Ураааа, топовый контент на ютубе подъехал, как же я ждааал, огромная благодарность, Дмитрий!

[@simple-mvilocer7724]

Ура, наконец-то! Давно ждал с gulp и saas

[@adamkayne2621]

Давайте потом его разместим на CMS какой-нибудь, например, October CMS или Wordpress

[@user-cn8hr8li2x]

++

[@ruslankozik1020]

Поддерживаю идею с October. Начал проходить плейлист на канале, очень интересная крутая cms. Wordpress уже устаревает

[@user-to6xp3nt5g]

А мб с нуля писать код

[@igorkurbanov4855]

я уже попробывал. вышло так себе. где-то накасячил со стилями либо reset css тупо блочит любые изменения шрифта/стиля , поступающие из Октобера. не знаю почему.

[@user-wp9qv2zx9m]

Поддерживаю! Я за October CMS!

[@prikuplay]

Я: Учусь верстать простые сайты Дмитрий Валак: НА ТЕБЕ ЖОСТИК! :)

[@alexandr6055]

Благодарю вас! Это наверное пятое видео по сборке галп, которое я смотрю. Ваш шаблон это то что нужно новичку. Все просто и ясно. Я понимаю каждую строчку и соответственно могу модифицировать ее под себя когда скиллзы подтяну)) Огромное спасибо! Лучший!

[@twdshaneeditz]

Разве тут есть шаблон?

[@gubatenkov]

Дима твои видосы бесценны! а музыка просто космос. смотрю твои видео не только чтобы подчерпнуть знаний, а из за атмосферы в том числе)

[@BrainsCloud]

Наберем сегодня 1000 лайков? Тогда сразу выложу второе видео Вторая часть: kzbin.info/www/bejne/fZO8pXeXlJh0fc0

[@romannovak375]

@@melissasofie7681 в описании макет и галп сборка

[@user-kg6fz5tz2b]

А если вдруг не наберём?)) Когда видео новое ждать?) Примерно!

[@murrmax1466]

конечно!

[@user-vq9kf8xz6x]

@@user-kg6fz5tz2b наверное, когда наберем)

[@Iamizart]

Без проблем 1к))

[@unknown.6914]

Отличный урок Дмитрий, спасибо за ваш труд!

[@overlord2k4]

Ура, многостраничный сайт, спасибо вам Дмитрий

[@user-hf6lo8jh9n]

Очень хороший канал, помню с него на практике начинал осваивать верстку, заполнять дыры в знаниях. Спасибо за уроки!

[@user-hi8rw9kk9v]

Как же ты крут! Нет лучше курса, чем практика! Здесь чистая выжимка - 100% практика!!!!

[@user-kn3hp9qc6h]

о, годнота подъехала) Будет чем заниматься сегодня.

[@user-co7nl8pf4p]

Я пока лох в IT. Что такое годнота?

[@user-kn3hp9qc6h]

@@user-co7nl8pf4p хороший и качественный контент... основы GULP и SASS, это просто необходимость для верстальщика

[@user-co7nl8pf4p]

@@user-kn3hp9qc6h аааа, а я думал говнота 😆. И за Gulp и sass спасибо!

[@user-yk5vi8yf8o]

То что нужно, спасибо! Давно хотел увидеть в вашем исполнении что-то посложнее лендинга. Лайк

[@Code.bless_you]

Дорогой Дмитрий, большое спасибо за такой шикарный контент.

[@Markjocker]

Спасибо, только учусь вёрстке, и учусь только у тебя, грамотно объясняешь. Спасибо 🙏🏻

[@shittywizzard5727]

Дмитрий бесспорно великолепен, но знания рекомендуется черпать из разных источников т.к. некоторые субъективные моменты вы просто почерпнете, вместо того чтобы сформировать свое понимание (просто совет, тапками не кидаться) :)

[@oz669]

@@shittywizzard5727 Согласен полностью.

[@thelifeofprogrammer133]

Очень полезное видео, не могу сказать что для начинающих, но для тех кто застрял на вёрстке одностраничных лендингов самое то!

[@user-kd1to9jg9c]

Даже смотреть ещё не начал, а лайк с ходу поставил

[@sergsergey4251]

Успехов с преодолением 100к! Спасибо за полезное видео! Верстка сайта html css gulp sass

[@igormetlyuk4465]

Ох, лучший контент на ютубе подъехал. Очередное тебе спасибо за видео, у тебя прекрасная подача.

[@user-lw5gh7ft9b]

У Вас всегда очень понятно и познавательно. Спасибо!

[@vitalyzeleniuk8274]

Спасибо за курс. Gulp у меня не хотел работать, потому что всё установлено на диске с , а я пытался запустить проект на диске d. Как только перенёс каталог с проектом на тот же диск где глобально устанавливал всё для сборки, всё заработало. Правда в конце ещё в консоли npm audit fix попросил.

[@shifrl771]

Дима курс просто супер, очень понравилось, после окончание размести пж на какой-нибудь CMS! Ваще 10000 лайков будет.!

[@davidkoks2400]

Лучше уж меньше лайков, смотри работа забьётся всякими верстальщиками и фронтендерами, это все-таки конкуренция

[@denvudd4492]

Сложновато, если впервые вообще видишь что из себя представляет гальп и sass. Но даже с первого взгляда понятно, что все это намного упрощает работу. Спасибо за видео!

[@user-ue5mg2zc6x]

Актуальная тема. Как раз хотел обучиться sass. Конечно лайк и жду продолжения этой темы. 👍 Respect

[@splash8701]

Спасибо огромное!) Мне 13 лет будет что делать сегодня!;) Удачи в продвижении канала!;)

[@user-ho9fn3lp8l]

Ух ты! Спасибо тебе огромное за проделанную работу. Будет чем заняться и по тренироваться

[@rufatbilalov3268]

Поздравляю. Уже 104 000 подписчиков !!! Ура ! Ура ! Ура !

[@andryushque]

а вот и топ-контент подъехал! огромное спасибо за gulp, мне он как раз сейчас и нужен

[@shittywizzard5727]

Очень оригинальный фон рабочего стола))) Урок, как всегда, на высоте!

[@user-tz8xo5wj1o]

Долгожданное видео!

[@vitka0]

Дмитрий, спасибо вам за курс!

[@alexfront6688]

Огромное спасибо за курс, то, что нужно! Быстро и без воды, только правда и не для начинающих!!

[@user-zm4il1fh6m]

Как по мне, так это наилучший способ обучения. Спасибо!

[@evgeniysurma8116]

подача материала просто топ! спасибо автору)

[@user-vx3pc7qm6t]

Спасибо за материал) Весьма интересно! Страшно подумать сколько времени у меня уйдет всему этому научиться с применением в практике))

[@TeeBKECH]

Отличный контент, очень легко воспринимается под приятную музыку. Выкладывай почаще ролики)

[@user-xd4mv4mk4c]

однозначно, это будет стоящая вещь)) и даже учитывая то, что я уже сам сверстал парочку сайтов при помощи галпа, думаю, посмотрю и почерпну полезные приемы

[@user-lm9ee1gn5p]

Спасибо, Вам за ваши труды, очень приятно Вас слушать, как для новичка в этой стезе. P.s.было бы здорово увидеть от Вас серию видео по практике в js

[@user-fx3ds2nb9l]

Brains Clound желаю тебе 5 миллионов подписчиков

[@user-ds1co1oe9v]

Спасибо вам за вашу работу. Для меня ваш метод обучения очень подходит.

[@jackdoe1312]

Всем удачной верстки, друзья. Я сделаю через Webpack, ибо надо. Дима, тебе спасибо за уроки, бро)

[@melissasofie7681]

А макет где брать?

[@jackdoe1312]

@@melissasofie7681 в описании к видео, там подписано.

[@murrmax1466]

спасибо большое за видос, Дмитрий! Вы - лучший! спасибо вам! :)

[@user-bv1od4jg5d]

Блин, самая чёткая верстка, что я видел, автору огромное спасибо, если не трудно, я бы попросил автора, выложить видео, с настройкой gulp...

[@fffffristaylo]

Хороший контент. Качественный,въедливый.Молодчина,Дмитрий.

[@user-ml9lh7zn7d]

Годно очень, подписался. Спасибо ютубу за рекомендацию и автору конечно за контент

[@VlaRin]

Комментарии нужны, комментарии важны. Спасибо за урок!

[@Artem_larch]

Комментарии продвигают видос, по этому и важны : )

[@KrZn104]

Отличная серия видеоуроков. С огромной радостью посмотрю всё до конца! По части gulp, очень не хватает таска для работы со шрифтами. А именно, скачал шрифт например, таск переконвертировал этот шрифт в нужные форматы .eot, woff, woff2 и записал его в какой-нибудь файл sass. Затем в теге body сразу можно было прописать этот шрифт и начертание.

[@shps.online9830]

очень понравилась галп сборочка) Спасибо за работу!)

[@Snegurjan]

Как же вовремя бро,спасибо)

[@user-kp4fn7os5n]

Спасибо за видос,, удачи всем, желаю довести все до конца.

[@Den_camrad]

Сразу лайк!!! Тема которая меня сейчас интересует!

[@pt_anthony]

Мне кажется, что для сайдбара и контейнера красивее было бы flex-grow использовать. Как-то мне calc() не нравится для этих целей. А в целом интересно, ждём продолжения.

[@alesmazur7640]

Давно смотрю твой канал. Очень нравится подача. ... Жду еще курсы по React от тебя. Успехов!

[@advokats086]

МАЭСТРО.... СПАСИБО... !!! МЫ УЧИМСЯ.... !!!

[@olegger7436]

очень бесит этот галп, какие сборки не пробуешь, всегда и везде ошибки вылетают и без бубна фиг что получиться

[@_mcrey_2906]

Эти ошибки легко исправляются

[@kerfuflekhjk2941]

@@_mcrey_2906 как помогите пожалуйста у меня выходит такая ошибка

[@kerfuflekhjk2941]

@@_mcrey_2906 Error [ERR_REQUIRE_ESM]: require() of ES Module C:\personal-blog ode_modules\gulp-autoprefixer\index.js from C:\personal-blog\gulpfile.js not supported. Instead change the require of index.js in C:\personal-blog\gulpfile.js to a dynamic import() which is available in all CommonJS modules. at Object. (C:\personal-blog\gulpfile.js:5:22) { code: 'ERR_REQUIRE_ESM' } не знаю что делать

[@salamaleykum989]

Добрый. Очень полезно ! Буду в Вас учиться!

[@user-zb9qy9yc4b]

Какая ж приятная обстановка ;-)

[@romanzaritskyi303]

Пожалуйста, делай то что делаешь. Спасибо тебе большое !!!

[@akhmad_goytinski]

Спасибо Дмитрий! Очень полезное видео!!!

[@SterioS]

Ждём продолжения 👍

[@tilegenbakitov9243]

Большое спасибо тебе ) очень интересно по началу трудно очень много файлов думаю привыкну

[@shps.online9830]

Досмотрел видос до конца, оказалось очень много любопытных моментов. Подчеркнул для себя интересное в создании структуры сайта и файлов в целом. Спасибо) погнал дальше смотреть)) лайк и подписка соответственно))

[@peterparker3794]

Спасибо что обновляеете сборку, уже год пользуюсь. Чет в последнее время плагин image-min как-то странно работает, без него даже лучше :)

[@ulvicompaz]

Очень хороший канал!!!

[@sergienkoandrey3855]

Столкнулся с проблемой что у пакета gulp-sass какие-то траблы с последней верссией node 15.3.0. Решил след образом: для тех у кого стоит версия Node js выше 14.14.1. Вам необходимо, после момента npm i ( 12:15 ), доустановить пакет npm-dart-sass. Зайти с помощью текстового редактора в gulpFile.js и изменить подключение const sass = require("gulp-sass") на const sass = require("gulp-dart-sass").

[@Spencerrrr]

Старый друг, возвращаюсь к тебе. Красава!

[@user-te1ut5ev8w]

на 22:20 очень интересная информация про относительный размер шрифта, благодарю!

[@darkstyle7000]

Однозначно лайк не глядя)

[@workbis2316]

Контент супер! Спасибо большое. Было бы неплохо сделать видео по регистрации, комментарием и т.д. на PHP, уверен многим зайдет)

[@satanist70]

Привет Дим, спасибо большое

[@strikerworld7896]

Лайк подписка колокольчик удачи спасибо, что мотивируете и учите!

[@user-cr7cj8bj3g]

Спасибо, потренируем мозги.

[@mister_robot01]

Спасибо за ваш труд! Было бы круто, еслиб вы еще посадили его на October CMS. Получился бы шикарный курс))

[@user-oe2su3kg2k]

В таске serve() нужно убрать "./", в таске js() убрать query: { presets: ['@babel/preset-env']}, в таске images() убрать работу с svg, использовать только старые версии утилит, с новыми вообще все надо переписывать, там импорт как то по другому идет, тогда будет работать. Хотя может есть еще какой то более оптимальный вариант

[@thekravz]

Если у кого-то будут проблемы с запуском гальпа, попробуйте сделать такое "npm install -g windows-build-tools", мне помогло, а то мучался с этой дичью. Стаковерфлоу форевер

[@user-oo9ly4hj3u]

Спасибо, помогло!

[@Shaurma95]

Сюда же добавлю, если после $ gulp выкидывает errno: -4058, пропишите "npm rebuild node-sass", а потом уже "gulp"

[@Workandu]

У меня установка сутки и так она и не завершилась

[@user-td1wn3wt3z]

За такую годноту и лайк поставить не жалко 👍

[@redempshn6994]

из-за карантина прошлось работать на авг работе и перестать учиться (хватало меня только на кс) время возвращаться в строй спасибо за видео!

[@W_Viktor]

Спасибо за качественный контент))

[@blueprints3311]

Спасибо вам. Ждем новых видео!

[@free_cool8207]

Спасибо! Попробую сверстать макет вместе с вами и обучиться работе с gulp и scss

[@baton4iki]

Вахх,спасибо за gulp

[@Akame320]

Лайк автоматом

[@manik7777]

Доброй ночи Дмитрий! Я учусь вёрстке примерно месяц, по 4 - 10 часов в день. Учусь с нуля и самостоятельно. Думаю, что порядком неплохо знаю HTML и CSS. Пытаюсь по чуть-чуть верстать по шаблонам Figm'ы. Конечно, есть трудности! Надо подучиться... Очень много разной информации в интернете, что учить - сбивают с пути. Посмотрел Ваше видео и обалдел😳 Я тоже так хочу! Я вроде понимаю Ваши действия, но моих знаний слишком мало, чтобы повторить такое. Не могли бы Вы мне подсказать, "в какую сторону мне смотреть", то есть, что учить дальше? Потому что, то что делаете Вы - вдохновляет таких как я🙂 Заранее СПАСИБО!🤝 От души!

[@user-vn1ho3gu5b]

Супер!!!!!!Здорово!!!!!!!

[@frozencustard254]

Урааааааааааааа верстка!!!!😊👌

[@peterparker3794]

Уррра!

[@rvitalia1]

Спасибо вам огромное за ваши труды. Сегодня начал смотреть данный курс, но к сожалению, материалы урока больше недоступны. Еще раз огромное вам спасибо...

[@BrainsCloud]

материалы доступны

[@user-ir9vs8kz3f]

Дмитрий, спасибо! +100500 Вам к карме.

[@fandom5145]

У кого мак, в терминале пишите cd потом папку с проектом personal-blog просто копируете в терминал должно получиться так cd /Users/Ваше имя пользователя/Documents/personal-blog нажимаем а дальше как на видосе прописываете, надеюсь кому то нибудь пригодится P.s полчаса мучился но оно того стоило)

[@user-yk6kg1lu6n]

[@timurgilfanov9387]

Спасибо большое много нового узнал))