Основы Front-end. Создай свой сайт с нуля
Курс подойдет ребятам с хорошим воображением и образным мышлением, которые интересуются программированием и дизайном. На занятиях ученики научатся создавать свои сайты и примерят на себя профессию Frontend-разработчика.
На курсе ребята:
- Освоят язык гипертекстовой разметки HTML5 , CSS3 для стилизации веб-страниц.
- Изучат основы JavaScript, одного из самых востребованных и популярных языков в мире IT.
- На практических примерах разберут, что такое “отзывчивый дизайн ” и “кроссбраузерность”.
- Познакомятся с редакторами кода Sublime Text, Visual Studio Code.
- Научатся обрабатывать растровые изображения в Adobe Photoshop, редактировать векторные изображения в формате SVG.
- Выложат свой первый сайт в интернет.
ПРОГРАММА
Введение в HTML
- Общие понятия
- Структура HTML-документа
- Понятие тега, базовые теги
- Теги парные и непарные
- Знакомство с редактором кода Sublime text
Работа с текстом
- Формирование абзацев и заголовков
- Создание гиперссылок
Списки
- Концепция списков в HTML
- Нумерованные списки
- Маркированные списки
- Многоуровневые списки
Графика
- Понятия- векторная графика, растровая графика
- Вставка графики в HTML
- Тег <img> , его параметры
- Изображения-ссылки
Таблицы
- Создание таблиц
- Оформление таблиц
Формы
- Создание форм
- Тег-метка <label>, для чего используется в формах
- Методы Get и Post при отправке форм
Мета-теги
- Создание мета-тегов
- Для чего пишутся мета-теги
- Какую информацию дают мета-теги о сайте
Введение в CSS
- Принцип работы CSS
- Способы подключений CSS
- Три базовых типа селекторов CSS
- Знакомство с редактором кода Visual Studio Code
- Плагин Emmet
Сложные селекторы
- Селекторы потомков
- Псевдоселекторы ссылок
Работа со шрифтами в CSS
- Разновидности веб-шрифтов
- Как задать размер шрифту
- Интернет-ресурс: Google fonts helper
- Использование нестандартных шрифтов
- Подключение иконочного шрифта - интернет-ресурс Font Awesome
Оформление текста
- Выравнивание текста
- Расстояние между строками
- Жирный, курсив
- Цвет текста, тень текста, оформление отступов
- Свойство- overflow
Блочная модель при помощи CSS
- Margin, padding, border
- Box-sizing:border-box
- Ширина и высота блоков
- Выравнивание
Работа с фоном
- Все параметры свойства Background
- Повтор изображения
- Цвет фона
- Размер фонового изображения
- Создание видео-фона
- Встраивание содержимого при помощи Iframe
Работа с форматом SVG
- Способы размещения изображения SVG
- Редактирование картинок SVG в CSS
- Интернет-ресурс : svgrepo.com
Позиционирование блоков
- Свойство float
- Свойство position(fixed, relative, absolute)
- Знакомство с Figma
- Практическая работа по позиционированию
Переходы и анимация при помощи CSS
- Transition-переходы
- Transform - трансформация элементов
- @Keyframes - ключевые кадры
- Animation
Создание двухстраничного сайта о себе
Позиционирование элементов сайта при помощи flexbox
- flex-direction
- justify-content
- align-items
- flex-wrap
- gap
Создание сайта при помощи flexbox (практика)
- Изменение размера изображений при помощи Photoshop
- Сохранение изображений в папку img проекта
- Создание минимум двух веб-страниц с изображениями
Создание галереи при помощи flexbox (практика)
Создание адаптивного сайта при помощи flexbox
- Резиновая верстка
- Использование медиа запросов для верстки под устройства с различным разрешением экрана
Размещение веб-сайта на GitHub
- Регистрация на ресурсе
- Сохранение своего проекта на ресурсе
Технология позиционирования элементов Grid
- Проектирование сайта при помощи Grid
Язык программирования JavaScript
- Способы подключения JavaScript.
- Первая программа на JavaScript
- Типы данных
- Переменные и константы
- Изменение HTML при помощи JavaScript
- Понятие DOM
- Создание калькулятора при помощи HTML, CSS, JavaScript
- Условное ветвление If….else
- Функции. Возврат значений функций.
- Функциональные выражения
- Стрелочные функции
- Массивы
- Циклы
- Перебор элементов массива
- Выпадающее меню, меню-бургер при помощи HTML, CSS, JavaScript
- Карусель изображений
Bootstrap
- Знакомство с ресурсом. Изучение возможностей
- Самостоятельная работа - создание сайта на Bootstrap
Кроссбраузерность
- Понятие кроссбраузерности
- Работа с caniuse.com
Финальный проект
- Создание своего многостраничного проекта
- Размещение на GitHub
© 2021-2024 ООО "Образовательные стандарты"
