WEB start
Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17
Наши преимущества
- Наши программы обучения ориентированы на конкретного слушателя. Вы можете обучаться по одной из предложенных Вам программ, а можете самостоятельно составить, откорректировать, откорректировать свою персональную программу обучения. Преподаватель, консультант помогают Вам сориентироваться в материале курса при выборе программы обучения.
- Обучение индивидуальное. Преподаватель проводит занятие только для Вас, ориентируясь на Ваши возможности, предыдущие знания и опыт, скорость восприятия нового материала.
- Вы учитесь в удобное для Вас время, в удобной для Вас форме, может быть выбран гибкий график занятий, в соответствии с Вашими возможностями и пожеланиями.
- Обучение проводится дистанционно. Вы можете обучаться, сидя за Вашим компьютером дома или на работе, не тратя время на поездки к месту обучения.
WEB основы
-
CSS
-
HTML
-
JavaScript
- JavaScript - объекты
- DOM объекты браузера
- DOM - объекты CSS
- DOM объект Window
- JavaScript - операторы языка
- JavaScript - массивы (Array)
- JavaScript - работа со строками
- DOM объект Document
- DOM объект - Element
- JavaScript регулярные выражения
- JavaScript - объект Date
- DOM - обработка событий (Events)
- Программирование на JavaScript, DOM
- JavaScript AJAX
- JavaScript - объект Math
- DOM объект - window
Регистрация на сайте
Дополнительные материалы
- API WEB - уведомлений (Notifications)
- CSS - шрифты
- CSS3 адаптивные блоки (Flex Box Model)
- HTML5 - элемент CANVAS, рисование
- HTML5 семантические элементы
- Joomla, компонент Sourcerer
- Visual Studio Code для HTML, CSS, SASS, JavaScript
- WordPress - дочерние темы
- Вставка видео в HTML документ
- Построение многоязычных сайтов на CMS WordPress
- Создание шаблонов для Joomla 3.x
CSS функции
CSS - функции
Функция |
Описание |
CSS |
|---|---|---|
| attr() | Возвращает значение атрибута выбранного элемента | 2 |
| calc() | Позволяет выполнять вычисления для определения значений свойств CSS | 3 |
| linear-gradient() | Создает «изображение», которое представляет линейный градиент цветов | 3 |
| radial-gradient() | Создает «изображение», которое представляет собой градиент цветов, излучающих из центра градиента | 3 |
| repeating-linear-gradient() | Создает «образ», состоящий из повторяющихся градиентов | 3 |
| repeating-radial-gradient() | Подобно радиальному градиенту (), но он автоматически повторяет цвет бесконечно бесконечно в обоих направлениях | 3 |
| cubic-bezier() | Определяет кубическую кривую Безье | |
| hsl() | Определяет цвета с использованием модели Hue-Saturation-Lightness (HSL) | |
| hsla() | Определяет цвета с использованием модели Hue-Saturation-Lightness-Alpha (HSLA) | |
| rgb() | Определяет цвета с использованием модели Red-Green-Blue (RGB) | |
| rgba() | Определяет цвета с использованием модели Red-Green-Blue-Alpha (RGBA) | |
| var() | возвращает значение свойства, заданного переменной |
Пример использования некоторых функций
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
:root {
--color1: #fff6e6;
--color2: #ffa500;
--color3: #b37400;
--color4: #332100;
}
body {
background-color: var(--color1);
color: var(--color4);
}
blockquote {
border-left: 5px solid var(--color2);
padding: 10px;
}
p:before {
content: " ";
display: block;
width: 25%;
height: calc(1rem/2);
border-top: 1px solid var(--color2);
}
.grad {
color: var(--color1);
text-shadow: 1px 1px var(--color4);
font-size: 1.2rem;
padding: 20px 10px;
text-align: center;
margin: 10px 0px;
}
.linGrd1 {
background: linear-gradient(var(--color1), var(--color4));
}
.linGrd2 {
background: linear-gradient(90deg, var(--color1), var(--color4), var(--color1), var(--color4));
}
</style>
</head>
<body>
<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>
<h6>Heading6</h6>
<p>Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text </p>
<p>Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text </p>
<p>Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text Paragraph text </p>
<blockquote>Blockquote text Blockquote text Blockquote text Blockquote text Blockquote text Blockquote text Blockquote text </blockquote>
<div class="grad linGrd1">linear-gradient(var(--color1), var(--color4))</div>
<div class="grad linGrd2">linear-gradient(90deg, var(--color1), var(--color4), var(--color1), var(--color4))</div>
</body>
</html>
