💯Готовая работа Создание адаптивного сайта по макету в Figma. Курс Программирование на языке верстки HTML и стилей CSS🔥

Название: Создание адаптивного сайта по макету в Figma Цель проекта: Научиться создавать адаптивный сайт по макету в Figma, используя HTML, CSS и мета-тег viewport. Аннотация: Figma - это веб-приложение для графического дизайна, которое позволяет создавать и редактировать векторную графику, пользовательские интерфейсы, прототипы и т.д. Figma популярна среди дизайнеров, потому что она проста в использовании, совместной и кросс-платформенной. Вы можете использовать Figma для создания макетов сайтов, которые будут отображаться корректно на разных устройствах и браузерах. Для этого вам нужно знать основы HTML, CSS и мета-тега viewport. Техническое задание: Создайте адаптивный сайт по макету в Figma, используя HTML, CSS и мета-тег viewport.

Для этого выполните следующие действия: Скачайте любой макет Figma (лучше использовать более простой макет, но если уверены в своих силах можете использовать любой) Откройте файл с макетом сайта в Figma и изучите его структуру, содержание, размеры, цвета, шрифты и т.д. Откройте текстовый редактор (например, Notepad или Sublime Text) и создайте два новых файла с расширениями .html и .css Напишите в файле .html код, который будет создавать HTML-документ с основной структурой сайта, состоящей из элементов header, main и footer. Внутри элемента header разместите логотип сайта и навигационное меню с ссылками на разные секции сайта. Внутри элемента main разместите несколько секций с классами lead, intro, places, video и cover.

В каждой секции разместите соответствующее содержимое из макета: текст, изображения или видео. Внутри элемента footer разместите копирайт сайта. Напишите в файле .css код, который будет применять стили к HTML-документу, используя разные селекторы и свойства. Задайте общие стили для всего документа: фоновый цвет, цвет текста, шрифт, размер шрифта и т.д. Задайте специфические стили для каждого элемента или класса: выравнивание текста, отступы, границы, фоновые изображения и т.д. Используйте значения из макета в Figma для задания размеров, цветов, шрифтов и т.д. Добавьте в файле .html мета-тег viewport с атрибутами name=“viewport” и content=“width=device-width, initial-scale=1.0”, чтобы указать браузеру, что сайт адаптирован под разные размеры экранов Подключите файл .css к файлу .html с помощью тега link внутри элемента head.

Используйте атрибут href для задания пути к файлу. Используйте атрибут rel для указания, что файл является таблицей стилей. Сохраните файлы .html и .css и откройте файл .html в браузере. Вы должны увидеть сайт, похожий на макет в Figma. Рекомендации для выполнения. При написании HTML- и CSS-кода соблюдайте правила синтаксиса и форматирования. Используйте маленькие буквы для тегов и атрибутов, закрывайте теги, которые требуют закрытия, ставьте кавычки вокруг значений атрибутов, ставьте точку с запятой после каждого свойства, заключайте значения свойств в кавычки, если они содержат пробелы, делайте отступы для вложенных элементов.При выборе текстового редактора обратите внимание на его функционал и удобство.

Хороший текстовый редактор должен подсвечивать синтаксис, проверять ошибки, автоматически дополнять код, иметь разные темы оформления и дополнительные плагины. При проверке HTML- и CSS-документа в браузере обратите внимание на его внешний вид и поведение. Проверьте, что все элементы отображаются корректно, текст читабелен, ссылки работают, изображения и видео загружаются. Попробуйте изменить размер окна браузера и посмотреть, как это влияет на сайт. Попробуйте открыть сайт в разных браузерах и посмотреть, как он отображается в них. Формат сдачи: Сдайте ваш проект в виде архива с файлами .html и .css и любыми дополнительными файлами, которые вы использовали при выполнении проекта (например, изображения или видео).

Используйте форматы .zip или .rar для архива. Критерии оценки Максимальное количество баллов: +20 баллов HTML-документ содержит все необходимые элементы и атрибуты +5 баллов CSS-файл содержит все необходимые правила и свойства +5 баллов HTML-документ содержит мета-тег viewport +2 балла HTML- и CSS-код написан с соблюдением правил синтаксиса и форматирования +2 балла HTML- и CSS-файлы корректно подключены друг к другу +1 балл HTML- и CSS-документы корректно отображаются в браузере +5 баллов Минимальное количество баллов: +10 баллов.