Веб-дизайн: работы 2025–2026

Задания

1. Создать (рассказать) историю
2. Сделать html-страницу, содержащую минимум заголовок (теги h1, h2) и несколько параграфов (тег p) с текстом и указанием автора
3. Добавить минимум одну иллюстрацию (элемент img)
4. Добавить внутреннюю и внешнюю ссылки (теги a и a:blank)
5. Сделать несколько страниц и связать их перекрестными ссылками
6. Проверить страницу при помощи валидатора и исправить все ошибки разметки
7. Попытаться зарегистрироваться на хостинге, выбрать URL-адрес сайта и создать его. Выложить файлы проекта на хостинг.
   Главная страница должна иметь название index.html и располагаться в корневой директории (иногда она называется public_html)
8. Найти поиском или создать новую иконку ☝🏼, добавить ее на страницы при помощи тега link:favicon
9. Постараться ответить на все вопросы

Пример

Страница Кота

Что должно быть на сайте? 👇

• На веб-страницах должны быть следующие блоки: шапка (хэдер), основной контент и подвал (футер)
• В шапке – одинаковая для всех страниц навигация, сделанная на основе ненумерованного списка
• У каждой страницы должно быть сделано оформление при помощи каскадных листов стилей, css

Страницы, сделанные на занятиях:

• Агния Бхаскаран Наир
• Иван Саньков
• Самосорова Настя
• Максим Богомолов

Архив

Видео

• Все трансляции на YT
• Трансляция от 14.01.2023, Пример из трансляции
  
• Трансляция от 21.12.2022
  Инструкция, как поставить, настроить сервер с WordPress, а также подготовить его к созданию интернет-магазина
  
• Трансляция от 12.11.2022
  
• Обсуждение проектов, 9.11.2022
  
• Мастер-класс, март 2022 г.
  

Материалы для вдохновения

• Стоковые картинки:
  • unsplash.com
  • freestockimages.ru
  • gettyimages.com
  • rgbstock.com
  • RealisticShots.com
  • picjumbo.com
  • freeimages.com
• Гифки: 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