Верстка сайта HTML, GULP, SASS | Персональный блог #3
HTML-код
- Опубликовано: 17 ноя 2020
- В этом видео продолжаем верстать сайт на html css используя gulp и препроцессор sass. Делаем многостраничный сайт - персональный блог. Макет сайта нарисован в Figma.
Ссылки
-------------------------------------------
Материалы урока: bit.ly/2HdZcXV
О проекте
-------------------------------------------
Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.
На сайте проекта brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.
Соц. сети
-------------------------------------------
Мой ВК - odimaz
Группа BC - brainscloud
Мой Instagram: / dmitryvalak
#верстка #html #css #sass #gulp
Полезное видео!
Лучший контент по верстке.
Так хорошо верстаешь и говоришь что невозможно оторваться, смотрю уже третий урок на одном дыхании. Жду новые ролик! Спасибо!
С таким контентом, 100 тысяч подписчиков, не за горами! Спасибо большое за Ваше время
Спасибо, Дмитрий! HTML и CSS код, которые получаются в процессе верстки - будут мне отличным конспектом)
Теперь ясно как делать многоступенчатое меню навигации - все просто, четко и понятно 👍💪
Отдельное спасибо за комментарии по названиям классов БЭМ, неБЭМ - потому что уходя в крайность соответствия БЭМ можно и ступор поймать :)))
Это наверное самые лучшие уроки по современной верстке!!!
С нетерпением ждем следующую часть!!!
поздравляю с заслуженными уже не 100к, а 160к подписчиками. Контент огонь, остается надеяться что я всё это выучу
Большой респект, Дмитрий за уроки !
Как только я научусь и что то с этого заработаю,я скуплю все что у тебя есть на сайте просто из благодарности.
Это самый лучший контент по верстке. Спасибо вам
Очень полезная информация, спасибо большое!!!
№1 . Лучшие уроки по верстке в паутине!
Лучший контент верстки)
Топ! Смотрю и улыбаюсь!;) Удачи!:)
😎
100 тысяч должно получиться. очень приято слушать, и очень годные вещи объясняются. много чего пересмотрел и ты пока в топе)
Очень круто!Спасибо !
Сразу лайк и к просмотру!
Хорошо объясняете!!!!!!! Здорово!!
Лучший, просто лучший
Спасибо за уроки
Отлично! Спасибо!
Спасибо, Вам за ваши труды, очень приятно Вас слушать, как для новичка в этой стезе.
P.s.было бы здорово увидеть от Вас серию видео по практике в js
Спасибо очень помогает!
0 просмотров 4 лайка = классика ютуба))
P.S Успел до 100к просмотров)
СПАСИБО БРО ТЫ ЛУЧШИЙ
Кайфовые уроки
Урраа!
Спасибо🎉
Спасибо большое за уроки если бы не ты то я бы вообще ничего не умел верстать я сейчас сам делаю проекты)))
Спасибо!
Блин, как всю эту информацию можно уместить в голове.)
С таким контентом, должно быть 1000000 подписчиков, но к сожалению миллион подписчиков у людей, которые делают бессмысленные ролики в тиктоке 🥲
Спасибо!!!!!!!!!!
Спасибо)
супер
спасибо за хороший контент, отличный макет для разбора вертски, пару вопросов:
1. Почему вы используете вместо такое оформление
nav__list,
nav__item
вместо
nav {
&__list {}
&__item{}
}?
И в чем преимущество писать для transition именно то свойство, которое используется, вместо transition: all
спасибо, действительно интересно, может я не так что-то привык делать=)
Фак это какая цветопередача у моника должна быть чтобы эти тени видеть, у меня их практически нет)
Кайфую от музыки
Господа, давайте дожмем до 100 000! Дмитрий говорит об этом в каждом ролике, значит важно. Я своим скинула, обещали подписаться, правда верстать и учиться будет только 1. Зато подписчики увеличатся. Ну правда, 4500 просмотров и только 500 лайков.
Пиксель перфект тоже считаю смешным, +- 2-3 пикселя ничего не порешают.
Дим, спасибо! А ещё видео из твоих реальных заказов будут? Тоже интересный формат!
когда-нибудь будет
Кстати, сможешь сделать потом сделать ролики о методологии БЭМ и отличие css от sass ?
Как то так :)
Спасибо большое за данные видео, гору полезной информации для себя уяснил. Но вот досада, не могу я подружиться с "rem", для меня привычнее "px", хотя и понимаю, что во многих ситуациях для меня же проще использовать "rem". Надеюсь за данный курс привыкну. Еще раз спасибо!
Лайк автоматом! Дмитрий планируешь ли уроки по php?
пока нет
@@BrainsCloud а по js?)
В .search у нас паддинг 1.2rem, если в .nav сделать 1.2rem со стандартным line-height, получится пиксель пёрфект)
*Вдруг кто то переживает за пиксели
Приветствую! Урок супер, особенно помогло разобраться галпом и принципом его работы! подскажи как замедлить появление sub-nav?
уу я первый!
Так как я очень часто ошибаюсь в html, путаюсь в закрывающихся тегах, решил сделать этот проект через Pug, посмотрел пару вводных, это круто)
👍👍👍👍👍👍👍
👍Топ Контент👍
👍👍👍👍👍👍👍
Я раньше использовал inline-block, теперь flex. Только в чем разница?
Привет:)
Будешь сажать его на cms и настраивать?
возможно
Здорова Дмитрий!
Будут ли уроки по JS для новичков, подобно как по html и css?
В плейлисте нашёл только 2 урока.
пока все что есть
закономерность )) с каждым уроком лайков все меньше и меньше)) видимо отсеиваются люди) Автору спасибо за работу, оч много нового узнал!)
Так происходит на любом курсе
@@BrainsCloud да, я именно об этом и написал, что закономерность в целом такая) Одно только пожелание относящиеся именно к марафонам по верстке на этом канале, чуть по длиннее уроки) было бы классно))
с этими навами запутался в итоге сделал стрелочку также но без hower
Автор) а я пропустил где вы кнопку «написать мне» подключаете?
Привет , а почему не в пикселях, а в rem?? В чем секрет ?
Народ подскажите а line-height подстраивается при адаптации само если размер шрифта в rem?
А можно, пожалуйста, ссылку на макет🙏 Не могу скачать его
А после перезагрузки компа, как галпу через гит-баш указать на папку, где работали?
Урок был записан 12 ноября, соответственно 4 я часть уже готова 🤔. (мой предположения :D )
))
Можете помочь, в gulp.js ошибку выдаёт, так и не понял почему так , все по видео курсу делал.
У нава фон появляется с транзишн а у субнава резко. Это очень контрастирует. Как пофиксить? Если показывать подменю через смену display то не работает transition фона. Сделал top: -300px а при hover - top: 100%, ну и плавное пояявление фона субменю заработало. Так корректно?
У меня одного такая проблема,когда запускаю команду gulp,выводится на localhost ошибка Cannot GET /,но после перезапуска страницы,всё работает (gulp сборка автора)
У меня тоже gulp автора , все норм
Просто сервер запустился раньше чем собрался проект, бывает
а зачем для сайта-портфолио система с аккаунтами?
А такой вопрос.... Мы адаптируется до 320px по ширине, а до скольки нужно адаптироваться по высоте? Буду признателен за советы!
высота динамическая
А что если шапка очень большая по высоте, а теперь секцию хочется сделать на весь экран по высоте. Height: 100vh; , но получилось так, что у заказчика экран оказался по высоте маленьким и контент в первой секции залез на шапку...
@@user-wm4kp8hs8g Я хочу сделать красиво, а не просто) Про min-height я тоже знаю, но вопрос у меня был в том, что я хотел узнать до какой минимальной высоты надо смотреть вёрстку..
@@Akame320 вообще такую вещь, как высота, в макетах указывать обязан дизайнер.
я цыган!
Добрый день, не подскажите что это за правило?
> .subnav
А если я сделал сайт из нескольких страниц, указал пути к страницам и скриптам со стилями в html, и папка с сайтом весит 15 мегабайт, можно ли закинуть эту папку в формате архива ЗИП на хостинг и чтобы навигация работала нормально ? Заранее спасибо....
не совсем понял вопрос. вы можете упаковать сайт в архив, закинуть на хостинг и там распаковать
@@BrainsCloud я это и имел ввиду, сайт это же не одна html страница а страница с папками, элементами css, js, анимации и картинки... Правильно?
@@deephouse3035 Да
28:54 так вот от кого пошла акция blacklivesmatter )0))
)
3:36
20:28
нельзя просто писать цвет black, а не создавать переменные ?)
с переменными удобнее)
+
Когда стрим ?
в декабре мб?)
@@BrainsCloud буду ждать :)
Очень хорошо все, но слишком часто))) не успеваю просмотреть)
Нет не часто я ждал уже 3 видео
мало используеш scss
Всем доброго время суток. Спустя месяц получилось вернуться к этим урокам. Коллеги, подскажите, пожалуйста, откуда взялась директория node_modules? Мне пришлось переносить проект с неработающего компа, и эта папка заняла бОльшую часть места. Ее можно удалить? Простите за дилетантский вопрос.
Эта папка с установленными плагинами.
Тимофей Медведев спасибо. Значит пока не удаляю.
Спасибо!