Будь вкурсе свежих уроков!

В категории: Курсы Frontend — HTML, CSS и JavaScript

Будь вкурсе самого свежего материала. Где мы отправляем статьи, видео и много чего интересного.

Закрыть

Курс доступен после регистрации ← ЖМИ!

Следующий курс

Бесплатный курс HTML и CSS для начинающих (9 часовое)

4 151 просмотр

Большой вводный курс для начинающих Frontend-разработчиков.

Урок 1: Как работают сайты?

В первом видеоуроке вы узнаете о принципах работы сети Интернет. Что такое ip-адрес, домен и DNS. В чём отличие статичных и динамичных сайтов. Процесс разработки сайтов. Что такое HTML, а также про теги и их Атрибуты. Данный урок очень важен для начинающих, так как помогает разобраться с принципом работы сайтов в интернете, что очень важно для любого веб-мастера.

Также вы узнаете, что такое файл HOST в системной папке Windows и зачем он нужен веб-разработчику. Зачем нужна программа Apache на сервере и как она помогает в работе сайта, а также в чём отличие динамических сайтов от статических. В уроке автор разберёт назначение языков для web и какие из них являются статическими, а какие динамическими и интерактивными.

После разбора основных понятий, автор затронет тему процесса разработки сайтов и какие специалисты нужны для реализации проектов, а также в каких программах они работают. Ближе к концу урока, автор на примере продемонстрирует как происходит вёрстка сайтов.

Домашнее задание:

Поставить инструменты web-разработки (NotePad++ или Sublime)
Установить браузеры Firefox или Chrome
Сделать web-страничку по макету ниже:

Урок 2 - Основы HTML

Разбор домашнего задания первого урока. Во втором видеоуроке вы узнаете про основные HTML-теги и принадлежность тегов к определённым группам: теги для формирования текста, ссылок, изображения, блочные и строчные элементы.

Домашнее задание:

Сделать сайт, по следующей структуре:
1. Главная
2. Продукты
  1. Продукт 1
  2. Продукт 2
  3. Продукт 3
3. Новости
Сверстать главную по макету:
Сверстать продукты:
Продукт N:
Если вы хотите поделится своей работой, то используете бесплатный редактор кода CodePen (бесплатно) или используете хостинг (от 70 руб./мес. + бесплатный тестовый домен) и оставляйте ссылку в комментариях

Урок 3 - Основы CSS

Разбор домашнего задания с урока №2. В данном видео вы узнаете: про структуру и оформление CSS, способы задания стилей. Про секцию в разделе head. Как подключить отдельный файл CSS. Виды селекторов и основные свойства стилей.

Урок 4

Далее вы узнаете про контекстные селекторы и наследование стилей в CSS. Теги div и span и их отличия. Что такое обтекаемые элементы на странице и создание разметки страницы.