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

Категория: HTML, CSS, JavaScript
- 15 уроков
- Длительность: 7:25:51
- Исходный код
- Обзор результата
- UI макеты
- 7295 просмотров
Описание курса
Данный курс предназначен для быстрого ознакомления с фундаментальными знаниями 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 и CSS;
- Использовать минимально необходимые знания для написания JavaScript кода;
- Создавать адаптивные сайты с помощью Bootstrap;
- Создавать HTML макеты с нуля;
- Писать чистый и понятный другому программисту код;
- Использовать инструменты браузера для разработки сайтов;
- Проверять макет на разных устройствах;
- А также повысите Ваши знания в HTML, CSS, JavaScript.
Для успешного прохождения курса необходимо
- Базовые знания работы с компьютером в режиме пользователя;
- Умение пользоваться текстовыми редакторами и браузерами.
План курса
-
1Постановка задачи и описание функций макета
Длительность урока: 14:51
Описание функций, поддерживаемых в макете
- Просмотр товаров
- Фильтрация товаров по категориям
- Обычный и расширенный поиск по товарам
- Добавление товаров в корзину
- Удаление товаров из корзины
- Регистрация в магазине через Facebook
- Создание и просмотр заказа
Требования к макету
- Адаптивность макета к разным типам устройств: компьютеры, планшеты, смартфоны
- Удобство использования для конечного пользователя
- Функциональность макета
- Адаптивность макета к экранам и печатающим устройствам
- Использование семантического HTML5
- Корректность HTML кода макета
- Использование правил написания качественного HTML, CSS, JS кода
-
2Основы HTML
Длительность урока: 32:00
- Определение HTML
- Что такое браузер, веб сервер, редактор кода
- Упрощенная схема работы сайта
- Элементы HTML
- Теги
- Атрибуты
- Комментарии
- Строка объявления версии
- Специальные символы
- Структура HTML
-
3HTML теги
Длительность урока: 35:45
- Структурные теги: meta, семантические и общего назначения
- Алгоритм выбора блочного элемента
- Текстовые теги
- Теги списков
- Теги описания таблиц
- Теги форм
- Медиа теги
- Встраиваемые объекты
- Переходы на страницу
- Универсальные атрибуты
- Атрибуты событий
- Специальные атрибуты
- Правила написания качественного HTML кода
-
4Основы CSS. Селекторы
Длительность урока: 32:34
- Определение CSS
- Способы подключения CSS
- Правила построения CSS
- Селекторы
- CSS наследование
- Приоритеты стилей CSS
- Преимущества CSS
-
5CSS Свойства
Длительность урока: 26:08
- Типы свойств
- Размеры
- Позиционирование
- Отступы
- Границы
- Отображение и расположение
- Текст и шрифт
- Цвет и фон
- Стили для списков
- Стили для таблиц
- Стили для форм
- CSS Анимация
- Правила написания хорошего кода
-
6Основы верстки
Длительность урока: 30:57
- Блочная модель
- Табличная и блочная верстки
- display: inline, block, inline-block
- Выравнивания блоков и текста
- Позиционирование
- Основы адаптивного дизайна
- Media запросы
- Логические операторы в media запросах
- Медиа-функции в медиа-запросах
- CSS Frameworks
- Типовые ошибки CSS
-
7Bootstrap
Длительность урока: 24:54
- Базовый шаблон
- Поддержка браузерами
- Контейнеры
- Типы устройств
- Bootstrap сетка
- Адаптивные утилитные классы
- Классы печати
- Цвета
- Компоненты
- Free Bootstrap Themes & Templates
- Font Awesome
-
8Основы JavaScript
Длительность урока: 28:13
- JavaScript в современном мире
- JavaScript в HTML
- JavaScript функции
- Дополнительные источники по основам JavaScript
- Области видимости
- Обработка событий тегов: внедрение JavaScript кода в HTML и декларативный подход
- Указатель this
- Отладка JavaScript
- Объект window
- Декларативный подход на примере
- Минификация JavaScript
-
9Основы JQuery
Длительность урока: 21:03
- Официальный сайт, поддержка браузерами и выбор версии
- Основные операции JS:
- Поиск HTML элемента в DOM
- Модификация CSS класса HTML элемента
- Модификация CSS стиля HTML элемента
- Модификация значения формы HTML элемента
- Модификация атрибута HTML элемента
- Модификация дочерних элементов
- Модификация HTML кода или текста
- Модификация обработчиков событий
- Выполнение AJAX запроса
- Использование JQuery в проекте
-
10Структура HTML кода и отображение товаров
Длительность урока: 45:44
- Создание семантической структуры макета
- Создание блока отображения продукта
- Проектирование адаптивной сетки
- Создание hover эффекта для отображения описания товара
-
11Реализация поиска и отображения категорий
Длительность урока: 25:54
- Создание панели с категориями
- Создание панели упрощенного поиска
- Создание панели дополнительных параметров поиска
- Создание отображения для xs устройств
-
12Реализация заголовка и странички состояния корзины
Длительность урока: 23:03
- Создание адаптивного заголовка
- Создание корзины покупок
- Создание страницы с отображением товаров в текущей корзине
-
13Добавление продукта в корзину
Длительность урока: 39:44
- init функция
- Функция отображение диалога по добавлению товара
- Обработка события добавление товара в корзину
- Функция расчета стоимости товаров
- Функция загрузки новой порции товаров
-
14Форма поиска и удаление продуктов из корзины
Длительность урока: 39:41
- Инициализация поисковой формы
- Отправка формы поиска на сервер
- Функция подтверждения удаления
- Функция удаления продукта из корзины
- Функция обновления стоимости заказа
-
15Финальный обзор макета и проверка всех требований
Длительность урока: 25:20
- Проверка функциональности макета
- Проверка выполнимости требований к макету
- Адаптация страниц к принтерам
- Валидация HTML кода
- Проверка на предмет типичных CSS ошибок
- Проверка рекомендаций по чистоте кода