Основы Front-end. Создай свой сайт с нуля

Курс подойдет ребятам с хорошим воображением и образным мышлением, которые интересуются программированием и дизайном. На занятиях ученики научатся создавать свои сайты и примерят на себя профессию Frontend-разработчика.

На курсе ребята:

  • Освоят язык гипертекстовой разметки HTML5 , CSS3 для стилизации веб-страниц.
  • Изучат основы JavaScript, одного из самых востребованных и популярных языков в мире IT.
  • На практических примерах разберут, что такое “отзывчивый дизайн ” и “кроссбраузерность”.
  • Познакомятся с редакторами кода Sublime Text, Visual Studio Code.
  • Научатся обрабатывать растровые изображения в Adobe Photoshop, редактировать векторные изображения в формате SVG.
  • Выложат свой первый сайт в интернет.

ЗАПИСАТЬСЯ НА FRONT-END
ПОДОБРАТЬ КУРС
frontend
возраст

13-18 лет (c 11 лет детям с опытом в программировании)

формат
оффлайн и онлайн
расписание

1-2 раза в неделю по 90 минут

продолжительность курса

9 месяцев

группы

Оффлайн-группы - до 12 учеников. Онлайн-группы - до 8 учеников.

стоимость в месяц (4 недели)

190 бел. руб. Два раза в неделю. Минск и Минский район, центры R:ED. Онлайн

140 бел. руб. Один раз в неделю. Минск и Минский район, школы и гимназии

Спеццена - Новополоцк, Дружный. Просьба уточнять в колл-центре.

ПРОГРАММА

Введение в 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 (практика)

  • Изменение размера изображений при помощи 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


    КОНТАКТЫ

    220063, Минск, ул. Нёманская, д. 35, пом. 119
    ООО "Образовательные стандарты"

    УНП 193577282

    +375 25 777 25 05 - life:)
    +375 29 162 87 03 - A1
    info@r-ed.by
    CRM-форма появится здесь
    Сообщить о нарушении