1

Этап 1

Теория HTML5

2

Этап 2

Теория CSS 3

3

Этап 3

Современные инструменты веб-разработчика

4

Этап 4

Emmet кодинг

5

Этап 5

Less и Bootstrap

6

Этап 6

Canvas и Video

7

Этап 7

Новые возможности HTML5

8

Этап 8

Sass & Compass

1

Этап 1

Теория HTML5

2

Этап 2

Теория CSS 3

3

Этап 3

Современные инструменты веб-разработчика

4

Этап 4

Emmet кодинг

5

Этап 5

Less и Bootstrap

6

Этап 6

Canvas и Video

7

Этап 7

Новые возможности HTML5

8

Этап 8

Sass & Compass

12 июля 2014 01 июля 2017
Цель завершена 15 декабря 2014
Образование

Углубленное изучение HTML 5 и CSS 3

Подцель к основной цели Web-Developer на зарплату от 80 000 рублей комментировать лучше там.

План обучения стыбзен с курса http://proglive.ru/courses/html5

  • Размечать страницу при помощи новых семантических тегов HTML5: header, footer, aside, nav и других;
  • Использовать новые поля ввода для создания автоматически валидируемых форм без JavaScript;
  • Создавать восхитительные сайты используя новые возможности CSS3;
  • Использовать тени, скругленные углы блоков без использования изображений;
  • Создавать текстовые эффекты: вдавленный текст, неоновое свечение, эффект огня;
  • Использовать на своих сайтах нестандартные загружаемые шрифты
  • Создавать страницы, одинаково хорошо выглядящие на устройствах с разным разрешением экрана при помощи медиазапросов;
  • Определять поддерживаются ли возможности HTML5/CSS3 в браузере пользователя с помощью библиотеки Modernizr;
  • Создавать быстрые и современные сайты на основе шаблона HTML5 Boilerplate и css-фреймворка Twitter Bootstrap;
  • Рисовать на холсте: создавать статическую 2d-графику и анимацию;
  • Использовать встроенные возможности браузера для воспроизведения аудио и видео на веб-страницах;
  • Определять местоположение пользователя при помощи средств геолокации.
  1. Теория HTML5

    Ссылки который могут пригодиться:

    http://dev.opera.com/articles/new-structural-elements-in-html5/

    • Что такое HTML5?
    • Краткая история HTML
    • Новая идеология HTML5
    • Отличия HTML5 от HTML4.01 и XHTML1.x
    • Новые теги и атрибуты
    • Устаревшие теги
    • Новые семантические элементы HTML5
    • Основная структура документа
    • Обзор новых тегов HTML5, таких как <section>, <article>, <header>, <footer> и <nav> и др.
    • Смысл появления новых элементов и примеры использования
    • Поддержка новых тегов в устаревших браузерах
    • Новые возможности для создания форм
    • Новые типы ввода данных: search, email, url, tel, range, number, datetime и др.
    • Новые атрибуты полей ввода: autofocus, placeholder, reqired, autocpmlete и др.
    • Валидация данных форм на стороне клиента
    • Обратная совместимость с устаревшими браузерами
  2. Теория CSS 3

    Основы верстки

    • Боксы — основная экранная единица
    • Строчные и блочные боксы
    • Поток и расположение элементов
    • Позиционирование: абсолютное и относительное
    • Схлопывание границ (margin collapsing)
    • Выступ за границы родительского элемента
    • Верска плавающими (float) блоками
    • Очистка float
    • Приоритет селекторов CSS (специфичность)
    • Анимация CSS
    • Введение в CSS3
    • Что такое CSS3?
    • Что нового в CSS3?
    • Преимущества CSS3
    • Новые подходы к разработке: прогрессивное усовершенствование и постепенная деградация
    • Можем ли мы использовать CSS3 уже сегодня?

    Границы

    • Cоздание загругленных углов у блоков, тени под боксом, использование изображений в качестве рамки блока
    • Текстовые эффекты
    • Добавление тени к тексту
    • Текстовые эффекты: свечение, вдавленный текст, винтажный текст, эффект огня и др.
    • Автоматический перенос длинных слов в блоке
    • 5. Работа с цветом
    • Форматы цвета
    • RGBA, HSLA и прозрачность
    • Удобство использования формата HSLA

    Градиенты

    • Заливка градиентом
    • Использование полупрозрачных градиентных заливок для создания эффекта блика
    • Генераторы градиентов
    • Фон
    • Новые методы работы с фоном блока
    • Использование нескольких изображений для создания фона
    • Шрифты
    • Использование подгружаемых шрифтов в браузерах
    • Обзор библиотек открытых шрифтов
    • Многоколоночность
    • Простое создание многоколоночной раскладки текста на странице
    • . Интерфейс пользователя
    • Новые функции для управления интерфейсом пользователя
    • Селекторы, комбинаторы и псевдо-классы
    • Новые методы доступа к элементам без использования классов и идентификаторов

    2D-преобразования

    • Преобразования элементов на плоскости: перемещение, масштабирование, вращение и растягивание
    • 3D-преобразования
    • Трехмерные преобразования элементов
    • Переходы
    • Эффекты плавного перехода от одного стиля к другому без использования Flash и JavaScript
    • Анимация
    • Создание анимации на веб-странице с помощью CSS3
  3. Современные инструменты веб-разработчика

    Медиа запросы (Media Queries)

    • Понимание media queries
    • Адаптивный и мобильный дизайн средствами CSS3
    • Modernizr
    • JavaScript-библиотека для проверки поддержки возможностей HTML5 и CSS3 в браузере
    • HTML5 Boilerplate
    • Высокопрофессиональный и надежный набор HTML/CSS/JS шаблонов для разработки веб-сайтов и веб-приложений
  4. Emmet кодинг

    http://habrahabr.ru/post/175747/ - Упроститель кодига

  5. Less и Bootstrap

    • 1. LESS
    • Динамический язык стилевой разметки. Удобный инструмент для построения больших CSS файлов
    • 2. Twitter Bootstrap
    • Обзор возможностей Twitter Bootstrap
    • Twitter Bootstrap как прекрасный пример современного кроссбраузерного CSS-фреймворка
    • Быстрое создание современных веб-интерфейсов с помощью Twitter Bootstrap
  6. Canvas и Video

    Элемент Canvas (Холст)

    • Что такое холст?
    • Координаты холста
    • Рисование изображений в реальном времени
    • Методы создания изображений в реальном времени: пути, обводка, заливка, преобразования, кривые, градиенты, тени
    • Анимация на холсте
    • Поддержка спецификации HTML 5 Canvas браузерами
    • 2. Видео и аудио
    • Плюсы и минусы в использовании элементов video и audio
    • Поддержка видео и аудио форматов браузерами
    • Атрибуты элементов video/audio
    • Управление воспроизведением
  7. Новые возможности HTML5

    Новые атрибуты HTML5

    • contentEditable, data-*, tabindex, hidden и др.
    • 2. Хранение данных
    • Web Storage — мощная, хорошо поддерживаемая замена файлам cookie
    • 3. Автономные приложения
    • Создание веб-приложений работающих без постоянного подключения к интернету
    • 4. Геолокация
    • Встроенные возможности определения местоположения пользователя
    • 5. Сообщения (Web Messaging)
    • Обмен сообщениями между окнами
    • 6. Фоновые вычисления (Web Workers)
    • Создание отдельных потоков для нагруженных вычислений
    • 7. Сокеты (Web Sockets)
    • Создание прямого соединения между сервером и клиентом для обмена данными в реальном времени
  8. Sass & Compass

  • 5486
  • 12 июля 2014, 10:22
Регистрация

Регистрация

Уже зарегистрированы?
Быстрая регистрация через соцсети
Вход на сайт

Входите.
Открыто.

Еще не зарегистрированы?
 
Войти через соцсети
Забыли пароль?