[HTML academy] Восьмой базовый интенсив

Месячный онлайн-интенсив

«Создание веб-интерфейсов с помощью HTML и CSS»

Первый в России полностью онлайновый технологический курс профессионального уровня, построенный на базе нашей собственной платформы.

Наша задача — сделать из любого новичка полноценного и востребованного специалиста начального уровня, готового работать в веб-индустрии.

Профессиональные навыки Полученные навыки позволят вам эффективного решать типовые профессиональные задачи HTML-верстальщика. Вы научитесь создавать современные веб-интерфейсы, работать с живым кодом, использовать новейшие технологии.
Старт карьеры Полученный уровень подготовки позволит с лёгкостью начать работать HTML-верстальщиком или другим интернет-специалистом (прототипировщиком, интернет-маркетологом, контент-менеджером, seo-специалистом).
Повышение эффективности Если вы уже работаете в смежной IT-области: менеджером проектов, интернет-маркетологом, веб-дизайнером, то полученные навыки позволят вам существенно повысить свою эффективность.

Например, вы сможете быстрее и точнее оценивать сложность задач, самостоятельно создавать посадочные страницы и так далее.
Качественный сайт своими руками В процессе обучения вы создадите свой сайт, выполненный в соответствии со всеми профессиональными стандартами. После чего вы разместите его в интернете.
Программа:

1 раздел: вводный Результат

Создан скелет проекта: структура папок и файлы-заготовки

Теория

Вводная лекция про роль и место верстальщика в мире веб-технологий:

устройство веба, TCP/IP, DNS, HTTP, URL-aдреса;

регистрация домена, выбор хостинга, настройка веб-сервера;

взаимодействие с другими специалистами.

Из лекции вы узнаете, что на самом деле происходит, когда вы:

вводите в браузере адрес сайта и открываете страницу;

регистрируете домен;

заказываете хостинг;

переносите сайт с хостинга на хостинг.

Во второй части вебинара поговорим про основы HTML/CSS и вёрстки:

Базовый синтаксис HTML и CSS.

Инструменты вёрстки: редакторы кода, инспекторы, полезные веб-сервисы.

Немного о браузерах, браузерных движках и различиях между ними.

Практика

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

2 раздел: разметка Результат

Готова базовая HTML-разметка страниц проекта

Теория

Cтруктура простейшего HTML-документа, базовые теги, подключение внешних ресурсов (стилей и скриптов).

Важнейшие теги для разметки содержания: текстовые теги, ссылки, изображения, контейнеры.

CSS-селекторы.

Наследование, каскадность и приоритеты в CSS.

Практика

Создадим HTML-разметку нескольких разнотипных интерфейсов.

Попрактикуемся использовать подходящие теги, задавать имена классов, оценивать сложность разметки.

Создадим HTML-разметку учебного и личного проектов.

3 раздел: фотошоп, графика, стили текста Результат

Подготовлена графика макета, готово оформление текстовых элементов

Теория

Фотошоп для верстальщика.

Типовые задачи, которые выполняет верстальщик в фотошопе, и как это делать эффективно.

Форматы изображений в веб.

Работа с фонами.

Оформление текстов с помощью CSS.

Практика

В Фотошопе произведём замеры размеров и отступов, определим параметры шрифтов, а также нарежем изображения.

Используем полученные данные для создания CSS-стилей.

Зададим фоны для крупных блоков, стили для текстовых элементов: заголовков, абзацев, ссылок и т.д.

4 раздел: сетки Результат

Готовы сетки страниц проекта

Теория

Блочная модель документа и поток документа.

Тонкости блочной модели.

Как управлять потоком документа?

Приёмы построения сеток.

Практика

Создадим несколько разнотипных сеток, например: «шапка/две колонки/подвал», «шапка/три колонки/подвал» и более сложные.

Создадим сетки главной и внутренней страниц учебного и личного проектов.

5 раздел: декоративные элементы и мелкие детали Результат

Завершённая вёрстка главной страницы проекта

Теория

Позиционирование.

Использование псевдоэлементов.

Приёмы создания декоративных элементов.

Создание и использование спрайтов.

Практика

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

6 раздел: оформление контента Результат

Завершённая вёрстка внутренней страницы проекта

Теория

Таблицы и приёмы оформления таблиц.

Формы и приёмы оформления форм.

Оформление сложных элементов контента: списки, подписи к изображениям, сноски, галереи, списки товаров и т.д.

Практика

Оформим блоки содержания на типовой внутренней странице учебного макета.

Создадим несколько таблиц и форм, и оформим их с помощью CSS.

Затем создадим и оформим несколько сложных контентных элементов.

7 раздел: введение в JavaScript Результат

Оживим некоторые блоки вёрстки с помощью JavaScript

Теория

Введение JavaScript, написание простейших скриптов с помощью фреймворка VanillaJS

Практика

Для свёрстанных проектов добавим: динамическое открытие формы, интерактивную карту.

8 раздел: прогрессивное улучшение Результат

Полностью завершённая, оптимизированная и «доведённая до блеска» вёрстка проекта

Теория

Прогрессивное улучшение.

Критерии качества вёрстки, как отличить мастера от новичка.

Базовая оптимизация.

Подготовка к защите выпускного проекта.

Практика

Рассмотрим свёрстанные проекты с точки зрения критериев качества и прогрессивного улучшения, затем внесём правки и улучшим их.

Оптимизируем подготовленные проекты.

Скачать: Скрытая информация :: Авторизуйтесь для просмотра »