Верстка сайта с нуля на HTML | CSS / #2 - Построение шапки сайта
Vložit
- čas přidán 23. 06. 2024
- Начиная с этого урока мы приступаем к верстке сайта. Мы будем использовать макет 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
Дякую, чудова подача матеріалу
Спасибо за это люто топовое видео! Я смотрю тебя из видео уроков по python.
Спасибо за урок. Автор заслуживает миллион лайк
от души!
Если ты не снимал видео я не мог бы закончить свой сайт,спасибо
Эх, а я то думал что дизайн с фигмы можно конвертировать в html. А тут ручками надо всё делать
На что нажали на 12:22 чтобы див имел связку ?
Спасибо за урок!
Очень жду, когда будет курс по вёрстке сайта с нуля (Html, css, js) по продажам чего-либo (книги, игрушки, торты, запчасти и т.п.), так как не знаю как пополнить сайт новым продуктом не залазия в код. Надо внести новый продукт, как на шопофай - без кода, но со сторлны админа сайта.
Короче, жду другой уровень сложности разработки сайта.
Спасибо!
Я слышал, что для таких изменений используют WordPress.
Привет, ChatGpt тебе в помощь
Ура
Приветствую, видео урок получился максимально хорошим, но я не много не понял каким образом мы добились того что, по всей секции у нас идёт определённый отступ слева.
Тоже сначала не понял, пересмотрел. Раскрывается в классе container, на 14:00
Привет всем! Я что-то не дописал в html-коде, начиная с , что-то пропустил и обертка (wrapper) некорректно взаимодействует c CSS, пожалуйста скиньте кто-нибудь весь html-код.
took me like few min to establish why my CSS doesnt load. You gotta remove / infront of css folder in html when u link css file.
Как работать с Gethub и разместить туда html, css?
Спасибо! Единственный момент, гугл фонц изменил интерфейс.
Привет! Я что-то не дописал в html-коде, начиная с , что-то пропустил и обертка (wrapper) некорректно взаимодействует c CSS, можешь скинуть ссылку на весь html-код?
А где проект на фигме?
что делать если на 27:15 кнопка вообще не изменяется?
у меня возникла проблема с css кто может скиньте пожалуйста полноценный код.
Буду очень благодарен
А где адаптация под другие устройства?
Откуда взять макет?
я лично вбил в гугл figma games 3d макет и поискал, это бесплатный макет в фигме
у меня ошибка на классе"*{}"что делать помагитееее ????????!!!!!!!!
всмысле ошибка, какая? ты бы хоть описал для начала
@@dron6410Допустим, я импортировал шрифт. После чего я пишу
*{
margin:0;
padding:0;
}
Но при этом, * вылезает ошибкой (звёздочка)
Думаю, он имел ввиду именно это.
Поставь точку запятой после "@import url(text)"
Где взять макет?
я лично вбил в гугл figma games 3d макет и поискал, это бесплатный макет в фигме
нету самого макета на сайт в фигме печально а так хотелось посмотреть на сам макет
там только скрины
@@ferrum3517 макет есть, первое время думал так-же. Слева есть вкладка, где обычно пишутся слои от макета. Там есть категория "Pages", а в ней по умолчанию стоит Сover. Тебе нужно поставить Screens
@@ferrum3517 в комментах подсказали, необходимо нажать вместо “cover” в правом или левом верхнем углу на «screens”
в 12:22 на что нажали?
Ты разобрался ?
@@malthael283 взял вырезал текст и вставил обратно
@@user-kd5cw4fe3b Не овсем понял, на какую кнопку ?
ctrl c + v ?
@@malthael283 или можете сидеть и нажать tab чтоб был отступ я особа не заморачивалалсь
Есть ли макет этого сайта, но не скринами? а как обычный мокет с возможность выбора элементов.
Я вместо “cover” в правом верхнем углу, нажимал на «screens”
@@user-ou4sd4ty4r лучший, а я то думал почему не могу выделить как у автора LOGO
Второй