Верстка сайта с нуля на HTML и CSS для начинающих - Часть 1

Начинаем 1 часть марафона по вёрстке сайта с нуля на HTML и CSS. Отлично подойдёт начинающим и новичкам, в процессе работы буду всё объяснять и показывать на визуальных примерах. В следующих уроках мы сверстаем этот сайт до конца, сделаем адаптивные версии всех возможных экранов, проверим соответствие Pixel Perfect и сделаем эффективную оптимизацию. Если есть вопросы - обязательно пиши в комментариях и я оперативно помогу.
PSD-макет из урока: leadhost.ru/index.php?rp=/kno...
Методичка CSS: leadhost.ru/index.php?rp=/kno...
Буду рад любым пожертвованиям;
Тинькофф - 5536 9137 6324 5442
Сбербанк - 5469 6200 1922 8210
QIWI - 4890 4947 4726 5197
verstach
/ belecky_web
Для того, чтобы получить методичку к уроку - напиши мне в Директ инстаграмма "Хочу методичку", и в ответ я отправлю тебе прямую ссылку для скачивания.
- Раздача бесплатного хостинга и поддомена для учасников курса!
Чтобы получить доступ к хостингу и поддомену, сделай репост этого видео, свяжись со мной по любым контактам и отправь ссылку на свой репост. Будет сразу 5 победителей, поэтому у тебя есть все шансы выиграть!
Победителей определит сервис рандомизации, итоги подведём ровно через неделю.
Желаю всем хорошего просмотра!

[@verstach]

По любым доработкам - t.me/beleckyweb Хостинг: leadhost.ru

[@user-xv3qk1bv3q]

Брат ты как глоток воздуха, продолжай делать ролики, не останавливайся!

[@verstach]

Спасибо за тёплые слова, в скором времени уже выпущу вторую часть:)

[@user-mf9ik2gh3b]

Привет го в лс есть вопрос

[@spyrav]

походу бросил

[@andreykelip5631]

0:00 интро 1:16 конкурс 1:42 Редактор кода Sublime скачиваем и устанавливаем 4:12 начало работы в редакторе 7:00 приступаем к разметке. тэг head 14:50 основные теги в body - header, footer, section, div 17:25 наполняем header, начинаем первую section 25:54 начинаем оформление header, атрибуты и классы 28:15 добавляем container - ограничение содержания по ширине, выравниваем по центру, max-width 34:05 распределяем равномерно по ширине, блочные и строчные элементы, margin 43:05 копирование стилей из макета, стили ссылок меню 49:10 загрузка картинок из макета, cоздаём логотип 59:52 тень логотипа, позиционирование 1:12:05 теги p, h2, шрифты - скачиваем, подключаем 1:31:25 кнопка "позвоните мне" 1:43:45 картинка-телефончик на фон 1:49:46 стилизуем контакты

[@verstach]

Спасибо дружище. Таймкоды как всегда кстати)

[@atmproduction5839]

Извините, но саблайм это не IDE, поправьте если не прав

[@andreykelip5631]

@@atmproduction5839 да, это всего лишь редактор кода

[@user-oy6od8wb1b]

замечательно изложен материал - просто, доступно, содержательно и понятно

[@correligionist5556]

Из всех представленых уроков, это бомба, на лету все понятно. Бро продолжай

[@verstach]

Очень рад, что видео оказалось полезным) Спасибо за отзыв!

[@user-en3zg3lk9v]

Очень нравится твой стиль объяснения. Автор ждём следующих уроков, спасибо тебе за уроки!

[@verstach]

Спасибо за отклик:)

[@Zloy_Barmaley]

Очень замечательный урок по созданию лендинга по макету .psd 👍 Ещё бы такой же урок создание сайта по макету Figma 🤔

[@verstach]

Рад что понравилось :) Мало кто стремится к более глубокому изучению таких вещей, но постараюсь в ближайшее время сделать что-то по фигме

[@masonbernett8052]

Очень полезное , информативное видео. Макет сайта и методичку получил. Благодарю.

[@verstach]

Желаю мощной прокачки💪🏻

[@alexandy1344]

Да, добавлю ещё, не бросай канал. Вода камень точит. С ростом видеоуроков и плейлистов набегут и подписчики. Канал - 🔥 Продолжай.

[@verstach]

Спасибо! Был небольшой перерыв, работал над личным проектом. Теперь видео будут выходить почти каждый день ;)

[@Romzec1]

Отличный видеоурок. Спасибо автору, макет получил. Все на высшем уровне.

[@verstach]

Рад помочь :) Мощной прокачки!

[@user-wz9qr6ki9v]

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

[@verstach]

Благодарю за отклик) Если возникнут вопросы в процессе обучения - пишите;)

[@user-wz9qr6ki9v]

Пока смотрю видос, макет прибыл))Спасибо!

[@verstach]

Всегда рад помочь)

[@user-jp1tx2tw1t]

Преподноситься всё доступно и понятно, всё смог сделать без особого напряга, не смотря на то что это мой первый опыт. Макет получил сразу. Супер!!!

[@verstach]

Алексей спасибо😍 Всегда рад помочь)

[@user-hj9po8zr1u]

Можете сбросить макет? Написал автору, прошло несколько дней, но пока не отвечает

[@alibekfayziev6994]

Спасибо за макет!

[@user-xd3we6wz1l]

Супер, доходчиво очень и понятно

[@verstach]

Спасибо за отзыв, рад стараться

[@ivandiyz135]

Спасибо за макет, за быстрый ответ и ссылку на макет!!!!

[@verstach]

Всегда пожалуйста :) Желаю мощной прокачки!

[@verstach]

Чтобы получить макет сайта или методичку к уроку - напиши мне в личку по моим контактам: ВК - vk.com/verstach, Инстаграм - instagram.com/belecky_web/ У тебя появились вопросы? Пиши мне в личку по следующим контактам: ВКонтакте - vk.com/verstach Инстаграмм - instagram.com/belecky_web/ Почта - [e-mail] Желаю всем хорошего просмотра и убойной прокачки!

[@user-ej1uw9xq3r]

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

[@79kden]

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

[@verstach]

Спасибо! Желаю мощной прокачки )

[@user-zu3qv3zc6j]

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

[@verstach]

Всегда рад помочь ) Мощной прокачки тебе!

[@user-il1ud1kq8b]

Спасибо за макет и методичку

[@verstach]

Станислав Казаков хорошей прокачки!💪🏻

[@Danik_843]

Этот комментарий для продвижения видео в топ!

[@kasper8788]

Спасибо тебе братан за работу

[@verstach]

Рад стараться :)

[@dimamark6876]

Зачет))).

[@verstach]

Супер! Рад что видео оказалось полезным:)

[@idefant]

Крутой урок. Я только еще учусь верстать. Спасибо автору. Я получил макет и методичку. Честно, думал макет будет меньше весить

[@user-zu3qv3zc6j]

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

[@verstach]

Всегда рад помочь ) Макет довольно жирный, и в нем много слоёв. Но с другой стороны это даже не плохо, больше практики )

[@user-di2ls2zq2p]

Макет получил,видео интересное и занимательное

[@verstach]

Желаю мощной прокачки!:)

[@user-bl6kq2ev9k]

Здравствуйте, поделитесь макетом пожалуйста !

[@anzorikanamana544]

Хорошее пояснение всех действий. Вопрос: div .logo__bottom намеренно сделали, вместо .logo:after?

[@verstach]

Да, подумал, что если добавить к материалу псеводэлементы в первому уроку - начинающие запутаются от объёма информации. Когда закончим с десктопом, пройдёмся ещё раз по макету и переделаем некоторые вещи)

[@hertz3001]

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

[@verstach]

На любые вопросы буду рад ответить в любых из соц сетей под видео )

[@DeaD-pd4yn]

Привет, не могу найти вторую часть видео верстки? будет ли она?

[@user-pf9wz2ik2r]

Друг А будет видно как читать правильно читать макет ??

[@easycad6998]

Для лучшей валидности нужно оборачивать телефон в значение :tel ?

[@verstach]

Для валидности скорее нет, больше для UI

[@strelok6903]

А сколько будет таких уроков 0???

[@royal_aver4403]

Смотрел другие туториалы и во всех хедером была первая страница, а у Вас это только шапка! Как все-таки правильно или это кому как удобно?

[@verstach]

Методов много разных, но по книжкам - так правильнее ) Есть определённая конструкция сайта seo-friendly

[@user-en3zg3lk9v]

Когда 2 урок?))

[@verstach]

Уже готов, он на стадии подготовки к публикации)

[@abcxyz12e]

Долго рендерится как-то 🤔

[@user-pl7uq4bf7b]

Но ты же мог сделать просто тень под лого!! не размывая её. Без лишних блоков и прочего (box-shadow: 0 4px 0 color;)

[@verstach]

С помощью этого свойства не удалось бы сделать ее такой же, как на макете:) Я придерживаюсь перфекционизма в своих работах и делаю все 1:1 как на макете

[@KonkerE_]

Уроки по js будут?

[@verstach]

Безусловно будут)

[@andreikan7406]

Мне кажется, что в логотипе нужно сделать спаном Medic и расположить по центру, т.к. если двигать его в минус в лево, то он смещается, но в блоке становится не по середине(как я понял, в макете по центру).

[@andreikan7406]

Я попробовал - что то ни через спаны, ни через P не получается, через див так же. появляются отступы на p которые убрать не могу. На спанах выравнивание по центру не могу сделать.

[@verstach]

@@andreikan7406 самый простой вариант в данном случае, повесить на div.logo - text-align: center, остальное оставить как есть. В будущих уроках, когда будем делать pixel perfect займёмся этим и также заменим тег img на псевдокласс

[@andreikan7406]

@@verstach понял. Ну вот опять же - если див ставить, то отступы появляются как и в случае с параграфом.

[@verstach]

​@@andreikan7406 дополнительный div дописывать не нужно, можно просто повесить на текущий который мы использовали

[@starlight969]

Можете сделать видео как перенести сайт с modx на wordpress?

[@verstach]

Информация по этой теме может не подойти к разным ситуациям сайтов на modx :( В будущем подумаю и сделаю что-нибудь универсальное по этой тематике

[@Hello_world_2020A]

На гугл диск нужно было оставить ссылку

[@unidentifiedaccount9177]

width: 1280px; max-width: 100%; margin: 0 auto; 33:08 Не обновляется, что делать? Пробовал чистить кэшь, пересоздавать файл. В консоли пишет Failed to load resource: net::ERR_FILE_NOT_FOUND

[@unidentifiedaccount9177]

разобрался надо было создать класс container, а не писать в element style

[@yakub8798]

техт трансформ юпперкасе или апперкасе.

[@destroy192]

У меня макет не открывается (

[@cybernetic5027]

Почему макет не прикрепить ссылкой под видео?

[@verstach]

Потому что это интеллектуальная собственность моего коллеги дизайнера

[@cybernetic5027]

@@verstach Написал в вк, можешь скинуть ссылку раз такое дело)

[@albertus1108]

я в Хроме пытаюсь где element.style между фигруных скобок как вашем видео написать значение Width и как только я перескакиваю через :(двоеточие) у меня все сбрасывется (то есть width удаляется в Elvent.style).Как это побороть.Получается у меня в Хроме нельзя в реальном времени прописывать CSS свойства. kzbin.info/www/bejne/mpnMf36om8aHg7M 30 минута видео...

[@verstach]

Привет! После того, как вводишь width - нажимаешь клавишу enter? Или кликом мыши? При втором варианте будет происходить сброс. Если не удалось решить проблему - можешь связаться со мной по любым из контактов под видео и я постараюсь помочь)

[@albertus1108]

@@verstach решил проблему переходом на Мозиллу)там все работает.Но на Мозилле при исследовании элемента,у меня не показывает у тегов стили по умолчанию которые есть,то есть встроенные стили.А у вас в видео показывает встроенные стили kzbin.info/www/bejne/mpnMf36om8aHg7M

[@verstach]

@@albertus1108 возможно на компьютере есть какой-нибудь программный блокировщик?

[@albertus1108]

@@verstach в настройках консоли в пункте стили,надо галочку ставить(показывать стили по умолчанию).Вот так нелёгок путь к джуну))Спасибо что отвечаете!

[@user-sf2zj6ge6v]

не подключаются стили. в чем может быть проблема?

[@verstach]

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

[@user-sf2zj6ge6v]

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

[@verstach]

@@user-sf2zj6ge6v очень рад это слышать, спасибо:)

[@easycad6998]

42:10 Зачем нужно было отдельно писать header.conteiner ? Если можно было всё поместить в .conteiner выше и всё также бы работало. (я новичок и мне это было не понятно)

[@verstach]

Класс container - универсальный, который используется в каждой секции сайта. К этому универсальному селектору прописываются общие стили - .container {width:1280px; max-width:100;margin: 0 auto}. В этой минуте мы прописывали стили из флекс семейства к этому контейнеру, чтобы спозиционировать элементы внутри хедера. Если вписывать флексы в общий класс .container - то во многих секциях это будет лишним, поэтому в данном случае так правильно)

[@easycad6998]

@@verstach Спасибо за ответ !

[@alexandy1344]

В html5 появились семантические теги. header один из них. Раньше зачастую обходились div-ами. Можно и сейчас на div-ах всё сверстать, но семантически это будет неверно.

[@user-ej1uw9xq3r]

я написала вам в личку , что хочу макет. а вы не отвечаете

[@verstach]

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

[@user-tf1tq8wo8p]

Владислав, здравствуйте, я жду ответа

[@user-pf9wz2ik2r]

Друг дай макет ПОЖАЛУСТА

[@user-pf9wz2ik2r]

вот почта [e-mail]

[@mmmm-mg3jl]

У меня почему то шрифты не подтягивает( так обидно пздц

[@verstach]

Давай помогу) Открой вёрстку через браузер, затем нажми на клавишу F12. Откроется dev tool, там выбери вкладку "Console". Наверняка в ней будет ошибка. Ошибку можешь сюда продублировать, подскажу как решить

[@mmmm-mg3jl]

@@verstach не ожидал что ты ответишь) Ты у себя не ставил ” , а вот у меня оказалось надо ставить, иначе шрифт не подтянет 1:23:45 src: url (“../fonts/SFProDisplay.woff”) 🤷🏻‍♂️ Вообще спасибо за то что ты делаешь, не знал что программирование может быть настолько интересным занятием)

[@verstach]

@@mmmm-mg3jl всегда рад помочь)

[@user-xv1fv4mp8j]

Дайте кто-то макет!! Автору писала, - нет ответа. Ребята!! Я не код верстки прошу, а всего лишь макет!!

[@verstach]

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

[@serhii_chechelnytskyi]

У меня нет инстаграмм. Дайте методичку [e-mail]

[@verstach]

Отправлено ;)

[@sergejsignatjevs8233]

У меня нет инстаграмм. Дайте методичку [e-mail]

[@verstach]

Напиши мне по любым контактам - телеграмм, вконтакте, ссылки в описании к видео. Либо на почту - [e-mail]

[@alexandy1344]

Братка, скинь макет пж. [e-mail]

[@verstach]

Все ссылки под видео обновлены

[@royal_aver4403]

Зачем так мудрить с получением макета? Пока ты ответишь народ уже убежит на другие каналы, ждать никто не будет!

[@verstach]

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

[@verstach]

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

[@royal_aver4403]

@@verstach Я ниже уже коммент прочитал и понял, почему так! Согласен веб-дизайнера нельзя обижать)) П.С. В макете "Конакты", а не "Контакты") Верстальщик должен полностью повторить за дизайнером или может написать по другому?))))

[@front-endanimal6359]

опять верстать(

[@verstach]

Вёрстка как смысл жизни:)

[@front-endanimal6359]

@@verstach ох, не скажи(