• Направления обучения
  • Все курсы
  • Контакты

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


Макет интернет магазина - IShop  $20$9.99
Категория: 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
  • Основы Bootstrap (Bootstrap документация на русском)
  • Уроки по CSS
  • Уроки по JavaScript

В рамках данного курса Вы научитесь


  • Основным возможностям HTML и CSS;
  • Использовать минимально необходимые знания для написания JavaScript кода;
  • Создавать адаптивные сайты с помощью Bootstrap;
  • Создавать HTML макеты с нуля;
  • Писать чистый и понятный другому программисту код;
  • Использовать инструменты браузера для разработки сайтов;
  • Проверять макет на разных устройствах;
  • А также повысите Ваши знания в HTML, 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. Проверка рекомендаций по чистоте кода
DevStudy.net На главную Направления обучения Все курсы FAQ

Контакты:


Udemy: devstudy_net

Email: devstudy.net@gmail.com


Наша миссия:

Дать возможность любому желающему начать работать в IT с минимальными начальными вложениями!



Актуальные вакансии:

jobeka iconВакансии разработчик баз данных на Jobeka jobsora iconВакансии Java разработчик на Jobsora jooble iconВакансии Java разработчик на Jooble