Веб-дизайн для всех: основы веб-разработки и кодирования. Курс от Coursera

Описание

• Язык – Английский с русскими субтитрами

Чему вы научитесь

• Добавьте интерактивности веб-страницам с помощью Javascript.
• Описать основы каскадных таблиц стилей (CSS3).
• Используйте объектную модель документа (DOM) для изменения страниц.
• Примените адаптивный дизайн, чтобы страницу можно было просматривать на различных устройствах.

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

Блок 1. Введение в html5

Благодаря растущему числу программ кажется, что создать веб-страницу может каждый. Но что, если вы действительно хотите понять, как была создана страница? Существуют отличные учебники и онлайн-ресурсы для изучения веб-дизайна, но большинство этих ресурсов требуют некоторых базовых знаний.

Этот блок разработан, чтобы помочь новичку, который хочет обрести уверенность и знания.

Вы рассмотрите

• Теория (что на самом деле происходит, когда вы нажмете ссылку на веб-странице?)
• Практическая часть (что мне нужно знать, чтобы создать свою собственную страницу?
• На протяжении всего курса особое внимание будет уделяться соблюдению синтаксических стандартов проверки и семантических стандартов для обеспечения широкой доступности для пользователей с ограниченными возможностями.

Этот курс понравится самым разным людям, но особенно тем, кто хотел бы получить пошаговое описание основ. Для этого курса нет предварительных условий, и предполагается, что у студентов нет предварительных навыков программирования или опыта работы с ИТ.

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

Блок 2. Введение в css3

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

Вы рассмотрите

• Основы каскадных таблиц стилей (CSS3).
• Акцент будет сделан на том, чтобы научиться писать правила CSS, тестировать код и вырабатывать хорошие привычки программирования.

Если все сделано правильно, стиль веб-страницы может улучшить вашу страницу. Чтобы убедиться, что ваши сайты не создают барьеров для людей с когнитивными и/или физическими недостатками, вы узнаете, как оценивать страницы, используя стандартные рекомендации POUR по обеспечению доступности.

В конце этого курса вы

Сможете набросать дизайн для данной HTML-страницы. Используя этот дизайн, учащиеся будут использовать CSS для реализации дизайна, добавляя шрифты, цвета и макеты.

Блок 3. Интерактивность с JavaScript

Если вы хотите вывести свой веб-сайт на новый уровень, возможность включения интерактивности является обязательной. Но добавление некоторых из этих типов возможностей требует более сильного языка программирования, чем HTML5 или CSS3, и JavaScript может предоставить именно то, что вам нужно. Имея базовые знания языка, вы можете создать страницу, которая будет реагировать на обычные события, такие как загрузка страницы, щелчки и движения мыши и даже ввод с клавиатуры.

Вы рассмотрите

• Основы языка JavaScript.
• Такие понятия, как переменные, циклы, функции и даже немного об инструментах отладки.
• Вы поймете, как объектная модель документа (DOM) используется JavaScript для идентификации и изменения определенных частей вашей страницы.

В конце этого курса вы

• Сможете реагировать на события DOM и динамически изменять содержимое и стиль своей страницы.
• Кульминацией занятия станет окончательный проект — создание интерактивной формы HTML5, которая принимает и проверяет вводимые данные.

Блок 4. Усовершенствованный стиль с адаптивным дизайном

Раньше все просматривали веб-страницы на экранах примерно одинакового размера. Но со взрывным ростом использования смартфонов для выхода в Интернет ландшафт дизайна полностью изменился. Люди, просматривающие ваш сайт, теперь будут ожидать, что он будет работать независимо от платформы (смартфон, планшет, ноутбук или настольный компьютер). Эта способность реагировать на любую платформу называется адаптивным дизайном.

Вы узнаете

Этот блок расширит базовые знания CSS3, включив такие темы, как вайрфреймы, гибкий дизайн, медиа-запросы и использование существующих парадигм стилей, таких как Bootstrap.

После блока слушатели смогут:

• Объяснять парадигму mobile-first и важность вайрфреймов на этапе проектирования.
• Создавать сайты, работающие на различных платформах.
• Использовать существующие среды проектирования, такие как Bootstrap.

Блок 5. Дипломный проект по курсу «Веб-дизайн для всех»

Capstone разработает веб-портфолио профессионального качества. Студенты продемонстрируют способность разрабатывать и реализовывать адаптивный сайт, как минимум для трех платформ. Потребуется соблюдение стандартов проверки и доступности. Разрабатываемые учащимися реализации будут еженедельно проверяться коллегами и ассистентами преподавателей, чтобы убедиться, что учащиеся не отстают от программы курса.

По завершении этого блока студенты будут чувствовать себя комфортно, создавая и/или обновляя существующие интерфейсные сайты, используя существующие платформы и тестируя сайты на соответствие требованиям доступности.

Этот блок открыт только для студентов, которые прошли первые четыре блока курса.

Практический проект

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

Получите сертификат

Когда вы пройдете все блоки и завершите практический проект, вы получите сертификат.