Макет интернет магазина - IShop
4.3 (36 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
599 students enrolled

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

Построение функциональных HTML макетов
4.3 (36 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
599 students enrolled
Created by DevStudy .net
Last updated 11/2018
Russian
Price: Free
This course includes
  • 7.5 hours on-demand video
  • 8 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What you'll learn
  • Основным возможностям HTML и CSS;
  • Использовать минимально необходимые знания для написания JavaScript кода;

  • Создавать адаптивные сайты с помощью Bootstrap;

  • Создавать HTML макеты с нуля;
  • Писать чистый и понятный другому программисту код;
  • Использовать инструменты браузера для разработки сайтов;
  • Проверять макет на разных устройствах;
  • А также повысите Ваши знания в HTML, CSS, JavaScript.
Course content
Expand all 15 lectures 07:25:45
+ Постановка задачи
1 lecture 14:51

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

  1. Просмотр товаров

  2. Фильтрация товаров по категориям

  3. Обычный и расширенный поиск по товарам

  4. Добавление товаров в корзину

  5. Удаление товаров из корзины

  6. Регистрация в магазине через Facebook

  7. Создание и просмотр заказа

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

  1. Адаптивность макета к разным типам устройств: компьютеры, планшеты, смартфоны

  2. Удобство использования для конечного пользователя

  3. Функциональность макета

  4. Адаптивность макета к экранам и печатающим устройствам

  5. Использование семантического HTML5

  6. Корректность HTML кода макета

  7. Использование правил написания качественного HTML, CSS, JS кода

Постановка задачи и описание функций макета
14:51
+ Краткие теоретические сведения
8 lectures 03:51:29
  1. Определение HTML

  2. Что такое браузер, веб сервер, редактор кода

  3. Упрощенная схема работы сайта

  4. Элементы HTML

    1. Теги

    2. Атрибуты

    3. Комментарии

    4. Строка объявления версии

    5. Специальные символы

  5. Структура HTML

Основы HTML
32:00
  1. Структурные теги: meta, семантические и общего назначения

  2. Алгоритм выбора блочного элемента

  3. Текстовые теги

  4. Теги списков

  5. Теги описания таблиц

  6. Теги форм

  7. Медиа теги

  8. Встраиваемые объекты

  9. Переходы на страницу

  10. Универсальные атрибуты

  11. Атрибуты событий

  12. Специальные атрибуты

  13. Правила написания качественного HTML кода

HTML теги
35:44
  1. Определение CSS

  2. Способы подключения CSS

  3. Правила построения CSS

  4. Селекторы

  5. CSS наследование

  6. Приоритеты стилей CSS

  7. Преимущества CSS

Основы CSS. Селекторы
32:33
  1. Типы свойств

  2. Размеры

  3. Позиционирование

  4. Отступы

  5. Границы

  6. Отображение и расположение

  7. Текст и шрифт

  8. Цвет и фон

  9. Стили для списков

  10. Стили для таблиц

  11. Стили для форм

  12. CSS Анимация

  13. Правила написания хорошего кода

CSS Свойства
26:08
  1. Блочная модель

  2. Табличная и блочная верстки

  3. display: inline, block, inline-block

  4. Выравнивания блоков и текста

  5. Позиционирование

  6. Основы адаптивного дизайна

  7. Media запросы

  8. Логические операторы в media запросах

  9. Медиа-функции в медиа-запросах

  10. CSS Frameworks

  11. Типовые ошибки CSS

Основы верстки
30:56
  1. Базовый шаблон

  2. Поддержка браузерами

  3. Контейнеры

  4. Типы устройств

  5. Bootstrap сетка

  6. Адаптивные утилитные классы

  7. Классы печати

  8. Цвета

  9. Компоненты

  10. Free Bootstrap Themes & Templates

  11. Font Awesome

Bootstrap
24:53
  1. JavaScript в современном мире

  2. JavaScript в HTML

  3. JavaScript функции

  4. Дополнительные источники по основам JavaScript

  5. Области видимости

  6. Обработка событий тегов: внедрение JavaScript кода в HTML и декларативный подход

  7. Указатель this

  8. Отладка JavaScript

  9. Объект window

  10. Декларативный подход на примере

  11. Минификация JavaScript

Основы JavaScript
28:12
  1. Официальный сайт, поддержка браузерами и выбор версии

  2. Основные операции JS:

    1. Поиск HTML элемента в DOM

    2. Модификация CSS класса HTML элемента

    3. Модификация CSS стиля HTML элемента

    4. Модификация значения формы HTML элемента

    5. Модификация атрибута HTML элемента

    6. Модификация дочерних элементов

    7. Модификация HTML кода или текста

    8. Модификация обработчиков событий

    9. Выполнение AJAX запроса

  3. Использование JQuery в проекте

Основы JQuery
21:03
+ Создание макета
6 lectures 03:19:25
  1. Создание семантической структуры макета

  2. Создание блока отображения продукта

  3. Проектирование адаптивной сетки

  4. Создание hover эффекта для отображения описания товара

Структура HTML кода и отображение товаров
45:43
  1. Создание панели с категориями

  2. Создание панели упрощенного поиска

  3. Создание панели дополнительных параметров поиска

  4. Создание отображения для xs устройств

Реализация поиска и отображения категорий
25:54
  1. Создание адаптивного заголовка

  2. Создание корзины покупок

  3. Создание страницы с отображением товаров в текущей корзине

Реализация заголовка и странички состояния корзины
23:03
  1. init функция

  2. Функция отображение диалога по добавлению товара

  3. Обработка события добавление товара в корзину

  4. Функция расчета стоимости товаров

  5. Функция загрузки новой порции товаров

Добавление продукта в корзину
39:44
  1. Инициализация поисковой формы

  2. Отправка формы поиска на сервер

  3. Функция подтверждения удаления

  4. Функция удаления продукта из корзины

  5. Функция обновления стоимости заказа

Форма поиска и удаление продуктов из корзины
39:41
  1. Проверка функциональности макета

  2. Проверка выполнимости требований к макету

  3. Адаптация страниц к принтерам

  4. Валидация HTML кода

  5. Проверка на предмет типичных CSS ошибок

  6. Проверка рекомендаций по чистоте кода

Финальный обзор макета и проверка всех требований
25:20
Requirements
  • Базовые знания работы с компьютером в режиме пользователя;
  • Умение пользоваться текстовыми редакторами и браузерами.
Description

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

Данный курс состоит из двух частей: в первой части рассматриваются основные возможности HTML5, CSS, JavaScript, JQuery и Bootstrap, а также основные правила верстки HTML макетов, а во второй части полученные теоретические знания применяются для создания макета интернет магазина IShop

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

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

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

Основы JavaScript, JQuery, Bootstrap и верстки даны в минимальном объеме, необходимом для разработки макетов. Для более глубокого изучения рекомендуем обратиться к другим источникам информации.

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

Who this course is for:
  • Данный курс предназначен для быстрого ознакомления с фундаментальными знаниями HTML5, CSS, JavaScript, JQuery и Bootstrap, необходимыми для верстки функциональных HTML макетов, которые будут использованы при разработке полноценной системы с использованием других языков программирования