24 курса по HTML и CSS доступных для прохождения в 2024 году

• Длительность 6 месяцев
• Онлайн в удобное время
• Обучение на практике
• Доступ к курсу навсегда.

Кому подойдёт этот курс:

• Новичкам в разработке
  Вы поймёте назначение основных тегов HTML, сможете стилизовать и размещать элементы с помощью CSS и сверстаете свой первый макет.
• Начинающим верстальщикам
  Вы расширите знания об HTML-разметке и CSS-технологиях, научитесь создавать интерактивные сайты на JavaScript и работать с системой контроля версий Git, пополните портфолио новыми проектами и сможете зарабатывать больше.
• Фрилансерам
  Вы освоите базовые принципы веб-вёрстки и поймете, как работать с макетами, а по итогу станете универсальным специалистом и сможете создавать сайты для клиентов без привлечения подрядчиков.

Чему вы научитесь:

1. Блочная, резиновая и адаптивная верстка
2. Верстка интернет-магазина
3. Работа с системой контроля версий Git
4. Проверка сайта на доступность
5. Основы CSS, HTML и JavaScript
6. Тестирование и исправление браузерных несовместимостей
7. Работа с современными инструментами.

Программа

Вас ждёт насыщенная программа, знание которой можно приравнять к году работы.
29 тематических модулей, 160 онлайн-урок

• Веб-вёрстка. Базовый уровень

1. Введение.
2. Базовый HTML.
3. Базовый CSS. Часть 1.
4. Базовый CSS. Часть 2.
5. Подготовка к вёрстке.
6. HTML-разметка.
7. Flexbox.
8. Стилизация.
9. Продвинутый HTML. Формы.
10. Продвинутый CSS. Часть 1.
11. Продвинутый CSS. Часть 2.
12. Адаптивность. Десктоп.
13. Адаптивность. Мобильные устройства.
14. JavaScript для верстальщика.
15. Доступность.
16. Кросс-браузерность.
17. База знаний.
18. Сетки.
19. Работа с хостингом.
20. Анимация.

• Веб-вёрстка. Продвинутый уровень

1. Вёрстка HTML-писем.
2. Базовый HTML
3. Анимация на JavaScript.
4. Оптимизация и процесс загрузки.
5. Отрисовка сайта.
6. Сборщики.
7. Препроцессоры и Постпроцессоры.
8. CSS Grid.
9. Будущее вёрстки.

Дипломные проекты:

• Лендинг
  Вы сверстаете лендинг по брифу и закрепите полученные на курсе знания
• Интернет-магазин
  Вы сверстаете несколько страниц для интернет-магазина по ТЗ.

Диплом Skillbox
Подтвердит, что вы прошли курс, и станет дополнительным аргументом при устройстве на работу.

За 5 недель вы научитесь:

• Как устроен интернет
  Основательно разберётесь в том, что такое: HTTP, IP, DNS, хостинг, хостер, домен, сервер, клиент и пр.
• HTML и CSS
  Самостоятельно верстать сайты любой сложности с применением Flexbox и BEM-naming.
• Кроссбраузерная вёрстка
  Ваша вёрстка будет отлично работать на всех браузерах в разных операционных системах.

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

Неделя 1 — Работа с хостингом, HTML

— Знакомимся со своим личным наставником и группой.
— Учимся работать с панелью хостинга и с файлами через FTP.
— Делаем разметку для первой страницы проекта.
— Размещаем результат работы в сети Интернет и сдаём на проверку наставнику.

• Открытие курса
• Обзор редактора
• Устройство интернета
• Работа с GitHub Pages
• HTML
• БЭМ. Разметка элементов страницы

Неделя 2 — CSS, работа с макетом, Perfect Pixel

— Стилизуем элементы главной страницы.
— Изучаем свойства позиционирования и поведение блочной модели.

• Figma для верстальщика
• Работа со стилями
• Работа со шрифтами
• Блочная модель
• Стилизация проекта

Неделя 3 — Flexbox, БЭМ-нейминг

— Изучаем свойства флексбокса и применяем их к главной странице.
— Пишем разметку для оставшихся страниц проекта.
— Приводим верстку в состояние Perfect Pixel.

• Вопрос-ответ
• Flexbox
• Построение лейаута и БЭМ-нейминг
• Реализация проекта

Неделя 4 — CSS-анимации

— Подключаем иконки к проекту с применением спрайтов.
— Реализуем динамические элементы страниц.
— Дорабатываем проект.

• Частые приемы верстки
• Анимации CSS
• Анимации. Реализация проекта

Неделя 5 — Защита выпускного проекта

— Дорабатываем проект.
— Сдаём проект на проверку наставникам.
— Выставление оценок в дипломы.

• Вопрос-ответ.

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

По окончании обучения вы получите сертификат.

Для кого будет полезно?

• Новичков
  Никогда не сталкивались с HTML и CSS в работе, но вам это нужно? Онлайн-обучение HTML с нуля снабдит вас знаниями и привьет полезные навыки верстки. Попробуйте себя в IT, изучите различные языки программирования и постройте карьеру в прибыльной области.
• Студентов
  Учитесь и хотите развиваться в приоритетной сфере IT? Пройдите курс по обучению HTML онлайн, научитесь верстать, подрабатывайте и найдите высокооплачиваемую работу в веб-студии!
• Желающих работать в IT
  Считаете, что именно в IT можно хорошо зарабатывать, в сжатые сроки пройдя путь от новичка до профессионала? Начинайте обучаться уже сейчас!
• Владельцев бизнеса
  Сделайте сайт самостоятельно, избежав затрат на специалистов. Также онлайн-курс пригодится, если вы работаете с фрилансерами через интернет.
• Фрилансеров
  Работа в офисе не для вас? Работайте удаленно из любой точки мира, подбирая интересные вам проекты на биржах. Если вам интересно сайтостроение, то освойте HTML и CSS!
• Всех, кого интересует HTML
  Любой работодатель отдаст предпочтение новичку, который уже что-то изучил и попробовал сам, а не тому, кто только мечтал работать в IT, но ничего не делал. Хотите получить престижную работу или создавать сайты для себя? Курсы HTML вам пригодятся!

После окончания курса вы сможете:

• Сверстать адаптивный сайт
• Устроиться в веб-студию
• Создавать качественные веб-интерфейсы
• Обрести дополнительный источник дохода.

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

Урок № 1 – Знакомство
На первом занятии мы узнаем, что такое HTML. Рассмотрим простые и сложные веб-страницы, узнаем, какие существуют виды сайтов, познакомимся с гипертекстом. На бесплатном уроке вы создадите свою HTML-страницу и сделаете вывод, насколько вам комфортна подача материала и работа с преподавателем.

Урок № 2 - Особенности структуры
На втором уроке мы начнем детально изучать структуру HTML-документа. Вы разберетесь, что такое версия, заголовок и кодировка. Мы приведем список ключевых слов и познакомимся с description. Вы поработаете с комментариями.

Урок № 3 - Основы CSS
На третьем занятии по обучению HTML онлайн вы разберетесь в языке оформления стилей документа CSS. Детально разберем синтаксис, несколько видов селекторов, свойства и их характеристики. После занятия вы сможете привязать CSS-стили к HTML.

Урок № 4 - Разметка текста
На четвертом уроке мы научимся оформлять текст, используя возможности HTML. Вы сможете делать абзацы, заголовки, различные списки, изменять шрифт на жирный или курсив. Также вы узнаете, какими тегами оформляются цитаты и формулы. Благодаря приемам, узнанным на этом уроке, вы расставите нужные акценты в тексте, сделаете его структурированным и удобным для восприятия, даже если не учились в HTML-Academy.

Урок № 5 - Работа со ссылками
На пятом занятии мы научимся делать HTML-ссылки нескольких видов: с якорем, абсолютные и относительные. Поговорим о функциях и задачах ссылок.

Урок № 6 – Изображения
В рамках обучения HTML с нуля в онлайн-формате узнаем, как размещать картинки в HTML, какие для этого нужны теги. Разберемся, как делать картинку ссылкой. Вы сможете разместить привлекательные картинки на вашей веб-странице, что сделает её более интересной для гостей сайта.

Урок № 7 – Таблицы
Сейчас весь мир стремится к экономии времени и упрощению подачи информации, так как лишние нагромождения текста только мешают понять суть и заставляют тратить время. Поэтому одна из самых удобных форм подачи информации – табличная. Мы узнаем, как работать с тегом table, делать различные границы, отступы, задавать название, выравнивать текст, менять цвет и т. д. После занятия вы сможете представить информацию в виде таблицы, и посетителям вашего сайта будет удобно найти все необходимое.

Урок № 8 - Работа с формами
На восьмом уроке онлайн-курса по HTML мы перейдем к изучению форм, научимся их создавать, делать подписи к полям ввода и создавать форму авторизации, поля-переключатели, раскрывающиеся списки и т. д. Освоив работу с формами, вы сможете сделать ваш сайт интерактивным и реагирующим на действия пользователя.

Урок № 9 - Сборка и выкладка
На девятом уроке поработаем над версткой сайтов, создадим прототип. Составим поэтапный алгоритм, по которому можно выложить сайт в интернет.

Вы получаете

1. 9 увлекательных видеоуроков по курсу HTML
2. Возможность проконсультироваться с преподавателем-программистом
3. Навыки по созданию адаптивных HTML-страниц
4. Сертификат о прохождении обучения
5. Домашние задания, которые вы сможете добавить в портфолио.

Что именно вы будете делать, когда станете веб-разработчиком:

• Писать код на HTML, CSS и JavaScript
• Разрабатывать сайты и веб-приложения
• Создавать продукт вместе с командой
• Помогать бизнесу развиваться, а пользователям — стать счастливее.

Что вы получите:

• Диплом
  о повышении квалификации
• Портфолио
  из 12 учебных и реальных проектов, сделанных во время обучения
• Сообщество
  даже после выпуска у вас будут хакатоны, встречи и поддержка Практикума
• Навыки
  Кроссбраузерная вёрстка, JavaScript, React, объектно-ориентированное программирование, Node.js, умение учиться, самостоятельность, работа в команде, умение задавать вопросы и работать с ошибками.

Содержание:

1. Основы HTML, CSS, JS: бесплатный вводный курс
2. Как устроено платное обучение
3. Расширенные возможности HTML и CSS
4. HTML и CSS. Работа с макетом, построение сложных сеток, адаптивная вёрстка
5. Базовый JavaScript и работа с браузером
6. JavaScript — непростые концепции
7. Создание интерфейсов на React
8. Основы бэкенд-разработки
9. Дипломный проект.

Пройдя обучение на курсе верстки, вы узнаете, как создавать и верстать сайты и получите отличную базу для развития в сфере web-разработки. Курс основан на опыте практикующих программистов, разрабатывающих сайты и интерфейсы различной сложности с 2009 года. Курс верстки сайтов, отличное начало изучения веб программирования.

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

1. Набор инструментов, программ верстальщика

• Теги. Парные, непарные теги
• Правила применения, вложение тегов
• Блочные, строчные элементы
• Списки, маркированные, нумерованные
• Ссылки, атрибуты ссылок. Якоря
• Абсолютные и относительные ссылки
• Работа с изображениями. Атрибуты

2. Таблицы и формы

• Теги, атрибуты, стили для таблиц
• Формы. Отправка post и get запросов
• Базы данных и формы
• Атрибуты для форм. Обработчики

3. Введение в CSS

• Подключение, синтаксис стилей
• Значения стилевых свойств
• Селекторы тегов
• Создание макета страницы
• Блоки верстка DIV’ами
• Размеры, позиционирование элементов
• Оформление и изображения, фон

4. Верстка макета

• Обтекание блоков float
• Позиционирование и отступы
• Адаптивная верстка
• Верстка под различные устройства
• Резиновая верстка
• Придание блокам адаптивности
• Медиа-запросы
• Подключение скриптов
• Внешние скрипты
• Порядок исполнения
• Подключение библиотеки jQuery
• Выполнение javascript

5. Визуальные эффекты в css

• Генераторы css кода
• Тени и объем для элементов
• Тени и стили для текста
• Градиенты
• Создание и позиционирование кнопок
• CSS3 анимации элементов
• Кроссбраузерная верстка
• Вендорные префиксы
• Применение сетки

6. Что такое фреймворки

• Bootstrap
• Начало работы
• Подключение состав и настройка
• Система сеток
• Мобильная верстка
• Выравнивание контента
• Растровая и векторная графика
• Шрифтовые иконки
• Glyphicons
• Font Awesome
• Анимированые иконки
• css псевдоклассы
• Псевдокласс :hover
• Псевдокласс :active
• Работа с готовыми элементами
• Меню
• Слайдер
• Акардеон
• Таблицы

7. Группирование

• Наследование
• Каскадирование
• Псевдоклассы. Псевдоэлементы
• Верстка выпадающего меню
• Подключение шрифтов
• Фотошоп для верстальщика
• Слои
• Размер элементов
• Нарезка макета и картинок
• Как посмотреть шрифты и цвет
• Проверка данных на валидность (проверка кода)
• Для чего нужна валидация кода?
• Требования к коду W3C
• Валидация CSS
• Написание корректного кода
• Написание эффективного кода
• Исправление ошибок
• Сервисы и инструменты проверки кода

8. Создание своего сайта

• Работа с хостингом
• Что такое домен и хостинг
• Что такое DNS сервер
• Файловая структура
• Создание базы данных для сайта
• Загрузка архива CMS на хостинг
• Процесс установки CMS, подключение к БД
• Работа с CMS WordPress
• Интерфейс WordPress
• Основной функционал
• Создание страниц
• Создание записей
• Различие между страницами и записями
• Администрирование CMS
• Плагины, компоненты

9. Установка самописной темы на WordPress

• PHP связи
• WordPress кодекс
• Формирование страниц при помощи PHP
• Установка болванки
• Подключение динамических путей
• Настройка
• front-page.php

10. Верстка одностраничника (landing page)

• Подключение эффектов parallax js
• Подключение видео на фон
• Анимации элементов wow js
• Canvas html5
• Системы контроля версий git и github
• Командная разработка проекта
• Работа через удаленный репозиторий git
• Установка клиента smartgit
• Настройка smartgit
• Коммиты
• Команды pull и push
• Решение конфликтов

11. SEO оптимизация для верстальщиков

• Алгоритмы ПС, структура контента для продвижения
• Взаимодействие SEO специалиста и разработки
• Загрузка страниц, скорость, коды ответа сервера, редиректы. Сервисы проверки скорости
• SEO оптимизация страниц, теги, meta, дубли и канибализация страниц
• Ссылки. Внутренние, входящие, исходящие. Пагинация в магазине
• Системные файлы robots.txt, sitemap.xml
• Подключение сервисов аналитики: GA, GSC, GTM, FB pixel etc.

12. Введение в JavaScript

• Переменные, именование переменных, объявление переменных
• Функции ввода и вывода alert, prompt, confirm
• Типы данных
• Преобразование типов
• Операторы сравнения
• Логические операторы
• Работа в консоли

13. События

• Обработчики событий
• Циклы while и for
• Работа с DOM деревом
• Атрибуты, узлы, элементы
• Cookie

14. Введение в JQuery

• Выборка в DOM
• Траверсинг
• Метод css
• Метод attr()
• События в JQuery

15. Изменение DOM в JQuery

• Выборка в DOM
• Методы appendChild() insertBefore() insertAfter()
• Методы before(), after()
• Методы addClass() hasClass() removeClass() toggleClass()

16. Формы в JQuery

• Создание формы
• События форм
• Валидация

17. Анимация в JQuery

• AJAX в JQuery
• Отправка и прием данных
• События AJAX.

После успешной сдачи экзамена или защиты проекта Вы получаете диплом Академии IMT об успешном прохождении курса Frontend.

Курс — это возможность

• Зарабатывать на фрилансе
  Создайте новый источник дохода, начните зарабатывать на фрилансе применяя знания, полученные на курсе.
• Получить новую профессию в IT
  Выпускники устраиваются в IT компании и веб студии. Постройте свою карьеру веб-разработчика.
• Запустить личный проект
  Инвестируйте в знания, сохранив время, деньги и независимость от разработчиков. Вы создадите функциональный и красивый сайт для себя или своего бизнеса.

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

Тариф Стандарт

• Модуль 1. Основы HTML и CSS. Валидация. Хостинг и домен
• Модуль 2. Блочная верстка. Photoshop. PixelPerfect
• Модуль 3. Верстка сайта. Проект Forest Travel
• Модуль 4. Адаптивная верстка для мобильных устройств
• Модуль 5. Лучшие практики верстки. SCSS и BEM naming. Оптимизация графики
• Модуль 6. Основы JS и скрипты для проекта
• Модуль 7. PHP формы обратной связи. Оптимизация верстки. CSS Grid. Bootstap 5
• Модуль 8. Трудоустройство и фриланс. Заработок на веб-разработке

Премиум группа

• Модуль 9. JavaScript и jQuery плагины для верстки сайтов
• Модуль 10. Основы PHP. Отправка форм на почту и сохранение данных в БД
• Модуль 11. Система управления сайтами WordPress
• Модуль 12. Дополнительные инструменты. Контроль версий и сборка проекта.

Во время обучения вы выполните 16 практических заданий и получите базовые навыки работы с HTML и CSS.

Чему научитесь:

• Вносить правки в HTML-код страницы
• Верстать текстовые блоки
• Добавлять стили к отдельным элементам сайта
• Готовить контент для публикации на сайте.

Программа курса — 5 занятий

1. Теги для разметки текста и атрибуты
   В начале обучения вы познакомитесь с тегами и их атрибутами, изучите правила оформления. Также во время лекции детально разберётесь, что такое вложенность тегов и как сделать так, чтобы ваша разметка была читабельной и понятной. Изучите на живых примерах порядок использования таких тегов, как абзац, цитата, ссылка, картинка. Научитесь расставлять акценты в тексте.

Домашнее задание:
Отработаете порядок использования изученных тегов и их атрибутов: добавите в текст заголовки, изображения, цитаты и др. А также побудете в роли ревьюера: попробуете найти ошибки в разметке и исправить их.

• Что такое браузер
• Семантика и разметка
• HTML
• Теги и гиперссылки
• URL
• Картинки.

2. Списки и таблицы
   Изучите виды и порядок формирования списков и таблиц. Разберёте различия между маркированными, нумерованными списками и списками описания, сформируете разметку для своего первого многоуровневого списка. Рассмотрите варианты оформления таблиц: научитесь делать заголовки и итоговые блоки, объединять ячейки с помощью атрибутов. В конце лектор поделится с вами ещё одним способом оформления изображений.

Домашнее задание:
Отработаете навык формирования маркированных и нумерованных списков, а также поработаете с таблицами. По традиции: ревью разметки таблицы с целью найти ошибки и исправить их.

• Списки
• Таблицы
• Теги для добавления картинки с описанием.

3. Селекторы и свойства
   Изучите CSS. Узнаете, что такое селектор. Разберётесь, как правильно описывать CSS-правила: свойство и его значение. Наглядно увидите, как при помощи CSS можно изменять размер шрифта, его начертание, цвет. Рассмотрите тему наследования свойств. Детально изучите вопрос, касающийся комбинирования селекторов.

Домашнее задание:
Попробуете оформить текст согласно техническому заданию при помощи CSS-правил. Отработаете навык составления комбинаций селекторов.

• Что такое CSS
• CSS-правило: синтаксис, комбинации селекторов
• Разбор примеров.

4. Оформление текстовых блоков с помощью CSS
   Углубите свои знания в области CSS. Изучите понятие селекторов класса, разберёте синтаксис и правила их комбинации. Продолжите разбор CSS-правил, которые помогут оформить текст и задать его выравнивание, а также узнаете, как изменить маркеры в списках и установить вместо стандартного символа оригинальную картинку и не только. В заключительной части занятия разберёте форматы указания цвета и узнаете, как сделать фон вашего сайта максимально привлекательным.

Домашнее задание:
Поработаете со списками и фоновыми изображениями. Продолжите отрабатывать навык составления комбинаций селекторов.

• Селектор класса
• Оформление текстовых блоков
• Цвет в CSS
• Свойства фоновых изображений.

5. Основы клиент-серверного взаимодействия
   На финальном занятии узнаете, что такое сервер и почему программистам важно понимать суть клиент-серверного взаимодействия. Разберёте такие понятия DNS, протокол HTTP, познакомитесь с различными технологиями для сервера. Узнаете разницу между backend и frontend. Заключительным этапом обучения станет финальный тест.

• IP-адреса
• Система доменных имен
• Протокол HTTP и задачи, которые он решает
• Сервер и технологии для него.

Для кого этот курс:

• Ты — новичок, который ищет подходящие курсы HTML и CSS для успешного старта в профессии.
• Ты уже что-то знаешь о фронтенде, но знания отрывочные и никак не клеятся между собой.
• Ты работаешь в направлении дизайна и хочешь пройти курсы CSS, чтобы эффективнее работать с внешним видом сайтов и разбираться в HTML5.

На курсе ты научишься:

1. Базовым принципам верстки и написания стилей
2. Работать с различными элементами HTML
3. Понимать обязательную структуру веб-страницы и добавлять CSS на страницу
4. Работать с разными видами вёрстки.

План обучения:

1. Введение в веб-технологии

• Предназначение технологий
• Стек разработки для сайта
• Принцип работы «клиент-сервер»
• Консоль разработчика
• Текстовый редактор и IDE
• Что такое HTML, CSS, JS и как они взаимодействуют?

2. HTML

• Базовые принципы верстки
• Знакомство с понятием тега и атрибута
• Обязательная структура любой веб-страницы
• Понятия строчных и блочных элементов веб страницы
• Понятия парных и непарных тегов;
• Семантические теги
• Спецсимволы
• Работа с тегами и атрибутами
• Работа с ссылками и якорями
• Работа с текстом и комментариями
• Работа с различными системами цветов в HTML
• Работа с изображениями
• Нумерованные и маркированные списки
• Работа с блоками (div)
• Таблицы
• Формы
• Элементы форм (инпуты)
• Айфреймы
• Подключение разных модулей к документу HTML
• Форматирование элементов HTML

3. CSS

• Что такое CSS?
• Базовые принципы написания стилей
• 3 способа добавления CSS на HTML-страницу
• Внешние таблицы стилей
• Относительные и статичные единицы измерения
• Работа со шрифтами (семейства, стили, размеры, насыщенность)
• Работа с границами элементов (бордер, радиус, тени)
• Работа с отступами и размерами элементов
• Градиенты
• Работа со свойствами float и clear
• Flex box
• Работа с фоном (изображения и цвет, размеры, прозрачность)
• Селекторы
• Продвинутые селекторы
• Приоритеты стилей
• Перезапись стилей
• Псевдоклассы, псевдоэлементы
• Работа с анимацией элементов
• Валидация
• Медиазапросы

4. Работа с браузером

• Установка полезных расширений для верстки
• Отладчик кода

5. Хостинговые и доменные панели

• Работа с Git и хостинг на Git

6. Разные виды верстки

• Адаптивная верстка
• Резиновая верстка
• Pixel perfect верстка
• Статичная верстка
• Кроссбраузерная верстка
• Смешанная верстка

7. Figma для разработчика

• Понятие растровой и векторной графики
• Преимущества и особенности Figma
• Обзор панелей и инструментов
• Сетки
• Слои и компоненты
• Экспорт параметров и графики
• Редактирование элементов

8. Grid Layout

• Построение сетки
• Работа с горизонтальным и вертикальным выравниванием
• Объединение элементов
• Методы работы с ячейками

9. Правила именования классов по BEM
10. Библиотека Bootstrap
11. SASS

• Подключение
• Правила и дерективы
• Управляющие директивы и выражения
• Использование миксинов
• Применение на практике.

Онлайн-курс по HTML и CSS — это отправная точка в карьере разработчика web-сайтов. Именно с верстки начинали большинство web-программистов и верстальщиков. При этом обучение основам HTML открывает двери не только в web-разработку, но и в другие интернет-профессии.

Пройдя все уроки и выполнив интерактивные задания вы научитесь:

1. Подбирать семантически правильные HTML-теги.
2. Выбирать подходящие под задачи CSS-свойства.
3. Использовать CSS-селекторы для обращения к любым HTML-элементам на странице.
4. Работать с рамками, а также с внутренними и внешними отступами.
5. Работать с текстом, изображениями, формами.
6. Добавлять на страницу векторные и растровые изображения, а также видео.
7. Правильно позиционировать спрайты.
8. Верстать сайты целиком и отдельные элементы страниц.
9. Формировать валидную структуру HTML-документа.
10. Строить многоколончатые сетки и управлять потоком документа.
11. Применять абсолютное, относительное и фиксированное позиционирование.
12. Создавать сложные формы для отправки данных.
13. Отправлять данные GET и POST методами.
14. Подключать внешние нестандартные шрифты.
15. Создавать сложные таблицы.
16. Пользоваться встроенными возможностями браузеров.
17. Извлекать из Photoshop-макетов элементы и их параметры.
18. Узнаете, как работают браузеры, сервера и интернет.

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

Интенсивная программа с короткими видео-уроками и большим количеством практики.
Обучение HTML5 и CSS3 на примере реального Photoshop-макета.

1. Введение в HTML и CSS

• Познакомитесь с основами HTML и CSS.
• Узнаете, что такое HTML-документ и их каких частей он состоит.
• Освоите базовые инструменты верстальщика.

2. Базовые понятия интернета

• Познакомитесь с тем, как работает интернет и как браузеры взаимодействуют с сайтами.
• Научитесь отличать фронтенд от бэкенда.
• Узнаете, что такое хостинг и протокол HTTP.

3. HTML теги

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

4. Основы CSS

• Познакомитесь с селекторами и CSS-свойствами.
• Научитесь обращаться к любым HTML-элементам на странице и изменять их внешний вид.
• Освоите работу со шрифтами, отступами, рамками и границами.

5. Работа с изображениями

• Узнаете разницу между растровой и векторной графикой.
• Освоите экспорт изображений из макетов и вставку на страницу.
• Научитесь работать со спрайтами, а также фоновыми изображениями.

6. Структура документа

• Узнаете из каких элементов состоит современный HTML-документ.
• Научитесь правильно выбирать и использовать теги section, header, footer, nav и article.

7. Блоки и сетка документа

• Научитесь работать с блочными и строчными элементами.
• Узнаете, как изменять поток документа.
• Познакомитесь с особенностями выпадания и схлопывания внешних отступов блочных элементов.
• Научитесь работать со свойством float, а также строить сетки.
• Узнаете разницу между относительным, абсолютным и фиксированным позиционированием.

8. Погружение в формы

• Научитесь добавлять на страницу формы для отправки данных на сервер.
• Познакомитесь с основными типами данных и полей форм.
• Узнаете, как отправлять файлы.
• Узнаете разницу между GET и POST запросами, а также научитесь использовать разные типы кнопок.

9. Таблицы

• Познакомитесь с HTML-таблицами.
• Научитесь объединять ячейки
• Узнаете о расширенных возможностях таблиц.

10. Завершение курса
    Познакомитесь с дополнительными инструментами верстальщика.

Чему вы научитесь:

• Изучите полностью язык HTML5 и все основные теги
• Изучите таблицу стилей CSS3 и все необходимые свойства
• Поймете, что такое верстка сайта и научитесь легко верстать настоящие сайты с помощью Flexbox технологии
• Сможете создавать адаптивные сайты под смартфоны, планшеты, десктопы и любые разрешения экранов
• Все сайты создаются с нуля в режиме реального времени.

Материалы курса:

6 разделов, 79 лекций

1. Введение

• Что такое верстка сайта?
• Разбор верстки сайта
• Домашнее задание № 1

2. Изучение HTML

• Создание рабочего пространства
• Создание Web-страницы
• Создание заголовков
• Домашнее задание № 2
• Добавление Favicon
• Работа с текстом
• Домашнее задание № 3
• Добавление изображений
• Создание списков
• Создание ссылок
• Домашнее задание № 4
• Таблицы
• Домашнее задание № 5
• Формы
• Домашнее задание № 6
• Мнемоники в HTML (спецсимволы)
• Домашнее задание № 7
• Добавление аудио
• Добавление видео
• Домашнее задание № 8

3. Изучение CSS

• Введение в CSS
• Подключение CSS стилей
• Домашнее задание № 9
• Подключение шрифтов
• Единицы измерения
• Домашнее задание № 10
• Стилизация текста
• Вид списков
• Домашнее задание № 11
• Селекторы
• Домашнее задание № 12
• Блоки в CSS
• Позиционирование блоков
• Домашнее задание № 13
• Фон и тень блоков
• Домашнее задание № 14
• Спрайты
• Домашнее задание № 15
• Градиент
• Домашнее задание № 16
• Анимация
• Трансформация
• Домашнее задание № 17
• Псевдоэлементы и псевдоклассы
• Домашнее задание № 18

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

• Правила верстки
• Домашнее задание № 19
• Прототип сайта
• Домашнее задание № 20
• Знакомство с Flex версткой
• Домашнее задание № 21
• Верхняя часть сайта и главное меню
• Домашнее задание № 22
• Левая часть сайта и блок приветствия
• Домашнее задание № 23
• Правая часть сайта и подвал
• Домашнее задание № 24
• Сложная верстка сайта: часть 1
• Домашнее задание № 25
• Сложная верстка сайта: часть 2
• Домашнее задание № 26
• Сложная верстка сайта: часть 3
• Задание к лекции 39
• Домашнее задание № 27

5. Адаптивная верстка

• Что такое адаптивная верстка
• Медиазапросы
• Домашнее задание № 28
• Адаптация сайта: часть 1
• Домашнее задание № 29
• Адаптация сайта: часть 2
• Домашнее задание № 30

6. Перенос сайта на WordPress

• Установка WordPress
• Создание файлов
• Перенос верстки
• Пишем пути к изображениям
• Редактирование контента
• Добавление контента.