Презентация_Гладких_W600

1.

ИТОГОВАЯ АТТЕСТАЦИОННАЯ РАБОТА
по дополнительной профессиональной программе
повышения квалификации
Web-программист: с нуля до первых
проектов
Выполнила: Гладких Татьяна Андреевна
Номер потока: W-600
Преподаватель: Петрищев Александр Сергеевич

2.

Структура HTML
Стили СSS
Работа выполнена в виде сайта, который написан в
программе для создания кода VSCode. Состоит из
нескольких файлов, на слайде представлен файл HTML в
котором можно увидеть корректную структуру с
использованием семантических тегов, таких как header,
h1, body, nav, section, div, p, a, footer. Они нужны для
лучшей читаемости сайта браузером и удобной работы
со стилями в последствии
В файле с расширением СSS прописаны стили для
главной страницы сайта. Использованы все четыре
типа селекторов для обращения к элементам html.
Для удобства в файле отмечено где прописаны
стили для заголовка, основной части и подвала.
Также используется flex и псевдоклассы.

3.

Базовая адаптивность
За то, чтобы сайт правильно открывался на разных
устройствах отвечает файл CSS под названием
media. В нем создаётся медиа-запрос в котором
указывается окно вьюпорта и добавляются все
CSS-свойства подлежащие изменению при данном
разрешении. В моем случае сайт адаптирован под
вьюпорт компьютера и планшета.
Текст, изображения, ссылки и кнопки
Эти элементы были созданы мной в структуре html и
стилизованы с помощью css,
Текст помещается в параграфе, шрифт береся с сайтв
Gogle fonts, его цвет и размер обусловлен макетом их
Figma и прописан в файле css. Изображения загружены
на сервер в файловую структуру сайта в отдельной
папке img. Сылки также стилизованы в виде кнопок, к
ним применен псевдокласс hover.

4.

Сайт открывается в браузере по ссылке, он
посвящен нашему домашнему хобби, картинка с
дедом нарисована мной акварелью вручную, в
стиле макета из Figma. Мне удалось его написать
благодаря урокам Александра, помощи Максима и
Светланы, поддержке моей группы. Обучение
было насыщенным и вдохновляющим. Я
пресполнились, да пребудет со мной
программирование.

5.

Благодарю за внимание!