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

Подписаться 177 тыс.

Просмотров 20 тыс.

50% 1

В этом видео продолжаем верстать сайт на html css используя gulp и препроцессор sass. Делаем многостраничный сайт - персональный блог. Макет сайта нарисован в Figma.
Ссылки
-------------------------------------------
Материалы урока: bit.ly/3haLKBT
О проекте
-------------------------------------------
Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.
На сайте проекта brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.
Соц. сети
-------------------------------------------
Мой ВК - odimaz
Группа BC - brainscloud
Мой Instagram: / dmitryvalak
#верстка #html #css #sass #gulp

Опубликовано:

22 дек 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 90

@jackdoe1312 3 года назад

Ставь лайк этому комменту, если хочешь, чтобы Дима делал уроки по практическому JS

@juljulik3768 3 года назад

Невероятно рада что обучение верстке начала именно с Вами! Вы наверное и не представляете как преподносят материал другие русскоязычные блогеры по данной тематике. Теперь если я захожу на любой курс по верстке, сразу замечаю не самые лучшие решения преподавателей, потому что у Вас научилась правильно структурировать и оптимизировать процесс. Спасибо огромное! Надеюсь среди платных курсов на вашей платформе появится что-нибудь новенькое, для "не совсем" новичков, может по посадке на CMS, например :)

@goldensauce9593 3 года назад

Очень хотелось бы видео о том как посадить этот сайт на WordPress

@hello-filmmaker 3 года назад

Подсоединяюсь к ребятам, на вордпрес или октябр. Очень интересно было бы посмотреть. Спасибо

@Mazahaka007 3 года назад

Ставьте pinegrow. Посадить на нем верстку можно в полуавтоматическом режиме.

@elenaga4585 3 года назад

по поводу подключения сторонних плагинов хотелось бы чтобы Вы показали куда их подключить.

@galinafr1142 3 года назад

Wordpress

@kamsikamsa 3 года назад

октобер!

@dmitryh5818 3 года назад

Я думал что продолжение никогда не выйдет. Продолжай и дальше делать этот курс и не останавливайся, пожалуйста) Не нашел никого кто бы так понятно объяснял эту тему лучше тебя) Удачи!

@user-ep6ou7yt4o 3 года назад

Не тяни с этим курсом Мы ждем следующее видео! Круто делаешь

@Anahitacode 3 года назад

Ура! Мы почти на финише! Крутые каникулы на НГ! Всех с праздниками. Всем респект, кто идет до конца! Крутейший сайт. Спасибо, Дмитрий!

@mev08 3 года назад

Наконец-то. Заждался уже. Спасибо огромное!

@user-ge6xe9hh9m 3 года назад

Дождалась!!!! Спасибо большущее, Дмитрий! Сразу лайк и погружаюсь в просмотр!

@DerAleksey 2 года назад

ну вот дошел до адаптирования сайта и тут ты так намудрил, что разбираться заного =D

@shps.online9830 3 года назад

Уфф, то что нужно после праздников)) Спасибо!

@user-ho9fn3lp8l 3 года назад

Спасибо тебе за твою работу! С наступающим тебя)

@user-lp5zg3xv5r 3 года назад

Спасибо за уроки, насыщенные сложными, интересными конструкциями

@spaceresident6160 3 года назад

Спасибо. Отличный урок. Много нового для себя узнал в CSS.

@user-wz6wu3px9g 3 года назад

Большое спасибо Дмитрий!

@o.kiryukhin 3 года назад

Ухх, я ещё маленький, придется с первой серии смотреть.

@anzorv1 2 года назад

Очень интересные видео. Желаю удачи!

@skibasyg1557 3 года назад

Вот и долгожданные 100к подписчиков) Молодец!!!)

@stage_Ua 3 года назад

Ура! Новая серия)

@liza_sashina 3 года назад

Не могла несколько дней вернуться к дальнейшему просмотру из-за возникших проблем с imagemin. Решив проблему я снова в строю и продолжаю просмотр! Очередное спасибо за Ваш труд!

@liza_sashina 2 года назад

@Adil Maratov у меня была проблема с установкой из-за местоположения. Пришлось устанавливать зеркало и грузить пакеты через него. Что пишет консоль в ошибке?

@pogios 3 года назад

Я прям заждался! Круто!

@peterparker3794 3 года назад

Урра, дождались ! :)

@user-wo6mm7cm5n 3 года назад

Ура! так ждала!!!! Спасибо

@KeltaGaming77173 3 года назад

Прекрасное видео, ура!:)

@ilnurkhabibullin705 3 года назад

Спасибо тебе!

@m1akarov442 2 года назад

Спасибо за адаптацию под мобильную и планшетную версию :) Все понятно . Получилось . Перехожу на следующий урок. Like it :D

@user-di4zt3br5m 3 года назад

Заждались!!!

@vladimirsvodjanojs8158 2 года назад

Спасибо!

@kaktus-sadovnik 3 года назад

О, наконец))

@vladkoval4243 3 года назад

Спасибо)

@pandashu571 3 года назад

Ураааа!

@kaktus-sadovnik 3 года назад

Это магия)

@dudai525 3 года назад

ставлю класс еще до просмотра, за то что ты не забил на сайт

@Alexus1504 3 года назад

Брейкпоинты и в миксины!!! Круто!

@PiterProduction 11 месяцев назад

Спасибо

@izilimoniwee9530 3 года назад

Ваауу, дякую за це круте відео))

@m1akarov442 2 года назад

Продолжаем делать Ваш сайт =)

@goldensauce9593 3 года назад

Ты крут

@peterparker3794 3 года назад

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

@peterparker3794 2 года назад

@I l y a У Димы опыт 7-8 лет, а я всего лишь учусь у него. Думаю до него еще далеко :)

@alexvizor1147 3 года назад

Дмитрий, а как подключить стороннюю библиотеку к вашей сборке? Пробовал с jq. Закинул её к исходникам в папку js. Но в консоли пишет что "$ не найдена"

@yans8930 3 года назад

Сам не так давно начал активно использовать препроцессоры и Галп для проектов. Что делаешь такие видосики-красавчик)) Я вот с дизайнами пока слабоват (чтоб самому придумывать). Может подскажешь какой нибудь сток, где продают дизайны? Буду признателен))

@WhiteBear141981 3 года назад

Дмитрий, спасибо большое! Подскажите, пожалуйста: 1.Что за плагин у Вас в Chrome делает фон панели разработчика темным и отображает IPad/IPhone, когда в выбираете пункт адаптива Ipad/IPhone ? 2. У меня в меню burger полоска before выглядит толще остальных. Код аналогичен Вашему. Сталкиваюсь с этой проблемой не в первые. Как это поправить?

@user-kz5go4mp8w 3 года назад

Спасибо за уроки) Так и не понял, какой плюс использования rem?)

@andreych4104 3 года назад

Спасибо за классные видео. Подскажи, пожалуйста, какие на твой взгляд требования к ноутбуку, чтобы комфортно заниматься web-дизайном ? Размер оперативки, экран, требования к видеокарте и тд. На какой модели работаешь ты? Что думаешь про так называемые "игровые" ноутбуки. В полной ли мере они удовлетворят потребностям web-разработчика?

@nikitalarionov-edmin3163 3 года назад

SSD диск, IPS матрица и хотя бы 8 гигов оперативки (сейчас уже стандарт). Видеокарту необязательно иметь игровую.

@igorkaftan8552 2 года назад

Спасибо за курс. Меню в сайд баре остаётся при переходе на десктопную версию. Как это можно исправить ? Два раза пересмотрел этот момент вроде код идентичный. или я всё таки, что то пропустил? Зарание спасибо.

@darkderl661 3 года назад

Для логики пайтон используете????

@Beast8833 3 года назад

как натягивать на октобер цмс будешь, так посмотрю...

@Azerchay123 3 года назад

А не большой ли файл css получился для проекта, там же медиа не группируются вместе. Что думаете по этому поводу?

@mr.swhite8941 3 года назад

будет новогодняя распродажа?

@user-xb1lj8zu2s 3 года назад

Дима, привет! Подскажи, насколько сложно создать сайт на подобии bosslike? Он сделан на каком то движке?

@hilaremanatis4195 3 года назад

На Yii

@DerAleksey 2 года назад

блин, gulp выдает ошибку при вычетах высоты sidebar 100vh-4rem, думаю разберусь позже...

@fffffristaylo 2 года назад

Дмитрий,просьба,что за музыка играет? Хотелось скачать,кое-что похоже на Дельфина и Depeshe Mode

@BrainsCloud 2 года назад

Названий не знаю, все из фонотеки ютуба

@maximtereshko7418 3 года назад

Привет. Не пользуешься случайно автопрефиксером? У меня w3c бывает ругается на свойства, иногда очень даже много их, которые получается после его работы. Не было такого?

@maximtereshko7418 3 года назад

Частенько бывает, в css свойствах гридов и достаточно свежих свойствах, например backdrop-filter

@maximtereshko7418 3 года назад

@Дмитрий Самарин он самый

@dim3143 3 года назад

51:36 А зачем ты класс руками печатаешь?) там же в dev tools у тебя вкладка style открыта с кнопками :hov .cls вот в последней можно как раз доступные классы переключать, которые браузер сам из верстки подхватывает)

@user-gi6ul9zx3w 2 года назад

Спасибо. Или у меня глаза уже слезятся всматриваться в код или на этом видео картинка хуже на 1080HD?

@yuriikovalchuk564 3 года назад

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

@nekruzjm4006 3 года назад

Псевдоэлемент ::after тебе в помощь

@yuriikovalchuk564 3 года назад

@@nekruzjm4006 так афтером я сделал подчеркивание, которое появляется при наводе на текст. эта линия подчеркивания сразу под текстом, я же хочу ее сдвинуть вниз на пару десятков пикселей. как это сделать?

@nekruzjm4006 3 года назад

Банальный bottom: -20px; к примеру

@damirkyunkrikov9489 3 года назад

жеский))))

@redking0116 3 года назад

а как сделать чтобы на мобилке также показывалось устройство

@user-wo6mm7cm5n 3 года назад

У меня контейнер с постами уже на 1500 рх начинает залазить под сайдбар. Я что то упустила?

@user-hb6wg5ox2y 3 года назад

Из за долгого отсутствия видео мой Гале выдал ошибку и перестал работать я перезапустил гит баш и теперь не знаю как восстановить работу, можешь записать пожалуйста короткий ролик как это сделать или нужно просто заного его устанавливать?

@Anahitacode 3 года назад

У меня gulp вот такую ошибку выдает [11:51:11] gulp-notify: [SCSS Error] Error: src\assets\scss\style.scss Error: File to import not found or unreadable: mixins. on line 2 of src/assets/scss/style.scss >> @import "mixins"; ^ как будто не видит подключенного mixins