Примерная программа курса "Современные web-технологии" в условия наступивших перемен

Дифференциация для II курса Бизнес-информатики

Цель: Получить минимум компетенций в области web-дизайна, которые позволят превратить WEB в органичный и эффективный инструмент продвижения своих проектов.

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

Блок I (базовый). Основы верстки. HTML, CSS

  1. Структура HTML-документа. Простейшие HTML-страницы, разбираемся из каких тегов она состоит и за что эти теги отвечают. Подключаем к странице CSS-стили и JS-скрипты.
  2. Научимся добавлять на простейшую HTML-страницу текстовое содержание и правильно размечать его: абзацы, заголовки, подзаголовки, списки и многое другое. Научимся использовать ссылки, вставлять на страницу изображения.
  3. Таблицы доставляют наибольшее количество проблем новичкам. Здесь мы узнаем из каких тэгов состоит таблица и научимся создавать таблицы с любым количеством строк и столбцов. Попрактикуемся аккуратно оформлять таблицы: задавать рамки, отступы внутри ячеек, фон строк, размеры столбцов, выравнивание текста в ячейках (и всё это с помощью CSS, а не древних атрибутов). Помимо этого мы потренируемся в самом сложном: объединении ячеек.
  4. Вы научитесь создавать простейшие формы, попрактикуетесь использовать текстовые поля, выпадающие списки, поля-галочки, кнопки и другие элементы форм.
  5. Знакомство с CSS. Рассматриваются базовые понятия CSS: селекторы, каскадность, наследование, приоритеты. Вы познакомитесь с некоторыми CSS-свойствами для оформления текста, создания сетки страницы, позиционирования элементов.
  6. Селекторы. Научимся пользоваться простыми и продвинутыми селекторами, псевдоклассами, а также комбинировать их.
  7. Наследование и каскадирование. Наследование, каскадирование, специфичность: что это и как их правильно использовать?
  8. Оформление текста с помощью CSS. Самые распространенные CSS-свойства для оформления текста: жирность, курсив, размер, цвет и многое другое.
  9. Блочная модель документа. Как управлять размерами и расположением элементов, задавать отступы и рамки, а также рассмотрим различные типы элементов и их особенности. Это первый и самый важный шаг к созданию страниц со сложной сеткой и сложных декоративных элементов.
  10. Позиционирование. Вы узнаете о различных режимах позиционирования элементов: относительном, абсолютном, фиксированном. А также попрактикуетесь изменять расположение элементов на странице с помощью CSS-свойств для позиционирования.
  11. Сетки. Понятие потока документа, тонкости свойства float и блочно-строчных элементов, отрабатываются основные приёмы построения сеток.
  12. Фоны. Вы научитесь использовать фоновые изображения и задавать цвета фона. Также мы разберемся с популярными в веб форматами изображений и познакомимся с некоторыми приёмами создания декоративных эффектов.
    1. Большая практическая работа: создаём персональную целевую страницу. Подробнее о целевых страницах и посмотреть примеры можно в моих статьях "Landing Page или как опознать кормильца?" и "Смотри как надо делать Landing Page".

      Блок II (продвинутый). Новые возможности HTML5 и CSS3

      1. Знакомство с HTML5. Вы познакомитесь с новыми возможностями HTML5. Вы узнаете, какие новые элементы появились в стандарте и как их правильно использовать, потренируетесь вставлять на страницу аудио и видео, подключать и использовать нестандартные шрифты и векторные изображения.
      2. Формы и HTML5. Вы научитесь создавать продвинутые формы, используя новые возможности HTML5. Мы познакомимся с новыми типами полей для ввода дат, цветов, чисел и адресов сайтов. Также рассмотрим такие возможности как автофокус, подсказки, средства валидации и многие другие.
      3. Игра теней. Вы научитесь создавать тени с помощью CSS. Мы по косточкам разберем свойство box-shadow, научимся использовать множественные тени, а также изучим некоторые продвинутые приёмы работы с тенями.
      4. Селекторы. Часть 2. Рассмотрим много продвинутых селекторов, таких как :nth-last-of-type или :only-child. Также научимся использовать псевдоэлементы, такие как :before и :after.
      5. Селекторы. Часть 3. Мы рассмотрим продвинутые селекторы, умеющие искать элементы по подстрокам в атрибутах, а также огромное количество селекторов для стилизации элементов форм, таких как :required, :optional или :checked.
      6. Линейные градиенты. Вы узнаете, что такое линейные градиенты и как их можно использовать для создания интересных декоративных эффектов. Мы разберём синтаксис функции linear-gradient, некоторые интересные приёмы, попрактикуемся создавать сложные орнаменты с помощью градиентов.
      7. Двумерные трансформации. Будем крутить, наклонять, перемещать, уменьшать и увеличивать объекты, а также взрывать их фаерболами, телепортироваться и использовать телекинез. Ну и, конечно, разберём крутые приёмы использования трансформаций для создания декоративных эффектов.
      8. Оформление текста с помощью CSS. Часть 2. Вы в прямом смысле «наиграетесь со шрифтами», декоративными текстовыми эффектами и тенями, а ещё узнаете, как повысить читабельность текстов с помощью новых CSS-свойств.
      9. Анимация. Рассмотрены основы анимации на CSS. Вам предстоит пройти путь развития цивилизации и покорить космический простор. Вы будете двигать, поворачивать и видоизменять объекты, попутно осваивая приёмы работы анимации в CSS.
      10. Плавные переходы. Вы научитесь плавно менять CSS-свойства, будете создавать красивые и функциональные элементы форм в стиле Material Design и построите мини-викторину об HTML и CSS.
      11. Таблицы на CSS. Вы взглянете на таблицы с другой стороны: научитесь строить их с помощью CSS, исследуете и опробуете на практике редкие табличные свойства.
      12. Рамки и фоны, часть 2. Вы научитесь мастерски управляться с рамками и фонами любых форм и размеров, откроете для себя секреты давно знакомых свойств и примените их на практике.

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

      CC BY-NC-SA 4.0 Примерная программа курса "Современные web-технологии" в условия наступивших перемен by Костерин Вадим Валентинович is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.


2 нравится это

Автор

Вадим Валентинович Костерин

Директор Инженерного центра корпоративных информационных систем Высшей школы экономики и управления НИУ Южно-Уральский государственный университет. Лауреат ВДНХ, награждён серебряной медалью. Лауреат Всероссийских, международных и региональных (1998–2015 гг.) выставок, за множеством которых перечисление потеряло смысл.

Добавить комментарий