Консультации по HTML5 / CSS3 вёрстке

Верстка html5/css3 + js на профессиональном уровне. Направление для тех, кто хочет профессионально верстать страницы на основе макетов.

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

С условиями проведения консультаций можно ознакомится на странице Консультации. Как со мной связаться и узнать время работы - на странице Контакты.

Программа на обучение с нуля

  1. Введение в веб.
    1. Что такое виртуальный сервер и интернет-сайт. Порядок создания интернет-сайта, роли разработчиков.
    2. Инструменты необходимые для вёрстки сайта: редакторы кода, инспекторы, полезные веб-ресурсы.
    3. Средства для просмотра веб-страниц. Браузер, принцип работы клиент-сервер. Какие бывают, различия в версиях.
  2. Введение в HTML. Форматирование документа
    1. Что такое HTML и для чего необходим. Основные теги. Порядок использования тегов.
    2. Кодировка документа и файлов. Её виды.
    3. Основные теги для форматирования текста: h1-h6, p, strong, em, br.
    4. Использование спецсимволов (мнемоник).
    5. Ссылки. Атрибуты ссылок. Относительный и абсолютный путь.
    6. Добавление графических элементов на страницу.
    7. Создание упорядоченного и не упорядоченного списков.
    8. Якоря. Использование якорей на странице.
    9. Стандарты w3.org, html Валидатор.
  3. Каскадные таблицы стилей (CSS)
    1. Что это и для чего нужны.
    2. Подключение CSS файла, использование “рыбы” для html и css. Использование style в документе.
    3. Стандартные отступы у элементов или что такое CSS-reset.
    4. Что такое class, id. Отличие.
    5. Форматирование текста.
  4. Порядок вёрстки веб-страницы
    1. Порядок создания веб-страницы: что такое макет и для чего он необходим.
    2. Стандарты PixelPerfect или вёрстка 1:1 к макету — если у дизайнера были мозги, когда он создавал макет, то это возможно.
    3. Тестирование на соответствие с макетом.
    4. Некоторые особенности веб-браузеров, эмуляторы Internet Explorer разных версий. Что такое виртуальная машина.
    5. Фиксированный и резиновый макет. Полурезина.
    6. Стандартное расположение блоков на странице: одна, две, три колонки. Вложенность блоков.
    7. Понятие SEO оптимизации и что такое стандарт WGAC. Перевёрнутая шапка.
  5. Порядок нарезки макета
    1. Работа со слоями в Photoshop.
    2. Определение основного блока.
    3. Визуальное разбитие страницы на основные и второстепенные элементы. Стандартное наименование блоков.
    4. Использование внутренних и внешних отступов — margin/padding. В чём отличия. Центрирование блока по горизонтали
    5. Использование float при расположении колонок на странице. Расположение блоков с помощью table
    6. Форматирование текста. Сокращённая и полная запись.
    7. Применение списков для навигационного меню. Выпадающего меню на css
    8. Абсолютное и относительное позиционирование. Для чего испольузется. Что такое z-index. Центрирование блока по вертикали.
  6. Таблицы
    1. Для чего необходимы таблицы, где использовались. Отличия таблиц от блоков. Использование таблиц в настоящее время.
    2. Структура таблицы: основные теги.
    3. Форматирование таблиц: цвет и границы.
    4. Объединение ячеек, строк: colspan, rowspan. Размеры таблицы.
  7. Формы
    1. Основные элементы форм.
    2. Отличия отображения элементов форм от браузера к браузеру.
    3. Кастомизация элементов форм при помощи CSS и jQuery. Отличия.
  8. Использование JavaScript на странице
    1. Библиотека jQuery и jQuery UI. Использование jQuery плагинов. Общий принцип подключения скриптов.
    2. Подключение jQuery галереи
  9. Шрифты
    1. Семейства шрифтов: стандартные и кастомные.
    2. Различия между шрифтами в разных операционных: Windows, OS X, Linux.
    3. Использование @font-face, Google Font. Плюсы и минусы.
  10. Размещение HTML страниц на сервере
    1. Протокол FTP/SFTP.
    2. Настройка FTP клиента. Слинковка страниц и выгрузка файлов на сервер
  11. Адаптирование страниц под различные экраны (Responsive вёрстка)
    1. Инструменты для вёрстки под мобильные устройства. Адаптирование страницы под различные устройства при помощи медиа-запросов.
    2. Для чего применяются CSS-фреймворки и их использование для адаптации страницы под различные устройства. Требования к макетам.
    3. Обзор CSS-фреймворков: Bootstrap, Grid 960, Grid 1140, Skeleton
    4. Особенности отображения элементов и поведения для Android/iOS
  12. Использование Bootstrap
    1. Подключение библиотек и особенности сетки
    2. Использование компонентов и JavaScript
  13. Портфолио
    1. Для чего необходимо портфолио
    2. Как создать портфолио