HTML/CSS с нуля

С помощью видеокурса HTML и CSS вы научитесь верстать адаптивные HTML страницы. Вы самостоятельно создадите портал КиноМонстр с помощью уроков HTML и CSS, работающий как на компьютерах, так и на мобильных устройствах.

HTML/CSS с нуля
66 уроков66 уроков
СертификатСертификат
РусскийРусский
FructCode

Описание:

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