Web-дизайн: gvard.github.io/web/
Задания
Страница кружков и сайты, сделанные на занятиях (2022–2023), архив
Не знаешь, с чего начать? Прочти: что нужно, потом – основы HTML и CSS
Потом: свойства текста, свойства изображений
Работа с файлами: называть файлы в нижнем регистре и без пробелов
Порядок применения правил CSS
Многостраничный сайт и его оформление
Шрифты: основные свойства, семейства шрифтов, единицы измерения в CSS, подключение внешних шрифтов с fonts.google.com
Знаешь основы Web-дизайна – можешь ответить на все вопросы
Оценка своих знаний – это в том числе самостоятельная работа!
Учебные страницы к занятиям по web-дизайну
- Web-кот и его Собака. Задача: создать html-страницу с элементами заголовок, параграф, изображение, список, ссылка и открыть ее в браузере.
- Домашняя страница Кота. Задача: создать страницу с оформлением из данного примера. Создать и подключить стилевой файл, вставить иконку страницы, изменить фон страницы, поместить на фон картинку.
- Простая статья с оформлением. Задача: создать html-страницу с семантическими тегами header, main, footer, article. Заполнить тег article статьей. Выделить основное содержимое средствами CSS.
- Новостная страница с меню. Задача: создать страницу с семантической версткой. В шапку сайта вставить меню, сделанное на основе ненумерованного списка. Оформить страницу по образцу. Код меню, выпадающее меню.
- Рисуем красный прямоугольник. Задача: научиться верстать блоки.
- Верстаем блоки. Страница из блоков со скриптом, который прячет картинку и показывает текст параграфа.
- Простой тест, Сайт из нескольких станиц с тестом
- Знаменательные даты. скрипт для показа событий, произошедших сегодня.
Для работы скрипта необходимо поместить на странице элемент, в котором будут находиться: 1) div с классом date, содержащий дату вида dd.mm.yyyy; 2) span с классом ago перед строкой вида "лет назад произошло..."
- Одновременная игра = Мини-игра + zlat102.000webhostapp.com/game.html (Mini-games)
Лендинг-страница Слайд-шоу- Новость для оформления. Задача: оформить html-страницу изученными средствами. Добавить иллюстрации. Выделить цитиату средствами CSS.
- Flex-direction и checkBox.
Задача: сверстать при помощи flexbox макет из двух блоков.
Кнопки BUY NOW делаются на основе тега a с установленным фоном, рамкой и радиусом скругления border-radius.
Картинки: компьютер,
принт.
Макет.
- Задача: сверстать
слайд со
статистикой Солнечной системы. Используется
Сравнение размеров Сатурна и Земли (фон). Результат.
- Форма,
Обработка форм на PHP,
https://almucantar.000webhostapp.com/php/ (Страница с использованием php),
https://almucantar.000webhostapp.com/php/readbook.php" (Простая гостевая книга)
- JavaScript: загрузка данных
- Презентация с градиентом на фоне в стиле презентаций Стива Джобса
- Картинка-подсказка: смена картинки скриптом по движению мышки
- Изменение курсора
Критерии оценки работ:
- Правильная структура документа, страница проходит валидацию (максимум 3 балла)
- Есть заголовок, параграф, изображение, список, ссылка (5 баллов)
- Подключен отдельный стилевой файл, есть фон страницы. Подключена иконка (3 балла)
- Есть семантическая структура: использованы семантические теги или div с «говорящими» названиями классов (балл за каждый элемент структуры, включая шапку и подвал с годом и копирайтом, максимум 4 балла)
- Использованы вложенные блоки (2 балла)
- Сайт состоит из нескольких страниц, каждая из которых имеет меню. Меню сделано на основе списка (5 баллов максимум)
- Использован хотя бы один JS-скрипт, включая предложенные на занятиях готовые скрипты: тест, показ и исчезновение блока по действию (5 баллов максимум)
- Подключены внешние шрифты (3 балла максимум)
- Установлен фон для нескольких блоков на странице, установлен размер блоков во весь экран или по размеру картинки (максимум 2 балла)
- Есть отдельная страница – слайд-шоу, состоящая из нескольких слайдов с заголовками, блоками и текстом (максимум 5 баллов)
- Сайт выложен на хостинг (максимум 3 балла, успешное использование хостинга github добавляет балл за старание)
- Баллы за количество страниц (обсуждается: при наличии нескольких сайтов ставится лучший из поставленных баллов по отдельной категории)
- Сайт сверстан с учетом мобильных устройств (использовано правило @media, дизайн учитывает все размеры экранов). Максимум 5 баллов
- Созданы формы, код для работы с ними функционирует (GET/POST запросы, страница «гостевая книга»). Максимум 5 баллов
- Реализована работа с открытыми API по данным примерам. Максимум 10 баллов
Справочные материалы
- Как работать: инструменты web-дизайнера. Браузер, текстовый редактор, хостинг, валидаторы.
- Как устроен HTML. Основные теги. Все теги, спецсимволы HTML, заполнение макета.
- Как устроен CSS. Основные группы свойств. Геометрия в CSS.
- CSS: Свойства текста, свойства изображений
- Шрифты: основные свойства, семейства шрифтов, единицы измерения в CSS, подключение внешних шрифтов с fonts.google.com
- Адаптивный веб-дизайн, свойства объекта window, использование медиа-запросов
- Как выглядит семантическая разметка: памятка по структуре документа.
- Стоковые картинки: unsplash.com,
pixabay.com,
pexels.com,
альбомы
(например, Galaxy & Stars,
Abstract Art).
Гифки: giphy.com.
ПНГшки: freepng.ru
- PIXLS.US - Free/Open Source Photography
- Flexbox в картинках,
Обучающая игра FLEXBOX FROGGY в браузере (на русском),
THE ULTIMATE FLEXBOX CHEAT SHEET,
Grid в картинках
- CSS-градиент, презентация с градиентом на фоне
- Как добавить два фона к одному элементу
Содержание страниц
Что дальше?
Ссылки
- www.example.com (www.example.org),
префикс www никогда не был стандартом.
- Free website templates
- Главред,
Как пользоваться (видео).
Grammarly: Free Writing Assistant
- Яндекс.Вебмастер
- «Не закрывайте теги!» (спойлер: лучше все-таки закрывайте)
- «Загадочные отступы» между инлайн-элементами.
Удивительный и неизвестный inline-block
- A Couple of Use Cases for Calc()
- Как сделать карусель,
How to build a carousel from scratch in vanilla JS
- CSS animations
- CSS object-fit and object-position properties: Crop images embedded in HTML
- Canonical link element
- Методология / БЭМ,
Object Oriented CSS,
Scalable and Modular Architecture for CSS,
Atomic CSS.
- Препроцессоры Sass,
less.
- History of hypertext,
Timeline of hypertext technology,
Hypertext Editing System,
Ted Nelson,
Project Xanadu.
- Apple font background presentation, шрифт Myriad
- Вёрстка веб-страниц
- Почему у нас осталось так мало от раннего интернета?
- parallax.js
- CSS Tools: Reset CSS
- CSS + HTML + человек = полноценный язык программирования! Is CSS Turing Complete?
