Skip to content

Sergisa/WebTrain

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 

Repository files navigation

alt text

Примеры по веб программированию

Вступление

Темы на данном ресурсе разделены по веткам. Основная master ветка не содержит никакого кода. История изменений в этой ветке это лишь изменения данного README файла. Отдельный пример является отдельной веткой, а изменения на ней разными вариациями примера. Набор веток:

  • form
  • function
  • icons
  • links
  • modal
  • qrcode
  • table
  • toast
  • scss-compilation
  • JS Bundle
  • Babel transpillation
  • Webpack
  • JQuery

form

  • Примеры дизайна и конструирования форм.
  • Приостановка действий по умолчанию e.preventDefault() e.stopPropagation().

function

  • Примитивиные использования функций.

icons

  • Подключения иконок к основной страннице

links

  • Обработка нажатий на ссылку.
  • Приостановка действий по умолчанию e.preventDefault() e.stopPropagation().
  • Пример приостановденной anchor ссылки и анимация скроллинга.

modal

  • Пример модального окна. Создание коробки.
  • Позиционирование.
  • Обработка нажатия на задний фон.

qrcode (Использует модальное окно)

  • Создание модального окна с qr кодом.

toast

  • Создание всплывающего снизу сообщения.
  • Тёмный дизайн.

table

  • Создание простой таблицы с кнопками управления
  • Создание отменяемого действия (Удаление строки. Используется Toast)
  • Простое создание классовой модели для Toast (Показать, Скрыть) ( ES6 )!
  • Создание полноценной классовой модели подтверждающего Toast ( ES6 )!

scss-compilation

  • команды для создания CSS файла из SCSS
    scss src/scss/index.scss dist/css/index.css --sourcemap=none --style expanded
    scss src/scss/index.scss dist/css/index.min.css --sourcemap=none --style compressed
  • команды для создания CSS файла из SCSS c картой
    scss src/scss/index.scss dist/css/index.css --sourcemap=file --style expanded
    scss src/scss/index.scss dist/css/index.min.css --sourcemap=file --style compressed

rollup-bundle

  • Пример сборки JS файла из нескольких с помощью библиотеки Rollup

babel-transpile

  • Пример преобразования (Транспилляции) кода с использованием библиотеки babel

webpack

  • пример сборки стилей и JS файлов с помощью webpack

JQuery

  • пример нескольких функций JQuery библиотеки

Как скачать все примеры и управлять вариантами исполнения

Скачивание

Для скачивания примеров необходимо набрать команду git clone https://github.com/Sergisa/WebTrain.git.

Помните: по умолчанию будет скопирована основная master ветка

Переключение

Для смены ветки необходимо набрать git checkout form.

Помните: В примере показан переход на ветку form. Выполнение команды предполагает переход на последний актуальный коммит ветки

Для перехода к определённому коммиту нужно вместо названия ветки указать первые семь цифр ID коммита git checkout 7ca20dc.

Помните: Так же вместо ID используются текстовые тэги которыми помечаются коммиты

About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published