Комплексный курс Web-программист. Frontend

В настоящее время все большее количество людей стало интересоваться «дизайном Интернет сайтов (web сайтов)». Курсы Web программирования очень интересны и актуальны на сегодняшний день. Для прохождения курсов Frontend разработчика, необходимо иметь основные знания по работе с персональным компьютером и сетью Интернет. 

Курсы  Web программирования предназначены для базовой подготовки специалистов в области рекламы и дизайна, владеющих навыками создания web страниц и публикаций в сети Интернет, а также для всех желающих приобрести навыки разработки, обслуживания и поддержки web (веб) сайтов. Курсы также будут полезны тем, кто обладает знаниями в этой области, но хочет их систематизировать, а также повысить свою эффективность за счёт новых приёмов и методов работы. 

Frontend — это публичная часть web-приложений (вебсайтов), с которой пользователь может взаимодействовать и контактировать напрямую.

Предлагаемый курс предназначен для получения теоретических и практических навыков использования современных серверных Web-технологий и навыков администрирования Web-сайтов. 

Программа курса разработана с учетом самых последних технологий на 2024 год: HTML5 и CSS3 и JavaScript. 

Уровень 1. Создание сайтов на HTML5 и CSS3.

Введение и основные понятия. Анатомия страницы.

1. Вступление
   
2. Кто такой веб-дизайнер. Что необходимо знать для успешной работы в этой профессии
   
3. Классификация веб-сайтов. Статические и динамические сайты
   
4. Способы создания веб-сайтов: верстка на языке HTML5, использование редактора, CMS, популярные сайты-конструкторы
   
5. Программы для работы с кодом HTML5. Виды и применение
   
6. Работа в визуальных редакторах типа WYSIWYG
   
7. Что такое WorldWideWeb. Виды языков гипертекстовой разметки. Знакомство с языком HTML. Версии и стандарты языка HTML. Последняя версия HTML 5 и её преимущества
   
8. Обзор программ (браузеров) для просмотра веб-сайтов. Их сходства и отличия. Война браузеров
   
9. Корневая папка сайта. Почему важно хранить все файлы сайта в одной папке. Что такое главная страница и её роль в построении сайта
   
10. Команды HTML5. Виды тегов
    
11. Создание страницы сайта. Структура страницы HTML5. Теги, обязательные для создания сайта. Объявление типа документа
    
12. Служебная и основная части страницы HTML5. Объявление темы (заголовка) страницы
    
13. Теги блочной верстки. Работа с текстом. Создание заголовков текста и их назначение. Создание абзацев. Перенос текста
    
14. Теги форматирования. Размер и имя шрифта
    
15. Что такое CSS. Стили CSS3 для форматирования текста. Внедрение стилей CSS3 в теги HTML5
    
16. Управление цветом в HTML5. Заливка
    
17. Создание горизонтальной линии
    
18. Практическая работа
    
19. Рекомендуемая литература по теме
    

Списки. Изображения. Гиперссылки

1. Создание списков. Нумерованный и маркированный списки
   
2. Работа с изображениями. Виды и типы изображений, используемые в WWW. Программы для создания и подготовки изображений
   
3. Оптимизация размера изображений
   
4. Позиционирование изображений на странице сайта
   
5. Теги HTML5 для вставки изображений
   
6. Создание рамок и полей для изображений, страниц и блоков текста
   
7. Параметры и свойства для форматирования изображений
   
8. Гиперссылки и их виды
   
9. Теги HTML5 для создания гиперссылки
   
10. Особенности написания url — адреса в тегах. Картинки — гиперссылки. Гиперссылки для отправки электронной почты
    
11. Способы открытия гиперссылок в окнах
    
12. Свойства и параметры гиперссылок
    
13. Абсолютная и относительная адресация
    
14. Создание оглавления для перехода к различным частям одной страницы. Создание быстрой прокрутки в верхнюю часть страницы
    
15. Установка плавающих фреймов на странице
    
16. Практическая работа
    
17. Рекомендуемая литература по теме
    

Таблицы. Формы

1. Создание таблиц, их роль в управлении тегами и текстом
   
2. Строки и столбцы таблиц
   
3. Параметры и свойства тегов для управления таблицей, столбцами и строками
   
4. Абсолютные и относительные размеры таблиц
   
5. Таблица внутри таблицы. Добавление в таблицы текста и изображений
   
6. Объединение ячеек таблицы
   
7. Способы группировки столбцов и строк. Стили CSS3, применяемые к группам столбцов и строк
   
8. Управление границами таблицы
   
9. Формы для введения пользователями информации на сайте. Их создание
   
10. Теги и параметры для создания форм
    
11. Взаимодействие форм с таблицами
    
12. Виды форм: многострочные и однострочные поля, списки, кнопки, переключатели и др.
    
13. Надписи
    
14. Новые формы в HTML5. Особенности их отображения в различных браузерах
    
15. Проверка полей, обязательных для заполнения
    
16. Активные и неактивные поля
    
17. Взаимодействие работы веб-дизайнера и веб-программиста для создания HTML-форм
    
18. Практическая работа
    
19. Рекомендуемая литература по теме
    

Каскадные таблицы стилей: основные свойства

1. Основные понятия CSS
   
2. Способы определения стилей
   
3. Каскадирование и наследование
   
4. Единицы измерения в CSS3
   
5. Основные типы селекторов
   
6. Свойства шрифтов
   
7. Свойства текста
   
8. Свойства цвета и фона
   
9. Оформление границ элемента
   
10. Внутренние отступы элемента
    
11. Наружные отступы элемента
    
12. Практическая работа
    
13. Рекомендуемая литература по теме
    

Использование CSS3 для макетирования, создания плавающих окно, раскрывающихся списков, меню

1. Оформление фрагментов текста с помощью CSS3
   
2. Абсолютное и относительное позиционирование элементов на странице
   
3. Размеры элемента. Абсолютные и относительные размеры.
   
4. Сочетание позиционирования и трёхмерности в CSS3
   
5. Псевдоклассы и псевдоэлементы в CSS3
   
6. Параметры наведения для гиперссылок
   
7. Создание декоративных эффектов в HTML5 (прозрачность, градиенты, скругленные уголки, тени, проч. возможности)
   
8. Плавающие элементы. Обтекание элементов
   
9. Практическая работа
   
10. Рекомендуемая литература по теме
    

Верстка сайта с помощью HTML5

1. Создание макета сайта. Виды макетов
   
2. Фиксированные и резиновые макеты
   
3. Юзабилити3
   
4. Семантические теги HTML5, упрощающие верстку макетов
   
5. Верстка трёх-колоночного макета сайта
   
6. Создание верхней части страницы: логотип, панель навигации
   
7. Создание правого и левого блоков сайта. Размещение ленты новостей в правом блоке. Размещение навигации и рекламных ссылок в левом блоке
   
8. Формирование центральной части сайта, добавление контента
   
9. Создание нижней части сайта. Добавление информации об авторских правах на сайт
   
10. Где взять готовые шаблоны сайтов
    
11. Как создать красивое раскрывающееся меню со ссылками онлайн.
    
12. Практическая работа
    
13. Рекомендуемая литература по теме
    

Анимация в CSS3

1. Знакомство с анимацией в CSS3. Возможности CSS3 в создании анимации
   
2. Ключевые кадры
   
3. Особенности построения ключевых кадров
   
4. Имя анимации
   
5. Количество повторов и зацикливание анимации
   
6. Время проигрывания анимации
   
7. Задержка в проигрывании анимации
   
8. Способы проигрывания анимации (с конца, линейное, с замедлением, с ускорением)
   
9. Вращение в анимации
   
10. Различные эффекты и способы анимации
    
11. Практическая работа
    
12. Рекомендуемая литература по теме
    

Вставка в страницу элементов видео- и аудио-записи. Выгрузка сайта в Интернет. Кроссбраузерность

1. Теги для вставки на страницу сайта аудио- и видео- контента
   
2. Понятие и использование кроссбраузерности сайта
   
3. Использование мета-информации
   
4. Элемент meta и его атрибуты4
   
5. Поясняющая мета-информация5
   
6. Мета-информация для роботов6
   
7. Эмуляция заголовков ответа сервера
   
8. Понятие доменного имени. Покупка доменного имени
   
9. Понятие хостинга
   
10. Поиск хостера
    
11. Услуги хостера
    
12. Использование FTP-клиента
    
13. Доступ к ftp-серверу
    
14. Полезная информация для «раскрутки» сайта
    
15. Практическая работа
    
16. Рекомендуемая литература по теме

Уровень 2. Web-программирование на JavaScript

Урок 1. Основы программирования и управляющие конструкции:

1. Введение в JavaScript
   
2. Обзор базовых типов
   
3. Операторы
   
4. Выражения и инструкции
   
5. Переменные и константы
   
6. Манипуляции с базовыми типами
   
7. Тривиальные типы
   
8. Цикл while
   
9. Операторы инкремента и декремента
   
10. Цикл for
    
11. Цикл dowhile
    
12. Управляющие конструкции if — elseif — else
    
13. Прерывание и продолжение цикла
    
14. Управляющая конструкция switch
    

Урок 2. Функции. Объекты. Массивы:

1. Понятие функций
   
2. Декларация функций
   
3. Аргументы функции
   
4. Возврат значений
   
5. Области видимости
   
6. Функция-выражение
   
7. Анонимная функция
   
8. Объектный тип: Объект (Object)
   
9. Свойства объекта
   
10. Методы объекта
    
11. Объектный тип: Массив (Array)
    
12. Свойство и методы функций
    

Урок 3. Объектно-ориентированное программирование:

1. Конструкторы объектов
   
2. Прототипы
   
3. Классы
   
4. Дополнительные встроенные объекты
   

Урок 4. Объектная модель браузера:

1. Объектная модель браузера
   
2. Объект Window
   
3. Объект Navigator
   
4. Объект Screen
   
5. Объект History
   
6. Объект Location
   
7. Объект Document
   
8. HTML-коллекции
   

Урок 5. Использование элементов HTML:

1. Свойства и методы элемента Form
   
2. Свойства и методы элемента Input
   
3. Свойства и методы элемента TextArea
   
4. Свойства и методы элемента Select
   
5. Свойства и методы элемента Option
   
6. Свойства и методы элемента Image
   
7. Свойства и методы элемента Table
   

Урок 6. Объектная модель документа DOM:

1. DocumentObjectModel (DOM)
   
2. Типы узлов
   
3. Связи между объектами
   
4. Свойства и методы интерфейса Node
   
5. Свойства и методы интерфейса Element
   
6. Свойства и методы интерфейса Document
   
7. Нестандартные свойства и методы HTML-элементов
   
8. Свойства и методы коллекции styleSheets
   

Урок 7. События и их обработка:

1. Список событий
   
2. Модели событий
   
3. Назначение обработчиков событий
   
4. Работа с обработчиками событий
   
5. Получение ссылки на событие
   
6. Отмена действий по умолчанию
   
7. Кроссбраузерные свойства события
   
8. Получение ссылки на элемент
   
9. Использование фазы всплытия событий
   
10. Отмена всплытия события1
    

Урок 8. Зачетная работа