![Создание Веб-интерфейсов С Помощью Html И Css (апрель) [2015]](/assets/images/logos/logo-white.webp "Создание Веб-интерфейсов С Помощью Html И Css (апрель) [2015]"){kind=logo}
- 05, Apr 2023
- #1
Первый в России полностью онлайновый технологический курс профессионального уровня, построенный на базе нашей собственной платформы.
Наша задача — сделать из любого новичка полноценного и востребованного специалиста начального уровня, готового работать в веб-индустрии.
Профессиональные навыки
Полученные навыки позволят вам эффективного решать типовые профессиональные задачи HTML-верстальщика. Вы научитесь создавать современные веб-интерфейсы, работать с живым кодом, использовать новейшие технологии.
Старт карьеры
Полученный уровень подготовки позволит с лёгкостью начать работать HTML-верстальщиком или другим интернет-специалистом (прототипировщиком, интернет-маркетологом, контент-менеджером, seo-специалистом).
Повышение эффективности
Если вы уже работаете в смежной IT-области: менеджером проектов, интернет-маркетологом, веб-дизайнером, то полученные навыки позволят вам существенно повысить свою эффективность.
Например, вы сможете быстрее и точнее оценивать сложность задач, самостоятельно создавать посадочные страницы и так далее. Качественный сайт своими руками В процессе обучения вы создадите свой сайт, выполненный в соответствии со всеми профессиональными стандартами. После чего вы разместите его в интернете.
Скачать: Скрытая информация :: Авторизуйтесь для просмотра »
Например, вы сможете быстрее и точнее оценивать сложность задач, самостоятельно создавать посадочные страницы и так далее. Качественный сайт своими руками В процессе обучения вы создадите свой сайт, выполненный в соответствии со всеми профессиональными стандартами. После чего вы разместите его в интернете.
Оптимизируем подготовленные проекты.
Рассмотрим свёрстанные проекты с точки зрения критериев качества и прогрессивного улучшения, затем внесём правки и улучшим их.
Практика
Теория
Полностью завершённая, оптимизированная и «доведённая до блеска» вёрстка проекта
Результат
8 раздел: прогрессивное улучшение
Для свёрстанных проектов добавим: динамическое открытие формы, интерактивную карту.
Практика
Теория
Оживим некоторые блоки вёрстки с помощью JavaScript
Результат
7 раздел: введение в JavaScript
Создадим несколько таблиц и форм, и оформим их с помощью CSS. Затем создадим и оформим несколько сложных контентных элементов.
Оформим блоки содержания на типовой внутренней странице учебного макета.
Практика
Теория
Завершённая вёрстка внутренней страницы проекта
Результат
6 раздел: оформление контента
Используя различные приёмы из лекции, дооформим мелкие декоративные элементы главной страницы.
Практика
Теория
Завершённая вёрстка главной страницы проекта
Результат
5 раздел: декоративные элементы и мелкие детали
Создадим сетки главной и внутренней страниц учебного и личного проектов.
Создадим несколько разнотипных сеток, например: «шапка/две колонки/подвал», «шапка/три колонки/подвал» и более сложные.
Практика
Теория
Готовы сетки страниц проекта
Результат
4 раздел: сетки
Используем полученные данные для создания CSS-стилей. Зададим фоны для крупных блоков, стили для текстовых элементов: заголовков, абзацев, ссылок и т.д.
В Фотошопе произведём замеры размеров и отступов, определим параметры шрифтов, а также нарежем изображения.
Практика
Теория
Подготовлена графика макета, готово оформление текстовых элементов
Результат
3 раздел: фотошоп, графика, стили текста
Создадим HTML-разметку учебного и личного проектов.
Создадим HTML-разметку нескольких разнотипных интерфейсов. Попрактикуемся использовать подходящие теги, задавать имена классов, оценивать сложность разметки.
Практика
Теория
Готова базовая HTML-разметка страниц проекта
Результат
2 раздел: разметка
Выберем редактор, создадим скелеты учебного и личного проектов, создадим простейшие файлы-заготовки страниц и стилей.
Практика
Во второй части вебинара поговорим про основы HTML/CSS и вёрстки:
Из лекции вы узнаете, что на самом деле происходит, когда вы:
Вводная лекция про роль и место верстальщика в мире веб-технологий:
Теория
Создан скелет проекта: структура папок и файлы-заготовки
Результат
1 раздел: вводный
Скрытая информация :: Авторизуйтесь для просмотра »Рассмотрим свёрстанные проекты с точки зрения критериев качества и прогрессивного улучшения, затем внесём правки и улучшим их.
Практика
- Прогрессивное улучшение.
- Критерии качества вёрстки, как отличить мастера от новичка.
- Базовая оптимизация.
- Подготовка к защите выпускного проекта.
Теория
Полностью завершённая, оптимизированная и «доведённая до блеска» вёрстка проекта
Результат
8 раздел: прогрессивное улучшение
Для свёрстанных проектов добавим: динамическое открытие формы, интерактивную карту.
Практика
- Введение JavaScript, написание простейших скриптов с помощью фреймворка VanillaJS
Теория
Оживим некоторые блоки вёрстки с помощью JavaScript
Результат
7 раздел: введение в JavaScript
Создадим несколько таблиц и форм, и оформим их с помощью CSS. Затем создадим и оформим несколько сложных контентных элементов.
Оформим блоки содержания на типовой внутренней странице учебного макета.
Практика
- Таблицы и приёмы оформления таблиц.
- Формы и приёмы оформления форм.
- Оформление сложных элементов контента: списки, подписи к изображениям, сноски, галереи, списки товаров и т.д.
Теория
Завершённая вёрстка внутренней страницы проекта
Результат
6 раздел: оформление контента
Используя различные приёмы из лекции, дооформим мелкие декоративные элементы главной страницы.
Практика
- Позиционирование.
- Использование псевдоэлементов.
- Приёмы создания декоративных элементов.
- Создание и использование спрайтов.
Теория
Завершённая вёрстка главной страницы проекта
Результат
5 раздел: декоративные элементы и мелкие детали
Создадим сетки главной и внутренней страниц учебного и личного проектов.
Создадим несколько разнотипных сеток, например: «шапка/две колонки/подвал», «шапка/три колонки/подвал» и более сложные.
Практика
- Блочная модель документа и поток документа.
- Тонкости блочной модели.
- Как управлять потоком документа?
- Приёмы построения сеток.
Теория
Готовы сетки страниц проекта
Результат
4 раздел: сетки
Используем полученные данные для создания CSS-стилей. Зададим фоны для крупных блоков, стили для текстовых элементов: заголовков, абзацев, ссылок и т.д.
В Фотошопе произведём замеры размеров и отступов, определим параметры шрифтов, а также нарежем изображения.
Практика
- Фотошоп для верстальщика. Типовые задачи, которые выполняет верстальщик в фотошопе, и как это делать эффективно.
- Форматы изображений в веб.
- Работа с фонами.
- Оформление текстов с помощью CSS.
Теория
Подготовлена графика макета, готово оформление текстовых элементов
Результат
3 раздел: фотошоп, графика, стили текста
Создадим HTML-разметку учебного и личного проектов.
Создадим HTML-разметку нескольких разнотипных интерфейсов. Попрактикуемся использовать подходящие теги, задавать имена классов, оценивать сложность разметки.
Практика
- Cтруктура простейшего HTML-документа, базовые теги, подключение внешних ресурсов (стилей и скриптов).
- Важнейшие теги для разметки содержания: текстовые теги, ссылки, изображения, контейнеры.
- CSS-селекторы.
- Наследование, каскадность и приоритеты в CSS.
Теория
Готова базовая HTML-разметка страниц проекта
Результат
2 раздел: разметка
Выберем редактор, создадим скелеты учебного и личного проектов, создадим простейшие файлы-заготовки страниц и стилей.
Практика
- Базовый синтаксис HTML и CSS.
- Инструменты вёрстки: редакторы кода, инспекторы, полезные веб-сервисы.
- Немного о браузерах, браузерных движках и различиях между ними.
Во второй части вебинара поговорим про основы HTML/CSS и вёрстки:
- вводите в браузере адрес сайта и открываете страницу;
- регистрируете домен;
- заказываете хостинг;
- переносите сайт с хостинга на хостинг.
Из лекции вы узнаете, что на самом деле происходит, когда вы:
- устройство веба, TCP/IP, DNS, HTTP, URL-aдреса;
- регистрация домена, выбор хостинга, настройка веб-сервера;
- взаимодействие с другими специалистами.
Вводная лекция про роль и место верстальщика в мире веб-технологий:
Теория
Создан скелет проекта: структура папок и файлы-заготовки
Результат
1 раздел: вводный
Скачать: Скрытая информация :: Авторизуйтесь для просмотра »
![[леонид Каюм] Осознанность](/assets/images/icons/forum3.png){kind=icon}
![Заработок на собственном сервисе по e-mail рассылкам [Закрытая]](/assets/images/icons/forum4.png){kind=icon}
