Веб-дизайн: работы 2024–2025
Задания
- Создать (рассказать) историю
- Сделать html-страницу, содержащую минимум заголовок (теги h1, h2) и несколько параграфов (тег p) с текстом и указанием автора
- Добавить минимум одну иллюстрацию (элемент img)
- Добавить внутреннюю и внешнюю ссылки (теги a и a:blank)
- Сделать несколько страниц и связать их перекрестными ссылками
- Проверить страницу при помощи валидатора и исправить все ошибки разметки
- Попытаться зарегистрироваться на
хостинге, выбрать URL-адрес сайта и создать его. Выложить файлы проекта на хостинг.
Главная страница должна иметь название index.html и располагаться в корневой директории (иногда она называется public_html) - Найти поиском или создать новую иконку ☝🏼, добавить ее на страницы при помощи тега link:favicon
- Постараться ответить на все вопросы
Пример
Что должно быть на сайте? 👇
- На веб-страницах должны быть следующие блоки: шапка (хэдер), основной контент и подвал (футер)
- В шапке – одинаковая для всех страниц навигация, сделанная на основе ненумерованного списка
- У каждой страницы должно быть сделано оформление при помощи каскадных листов стилей, css
Страницы, сделанные на занятиях:
группа в субботу
- Качалов Данила, старая версия
- Родионова Дарья
- Заславец Анастасия
- Мышляев Илья
- Егорова Тоня
- Сивицкая Анна: персональная страница,
калькулятор среднего балла
(файлы).
проект в Figma,
проект в FigJam.
Тетрадь смерти (макет в Figma)
Работающий калькулятор на этом сайте. Старая страница: про Genshin impact Github pages. Лендинг, макет в Figma
Видео
- Все трансляции
- Трансляция от 14.01.2023,
Пример из трансляции
- Трансляция от 21.12.2022
Инструкция, как поставить, настроить сервер с WordPress, а также подготовить его к созданию интернет-магазина!
- Трансляция от 12.11.2022
- Обсуждение проектов, 9.11.2022
- Мастер-класс, март 2022 г.
Материалы для вдохновения
- Стоковые картинки:
- Гифки: giphy.com, acegif.com
Манипулируем элементами на странице
- Простые примеры использования JavaScript: манипуляции с объектами, калькулятор, элементы форм
- Перетаскиваем объекты при помощи JavaScript
Ссылки
- Конкурс DigitalСтарт
- Городской Конкурс медиатворчества, цифровых и визуальных технологий «24 bit»
- Демонстрационный экзамен
- Работа с файлами: как файлы хранятся в файловой системе, о регистре и пробелах, про название файла index.html, какие бывают типы файлов
- Как устроен HTML, шаблон HTML-страницы (сокращение Emmet «!»), основные и обязательные теги HTML-страницы, атрибуты, спецсимволы HTML, Lorem ipsum
- Многостраничный сайт и его оформление Зачем разбивать сайт на несколько страниц? Когда следует делать одностраничный сайт?
- Оформление Web-страниц (как устроен CSS), Способы использования CSS в HTML, наследование, виды селекторов, стили по умолчанию, блочная модель, схлопывание отступов
- Работаем с макетом, Динамическое создание элементов страницы
- «Гамбургер» – изображение кнопки меню; The origin of the hamburger icon
- Простой магазин. Скрипт корзины на JS