Веб дизайн с чего начать обучение: Как стать веб-дизайнером

Содержание

«Обучение веб-дизайну» — Яндекс Кью

Курсы веб-дизайна и проектирование сайтов

федеральное государственное автономное образовательное учреждение высшего образования

Профессиональная переподготовка, 480 ак. часов/6 месяцев

Записаться на курс

Паспорт курса

Описание курса

Отзывы выпускников

Аннотация курса

Курс рассчитан на начальный уровень подготовки. Даже если вы никогда не работали в Adobe Photoshop и не верстали на HTML, после прохождения курса вы сможете создать полнофункциональный сайт (десктопную и мобильную версию) с нуля и «под ключ».

В рамках курса вы изучите не только внешнюю сторону создания веб-сайтов (frontend), но и серверную часть (backend).

В процессе обучения вы изучите основные технологии создания современных и успешных веб-сайтов: научитесь разрабатывать макеты в таких популярных программах как Adobe Photoshop и Adobe Illustrator, получите полное представление о технологии верстки веб-страниц (frontend), применяя язык разметки гипертекста HTML5 и каскадные таблицы стилей CSS3, научитесь динамически управлять элементами веб-страниц благодаря языку программирования JavaScript, получите базовое представление о платформе NodeJS и научитесь работать с менеджером задач Gulp, а также настраивать его для выполнения ряда задач (hot-reloading и транспиляция файлов).

Полученные технические знания в полной мере вы сможете применять на практике в процессе изучения UX и UI проектирования, создавая веб-приложения с учетом современных тенденций в дизайне.

Также Вы освоите базовые принципы попиксельной верстки и создадите личный веб-сайт для размещения своего портфолио. Вместе с преподавателем вы пройдете все этапы создания сайт от разработки макета до размещения на хостинге.

Изучая серверную часть (backend) разработки сайтов, вы будете работать с системой виртуализации docker. Вы научитесь создавать собственные образы, управлять контейнерами и получите базовый уровень знаний для работы с консолью unix-систем. Внутри docker-контейнеров научитесь разворачивать стек технологий для веб-разработки на языке программирования PHP с использованием БД MySQL. Научитесь организовывать взаимодействие между контейнерами как на уровне docker, так и средствами языков программирования (API).

Поскольку важную роль в веб-разработке занимает умение работать в команде, в рамках данного курса вы получите опыт взаимодействия в группе в процессе изучения системы контроля версий GIT и научитесь решать базовые задачи, возникающие перед разработчиками. Также Вы получите опыт работы с конструктором Tilda, который в разы ускоряет процесс прототипирования и разработки веб-страниц.

Полученная специальность позволит работать как удаленно или на фрилансе, так и на штатных позициях в федеральных и международных компаниях, что подтверждено опытом наших выпускников.

Перед заключением договора на обучение рекомендуется ознакомиться с курсом в режиме тестового доступа (первая неделя обучения бесплатно).

Профессиональные стандарты

Предварительные требования

Программа курса

Растровая графика Adobe Photoshop (50 часов)
- Тема 1. Основные сведения о программе. Интерфейс программы
  Типы обрабатываемых изображений. Свойства пиксельных изображений. Операции обработки цифровых изображений. Начальное окно Adobe Photoshop и элементы интерфейса. Меню. Панель быстрого доступа. Настройка интерфейса — рабочие среды. Панель настройки инструментов. Палитрыпанели. Диалоговые окна. Управление открытыми документами. Упорядочивание документов. Создание копии рабочего окна. Операции с файлами. Увеличение и уменьшение изображения на экране.
  Режимы отображения рабочего экрана. Вывод на экран и отключение видимости элементов интерфейса. Получение информации об изображении. Выбор и использование инструментов. Настройки и установки программы.
- Тема 2. Элементарные действия с изображением
  Параметры нового документа. Размеры изображения. Размер холста (канвы). Обрезка изображения — кадрирование. Вращение изображения. Отзеркаливание или отражение изображения. Отмена действий.
- Тема 3. Коррекция изображений
  Палитра Info (Инфо). Автоматическая коррекция. Простые решения по коррекции. Тоновая коррекция изображений. Характеристики тона изображения. Анализ гистограмм. Команды тоновой коррекции. Использование команды Brightness/Contrast (Яркость/Контраст). Оценка тона изображения с помощью команды Levels (Уровни). Коррекция тона изображения с помощью Curves (Кривые). Обработка 8- и 16-битных файлов. Цветовая коррекция. Изменение резкости и четкости. Добавление шума, удаление погрешностей.
- Тема 4. Редактирование изображения
  Использование основного и фонового цвета. Кодировка цвета. Калибровка монитора. Управление цветом. Определение цвета с помощью диалогового окна. Синтез цвета с помощью палитры Color (ЦветСинтез цвета). Палитра Swatches (ОбразцыКаталог). Основные параметры рисующих инструментов. Инструменты Pencil (Карандаш), Brush (Кисть) и Eraser (Ластик). Инструмент Paint Bucket (Заливка). Инструмент Gradient (Градиент).. Слои фигуры. Инструменты ретуши.
- Тема 5. Работа с выделенными областями
  Создание выделения с помощью инструментов. Геометрические выделения. Растушевка границы выделения. Выделение области, основанной на цвете. Комбинирование инструментов выделения. Команды меню Select. Редактирование выделенной области с использованием альфа-каналов. Перемещение границ выделенной области. Модификация выделенной области командами подменю Modify (Модификация). Перемещение выделенной области. Копирование выделенных областей. Копирование выделенной области при перетаскивании. Удаление выделенных пикселов. Трансформирование изображения в выделенной области.
- Тема 6. Работа со слоями
  Послойная организация изображения. Палитра Layers (Слои). Использование палитры Layers (Слои). Настройка прозрачных областей слоя. Режимы рисования и наложения слоев. Применение эффектов и стилей. Применение к слою стиля. Smart-объекты. Деформирование изображений. Объединение и сведение слоев. Композиции слоев.
- Тема 7. Корректирующие слои. Маскирование слоев
  Корректирующие слои в палитре Layers (Слои). Создание корректирующих слоев. Палитра Adjustments (Коррекция). Корректирующие слои тоновой коррекции. Корректирующие слои цветовой коррекции. Корректирующий слой Vibrance (Вибрация). Корректирующий слой Black and White (Белое и черное). Корректирующий слой Photo Filter (Фотофильтр). Корректирующий слой Channel Mixer (Смешение каналов). Корректирующие слои Invert (Инвертирование), Threshold (Порог) и Posterize (Постеризовать). Корректирующий слой Gradient Map (Карта градиента). Маскирование слоев. Создание слой-маски. Палитры для работы с масками. Диалоговое окно Refine Mask (Уточнить маску).
- Тема 8. Создание и обработка текстов
  Основные термины. Ввода текста. Типы текста, их создание и использование. Палитры форматирования в Adobe Photoshop. Обработка маскированного текста. Обработка векторного текста. Создание из текста рабочего контура. Преобразование текста в кривые. Изменение формы текста. Создание текста вдоль контура. Создание текста внутри контура. Растеризация текстового слоя.
- Тема 9. Изображения для интернета
  Графические форматы изображений в Интернете. Оптимизация отдельных изображений. Оптимизация формата JPEG. Оптимизация формата GIF. GIF-анимация. Видео и видеослои. Автоматизация действий.
- Тема 10. Подготовка изображений для печати
  Размеры пиксельной графики для полиграфии. Использование форматов файлов для полиграфии. Формат TIFF. Формат EPS. Формат PDF. Использование формата RAW. Создание контуровпутей. Модель кривой Безье. Предварительное цветоделение. Параметры конвертации в CMYK. Рекомендуемые установки цветоделения. Печать из Adobe Photoshop.
Векторная графика AdobeIllustrator (35 часов)
- Тема 1. Рабочая область и создание стандартных фигур и линейных объектов.
  Введение. Запуск и интерфейс программы. Создание и открытие документов. Установки документа. Использование инструментов, отображение рисунка. Палитры. Сохранение документа. Использование шаблонов документов. Создание основных геометрических фигур. Создание линейных объектов.
- Тема 2. Выделение, расположение и размещение объектов.
  Инструменты выделения. Сочетание фигур. Группирование объектов. Расположение объектов. Перемещение и копирование объектов. Удаление, фиксирование и скрытие объектов.
- Тема 3. Работа с контурами.
  Инструменты для создания контуров. Элементы векторного контура. Создание контуров инструментом Pen. Выделение контуров и опорных точек. Изменение кривизны контура в точке. Использование инструментов группы Pencil. Инструмент Reshape. Команды обработки контуров.
- Тема 4. Работа с цветом.
  Цветовые модели, используемые в программе. Цветовая модель RGB. Цветовая модель CMYK. Цветовая модель HSB. Цветовая модель Grayscale. Присваивание цвета объектам. Градиентные заливки. Конвертирование цветов моделей RGB и CMYK. Инструменты Live Paint Bucket и Live Paint Selection. Декоративные заливки
- Тема 5. Преобразование объектов и контуров.
  Перемещение объектов в процессе их создания. Перемещение объектов с помощью палитры Control. Трансформирование объектов. Использование инструментов трансформирования. Трансформирование изображений с помощью палитры Transform. Использование инструментов группы Warp. Команды меню Effect.
- Тема 6. Превращения, оболочки, трехмерные эффекты.
  Превращения. Оболочки. Обтравочные маски. Трехмерное представление объектов.
- Тема 7. Работа с текстом.
  Инструменты для работы с текстом. Параметры символов. Заголовочные и абзацные текстовые блоки. Размещение текста в замкнутом объекте. Размещение текста вдоль контура. Обтекание текстом графических объектов. Отображение текста плашками. Преобразование текста в кривые. Текстовые стили.
Основы веб-технологий (50 часов)
- Тема 1. Введение в HTML. Структура страницы.
  Понятие HTML. Основы работы глобальной сети Интернет. Понятие веб-сервера. Статичные и динамичные сайты. Основные типы сайтов. Обзор современных стек технологий HTML и CSS. Базовая структура HTML. Варианты разметки страницы. Основные блоки HTML-страницы.Создание гиперссылок и работа с ними. Основы работы с гиперссылками. Взаимосвязь между страницами статичного веб-сайта.
- Тема 2. Размещение изображений, списков и таблиц
  Размещение изображений на веб-странице. Упорядоченные и неупорядоченные списки. Основы работы с таблицами. Отрывки прошлого: старые сайты верстали в таблицах.
- Тема 3. Медиа-файлы. Iframe. Формы
  Размещение на своих страницах звуковых и видео-файлов.Внедрение внешних HTML-страниц. Взаимодействие ссылок с iframe-элементами.Текстовые поля, радио-кнопки, флажки/чекбоксы, элемент выбора select и их атрибуты. Создание формы обратной связи.
- Тема 4. Основы каскадных таблиц стилей CSS.
  Основы работы с CSS. Подключение файла стилей. Базовые понятия: селектор, свойство, каскад, наследование, единицы измерения. Применение CSS-свойств к оформлению изображений.
- Тема 5. Макетирование страницы с CSS
  Верстка страницы по макету. Построение структуры страницы. Высота и ширина колонок. Свойства float, display.
- Тема 6. Адаптивные html-страницы
  @media, медийные запросы (@mediaqueries) для страниц, mediafeature.
- Тема 7. Работа со шрифтами
  @font-face, GoogleFonts, Единицы измерения для работы со шрифтами и html-элементами.
- Тема 8. CSS-анимация.
- Тема 9. Подготовка, размещение и поддержка сайта в сети
  Выбор хостинга. Основы работы с FTP-клиентами. Использование тега meta.
- Тема 10. Гибкая работа со страницами сайта
  Проверка валидности верстки. Языки серверного программирования и генерация динамических HTML-страниц. Возможности JavaScript по работе с HTML-страницами и CSS-свойствами.
Основы JavaScript (40 часов)
- Тема 1. Введение в JavaScript
  Типы данных. Операторы. Инструкции и выражения. Переменные и константы.
- Тема 2. Конструкции ветвления и циклы
  Конструкции ветвления логики программы (if…else, switch). Циклы: с предусловием, постусловием и арифметический.
- Тема 3. Функции
  Понятие функции. Объявление функции. Аргументы функции. Возврат значений. Области видимости. Стрелочные функции. Анонимные функции.
- Тема 4. Массивы и объекты
  Понятие объект (Object). Свойства объекта. Методы объекта. Массивы. Свойство и методы функции. Объект String и его аргументы. Объект Math. Функция parseInt(). Функция parseFloat(). Статические функции объекта Math.
- Тема 5. Клиентский JavaScript. Объект Window
  Объекта Data. Работа с таймерами. Свойства и методы объекта Window. Управление поведением Window. Объект Location. Объект History. Объект Navigator.
- Тема 6. Клиентский JavaScript. Объектная модель документа: DOM. Работа с HTML элементами.
  Причины использования DHTML. DOM (DocumentObjectModel — объектная модель документа). Доступ к узлам DOM. Доступ по идентификационному номеру (ID) . Доступ по атрибуту name. Доступ по имени дескриптора . Доступ и изменение класса через свойство className. Получение информации об узле. Перемещение по иерархическому дереву DOM. Метод removeChild(). Удаление элементов. Методы createElement() и appendChild(). Создание и добавление элементов. Методы insertBefore(). Создание и добавление элементов. Метод createTextNode(). Создание текстовых элементов. Метод setAttribute(). Добавление атрибутов. Метод cloneNode(). Клонирование элементов. Метод replaceChild(). Замена элементов. Свойство innerHTML. Изменение фрагментов кода HTML. Использование CSS стилей в сценариях JavaScript. Соглашения об именах: CSS-атрибуты в JavaScript. Работа со свойствами стилей. DHTML-анимация.
- Тема 7. Клиентский JavaScript. Cookie
  Описание cookie. Cookie в браузере.
- Тема 8. Клиентский JavaScript. Формы и обработка событий
  Элементы управления и объекты. Быстрый доступ к объектам. Динамическое изменение значений атрибутов. Изменение элементов на основе значений, указанных пользователем. Динамическое изменение списка вариантов. Проверка выбранных флажков. Изменение элементов перед отправкой формы на сервер. Использование встроенных функций JavaScript. Отключение элементов. Элементы только для чтения.
Современные технологии верстки (40 часов)
- Тема 1 CSS-фреймворки
  CSS-фреймворки: Bootstrap и Foundation. Базовые возможности фреймворков.
- Тема 2 Контейнеры. Система сеток Bootstrap
  Контейнеры. Система сеток Bootstrap. PSD-файл для разработки макета.
- Тема 3. Оформление HTML-элементов
  Оформление списков, шрифтов, таблиц и изображений с помощью Bootstrap.
- Тема 4. Компоненты Bootstrap
  Кнопки. Выпадающие элементы. «Хлебные крошки».
- Тема 5. Формы
  Всплывающие формы. Формы обратной связи. Всплывающие сообщения.
- Тема 6. Встраивание медиа-файлов
  Границы. Иконки. Встраивание медиа-файлов на HTML-страницы.
- Тема 7. Flexbox. Сетка Flexbox
  Понятие Flexbox. Основы работы с Flexbox.
- Тема 8. JavaScript и события Bootstrap
  Понятие JavaScript. Базовые возможности языка. Взаимодействие с Bootstrap. Управление поведением bootstrap-компонент через JS.
Методологии и инструменты современной верстки (50 часов)
- Тема 1. Принципы организации CSS
  Методология БЭМ. ООCSS. Попиксельная верстка. Инструмент PixelPerfect.
- Тема 2. GridCSS
  Контейнеры, треки, линии, ячейки, области, аллеи. Вложенность grid-ов. Z-index.
- Тема 3. Таск-менеджер Gulp.
  Понятие Таск-менеджера. Преимущества применения. Настройка Gulp на работу c SASS.
- Тема 4. Препроцессоры CSS
  Основы работы с SASS. Переменные. Вложенность кода. Комментарии в SASS. Примеси (Миксины).
- Тема 5. Препроцессоры CSS
  Наседование. Фрагментирование SASS файлов. Импорт. SASS-script.
- LandingPage: свой собственный сайт портфолио! (25 ак. часов)
  Тема 1. Подготовка окружения. Разбор структуры макета. Верстка хэдера.
  Тема 2. Верстка футера
  Тема 3. Блоки «Мои навыки», «Почему Я?», «Блог»
  Тема 4. Подключение сторонних библиотек. «Образование»
  Тема 5. Блоки «Портфолио», «Контакты».
Проектирование интерфейса пользователя (UI-проектирование) (40 часов)
- Тема 1: Основы проектирования интерфейсов.
  История экранных интерфейсов. Общие понятия интерфейса и его элементы. Интерфейсы сегодня, тенденции и тренды. Проектировщик интерфейсов, кто он? Поиск референсов, графические стоки.
  
  Практика: Создание простого лэндинга по примеру. Повторить стиль одной страницы, изменив название и основное изображение.
- Тема 2: Элементы интерфейсов.
  История и тенденции развития экранных интерфейсов, технологический аспект. Приемы для создания нужного настроения на сайте. Первостепенность задачи при проектировании. Значимость различных элементов. Примеры стилей и их применения. Проектный подход, рисование кнопок и иконок.
  
  Практика: Создание сета элементов в различных стилях (для 2-х сайтов, игрового и продающего). Отрисовать по 2 иконки и по 2 кнопке для каждого из сайтов.
- Тема 3. Модульные сетки в экранных интерфейсах. FIGMA.
  Экранная верстка. Модульные сетки и их применение. Модульные сетки и их адаптивность. С чего начинать макет интерфейса?
  
  Практика: Создание макетов простой страницы на основе модульной сетки в Photoshop и в Figma.
- Тема 4: Лендинги и сложные макеты в web, адаптивность.
  Отличия простого и сложного web-дизайна. Зачем нужен лендинг и в чем его особенности? Проектирование полных страниц в Figma, мобильный интерфейс.
  
  Практика: Создание лендинга сайта и его мобильной версии.
- Тема 5: Экранная типографика. Текст в web
  Текст, как составляющая удобства использования или usability. Экранная типографика, ее особенности. Текст в web, его значимость для пользователя и для систем. Порядок элементов, логика взаимодействия.
  
  Практика: Доработайте контент своего сайта. Проверьте, чтобы тексты и короткие тексты, заголовки, были оформлены верно. Соблюдая общий стиль отрисуйте экраны взаимодействия, состояния кнопок и элементов, чтобы все было готово к анимации.
- Тема 6: Элементы Figma.
  Figma и порядок организации проекта.
  
  Практика: навести порядок в структуре документа, объединить элементы по группам, создать страницы с фрэймами и дашбордами, в которые вы соберете все основные компоненты, на которые вы опираетесь в работе. Назвать все четко и понятно.
- Тема 7: Анимация и переходы в Figma.
  Практика: создать анимированный контент, записать его с экрана в формат gif и прислать ссылку на папку с gif-анимацией внутри. Постарайтесь максимально анимировать все возможные кнопки, слайдеры, выезжающие и раскрывающиеся экраны.
- Тема 8: Презентация проекта.
  Практика: Полная отладка макета, создание десктопной и мобильной версий сайта. Запись анимации и презентация макета.
Проектирование пользовательского опыта (UX-проектирование) (30 часов)
- Тема 1. Философия и научная методология в дизайне
- Тема 2. Качественные и количественные методы исследования – предложить и использовать количественный метод для заданной задачи. (5 задач)
- Тема 3. Психология человеко-компьютерного взаимодействия – Создание карты пользователя (персона), другие методики описания пользователя
- Тема 4. Пользовательские истории (когда… я хочу… я могу…) – написать историю (3-5 шт)
- Тема 5. Проектирование пользовательского опыта – создание сценария пользовательского опыта
- Тема 6. Проектирование продукта
- Тема 7. Юзабилити-тестирование
- Тема 8. Анализ и оценка пользовательского опыта
- Форма аттестации: презентация проекта.
  Проект включает в себя качественные и/или количественные методы исследования, создание карты пользователя (персона), пользовательские истории, сценарии пользовательского опыта, проектирование, юзабилити-тестирование, отчет по оценке пользовательского опыта, предложения по улучшению.
PHP и MySQL. Основы разработки веб-приложений (40 часов)
- Тема 1. Подготовительные работы. Настройка окружения
  Этап 1: Установка VirtualBox. Установка UbuntuServer. Установка Putty. Установка docker для развертки веб-сервера. Основные команды работы с docker.
  
  Этап 2: Установка SSH. Настройка SSH. Установка Apache2. Создание и загрузка Docker образа. Установка MySQL (репозиторий Ubuntu). Установка MySQL (из исходного кода). Установка PHP7.
- Тема 2. Базовые команды языка PHP
  Шаблон php-документа. Переменные и константы. Условные операторы (if-else, switch).
- Тема 3. Массивы и строки. Циклы
  Структура данных массив. Одномерные и двухмерные массивы. Особенности работы с массивами. Сортировка массивов.
  
  Арифметический цикл. Цикл постусловием. Цикл с предусловием.
- Тема 4. Пользовательские функции
  Понятие функции. Создание и использование простых функций. Создание и вызов функций, принимающих аргументы. Создание и использование функций, возвращающих значение. Переменные и функции. Область действия переменных и глобальные переменные. Задание значений аргументов по умолчанию.
- Тема 5. Подключение внешних файлов
  Использование функций include и require. Константы.
- Тема 6. Глобальные массивы GET и POST.
  Основы работы с get и post запросами (через HTML-формы и Ajax-запросы). Обработка данных из HTML-формы.
- Тема 7. Сессии и куки. Основы работы.
  Понятие куки. Установка куки. Использование данных из куки для персонализации сайта. Понятие сессии. Запуск сессии, Создание элемента сессии и вывод его на экран.
- Тема 8. Работа с БД Mysql.
  PHP и базы данных. Соединение с сервером и создание базы данных. Создание таблицы. Отправка данных. Извлечение данных.
Средства организации процесса веб-разработки в команде (20 часов)
- Тема 1. Системы контроля версий. Репозиторий Git.
  Принципы работы систем контроля версий. Введение в Git. Установка и начальная настройка Git (Windows и Linux).Создание, изменение и удаление репозитория. Просмотр истории коммитов. Отмена действий. Метки. Псевдонимы.
- Тема 2. Ветвление в Git
  Принципы ветвления и слияния. Управление ветками. Слияние и разрешение конфликтов. Перебазирование.
- Тема 3. Использование Git на сервере. Распределенная работа в Git
  Установка Git на сервере. Настройка. Протоколы. Рабочие процессы. Создание коммитов. Поддержка. Инструментарий.
- Тема 4. Использование Git в других окружениях
  Графические утилиты. Среды разработки. GitHub.
Создание сайта на конструкторе Tilda 2 (40 часов)
- Конструктор Тильда
  О назначении конструкторов. Панель управления сайтами. Выбор тарифа. Экспорт кода. Создание сайта. Настройки сайта. Создание страниц. Список страниц. Настройки отдельной страницы. Интерфейс редактирования страницы. Предпросмотр и публицикация страницы. Списки страниц. Техническая поддрежка.
  
  Практика: создание учетной записи, сайта и страницы сайта.
- Стандартные блоки
  Хэдер и футер. Обложка. Блок о проекте. Добавление изображения. Добавление галлереи. Блок преимущества. Команда сайта. Список страниц. Добление отзывов. Расписание для сайта мероприятия. Этапы работы над проектом. Контакты. Подключение карт. Добавление соцсетей. Сетка парнеров.
  
  Практика: создание лэндинга из стандартных блоков на выбранную тему.
- Zero-block
  Создание нулевого блока. Панель навигации. Доступные элементы. Работа с текстом. Работа с изображениями. Шейпы. Добавление кнопок. Работа с видео. Работа с тултипами. Вставка кода. Добавление формы. Размеры в пикселях и процентах. Цвет и границы и тени. Порядок слоев. Пару слов о lazyload картинок.
  
  Практика: создание интеренет-магазина на выбранную тему.
- Сайт
  Настройка домена. Выбор главной страницы. Стастистика сайта. Googleanalytic и Яндекс метрика. Настройка HTTPS. Настройка шрифтов, цвета для всего сайта. Seo — рекондамендации. Экспорт сайта. Cервисы приёма данных из форм. Платежные системы. Выбор шапки и подвала. Действия с сайтом. Ограничение доступа. Личный кабинет. HEAD для всего сайта. Кастомизация СSS для всего сайта.Ключи от API карт. Фавикон.
  
  Практика: исправление работ, созданных во втором и третьем блоках по SEO-рекоммендациям. Подключение платежной системы. Подключение карты. Добавление фавикона.
- Анимация
  Рассмотрение возможностей анимации в Тильда. Анимация в стандартных блоках. Basic в ZeroBlock. Длительность, задержка, увеличение, просмотр. Параллакс. Фиксирование. Step-by-step в ZeroBlock. События: элемент на экране, блок на экране, по скроллу, по ховеру, по клику. Старт анимации. Зацикливание. Шаги. Перемещение, масштаб, опасность, поворот, задержка.
  
  Практика: добавление анимации к работам, созанным во втором и третьем блоках + бонус (выполнение задания на анимацию скроллинга)
- Дополнительно
  Полезные скрипты с mo-tilda. Как персонализировать страницу «Спасибо» в Tilda. Применяем градиент к заголовку в Tilda. Как создать фиксированную кнопку из ZeroBlock в Tilda. Фоновое видео в Zero-блоке. Создание калькулятора для сайта. Эффект печатной машинки. Добавление собсвенного скрипта.
  
  Практика: доработка страницы спасибо для интеренет-магазина, добавление видео в zero-блок лэндинга.
Дипломное проектирование (40 часов)
- Защита дипломной работы (5 часов)
  Преподаватели курса
  Сивинский Станислав Андреевич
  Веб-разработчик Senior, преподаватель
  Юлия Безбах
  Дизайнер, UI/UX-дизайнер, преподаватель
  Пономаренко Сергей Иванович
  Дизайнер, член союза дизайнеров, преподаватель
  Флеров Александр Викторович
  Дизайнер-верстальщик, старший преподаватель
  Государев Илья Борисович
  Веб-разработчик Senior, преподаватель, к.п.н., доцент
  Светлана Деркунская
  Дизайнер, преподаватель
  Дарья Полякова
  Дизайнер, преподаватель
  Карлов Петр Геннадьевич
  приглашенный эксперт
  Информация © 1993ー2022 Университет ИТМО
  Разработка: выпускник ОЦКПиД Сивинский Станислав
  Дизайн: выпускник ОЦКПиД Марина Хренкова
  Бесплатный курс веб-дизайна | Как начать заниматься веб-дизайном
  Бесплатный курс веб-дизайна | Как начать заниматься веб-дизайном
  Занятия проводятся очно (с соблюдением социальной дистанции) и онлайн. Забронируйте свое место сегодня
  Если вы хотите узнать о создании веб-сайтов и веб-кодировании, этот вебинар для вас. Это для полных новичков, но все равно будет полезно, если вы немного занимаетесь веб-кодированием.
  Вы узнаете о HTML и CSS и о том, как они используются для компоновки веб-страниц и оформления контента. Вы увидите, как простой веб-сайт кодируется и загружается, чтобы сделать его живым для всего мира. Вы даже получите письменные инструкции для кода, который мы показываем!
  Это идеальный способ узнать о веб-дизайне/разработке, прежде чем погрузиться в одну из наших практических программ веб-сертификатов (лично в Нью-Йорке или в режиме онлайн), в том числе:
  - Сертификат веб-разработки переднего плана: начните программировать веб-сайты с помощью HTML, CSS и JavaScript.
  - Сертификат полнофункциональной веб-разработки: научитесь кодировать внешний и внутренний интерфейс веб-сайтов с помощью HTML, CSS и JavaScript (стек MERN для Mongo, Express, React и Node).
  - Сертификат веб-дизайна: узнайте, как стать веб-дизайнером, включая разработку макетов, интерфейсное веб-кодирование и многое другое.
  См. сравнение наших интерфейсных программ и программ веб-дизайна.
  продолжить чтение
  Чему вы научитесь
  - С чего начать
  - Обзор творческого процесса от проектирования до исполнения
  - Какое программное обеспечение следует использовать?
  - Что такое HTML и CSS?
  - Разметка контента с помощью HTML
  - Стилизация текста и многое другое с помощью CSS
  - Оптимизация графики для Интернета (SVG, JPEG и т. д.)
  - Правильные способы называть ваши файлы
  - Правильная файловая структура для вашего сайта
  - Загрузка действующего веб-сайта через FTP
  Продолжайте учиться с Noble Desktop
  Сделайте следующий шаг в своем обучении с классом Noble Desktop. Получите практическое интерактивное обучение под руководством опытных инструкторов. Быстро освойте новые ценные навыки на коротком семинаре или начните трансформацию своей карьеры в одной из наших иммерсивных сертификационных программ, утвержденных штатом Нью-Йорк.
  Наше гибкое расписание позволяет легко найти класс в нужное время для вас, независимо от того, посещаете ли вы занятия в Нью-Йорке или живете онлайн. Все классы Noble Desktop проходят бесплатно в течение одного года, чтобы вы могли получить максимальную отдачу от своего обучения.
  Высокие оценки наших выпускников
  От нашего практического стиля обучения до инструкторов мирового класса и собственной учебной программы — мы предоставляем опыт обучения, которым наши выпускники могут гордиться.
  - Сертификат Front-End веб-разработки
    - Будни или будние дни
    - 108 часов
    - Открыт для начинающих
    - Доступное финансирование
    - 1:1 Наставничество
    Научитесь создавать внешний интерфейс веб-сайтов с помощью кодирования HTML, CSS и JavaScript. Создавайте веб-сайты с помощью WordPress, кодируйте электронные письма с помощью HTML и CSS и используйте Git для отслеживания изменений и совместной работы с другими разработчиками.
    Посмотреть курс
  - Сертификат полнофункциональной веб-разработки
    - Будни или будние дни
    - 408 часов
    - Открыт для начинающих
    - Доступное финансирование
    - 1:1 Наставничество
    Станьте полноценным разработчиком и работайте над всеми частями веб-приложения, от его внешнего вида до управления внутренними данными. Компании нуждаются в разработчиках полного стека из-за их разнообразия талантов.
    Посмотреть курс
  - Сертификат науки о данных
    - Будние дни, будни или выходные
    - 114 часов
    - Открыт для начинающих
    - Доступное финансирование
    - 1:1 Наставничество
    Овладейте инструментами, чтобы стать специалистом по данным: Python, SQL, автоматизация и машинное обучение. Изучите основы программирования на Python и анализируйте данные с помощью Pandas, NumPy и Matplotlib, а также выполняйте запросы к базам данных с помощью SQL. Используйте машинное обучение для применения регрессии и другого статистического анализа для создания прогностических моделей.
    Посмотреть курс
  - Сертификат разработки программного обеспечения
    - Только будние дни
    - 498 часов
    - Открыт для начинающих
    - Доступное финансирование
    - 1:1 Наставничество
    Изучите навыки, чтобы стать инженером-программистом или разработчиком полного стека в этом иммерсивном курсе. Создайте внешний интерфейс с помощью HTML, CSS, JavaScript и React; создайте серверную часть с помощью Python, Django и Node. js
    Посмотреть курс
  - Сертификат дизайна пользовательского интерфейса
    - будние дни или будние ночи
    - 120 часов
    - Открыт для начинающих
    - Доступное финансирование
    - 1:1 Наставничество
    Дизайн мобильных и веб-интерфейсов, изучение основ графического дизайна и создание портфолио. Наш сертификат дизайна пользовательского интерфейса включает занятия по Figma, Photoshop, Illustrator, графическому дизайну и дизайну пользовательского интерфейса.
    Посмотреть курс
  - Сертификат разработки JavaScript
    - будние дни или будние ночи
    - 324 часа
    - Необходимые условия
    - Доступное финансирование
    - 1:1 Наставничество
    Узнайте, как создавать веб-приложения с помощью JavaScript, одного из самых популярных языков программирования. Создайте портфолио проектов и подготовьтесь к карьере в разработке приложений.
    Посмотреть курс
  - Сертификат веб-дизайна
    - Будни или будние дни
    - 162 часа
    - Открыт для начинающих
    - Доступное финансирование
    - 1:1 Наставничество
    Станьте разносторонним веб-дизайнером и начните создавать свое портфолио. Научитесь создавать веб-страницы и электронные письма, кодировать их с помощью HTML, CSS и JavaScript, а также создавать веб-сайты с помощью WordPress.
    Посмотреть курс
  - Просмотреть все курсы веб-разработки
  - Просмотреть все курсы веб-дизайна
  - Просмотреть все курсы и учебные курсы по JavaScript
  - Просмотреть все сертификаты веб-дизайна и разработки
  - Просмотреть все классы Python
  - Просмотреть все курсы по науке о данных
  Как стать веб-дизайнером
  Чтобы стать веб-дизайнером, вы должны изучить как творческие, так и технические аспекты создания привлекательных веб-страниц. Через программу обучения в колледже или программу сертификации вы можете научиться тому, как стать веб-дизайнером и работать со всеми визуальными компонентами веб-сайта, от цвета и шрифта до макета.
  Веб-дизайнеры могут извлечь выгоду из различных технических и профессиональных навыков. Вы можете иметь представление о творческом веб-дизайне и научиться его использовать, приобретая или совершенствуя эти навыки.
  Технические навыки
  Технические навыки в области веб-дизайна — это специальные дизайнерские и технические навыки, необходимые для создания веб-сайта. Для начала вам следует поэкспериментировать с программным обеспечением для дизайна, таким как Adobe Photoshop, Sketch и Illustrator, чтобы приобрести дизайнерские навыки. С помощью этих инструментов вы сможете научиться комбинировать шрифты, цвета, узоры и пустое пространство для привлекательного веб-дизайна. Эти типы программного обеспечения также помогают с такими задачами, как модификация фотографий, дизайн логотипа и макеты веб-сайтов (так называемые макеты).
  Чтобы преуспеть в качестве веб-дизайнера, важно знать, что происходит на самом конце процесса. Вот некоторые из технических навыков, которые вы, вероятно, освоите на этом пути.
  HTML
  Сокращенно от язык гипертекстовой разметки HTML — это то, что вы будете использовать для создания структуры веб-страницы. С помощью этого инструмента вы можете научиться выполнять эти и другие функции:
  - Вставка заголовков, списков, таблиц, электронных таблиц и фотографий в копию веб-страницы
  - Добавление гипертекстовых ссылок, чтобы пользователи могли быстро перейти на другую веб-страницу
  - Разработка форм для взаимодействия с пользователем, например для заказа продуктов или бронирования
  - Включение приложений, таких как видеоклипы и звуковые клипы, в копию веб-страницы
  - 1
    CSS
    Поскольку HTML обеспечивает структуру вашей веб-страницы, каскадные таблицы стилей (CSS) — это компьютерный язык, который придает ей стиль. С помощью этого инструмента вы можете менять шрифты, настраивать цвет, изменять фон и многое другое.
    JavaScript
    JavaScript (JS) — это язык сценариев, используемый с HTML и CSS для повышения интерактивности веб-страниц. С помощью JavaScript вы можете создавать и управлять элементами веб-страниц, такими как слайд-шоу фотографий, интерактивные формы и анимированная графика.
    UX
    Сокращенно от пользовательский интерфейс . UX — это стиль дизайна веб-сайта, который фокусируется на том, что нужно пользователю. Хорошие UX-дизайнеры учитывают доступность веб-сайта, удобство использования и визуальный стиль, а также то, как веб-страница воспринимается пользователем. Одним из практических примеров хорошего UX-дизайна является создание веб-сайта, адаптируемого к настольному компьютеру, ноутбуку, планшету и мобильному устройству.
    Python/Django
    Python — это простой, универсальный и очень эффективный язык программирования. Вы можете использовать Python для создания веб-приложений и игр, проведения статистических расчетов и многого другого. Если вы хотите создать сложный, масштабируемый веб-сайт, такой как Netflix или Spotify, вы можете использовать Django , популярную среду для создания веб-сайтов, написанную на Python.
    Навыки на рабочем месте
    Навыки на рабочем месте, также известные как основные навыки, связаны с тем, как вы работаете с другими и самостоятельно. Примеры навыков на рабочем месте, которые приносят пользу веб-дизайнерам, включают:
    Вы можете развивать эти навыки в повседневной жизни. Например, усильте свое внимание к деталям, проявляя больше внимания к творческому выбору, который используется в проектах других людей.
    Вы можете приобрести многие навыки, необходимые для того, чтобы стать веб-дизайнером, с помощью сертификационных программ и программ получения степени. Программы сертификации — это привлекательный вариант для тех, у кого не так много времени или денег для инвестирования. Как правило, эти программы длятся один год или меньше, и вы можете найти их в Интернете и в различных местных колледжах.
    Если вас интересуют сертификаты по одному предмету, вы можете найти курсы по различным языкам программирования, концепциям веб-дизайна и т. д. Или вы можете искать программы, которые объединяют несколько разных предметов в одну сертификацию. Некоторые студенты, поступившие на эти программы, получают степень младшего специалиста, бакалавра или магистра в области веб-дизайна.
    Подробнее: Что такое программы сертификации? Руководство на 2022 год
    Подумайте о том, чтобы получить степень.
    Если вы хотите стать веб-дизайнером, вы можете получить какую-либо степень. Колледжи и университеты предлагают степени младшего специалиста, бакалавра и магистра в области веб-дизайна.
    Степень младшего специалиста
    Чтобы получить степень младшего специалиста в области веб-дизайна, рассчитывайте посещать школу в течение двух лет, если вы работаете полный рабочий день. Вам нужно будет заработать от шестидесяти до шестидесяти пяти кредитов, и если вы ходите в школу неполный рабочий день, вам, вероятно, придется тратить больше времени на получение этих кредитов. Курсы, которые вы пройдёте, включают в себя некоторые общеобразовательные предметы и ряд дополнительных веб-классов, включая классы по:
    - HTML
    - CSS
    - JavaScript
    - Illustrator
    - Adobe Photoshop
    Подробнее: Сколько времени нужно, чтобы получить степень младшего специалиста?
    Популярные карьерные пути, которые вы можете выбрать со степенью младшего специалиста, включают:
    Вы можете продолжить свое образование, чтобы получить степень бакалавра или магистра.
    Степень бакалавра
    Если вы заинтересованы в получении степени бакалавра в области веб-дизайна, путь, скорее всего, займет четыре или более лет, если вы посещаете курсы полный рабочий день. Вы можете получить степень бакалавра наук, бакалавра искусств или бакалавра изящных искусств. Бакалавр наук (BS) больше фокусируется на технической стороне веб-дизайна, такой как операционные системы и языки веб-программирования. Примеры классов, которые вы можете пройти для получения этой степени, включают:
    - Основные и расширенные структуры баз данных
    - Языки и платформы программирования
    - Веб-скриптинг
    - Веб-публикация
    - . подробнее: Руководство для получения степени бакалавра: ресурсы для получения высшего образования
      Бакалавр искусств (BA) или бакалавр изящных искусств (BFA) освещает творческие аспекты веб-дизайна. Если вы склоняетесь в этом направлении, вы, скорее всего, получите степень в области цифрового дизайна или визуальной коммуникации с упором на веб-дизайн. Примеры классов, которые вы можете пройти для получения этой степени, включают:
      Степень магистра
      Чтобы получить степень магистра веб-дизайна, запланируйте два-три года работы сверх степени бакалавра, чтобы получить дополнительные сорок-пятьдесят кредитов. Получая степень магистра, вы можете получить более продвинутые знания в области веб-дизайна и разработки. Скорее всего, вы создадите веб-сайт в рамках своего основного проекта. Когда вы закончите учебу, вы сможете быть готовы к таким работам, как:
      Следующие шаги
      Если вы хотите узнать, подходит ли вам карьера веб-дизайнера, подумайте о том, чтобы пройти вводный онлайн-курс на Coursera, например, «Веб-дизайн для всех». : Основы веб-разработки и кодирования от Мичиганского университета или Введение Meta в разработку переднего плана. Вы также можете проверить конкретные навыки веб-дизайна, которые вас интересуют, такие как дизайн HTML или UX.
      специализация
      Веб-дизайн для всех: основы веб-разработки и кодирования
      Обучение дизайну и созданию веб-сайтов. Создайте адаптивное и доступное веб-портфолио с помощью HTML5, CSS3 и JavaScript
      4.8
      (23 916 оценок)
      266 013 уже зачисленных
      Уровень НАЧИНАЮЩИЙ
      Узнать больше
      Среднее время обучения: 6 месяцев в
      темп
      Навыки, которые вы приобретете:
      Веб-разработка, Каскадные таблицы стилей (CSS), HTML5, JavaScript, Адаптивный веб-дизайн, Веб-дизайн, Веб-доступность, HTML, Таблицы стилей, Объектная модель документа (DOM), Bootstrap (Front -Концевая рамка)
      курс
      Введение во фронтенд-разработку
      Добро пожаловать на Введение во фронтенд-разработку, первый курс в программе Meta Front-End Developer. С этого курса хорошо начать, если вы …
      4.8
      (3 386 оценок)
      93 344 уже зачислены
      Уровень НАЧИНАЮЩИЙ
      Узнать больше
      Навыки, которые вы приобретете:
      Инструменты веб-разработки, пользовательский интерфейс, интерфейсная веб-разработка, HTML и CSS, адаптивный веб-дизайн
      Статьи по теме
      - Что такое степень в области компьютерных наук?
      - Как выбрать учебный курс по науке о данных
      - 21 идея подработки и с чего начать
      - Стать цифровым дизайнером: что нужно знать различия?
      Автор Coursera • Обновлено 3 августа 2022 г.