Мегаподборка HTML5+CSS3+JS (2016)

Тема в разделе "Сайтостроение и веб-дизайн", создана пользователем Ольга, 15 ноя 2016.

  1. Ольга

    Ольга Active Member

    Сообщения:
    1.612
    Репутация:
    152
    Мегаподборка HTML5+CSS3+JS
    [​IMG]
    Автор: Коллектив авторов
    Год: 2016
    Формат: mp4, pdf, html, css, js


    Для всех кто хочет научиться или улучшить свои знания в области верстки предлагаю подборку отличнейших курсов.

    1. Специалист. Курс 20480: Программирование в HTML5 с JavaScript и CSS3 (2016)


    Вы получите знания и навыки разработки Windows Store и веб-приложений с использованием HTML5/CSS3/JavaScript, познакомитесь с принципами создания программных компонентов и структур, используемых в приложениях на HTML5. Особое внимание на занятиях уделяется принципам построения программной логики, определению и использованию переменных, написанию циклов и ветвлений, разработке пользовательских интерфейсов, обработке вводимых данных, их хранении, разработке структурированных приложений на базе HTML5/CSS3/JavaScript. Вы выполните большое количество практических работ с использованием Visual Studio 2012 на платформе Windows 8.

    Курс предназначен для разработчиков с опытом более 6 месяцев, желающих изучить принципы создания приложений на HTML5 с JavaScript и CSS3, развить навыки разработки веб-приложений под IE10 и Windows Store. Курс не требует знания HTML5, вполне достаточно некоторого опыта использования HTML4.

    Курс помогает подготовиться к следующим сертификационным экзаменам:
    70-480: Programming in HTML5 with JavaScript and CSS3


    По окончании курса Вы будете уметь:
    • Использовать Visual Studio 2012 для создания Windows Store и веб-приложений;
    • Описать новые функции HTML5, создавать страницы в стиле HTML5;
    • Добавлять интерактивные страницы HTML5 с использованием JavaScript;
    • Создавать формы HTML5, используя различные типы ввода, проверять вводимые пользователем данные с помощью атрибутов HTML5 и кода JavaScript;
    • Отправлять и получать данные удаленно с помощью объектов XMLHTTPRequest и метода ajax библиотеки jQuery;
    • Настраивать стиль HTML5-страниц с помощью новых возможностей CSS3;
    • Создавать структурированный и легкий в сопровождении код на JavaScript;
    • Использовать новые возможности JavaScript API в интерактивных веб-приложениях;
    • Создавать веб-приложения поддерживающие хранение данных на стороне клиента (offline-режим);
    • Создавать веб-страницы HTML5, способные адаптироваться к различным видам устройств и форм-факторам;
    • Выводить графику средствами HTML5, используя элементы Canvas и масштабируемую векторную графику SVG;
    • Повысить удобство интерфейса пользователя, используя анимацию на страницах HTML5;
    • Использовать новые возможности Web Sockets API для передачи и приема данных между веб-приложением и сервером;
    • Сделать более эффективной работу приложений производящих длительные операции, используя Web Worker.
    Специалисты, обладающие этими знаниями и навыками, в настоящее время крайне востребованы. Большинство выпускников наших курсов делают успешную карьеру и пользуются уважением работодателей.

    Модуль 1. Обзор HTML и CSS
    • Обзор HTML
    • Обзор CSS
    • Создание веб-приложений с помощью Visual Studio 2012
    • Лабораторная работа: Анализ приложения Contoso Conference
      • Пошаговое изучение приложения управления конференциями “Contoso Conference”
      • Анализ и модификация приложения
    По окончании этого модуля Вы будете уметь:

    • Описать основные элементы и атрибуты HTML
    • Объяснить структуру CSS
    • Описать инструменты, доступные в Visual Studio 2012 для создания веб-приложений

    Модуль 2. Создание и стилизации HTML5 страниц
    • Создание страницы HTML5
    • Настройка стиля страницы HTML5
    • Лабораторная работа: Создание и стилизация страницы HTML5
      • Создание страницы HTML5
      • Настройка стиля страницы HTML5
    По окончании этого модуля Вы будете уметь:

    • Создавать страницы с помощью новых функций HTML5
    • Применять стили CSS3 к элементам страницы HTML5

    Модуль 3. Введение в JavaScript
    • Обзор синтаксиса JavaScript
    • Использование DOM в JavaScript
    • Введение в jQuery
    • Лабораторная работа: Отображение данных и обработка событий с помощью JavaScript
      • Отображение данных
      • Обработка событий
    По окончании этого модуля Вы будете уметь:

    • Описать синтаксис JavaScript и его использование в HTML5
    • Использовать JavaScript для управления DOM и обработкой событий
    • Описать использование библиотеки jQuery для упрощения кода на JavaScript

    Модуль 4. Создание форм для сбора данных и проверки вводимых пользователем данных
    • Обзор форм и типов ввода
    • Проверка вводимых пользователем данных с помощью атрибутов HTML5
    • Проверка вводимых пользователем данных с помощью JavaScript
    • Лабораторная работа: Создание форм и проверка пользовательского ввода
      • Создание форм проверки вводимых пользователем данных с помощью атрибутов HTML5
      • Проверка пользовательского ввода с помощью JavaScript
    По окончании этого модуля Вы будете уметь:

    • Создавать формы, использующие новые элементы ввода HTML5
    • Проверять пользовательский ввод и обеспечивать обратную связь с помощью новых атрибутов HTML5
    • Писать код JavaScript для проверки пользовательского ввода и обеспечивать обратную связь в случаях, когда атрибуты HTML5 не годятся

    Модуль 5. Взаимодействие с удаленным источником данных
    • Отправка и получение данных с помощью XMLHTTPRequest
    • Отправка и получение данных с помощью операций jQuery AJAX
    • Лабораторная работа: Связь с удаленным источником данных
      • Получение данных
      • Сериализация и передача данных
      • Оптимизация кода с помощью метода ajax библиотеки jQuery
    По окончании этого модуля Вы будете уметь:
    • Отправлять и получать данные с помощью объектов XMLHTTPRequest
    • Оптимизировать код для получения и передачи данных метод ajax библиотеки jQuery

    Модуль 6. Моделирование с помощью HTML5 CSS3
    • Стилизация текста
    • Стилизация группы элементов
    • Селекторы CSS3
    • Использования графических эффектов CSS3
    • Лабораторная работа: Стилизация текста и блоковых элементов с помощью CSS3
      • Стилизация панели навигации
      • Стилизация заголовка страницы
      • Стилизация страницы “О приложении” (About)
    По окончании этого модуля Вы будете уметь:

    • Стилизовать элементы текста на странице HTML5, используя CSS3
    • Применять стили для групп элементов с помощью CSS3
    • Использовать селекторы CSS3 для отбора стилизуемых элементов
    • Реализовывать графические эффекты и преобразования (transformations) с помощью новых свойств CSS3

    Модуль 7. Создание объектов с помощью JavaScript
    • Разработка структурированного кода на JavaScript
    • Создание собственных объектов
    • Расширение созданных/существующих объектов
    • Лабораторная работа: Оптимизация кода для снижения издержек при сопровождении (Maintainability), повышение устойчивости при внесении изменений (Extensibility)
      • Наследование объектов
      • Рефакторинг кода использующего объекты
    По окончании этого модуля Вы будете уметь:

    • Описать преимущества структурированного кода JavaScript
    • Применять передовой опыт для создания пользовательских объектов средствами JavaScript
    • Описать, как можно надстроить логику пользовательских и встроенных объектов

    Модуль 8. Создание интерактивных страниц с помощью HTML5
    • Взаимодействие с файлами
    • Использование мультимедиа
    • Реагирование на дислокацию и контекст обозревателя
    • Отладка и профилирование веб-приложений
    • Лабораторная работа: Создание интерактивных страниц с помощью HTML5
      • Внедрение видео
      • Внедрение изображений
      • Использование API геолокации
    По окончании этого модуля Вы будете уметь:

    • Использовать технологию Drag and Drop и API для взаимодействия с файлами (File API)
    • Использовать элементы аудио и видео
    • Определить местоположение пользователя, запустившего Веб-приложение, с помощью API геолокации
    • Отлаживать и персонифицировать Веб-приложения, используя Web Timing API и Internet Explorer Developer Tools

    Модуль 9. Использование возможностей хранения данных на стороне клиента
    • Локальное чтение и запись данных
    • Сохранение данных на стороне клиента (offline-режим) с помощью кэша приложения
    • Лабораторная работа: Добавление сохранения данных на стороне клиента (offline-режим)
      • Реализация кэша приложения
      • Реализация локального хранилища
    По окончании этого модуля Вы будете уметь:

    • Сохранять и восстанавливать данные на компьютере пользователя с помощью Local Storage API
    • Обеспечение сохранения данных на стороне клиента с помощью Application Cache API

    Модуль 10. Реализация адаптивного интерфейса пользователя
    • Поддержка различных форм-факторов
    • Создание адаптивного пользовательского интерфейса
    • Лабораторная работа: Реализация адаптивного интерфейса пользователя
      • Создание шаблона страницы пригодного для вывода на печать
      • Адаптация макета страницы к различным форм-факторам
    По окончании этого модуля Вы будете уметь:

    • Научить приложение определять возможности устройств и адаптироваться к форм-факторам
    • Создавать веб-страницы, способные динамически адаптироваться, чтобы соответствовать различным форм-факторам

    Модуль 11. Использование графики
    • Создание векторной графики с помощью библиотеки SVG
    • Программное создание графики с помощью элемента Canvas
    • Лабораторная работа: Настройка расширенной графики
      • Создание интерактивной карты с использование средств векторной графики
      • Создание беджа докладчика (Speaker Badge) с помощью элемента Canvas
    По окончании этого модуля Вы будете уметь:

    • Использовать векторную графику для создания интерактивных приложений
    • Рисовать сложные графические элементы на базе Canvas с помощью JavaScript

    Модуль 12. Анимация интерфейса пользователя
    • Применение переходов (transitions) CSS
    • Преобразование (transformations) элементов
    • Использование покадровой CSS анимации
    • Лабораторная работа: Анимация элементов пользовательского интерфейса
      • Создание переходов для анимации пользовательского интерфейса
      • Применение покадровой анимации
    По окончании этого модуля Вы будете уметь:

    • Применить переходы CSS к элементам HTML5, управлять переходом через JavaScript
    • Описать различные типы 2D и 3D переходов, доступные с CSS3
    • Реализовать сложную покадровую анимацию с помощью CSS и кода JavaScript

    Модуль 13. Реализация двунаправленного обмена сообщениями с использованием Web Sockets
    • Введение в Web Sockets
    • Отправка и получение данных с помощью Web Sockets
    • Лабораторная работа: Реализация двунаправленного обмена с использованием Web Sockets
      • Получение данных через Web Sockets
      • Отправка данных в Web Sockets
      • Передача разных типов сообщений через Web Sockets
    По окончании этого модуля Вы будете уметь:

    • Описать, как работают Web Sockets, как происходит передача и прием сообщений
    • Использовать Web Socket API на JavaScript для подключения к серверу, отправки и получении данных и обработки событий, связанных с отправкой или получением сообщений

    Модуль 14. Использование Web Workers
    • Введение в Web Workers
    • Выполнение асинхронной обработки с помощью Web Workers
    • Лабораторная работа: Создание Web Workers
      • Повышение эффективности использования приложений посредством Web Workers
      • Обеспечение обратной связи с пользователями во время выполнения длительных операций
    По окончании этого модуля Вы будете уметь:

    • Описать назначение Web Workers их использование для асинхронной обработки
    • Создавать, запускать и проводить мониторинг Web Worker из JavaScript при помощи Web Worker API


    2. Специалист HTML5 и CSS3 Уровень 1,2,3 (2016)

    HTML и CSS. Уровень 1. Создание сайтов на HTML 5 и СSS 3

    HTML and CSS. Level 1. Creation of sites in HTML 5 and CSS 3

    РАЭК рекомендует курсы «Специалист»
    Планируете сделать веб-технологии своей профессией? Хотите создавать сайты? Работать верстальщиком, web-дизайнером, а может, интернет-маркетологом? У вас есть онлайн-проект, который Вы продвигаете сами? В любом случае, Вам не обойтись без знания HTML и CSS – языков разметки веб-страниц и их внешнего оформления.

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

    Во время обучения Вы получите начальные навыки работы в HTML и CSS, а также научитесь применять интерактивные возможности последних версий – HTML 5 и CSS 3.

    По окончании курса Вы будете уметь:



      • создавать web-страницы, содержащие все необходимые компоненты: текст, изображения и гиперссылки;
      • определять правильную иерархию страниц для создания сайта;
      • использовать интерактивные элементы для улучшения его юзабилити;
      • применять возможности CSS для эффективного оформления сайта и совершенствования его функциональности;
      • работать с фреймами;
      • применять новый функционал HTML 5 и CSS 3.
    Вы изучите основы языка разметки HTML, способы применения CSS и основы построения сайтов. Вы сможете сами создавать страницы, проектировать навигационное меню и другие элементы сайта. Научитесь грамотно размещать изображения и текстовые блоки на странице. Сможете самостоятельно работать со стилями в CSS, использовать фреймы и мета-информацию. А также получите практические советы, как выбрать хостинг и техподдержку сайта.

    А еще во время обучения Вы узнаете, что важнее – дизайн или чёткая структура? И как спроектировать сайт таким образом, чтобы он успешно продвигался в дальнейшем?

    Программа курса соответствует требованиям профессионального стандарта.

    По окончании курса Вы будете уметь:



      • создавать web-страницы, содержащие все необходимые компоненты: текстовое наполнение, гиперссылки, графическое наполнение;
      • самостоятельно создавать полноценный сайт путем определения иерархии взаимодействия web-страниц между собой;
      • грамотно разрабатывать интерактивные формы для взаимодействия пользователя с web-сервером;
      • эффективно использовать возможности каскадных таблиц стилей CSS для повышения функциональности и улучшения оформления web-сайта;
      • использовать технологию фреймов;
      • узнаете о новых возможностях HTML 5 и CSS 3;
    Специалисты, обладающие этими знаниями и навыками, в настоящее время крайне востребованы. Большинство выпускников наших курсов делают успешную карьеру и пользуются уважением работодателей.



    Модуль 1. Введение и основные понятия
    • Как это работает? Что такое web-сервер, web-сайт, web-страница
    • Цели и задачи языка HTML
    • HTML-разметка. Элементы
    • Структура HTML-документа:
    • Использование комментариев
    • Базовые элементы разметки:
    • Атрибуты элементов
    • Специальные символы
    • Лабораторная работа по теме

    Модуль 2. Анатомия страницы
    • Понимаем, как мы пишем: синтаксис HTML
    • Элементы форматирования текста
    • Понимаем, что мы пишем: семантика элементов
    • Валидация HTML-документа
    • Структурные элементы разметки
    • Лабораторные работы по теме

    Модуль 3. Гиперссылки
    • Понятие гиперссылок в WWW
    • Внешние и внутренние гиперссылки
    • Типы адресов в WWW
    • Дополнительные атрибуты гиперссылок
    • Лабораторная работа по теме

    Модуль 4. CSS. Каскадные таблицы стилей: основные свойства
    • Основные понятия CSS
    • Способы определения стилей
    • Каскадирование и наследование
    • Единицы измерения в CSS
    • Основные типы селекторов
    • Псевдоклассы и псевдоэлементы
    • Свойства шрифтов
    • Свойства текста
    • Свойства цвета и фона
    • Лабораторные работы по теме

    Модуль 5. Использование изображений на странице
    • Типы изображений используемые в WWW
    • Вставка изображений на страницу
    • Атрибуты элемента img
    • Лабораторная работа по теме

    Модуль 6. Структурирование информации при помощи списков
    • Неупорядоченный список
    • Упорядоченный список
    • Список определений
    • CSS свойства для списков
    • Лабораторная работа по теме
    1
    Модуль 7. Представление табличных данных при помощи таблицы
    • Основные элементы таблицы
    • CSS свойства элементов таблиц
    • Объединение ячеек таблицы
    • Дополнительные элементы таблицы
    • Лабораторная работа по теме

    Модуль 8. Встраивание внешних данных при помощи фрейма
    • История фреймов
    • Встраиваемые фреймы
    • Фреймы и гиперссылки
    • Лабораторная работа по теме

    Модуль 9. Передача пользовательских данных при помощи формы
    • Что такое веб-формы?
    • Элемент form и его атрибуты
    • Элементы формы: текстовые поля и кнопки
    • Элементы формы: элементы выбора
    • Дополнительные атрибуты элементов формы
    • Лабораторная работа по теме

    Модуль 10. Использование CSS для макетирования
    • Оформление границ элемента
    • Внутренние отступы элемента
    • Наружные отступы элемента
    • Размеры элемента
    • Плавающие элементы
    • Видимость элемента
    • Лабораторные работы по теме

    Модуль 11. Дополнительные возможности HTML и CSS
    • Практическая работа для закрепления изученных тем
    • Стили для различных типов носителей
    • Свойства курсора
    • Встраивание аудио- и видео-файлов
    • Лабораторные работы по теме

    Модуль 12. Мета-информация на странице
    • Использование мета-информации
    • Элемент meta и его атрибуты
    • Поясняющая мета-информация
    • Мета-информация для роботов
    • Эмуляция заголовков ответа сервера

    Модуль 13. Выбор хостинга и поддержка сайта
    • Понятие хостинга
    • Поиск хостера
    • Услуги хостера
    • Использование FTP-клиента
    • Доступ к ftp-серверу через проводник Windows

    Модуль 14. Что дальше?
    • Обзор HTML5 API
    • Тонкая настройка сайта на стороне сервера
    • Динамические элементы на странице
    • Динамическое создание контента на сервере
    • Современные способы предоставления информации
    HTML и CSS. Level 2. Cross-browser development, usability fundamentals, HTML5 и CSS3
    HTML и CSS — основные языки, с помощью которых разрабатываются веб-страницы. Формально HTML и CSS являются разными языками, но применяются в тесной связи друг с другом и на практике составляют единый комплекс технологий. Этот учебный курс даст вам представление о современных технологиях HTML и CSS, которые совместимы со стандартами Консорциума W3C и поддерживаются в браузерах, распространённых на сегодняшний день.

    Рассматриваются продвинутые технологии вёрстки веб-страниц и специальные эффекты, в том числе с использованием абсолютного и относительного позиционирования, переполнения и обрезки блоков, внедрённых объектов, изображений в CSS. Также рассматриваются вопросы профессиональной разработки кода: настройка инструментов разработки, организация технического процесса, разработка технических требований, проектирование макетов, тестирование и контроль качества веб-страниц.

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

    По окончании курса Вы будете уметь:

    • Cамостоятельно выбирать программные средства разработки в соответствии со своими задачами
    • Грамотно проектировать веб-страницы и эффективно организовывать разработку кода
    • Разрабатывать код HTML и CSS в соответствии со стандартами Консорциума W3C
    • Создавать веб-страницы в соответствии с основными принципами практичности (usability) и доступности (accessibility) для пользователей
    • Разрабатывать веб-страницы, совместимые с распространёнными браузерами: Internet Explorer 6 и выше, Firefox, Opera 7 и выше
    • Верстать веб-страницы с применением современных технологий HTML и CSS: бестабличная и комбинированная вёрстка, абсолютное и относительное позиционирование, переполнение и обрезка блоков, внедрение внешних объектов, изображения в CSS
    • Оптимизировать веб-страницы для печати и для просмотра на наладонных устройствах
    • Тестировать веб-страницы, выполнять контроль качества
    Специалисты, обладающие этими знаниями и навыками, в настоящее время крайне востребованы. Большинство выпускников наших курсов делают успешную карьеру и пользуются уважением работодателей.


    Модуль 1. Веб-стандарты и их поддержка
    • Стандарты W3C. Документация.
    • DOCTYPE.
    • Стандарт Unicode. Кодировки Unicode. Поддержка Unicode в различных браузерах.
    • Протокол HTTP.
    2
    Модуль 2. Элементы и атрибуты HTML5 и структура страницы
    • Секции, выноски, статьи, навигационные, «шапка», «подвал».
    • Элементы форм и их атрибуты.
    2
    Модуль 3. Эффективное использование инструментов разработки веб-страниц
    • Инструментарий разработчика:, FTP-клиенты, текстовые редакторы, графические редакторы, вспомогательные программы. Web Developer, Mozilla Firebug, Zen Coding/Emmet, IE WebDeveloper.
    • Составление и анализ требований к вёрстке веб-страниц . Проектирование макетов. Тестирование веб-страниц: просмотр в различных браузерах, проверка валидатором, просмотр при различной ширине окна браузера и различных размерах шрифта. Контроль качества веб страниц.

    Практическая работа: построение структуры страницы с использованием вспомогательных программ.

    2
    Модуль 4. Селекторы в HTML5
    • Селекторы перешедшие из HTML4/xHTML.
    • Псевдоклассы/псевдоэлементы. Контекстные селекторы. Новые селекторы в HTML.
    • Ролловеры, спрайты.
    Практическая работа: использование специфических селекторов при верстке страницы.

    4
    Модуль 5. Введение в построение удобных для использования сайтов (usability) и доступность (accessibility) сайтов
    • Практичность (usability) сайтов. Цели и задачи пользователей. Общие принципы разработки интерфейсов в применении к сайтам. Психологические аспекты взаимодействия пользователя с сайтом. Тестирование практичности.
    • Доступность (accessibility) сайтов. Обзор различных технических устройств для просмотра сайтов. Технические аспекты взаимодействия пользователя с сайтом. Ограниченные возможности пользователей
    Семинар: Учет удобства использования сайтов

    2
    Модуль 6. Продвинутые технологии HTML и CSS
    • Относительное и абсолютное позиционирование. Поведение дочерних элементов при позиционировании. Порядок наложения: свойство z-index. Примеры позиционирования: наложение блоков, закрепление "подвала" внизу страницы. Обрезка блока: свойство clip. Фиксированное позиционирование. Свойство display.
    • Переполнение блока: свойство overflow. Особенности поддержки overflow в разных браузерах. Создание "фреймообразной" вёрстки с использованием overflow. Расширения IE: свойства overflow-x и overflow-y.
    • Внедрение внешних ресурсов: элемент object. Внедрение файлов HTML, создание "фреймообразной" вёрстки с использованием object. Внедрение роликов Flash в соответствии со стандартами Консорциума W3C. Внедрение векторной графики (SVG); предоставление альтернативного растрового изображения браузерам, которые не поддерживают этот формат.
    • Пиктограмма сайта (favicon). Формат ICO. Особенности поддержки пиктограммы в различных браузерах.
    Практическая работа: использование на практике CSS-свойств позиционирования, отображения и др.

    4
    Модуль 7. Совместимость веб-страниц с различными браузерами
    • Условные комментарии.
    • Скрипты для поддержки селекторов и изменения поведения старых браузеров.
    • Программы эмуляторы старых версий IE.
    • Фильтры.
    Практическая работа: использование кроссбраузерной верстки

    2
    Модуль 8. Использование свойств CSS2 и CSS3
    • Градиенты, анимация, трансформация (2D и 3D), переходы
    • Медиа-запросы (построение мобильных версий сайтов, адаптивная верстка)
    • @font-face (веб-шрифты), текстовые эффекты,
    • Многоколоночная верстка,
    • Работа с фоном (+градиенты)
    • Закругление углов, модель Flex-блоков.
    • Определение технологий, поддерживаемых браузером.
    Практическая работа: построение выпадающего меню средствами HTML5 и CSS3

    6
    Модуль 9. Верстка макета
    • Принципы нарезки макета из psd-файла.
    • Выбор размеров и вариантов верстки.
    • Верстка.
    Практическая работа: нарезка макета страницы

    Практическая работа: верстка страницы по заданному макету.

    5
    Модуль 10. Типовые решения
    • CSS-фреймворки.
    • Динамический CSS (на примере LESS).
    • Шаблоны CMS
    • Решения на JavaScript.

    HTML and CSS. Level 3 Advanced methodologies and tools typesetting
    На данном курсе вы научитесь работать с большим объемом кода, получите необходимое представление о том, как пишется быстрый, эффективный и качественный код HTML/CSS. Узнаете о возможностях использования 3D на страницах, а также о том, как можно быстро разрабатывать HTML-код. На курсе рассматриваются следующие технологии: Bower, WebComponents, OOCSS, Yandex.БЭМ, FlexBox, 3D, Parallax, Polymer. Курс поможет научиться культуре разработки кода, а также методологии, чтобы научиться грамотно структурировать информацию и закладывать прочный фундамент для больших сайтов.


    Модуль 1. Методологии верстки
    • Методология Яндекс.БЭМ
    • Методология ООCSS
    • Принципы оформления кода

    Модуль 2. Препроцессоры и язык разметки HAML
    • Язык разметки HAML
    • Препроцессор SCSS
    • Препроцессор LESS
    • Препроцессор Stylus

    Модуль 3. Компонентная модель верстки
    • Знакомство с WebComponents
    • Компонентный Веб
    • Google Polymer
    • Импорт HTML-файлов

    Модуль 4. Макетирование страниц с применением модели гибких блоков
    • Верстка страницы с применением Flexible Box Layout

    Модуль 5. CSS-фреймворки
    • Bootstrap
    • Foundation

    Модуль 6. 3D и современные методы создания сайтов
    • Parallax-эффект
    • 3D-эффекты на страницах

    3. Касьянов - Адаптивная вёрстка на HTML5 и CSS3 (2016)


    [​IMG]



    Без HTML5 и CSS3 далеко не уйти


    Современные сайты и веб-разработку уже невозможно представить без HTML5 и CSS3, как ни крути.

    Любой проект, любой заказчик требуют валидной, кроссбраузерной и современной вёрстки на HTML5 и СSS3, и обязятельно адаптированную под мобильные устройства.

    Если вы будете уметь верстать на HTML5 и CSS3 и адаптировать проект под мобильные устройства, то можно смело поднимать стоимость часа своей работы.

    Ну а если вы создаёте сайт для себя, то эти знания помогут сделать его лучше, функциональнее и удобнее. Как правило это оборачивается повышением позиций, увеличением посещаемости и соответственно дохода.

    Знаете ли вы что...

    Сейчас в поисковой выдаче (в ТОП 10) Яндекса 55% - это сайты с адаптивным дизайном, которые могут подстраиваться под мобильные устройства. Это говорит о том, что Яндекс (и Гугл тоже) отдаёт большее предпочтение сайтам с адаптивным дизайном. Т.е. тем, на которых пользователю удобно.

    А HTML5 и CSS3 добавляют для сайта дополнительные возможности, при помощи которых мы можем сделать сайт ещё удобнее.
    Как для пользователей, так и для роботов.

    Лендинг пейдж (Landing page, посадочная страница) служит для конвертации посетителей в подписчиков или клиентов.
    Также иногда используется для сегментации трафика.
    Лендинг пейдж может быть как одной отдельной страницей на домене, так и в составе полноценного веб-сайта.
    В этом случае сайт продвигается в поиске, а лендинг используется для рекламы в Яндекс.Директ, Google Adwods, Таргета Вконтакте и т.д.

    Такая связка позволяет по максимуму использовать множество инструментов интернет маркетинга.

    Сейчас есть возможность быстро научиться и применять всё это в своей деятельности.

    Видеокурс 4 в 1

    HTML5 + CSS3 + адаптивность + Landing Page

    При помощи этого курса вы сможете:

    • создавать адаптивные сайты и страницы
    • адаптировать их под мобильные устройства
    • использовать возможности HTML и CSS в своих или клиентских проектах
    • создавать любые лендинг пейдж: страницы захвата, страницы подписки, товарные лендинги и т.д.
    • добавлять различные эффекты и скрипты на landing page
    • создавать и использовать продвинутые формы обратной связи и многое другое.
    С этим видеокурсом это будет совсем не сложно!

    3 из 7-ми причин изучить этот видеокурс

    Изучить вёрстку на HTML5 и CSS3
    HTML5 и CSS3 открывают много новых возможностей, это и семантическая вёрстка, и более продвинутые функции (которые раньше можно было реализовать только на JavaScript), это и гибкое встраивание медиа объектов (аудио и видео) и автозаполнение форм.

    Про такие мелочи как ускорение и упрощение процесса вёрстки я уже не говорю.
    Так как это, само собой разумеется.

    Как правило валидная и современная вёрстка хорошо сказывается на продвижении сайта в поисковых системах.

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

    Всё это обязательно пригодится вам в дальнейшей работе.

    Заказчики и веб-студии ценят хороших специалистов, которых сейчас так не много.

    После изучения курса по адаптивной вёрстке, возможна помощь в трудоустройстве.


    Адаптация под планшеты, смартфоны
    Адаптация под мобильные устройства - это уже не дань моде, а первая необходимость.

    Во-первых, на это смотрят поисковые системы, если он адаптивный, то они лучше ранжируют сайт.

    Во-вторых, это удобство использования, так как всё больше и больше пользователей используют для просмотра страниц свои планшеты и смартфоны.
    И от удобства использования напрямую зависит конверсия страниц.

    В-третьих, мы разберёмся с нюансами адаптации под разные устройства и разрешения экранов.

    Как пример. Многие знают, что есть экраны с разрешением 540х960, 1280х720, 1920х1600 и другие большие цифры.
    Но на самом деле при адаптивной вёрстке нужно обращать внимание не на размер экрана, а на его плотность.
    Поэтому часто получается так, что адаптация ни к чему не приводит и сайт отображается абсолютно также.

    Краткое содержание курса
    Вводная часть

    Новые функции в HTML5 и CSS 3, что упрощают и облегчают процесс вёрстки.

    Семантическая разметка - её секреты и для чего она нужна.

    Вставка медиа объектов - как вставлять аудио и видео без плеера.

    Практическая часть

    Поэтапное создание лендинг пейдж.
    От планирования макета, вёрстки каждого блока разной сложности, до подключения скриптов и php обработчиков для форм

    Карусель/слайдер, плавная прокрутка, кнопки, CSS спрайты, валидация форм и т.д.

    Доп. материалы

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

    А также другие полезные исходники.


    Количество видеоуроков: 23
    Общая продолжительность: ~184 мин.
    Количество доп. материалов: 29
    Формат видео: MP4 в разрешении HD (720p)

    То что получиться у нас в итоге: Адаптивный Landing Page >>

    Что вы сможете после прохождения этого курса?
    При подготовке
    • Разбираться в PSD макете при помощи PhotoShop
    • Вырезать нужные изображения из PSD макета
    • Находить красивые дизайны лендинг пейдж и сайтов
    • Проектировать блоки и этапы вёрстки
    • Объединять иконки в CSS спрайты
    • Работать с программой PhpDesigner
    В плане вёрстки
    • Подключать красивые шрифты из хранилища Google
    • Эффективно использовать псевдоклассы
    • Адаптировать сайт под все мобильные устройства
    • Использовать 2 и более фона для блока, анимацию, трансформацию, RGBA и т.д.
    • Работать с @media запросами
    • Вставлять интерактивные карты Яндекса
    • Создавать CSS спрайты и ускорять загрузку страницы
    • Использовать заранее продуманные стили (по аналогии с фреймворками, типа Bootstrap)
    В плане улучшения
    • Создавать hover эффекты ("оживление" при наведении)
    • Делать плавную прокрутку к блокам и для кнопки "Наверх"
    • Проводить валидацию форм обратной связи через JQuery
    • Создавать умные формы обратной связи с передачей UTM меток
    • Подключать и настраивать цели в Я.Метрике используя события
    • Облегчать страницы, делая их загрузку быстрее
    • Проверять и устранять недостатки на страницах



    Сайт/Скачать:

    Отзывы:
    Пока нет.
     
Загрузка...

Поделиться этой страницей