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
• Правила адаптивной верстки
• Подведение итогов