HTML-верстка: с нуля до первого макета

HTML-верстка: с нуля до первого макета

Пришлем демо-версию вам на почту

Вы освоите инструменты HTML-верстки и научитесь разрабатывать сайты с нуля
формат записи:видео
длительность:25 часов 40 минут
объем:8,5 Гб
год:2016
сайт:показать

Купить полную версию

всего 1 399 руб

Старая цена: 11 900 руб

Скидка: 88%

Выгода: 10 501 руб

в корзину оформить

Максимально эффективно вместе

О курсе «HTML-верстка: с нуля до первого макета»

Программа курса




1. Введение



1.1 Базовая HTML-разметка

Клиент-серверные взаимодействия, история HTML. Инструменты разработчика. Работа с FTP клиентом. Структура страницы. Cинтаксис HTML. Понятие тега. Атрибуты.

1.2 Знакомство с CSS

Знакомство с CSS. Базовые принципы CSS. Основы синтаксисом. Подлючением CSS к HTML документу.



2. Основы HTML-разметки



2.1 Блочные и инлайновые элементы

Блочные элементы. Инлайновые элементы. CSS свойство display и управление поведением элемента при отрисовке свойство float и «плавающие» элементы. Другие виды поведения элементов.

2.2 Семантическая разметка документа

Основные теги для работы с текстом, оформление списков, работа со ссылками и изображениями, работа с таблицы, контейнеры (div).

2.3 Управление блоками в потоке

Основные способы поведения элемента в документе, display: none, display: inline, display: block, display: inline-block, display: list-item, table*, когда и как применять теми или иный способы.

2.4 Позиционирование блоков

«Плавающие» элементы и свойство float. Позиционирование. Блоков. static. Relative. Absolute. Fixed. Когда и как применять те или иный способы позиционирования.



3. Знакомство с CSS



3.1 CSS селекторы

Cелекторы тегов,идентификаторы и классы. Контекстные селекторы. Cоседи. Дети. Псевдокласс. Наследование и каскад. Приоритеты

3.2 Стили текста и оформления

Единицы измерения (размер, цвет). Шрифт: цвет, размер, межстрочное расстояние и т.д. Фон: цвет, изображение. Маркеры списка. Рамка. Обводка.

3.3 Стили позиционирования, отступы и размеры блоков

Размер блока. Поля (padding). Отступ (margin). Положение на странице. Алгоритм расчета ширины и высоты элементы.



4. Вёрстка сайта



4.1 Сетки

Построение сетки с использованием float. Построение сетки с использование display: inline-block. Плюсы и минусы каждого из подходов, и когда какой применять. Практика применения позиционирования. Отступы. Решение типовых задач, блок фиксированной ширины по центру. Подвал который всегда внизу. Фиксированная шапка. Две колонки фиксированной ширины. Три колонки фиксированной ширины. 4 и более колонок фиксированной ширины и в %. Выносные элементы (уши).

4.2 Процесс верстки сайта

В каком виде передавать макет на верстку. C чего начать верстку страницы. Какой порядок верстки блока. Тестирование результатов верстки.

4.3 Профессиональное оформление кода

Критерии оценки вёрстки (качественная, некачественная), соглашения по оформлению кода в HTML, CSS, JavaScript, принцип именования переменных, классов, методов. Специфика работы профессионалов.

4.4 Возможности JavaScript

Что такое JavaScript. Область применяется JavaScript. Взаимодействие JavaScript с HTML документом. Демонстрация примеров.



5. Детальное приближения результата верстки к макету



5.1 Работа с Adobe Photoshop, вёрстка в точном соответствии с макетом

Типовые задачи, которые выполняет верстальщик в Photoshop, работа со слоями. Нарезка, сохранение фрагментов. Единицы измерения в верстке и в макете. Замер расстояний и цветов в Photoshop.

5.2 Особенности подготовки изображений для верстки

Форматы изображений. Приемы оптимизации. Настройка полезных макросов в PS.

Несколько отзывов об Инфокупоне

Иван  25.06.2017

не в первый раз заказываю здесь тренинги и все всегда устраивает. Советую.

Che  26.07.2017

Отличный сайт! Нашел то, что давно искал. Спасибо!

Deniska  30.07.2017

Довольно легко приобрести продукт. Понятная и надёжная система оплаты. Сбоила только раз и то со стороны paypal, служба поддержки быстро отреагировала и уладила вопрос. Отличная работа.

Ирина  21.07.2017

Отличный сервис. Много разнообразных тренингов по цене гораздо ниже, чем я приобретала. Жаль - не знала раньше, хорошо - что знаю теперь )))
Ушла изучать "приобретенные знания" )))

Смотреть все отзывы

Партнеры Инфокупона
payment methods

© 2012—2017 infokupon.com. Записи тренингов со скидкой до 95%.