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

Начинаем 1 часть марафона по вёрстке сайта с нуля на HTML и CSS. Отлично подойдёт начинающим и новичкам, в процессе работы буду всё объяснять и показывать на визуальных примерах. В следующих уроках мы сверстаем этот сайт до конца, сделаем адаптивные версии всех возможных экранов, проверим соответствие Pixel Perfect и сделаем эффективную оптимизацию. Если есть вопросы - обязательно пиши в комментариях и я оперативно помогу.

Буду рад любым пожертвованиям;

Тинькофф - 5536 9137 6324 5442
Сбербанк - 5469 6200 1922 8210
QIWI - 4890 4947 4726 5197

Для того, чтобы получить методичку к уроку - напиши мне в Директ инстаграмма "Хочу методичку", и в ответ я отправлю тебе прямую ссылку для скачивания.

- Раздача бесплатного хостинга и поддомена для учасников курса!

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

Победителей определит сервис рандомизации, итоги подведём ровно через неделю.

Желаю всем хорошего просмотра!

[СтепанСмирнов-тг]

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

[andreykelip]

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]

Чтобы получить макет сайта или методичку к уроку - напиши мне в личку по моим контактам:


У тебя появились вопросы? Пиши мне в личку по следующим контактам:


Желаю всем хорошего просмотра и убойной прокачки!

[correligionist]

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

[Zloy_Barmaley]

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

[alexandy]

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

[enzglkv]

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

[Алексей-уян]

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

[masonbernett]

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

[ВладимирвладимиР-ьш]

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

[oyodwbb]

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

[kden]

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

[Danik_]

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

[ВладимирвладимиР-ьш]

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

[Romzec]

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

[АлександрБелый-юо]

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

[ivandiyz]

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

[dilszqp]

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

[anzorikanamana]

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

[DeaD-pdyn]

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