Верстка HTML5 / CSS3

Консультации по 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. Некоторые особенности веб-браузеров. Что такое виртуальная машина.
   5. Фиксированный и резиновый макет. Полурезина.
   6. Стандартное расположение блоков на странице: одна, две, три колонки. Вложенность блоков.
5. Порядок нарезки макета
   1. Работа со слоями в Photoshop, Figma.
   2. Определение основного блока.
   3. Визуальное разбитие страницы на основные и второстепенные элементы. Стандартное наименование блоков.
   4. Использование внутренних и внешних отступов — margin/padding. В чём отличия. Центрирование блока по горизонтали
   5. Использование float при расположении колонок на странице. Расположение блоков с помощью table, table-row, table-cell
   6. Использование Flex
   7. Форматирование текста. Сокращённая и полная запись.
   8. Применение списков для навигационного меню. Выпадающего меню на css
   9. Абсолютное и относительное позиционирование. Для чего испольузется. Что такое 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. Использование Less, Sass
14. Портфолио
    1. Для чего необходимо портфолио
    2. Как создать портфолио