Веб-дизайн: работы 2023–2024
Задания
- Создать (рассказать) историю
- Сделать html-страницу, содержащую минимум заголовок (теги h1, h2) и несколько параграфов (тег p) с текстом и указанием автора
- Добавить минимум одну иллюстрацию (элемент img)
- Добавить внутреннюю и внешнюю ссылки (теги a и a:blank)
- Сделать несколько страниц и связать их перекрестными ссылками
- Проверить страницу при помощи валидатора и исправить все ошибки разметки
- Попытаться зарегистрироваться на
хостинге, выбрать URL-адрес сайта и создать его. Выложить файлы проекта на хостинг.
Главная страница должна иметь название index.html и располагаться в корневой директории (иногда она называется public_html) - Найти поиском или создать новую иконку ☝🏼, добавить ее на страницы при помощи тега link:favicon
- Постараться ответить на все вопросы
Пример
Что должно быть на сайте? 👇
- На веб-страницах должны быть следующие блоки: шапка (хэдер), основной контент и подвал (футер)
- В шапке – одинаковая для всех страниц навигация, сделанная на основе ненумерованного списка
- У каждой страницы должно быть сделано оформление при помощи каскадных листов стилей, css
Страницы, сделанные на занятиях:
Все заинтересованные! Посмотрите в последней трансляции инструкцию, как поставить, настроить сервер с WordPress, а также подготовить его к созданию интернет-магазина!группа в среду
- Кузьмин Артемий: artrot.github.io, I love cats and dogs,
ROBLOX HOROR PLAY GitHub, Я.Вебмастер, Google search console
- Шереметьев Артём: interesteds.github.io, Собака и другие проекты,
породы собак,
робототехника,
Симпсоны и другие мультсериалы GitHub, Google search console
группа в субботу
- Мосолков Виталий
- Шингарева Кира
- Фукс Мария
- Комарова Лера
- Курочкина Алевтина
- Cелеверстов Александр
- Cелеверстов Павел
- Извольцев Владимир, magezein.lh1.in. Старая страница: Чародейчик Github pages. 3 страницы, стили
- Хузягулов Влад, Vladislav Network. Github pages много страниц и сайтов)
- Копанин Артем: plugflipper.github.io, проект в Figma Github pages, Figma
- Сивицкая Анна: персональная страница,
калькулятор среднего балла
(файлы).
проект в Figma,
проект в FigJam.
Тетрадь смерти (макет в Figma)
Работающий калькулятор на этом сайте. Старая страница: про Genshin impact Github pages. Лендинг, макет в Figma - Писаренко Арина: Медведи (скрипт Цирк приехал!), Мультфильмы, Мода (скрипт Гардероб). 3 страницы, фон, стили, эмодзи, меню!
- Карпов Никита (файлы): Вкусные рецепты. Скачать майнкрафт. Github pages. Название репозитория должно быть вида username.github.io! Если изменяется имя пользователя, меняется и url-адрес сайта! Иначе не заработает! 4+ страницы, стили, абсолютное позиционирование
Видео
- Все трансляции
- Трансляция от 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