Тёмный

Верстка сайта с нуля на HTML | CSS / #2 - Построение шапки сайта 

Школа itProger / Программирование
Просмотров 9 тыс.
50% 1

Начиная с этого урока мы приступаем к верстке сайта. Мы будем использовать макет Figma в качестве дизайна для сайта. За урок мы создадим шапку сайта, меню и секцию с презентацией.
✅ Полезные ссылки:
- Урок на сайте: itproger.com/course/css3-html5/2
⏰ Тайм коды:
00:00 - Начало
00:18 - Макет сайта
01:25 - Подключение шрифта
04:22 - Базовые стили
05:01 - Написание HTML кода
09:20 - Добавление изображения
11:01 - Градиент на задний фон
13:57 - Стили для шапки сайта
22:32 - Секция с презентацией
27:42 - Размещение изображения
29:37 - Добавление слоев
30:50 - Заключительная часть
✔ Сообщество программистов: itproger.com/
✔ ----
🚀 Telegram: t.me/itProger_official
Инстаграм itProger: / itproger_official
Группа FaceBook: goo.gl/XW0aaP
- Уроки от #itProger 👨🏼‍💻
- Все уроки по хештегу #itprogerLessons

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

 

15 май 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 37   
@allgamer3d620
@allgamer3d620 2 месяца назад
Спасибо за это люто топовое видео! Я смотрю тебя из видео уроков по python.
@newuser7926
@newuser7926 26 дней назад
Спасибо за урок. Автор заслуживает миллион лайк
@Commissar_Grievous
@Commissar_Grievous 2 месяца назад
Эх, а я то думал что дизайн с фигмы можно конвертировать в html. А тут ручками надо всё делать
@attend5699
@attend5699 2 месяца назад
от души!
@user-bf9cw7px3n
@user-bf9cw7px3n 2 месяца назад
Если ты не снимал видео я не мог бы закончить свой сайт,спасибо
@user-vt6un9cj1c
@user-vt6un9cj1c 2 месяца назад
Ура
@yuliahodgson3677
@yuliahodgson3677 2 месяца назад
Спасибо за урок! Очень жду, когда будет курс по вёрстке сайта с нуля (Html, css, js) по продажам чего-либo (книги, игрушки, торты, запчасти и т.п.), так как не знаю как пополнить сайт новым продуктом не залазия в код. Надо внести новый продукт, как на шопофай - без кода, но со сторлны админа сайта. Короче, жду другой уровень сложности разработки сайта. Спасибо!
@iddqd777
@iddqd777 3 дня назад
Я слышал, что для таких изменений используют WordPress.
@malthael283
@malthael283 29 дней назад
На что нажали на 12:22 чтобы див имел связку ?
@nelfira4119
@nelfira4119 Месяц назад
Приветствую, видео урок получился максимально хорошим, но я не много не понял каким образом мы добились того что, по всей секции у нас идёт определённый отступ слева.
@DalaiGamers
@DalaiGamers 24 дня назад
Тоже сначала не понял, пересмотрел. Раскрывается в классе container, на 14:00
@_akm_shoot
@_akm_shoot 2 месяца назад
Откуда взять макет?
@user_nikkon777
@user_nikkon777 Месяц назад
Привет всем! Я что-то не дописал в html-коде, начиная с , что-то пропустил и обертка (wrapper) некорректно взаимодействует c CSS, пожалуйста скиньте кто-нибудь весь html-код.
@user-zd8cn1ox3f
@user-zd8cn1ox3f 13 дней назад
Как работать с Gethub и разместить туда html, css?
@user-ps9gn7ov4i
@user-ps9gn7ov4i 2 месяца назад
Где взять макет?
@user-uh6qz5ov7f
@user-uh6qz5ov7f 17 дней назад
А где адаптация под другие устройства?
@user-ti9vu7fw3p
@user-ti9vu7fw3p Месяц назад
что делать если на 27:15 кнопка вообще не изменяется?
@user-zf8xr5do5m
@user-zf8xr5do5m 10 дней назад
А где проект на фигме?
@sashaholikov
@sashaholikov Месяц назад
Есть ли макет этого сайта, но не скринами? а как обычный мокет с возможность выбора элементов.
@user-ou4sd4ty4r
@user-ou4sd4ty4r 15 дней назад
Я вместо “cover” в правом верхнем углу, нажимал на «screens”
@Fix_Play77777
@Fix_Play77777 3 дня назад
@@user-ou4sd4ty4r лучший, а я то думал почему не могу выделить как у автора LOGO
@daddy69bad
@daddy69bad Месяц назад
Спасибо! Единственный момент, гугл фонц изменил интерфейс.
@user_nikkon777
@user_nikkon777 Месяц назад
Привет! Я что-то не дописал в html-коде, начиная с , что-то пропустил и обертка (wrapper) некорректно взаимодействует c CSS, можешь скинуть ссылку на весь html-код?
@user-gr2lf2hn7p
@user-gr2lf2hn7p Месяц назад
у меня ошибка на классе"*{}"что делать помагитееее ????????!!!!!!!!
@dron6410
@dron6410 Месяц назад
всмысле ошибка, какая? ты бы хоть описал для начала
@user-xb1nd4iz3d
@user-xb1nd4iz3d Месяц назад
​@@dron6410Допустим, я импортировал шрифт. После чего я пишу *{ margin:0; padding:0; } Но при этом, * вылезает ошибкой (звёздочка) Думаю, он имел ввиду именно это.
@Alexsey_Kyznecov
@Alexsey_Kyznecov Месяц назад
Поставь точку запятой после "@import url(text)"
@ferrum3517
@ferrum3517 2 месяца назад
нету самого макета на сайт в фигме печально а так хотелось посмотреть на сам макет
@ferrum3517
@ferrum3517 2 месяца назад
там только скрины
@donatik4889
@donatik4889 Месяц назад
@@ferrum3517 макет есть, первое время думал так-же. Слева есть вкладка, где обычно пишутся слои от макета. Там есть категория "Pages", а в ней по умолчанию стоит Сover. Тебе нужно поставить Screens
@user-kd5cw4fe3b
@user-kd5cw4fe3b Месяц назад
в 12:22 на что нажали?
@malthael283
@malthael283 29 дней назад
Ты разобрался ?
@user-kd5cw4fe3b
@user-kd5cw4fe3b 29 дней назад
@@malthael283 взял вырезал текст и вставил обратно
@malthael283
@malthael283 29 дней назад
@@user-kd5cw4fe3b Не овсем понял, на какую кнопку ? ctrl c + v ?
@user-kd5cw4fe3b
@user-kd5cw4fe3b 29 дней назад
@@malthael283 или можете сидеть и нажать tab чтоб был отступ я особа не заморачивалалсь
@Kskskskskskskskskskskkskssk
@Kskskskskskskskskskskkskssk 2 месяца назад
Второй
Далее
CSS Grid - Полное руководство
38:21
Просмотров 342 тыс.