Макет интернет магазина - IShop

Данный курс предназначен для быстрого ознакомления с фундаментальными знаниями HTML5, CSS, JavaScript, JQuery и Bootstrap, необходимыми для верстки функциональных HTML макетов, которые будут использованы при разработке полноценной системы с использованием других языков программирования (Java, C#, PHP, Python и т.д.)

Данный курс состоит из двух частей: в первой части рассматриваются основные возможности HTML5, CSS, JavaScript, JQuery и Bootstrap, а также основные правила верстки HTML макетов, а во второй части полученные теоретические знания применяются для создания макета интернет магазина IShop: https://devstudy-net.github.io/ishop-layout/products.html

В качестве редактора кода будет использован Sublime Text, в качестве основного браузера будет использован Google Chrome.

Основной целью данного курса является предоставить основные знания front-end разработки для back-end разработчиков на Java, C#, PHP, Python и т.д. используя шаблоны Bootstrap и основные возможности HTML, CSS, JavaScript. Таким образом курс больше ориентирован на программистов, чем на Web дизайнеров или HTML верстальщиков.

В данном курс не рассматривается создание сайта по PSD макету. Для получения данных знаний рекомендуем обратиться к другим источникам информации.

Разработанный в рамках данного курса макет интернет магазина IShop будет использован в курсе по созданию полноценного web приложения с помощью технологий JEE: Web приложение - IShop

Для получения дополнительной информации по теме данного курса, рекомендуем следующие источники информации:

• Справочник HTML
• Основы Bootstrap (Bootstrap документация на русском)
• Уроки по CSS
• Уроки по JavaScript

• 1
  Постановка задачи и описание функций макета

  Длительность урока: 14:51

  Описание функций, поддерживаемых в макете

  1. Просмотр товаров
  2. Фильтрация товаров по категориям
  3. Обычный и расширенный поиск по товарам
  4. Добавление товаров в корзину
  5. Удаление товаров из корзины
  6. Регистрация в магазине через Facebook
  7. Создание и просмотр заказа

  Требования к макету

  1. Адаптивность макета к разным типам устройств: компьютеры, планшеты, смартфоны
  2. Удобство использования для конечного пользователя
  3. Функциональность макета
  4. Адаптивность макета к экранам и печатающим устройствам
  5. Использование семантического HTML5
  6. Корректность HTML кода макета
  7. Использование правил написания качественного HTML, CSS, JS кода
• 2
  Основы HTML

  Длительность урока: 32:00

  1. Определение HTML
  2. Что такое браузер, веб сервер, редактор кода
  3. Упрощенная схема работы сайта
  4. Элементы HTML
     1. Теги
     2. Атрибуты
     3. Комментарии
     4. Строка объявления версии
     5. Специальные символы
  5. Структура HTML
• 3
  HTML теги

  Длительность урока: 35:45

  1. Структурные теги: meta, семантические и общего назначения
  2. Алгоритм выбора блочного элемента
  3. Текстовые теги
  4. Теги списков
  5. Теги описания таблиц
  6. Теги форм
  7. Медиа теги
  8. Встраиваемые объекты
  9. Переходы на страницу
  10. Универсальные атрибуты
  11. Атрибуты событий
  12. Специальные атрибуты
  13. Правила написания качественного HTML кода
• 4
  Основы CSS. Селекторы

  Длительность урока: 32:34

  1. Определение CSS
  2. Способы подключения CSS
  3. Правила построения CSS
  4. Селекторы
  5. CSS наследование
  6. Приоритеты стилей CSS
  7. Преимущества CSS
• 5
  CSS Свойства

  Длительность урока: 26:08

  1. Типы свойств
  2. Размеры
  3. Позиционирование
  4. Отступы
  5. Границы
  6. Отображение и расположение
  7. Текст и шрифт
  8. Цвет и фон
  9. Стили для списков
  10. Стили для таблиц
  11. Стили для форм
  12. CSS Анимация
  13. Правила написания хорошего кода
• 6
  Основы верстки

  Длительность урока: 30:57

  1. Блочная модель
  2. Табличная и блочная верстки
  3. display: inline, block, inline-block
  4. Выравнивания блоков и текста
  5. Позиционирование
  6. Основы адаптивного дизайна
  7. Media запросы
  8. Логические операторы в media запросах
  9. Медиа-функции в медиа-запросах
  10. CSS Frameworks
  11. Типовые ошибки CSS
• 7
  Bootstrap

  Длительность урока: 24:54

  1. Базовый шаблон
  2. Поддержка браузерами
  3. Контейнеры
  4. Типы устройств
  5. Bootstrap сетка
  6. Адаптивные утилитные классы
  7. Классы печати
  8. Цвета
  9. Компоненты
  10. Free Bootstrap Themes & Templates
  11. Font Awesome
• 8
  Основы JavaScript

  Длительность урока: 28:13

  1. JavaScript в современном мире
  2. JavaScript в HTML
  3. JavaScript функции
  4. Дополнительные источники по основам JavaScript
  5. Области видимости
  6. Обработка событий тегов: внедрение JavaScript кода в HTML и декларативный подход
  7. Указатель this
  8. Отладка JavaScript
  9. Объект window
  10. Декларативный подход на примере
  11. Минификация JavaScript
• 9
  Основы JQuery

  Длительность урока: 21:03

  1. Официальный сайт, поддержка браузерами и выбор версии
  2. Основные операции JS:
     1. Поиск HTML элемента в DOM
     2. Модификация CSS класса HTML элемента
     3. Модификация CSS стиля HTML элемента
     4. Модификация значения формы HTML элемента
     5. Модификация атрибута HTML элемента
     6. Модификация дочерних элементов
     7. Модификация HTML кода или текста
     8. Модификация обработчиков событий
     9. Выполнение AJAX запроса
  3. Использование JQuery в проекте
• 10
  Структура HTML кода и отображение товаров

  Длительность урока: 45:44

  1. Создание семантической структуры макета
  2. Создание блока отображения продукта
  3. Проектирование адаптивной сетки
  4. Создание hover эффекта для отображения описания товара
• 11
  Реализация поиска и отображения категорий

  Длительность урока: 25:54

  1. Создание панели с категориями
  2. Создание панели упрощенного поиска
  3. Создание панели дополнительных параметров поиска
  4. Создание отображения для xs устройств
• 12
  Реализация заголовка и странички состояния корзины

  Длительность урока: 23:03

  1. Создание адаптивного заголовка
  2. Создание корзины покупок
  3. Создание страницы с отображением товаров в текущей корзине
• 13
  Добавление продукта в корзину

  Длительность урока: 39:44

  1. init функция
  2. Функция отображение диалога по добавлению товара
  3. Обработка события добавление товара в корзину
  4. Функция расчета стоимости товаров
  5. Функция загрузки новой порции товаров
• 14
  Форма поиска и удаление продуктов из корзины

  Длительность урока: 39:41

  1. Инициализация поисковой формы
  2. Отправка формы поиска на сервер
  3. Функция подтверждения удаления
  4. Функция удаления продукта из корзины
  5. Функция обновления стоимости заказа
• 15
  Финальный обзор макета и проверка всех требований

  Длительность урока: 25:20

  1. Проверка функциональности макета
  2. Проверка выполнимости требований к макету
  3. Адаптация страниц к принтерам
  4. Валидация HTML кода
  5. Проверка на предмет типичных CSS ошибок
  6. Проверка рекомендаций по чистоте кода