HTML/CSS с нуля
С помощью видеокурса HTML и CSS вы научитесь верстать адаптивные HTML страницы. Вы самостоятельно создадите портал КиноМонстр с помощью уроков HTML и CSS, работающий как на компьютерах, так и на мобильных устройствах.
Описание:
Начните обучаться верстке HTML и CSS с нуля и вы узнаете, как эффективно построить обучение основам HTML и CSS и научиться создавать веб-сайты с нуля.
В уроках HTML и CSS вы узнаете:
- Основы верстки сайтов (html и css)
- Как пользоваться html-тэгами div, span, p, ul, li и другими
- Для чего нужен CSS (каскадные таблицы стилей) и узнаете о css-свойствах
- Как использовать css-свойства margin, position, padding, color, background и другие
- Что такое адаптивная верстка
- Как сделать верстку сайта
- Как пользоваться инструментами разработчика в браузере Google Chrome
- Что такое viewport и как его использовать
- Как создать раздел с комментариями на сайте
- Как встроить видео в html-страницу
- Как изменить верстку сайта в браузере
- Как связать html-страницы между собой
- Как сверстать меню на сайте
Верстка html-страниц(верстка сайтов) относится к Frontend(фронтенд) части разработки профессионального веб-сайта. Для Frontend разработчиков открыто большое количество вакансий и Frontend-разработчики высоко ценятся на рынке труда по всему миру.
Пройдите интерактивные задания и вы убедитесь в том, что освоить верстку html-страниц с нуля и стать фронтенд разработчиком - это под силу каждому.
Программа курса:
Вводная часть
Установка и настройка программ для работы с HTML и CSS
- Установка Sublime Text 3, Package Control, Emmet в Windows
- Установка Sublime Text 3, Package Control, Emmet в OSX
- Тест по пройденным урокам
Основы HTML: Базовая разметка, html-тэги, css-стили
- Базовая разметка HTML-страницы
- HTML задание создать базовую разметку
- Теги <h1>, <p>, <strong>
- Тест по пройденным урокам
- Упражнение тег <h1>
- Упражнение тег <p>
- Упражнение тег <strong>
- Познакомимся с новыми html тегами
- Упражнение <div>, <style>, css class
- Упражнение <div>, <style>, css background-color
- Теги <ul>, <li> и этапы создания веб-сайта
- Подключение css стилей в отдельном файле.
- Теги <ul>, <li>
- CSS свойства: margin, padding, height, font-size и другие.
- CSS свойство Margin
- Тест по пройденным урокам
- CSS свойство Padding
- Тег <a>. Создание ссылки.
- Создание стилей для ссылок (тег <a>)
- CSS Свойство text-decoration
Главная страница. Создание верхней части сайта и меню
- Создание горизонтальное меню
- Тест по пройденным урокам
- Стилизация горизонтально меню
- Header и TOP menu
Главная страница. Правая часть сайта
- HTML Form. Создание форм.
- HTML Form
- Right Block. Начнем создавать панель справа
- Right Block. Продолжение.
- Right Block. Часть 3
- Right Menu
Главная страница. Нижняя часть сайта
- Footer. Часть 1
- Footer. Часть 2
- Footer
Главная страница. Фильмы, сериалы, блог
- Content главной страницы
- Главная страница. Записи блога
Страница просмотра фильмов и сериалов
- Страница просмотра фильмов
- Верстка блока информации о фильме
- Верстка блока описания к фильму
- Верстка блока с отзывами к фильму
- Интерактивное задание: Блок с отзывами к фильму
- Верстка формы отправки отзывов к фильму
Страница Фильмы
- Страница Фильмы
Страница Рейтинг фильмов
- Страница Рейтинг фильмов
Адаптивная верстка
- Инструменты разработчика
- Media queries, тэг viewport
- Правила адаптивной верстки
- Подведение итогов