Современная верстка сайта с нуля. Часть 1

Всем привет. Данным видео я начинаю курс по верстке сайта с нуля, используя современные инструменты FrontEnd разработчика. Gulp, Pug, Stylus и другие.

В данном видео я сверстаю шапку сайта. В нее включаются логотип компании, контактная информация, а также корзина сайта.

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

ВНИМАНИЕ! Уважаемые зрители! Прошу прощения за качество звука в данном видео. В следующих видео качество звука гораздо лучше! Спасибо за просмотр!

Плейлисты моего канала, которые также могут быть вам интересны

Не ограничивай себя видеоуроками на YouTube!
Узнавайте еще больше полезной информации!

-----------------------------------------------------------------------------------
Не забываем, что самый лучший способ сказать "спасибо" - нажать кнопку "нравится" и скинуть ссылку на урок друзьям. Ничто другое так сильно не мотивирует автора продолжать работу :)

#верстка, #созданиесайта, #версткасайта, #разработкасайта, #разработкасайтаснуля, #адаптивнаяверстка, #адаптив, #gulp, #версткасайтаснуля, #версткаснуля, #версткасайтаизpsd, #вёрсткасайтаизpsdвhtml, #версткасайтаснуляпомакету, версткасайтаизpsdснуля

[WebSP-qe]

Подписка на канал!:) Да, качество звука среднее, но слушать можно! Видео понравилось, понятно и без воды, и очень просто всё! Спасибо за контент!

[Grebanyitolchok]

Отличная работа! Порой не соглашаюсь где-то с версткой, хотя сам новичок в этом деле))) Качество звука полностью устраивает (на задний фон ставлю Моцарта)

[Дмитрий-пэф]

Анатолий, напишите какие инструменты вы используете в данном видео при верстке. В описаниии написано и другие, много их других?
Идеально было бы перечисление с кратким описпнием инструмента.

[секундназад]

Спасибо за урок. Дизайн конечно угнетает.

[anatoliyname]

Анатолий! Очень понравился ваш шаблон! С pug и stylus до этого не работал, но думаю это дело наживное. Очень полезная информация! У меня вопрос в саблайме при работе с pug не работает Emmet у меня одного такая проблема?
Если можно подскажите что можно сделать

[КсенияКоснырева-ьф]

Анатолий, хорошее сопровождение работы и понятный конструктив! Вопрос касаемо позиционирования элементов (не только в данной вёрстке). Почему часто используетесь абсолютом, связкой абсолют и относительное? Бытует мнение, что это черевато наложениями для корректировки страницы в дальнейшем.

[andreyglazachev]

Толя, все круто) Микрофон бы получше!
И пока смотрю сразу вопросы. А почему user-scalable=no?
И еще, не проще ли импортировать все файлы в main.css?)

[dmitriykononov]

Если не сложно. Скажите где вы обучались верстке? иСколько лет занимаетесь? Как обстоят дела на фрилансе?

[webfordevs]

Решил просмотреть, нажал случайно на 51:45, увидел в styl - класс header_busket_wrap - очень странный синтаксис, и слово busket - как то смущает, посмотрел в pug, увидел что "Чем отличается копия от оригинала ? " - span, посмотрел на макет - ссылка, еще и br, не увидел еще спрайтов, возможно быстро мотал)) очень странно все

[rustamiskandarov]

Подскажите пожалуйста по какому принципу нужно выстраивать порядок стилей, с начало размеры, потом цвет и т.д.???

[MadMuks]

Привет. 1.макет еще нельзя скинуть? 2. если нет, то не могли бы выложить все картинки с макета? хотелось бы не просто смотреть, а попутно тренероваться с использованием ваших инструментов и шаблонов.

[studiosunoai]

картинка хорошая а звук как из сортира

[АлексейФроловский-ьн]

иконки соц.сетей то зачем через изображения делать? не проще будет через font awesome? количество http запросов будет меньше, следовательно в дальнейшем сайт быстрее будет грузиться
ну или я чего-то не понимаю

[KeeptheFuckOut]

А где демонстрация зачем rem?на какой минуте ?

[anatoliyname]

Можно же прописать href="#!" что-бы при клике на ссылку не кидало

[jonibek]

Здравствуйте, пожалуйста сообщите когда получим psd макет

[АйратФаррахов-ъч]

Имеет ли значение то, в каком формате картинки, в .png или .jpg?

[doc-iguu]

не могу понять как происходит взаимосвязь файлов index.pug и index.html если они находятся в разных папках

[sergapon]

На сколько актуальны данные видеоуроки?

[АйратФаррахов-ъч]

Всё не могу понять для чего нужны rem-ы. Размер шрифта по любому указывать нужно, и с rem-ами он всё равно получается в пикселях. В чём смысл-то? Зачем заморачиваться? То же и с переменными для цветов. Зачем? Названия переменных длиннее названий самих цветов, так что получается, что на запись переменных в итоге уходит больше времени, чем на запись названия цвета. Ещё одна бессмысленная заморочка