Урок 1. «Что такое веб-разработка» — HTML и CSS
Курс: Веб-программирование, урок 1 из 12
Тема по программе: Что такое веб-разработка
Инструменты: текстовый редактор Sublime Text с плагином Emmet и браузер; в модуле 3 — Adobe Photoshop
Формат: подробный конспект в Word со скриншотами; к модулям 2 и 3 — готовые файлы проекта
Тема по программе: Что такое веб-разработка
Инструменты: текстовый редактор Sublime Text с плагином Emmet и браузер; в модуле 3 — Adobe Photoshop
Формат: подробный конспект в Word со скриншотами; к модулям 2 и 3 — готовые файлы проекта
Это сокращённое описание урока. Полные материалы — в курсе «Веб-программирование». Первый урок курса целиком можно скачать бесплатно в разделе «Бесплатно».
Цель урока
Понять, что такое веб-разработка, и сделать первую веб-страницу.
Что делаем на уроке
- Веб-разработка и веб-разработчик, фронтенд и бэкенд.
- Краткая история веба.
- HTML, CSS и JavaScript: кто за что отвечает.
- Редактор Sublime Text и плагин Emmet.
- Файл index.html: восклицательный знак и Tab — готовый каркас страницы.
- Текст и картинка на странице, обновление в браузере клавишами Ctrl+R.
Что объяснить детям
- HTML — разметка: что есть на странице. CSS — внешний вид. JavaScript — поведение и интерактивность.
- Emmet разворачивает короткие сокращения в готовый код и сильно ускоряет вёрстку.
- Главную страницу сайта принято называть index.html.
Что в полном комплекте
- 12 конспектов занятий со скриншотами — по одному на урок
- Методика проведения с подробным описанием хода урока
- Готовые файлы проекта к модулям 2 и 3 — если группа отстаёт, не нужно собирать проект с нуля
Следующий — Основные HTML-теги. Все уроки курса: Основные HTML-теги · Знакомство с CSS · Вёрстка страницы блога · Фотогалерея: разметка · Фотогалерея: отступы и стили · Позиционирование: display и flex · Галерея: анимация и публикация · Знакомство с Photoshop · Разметка сайта по макету · Вёрстка экранов на flexbox · Завершение сайта и публикация.
