Обучение веб-разработке на практике эффективнее голой теории: всё наглядно, а полученные в ходе разработки решения можно использовать в будущих проектах. Именно поэтому мы совместно с онлайн-школой GeekBrains подготовили туториал по созданию простого слайдера изображений с объяснением каждого шага. Вот так будет выглядеть финальная версия:
Примечание Данная статья — лишь небольшое погружение в мир фронтенд-разработки, ведь современный веб не ограничивается знанием HTML/CSS/JavaScript. Чтобы стать востребованным веб-разработчиком, необходимо осваивать дополнительные библиотеки и фреймворки, которые часто строго разделены между фронтендом и бэкендом.
Что понадобится?
Можно сразу скачать IDE вроде WebStorm, но при обучении веб-разработке с нуля можно начать и в онлайн-редакторе. Мы будем использовать CodePen — популярный онлайн-редактор для веб-разработчиков с мгновенным отображением результата. Но если вы уже начали работу в какой-либо другой среде и считаете, что она намного удобнее, просто убедитесь, что есть поддержка HTML/CSS/JavaScript.
Пишем код
На различных курсах веб-разработки знакомство с фронтендом начинается с описания основных технологий, а именно:
- HTML — язык гипертекстовой разметки, на котором пишется «скелет» сайта. Если провести аналогию с домом, то это каркас. Грубо говоря, вы строите разметку, на которую после будет ложиться оформление.
- CSS — каскадные таблицы стилей или то самое оформление. Вернёмся к примеру с домом: после постройки его нужно облицевать, покрасить, сделать презентабельным, и именно CSS описывает внешний вид сайта.
- JavaScript — язык программирования, который обеспечивает функциональность. Вы можете взаимодействовать с вещами в вашем доме — включать и выключать свет, бытовую технику, воду и многое другое. Вы точно так же можете взаимодействовать с сайтом, нажимая кнопки, наводя курсор на изображения и заполняя формы. JavaScript обрабатывает все эти взаимодействия, и, как язык сценариев, он может предоставлять правила и логику для определения того, что должно произойти дальше.
HTML
Обучение веб-разработке стоит начать с HTML, так как это каркас сайта. Каждый HTML-документ имеет стандартную структуру:
<!-- Указание типа текущего документа: -->
<!DOCTYPE html>
<html>
<!-- Содержимое тега <head> не отображается на странице, помогает в работе с данными и хранит информацию для поисковых систем и браузеров: -->
<head>
<meta charset="utf-8" />
<title>Устанавливает заголовок для окна веб-страницы</title>
</head>
<!-- Здесь содержится весь отображаемый контент: -->
<body>
<p>Текст</p>
<img src="URL" alt="Изображение">
<a href="URL">Ссылка</a>
</body>
</html>Но в нашем примере прописывать структуру всей страницы не нужно, ведь мы работаем с отдельным компонентом, который потом будет размещаться между тегами <body></body>. Здесь всё просто: у нас есть основной блок (тег <div>), который является родительским и содержит ещё три блока с разными картинками — будущими слайдами:
<!-- Основной блок слайдера -->
<div class="slider">
<!-- Первый слайд -->
<div class="item">
<img src="https://media.tproger.ru/uploads/2020/07/field.jpg">
</div>
<!-- Второй слайд -->
<div class="item">
<img src="https://media.tproger.ru/uploads/2020/07/rose.jpg">
</div>
<!-- Третий слайд -->
<div class="item">
<img src="https://media.tproger.ru/uploads/2020/07/leaf.jpg">
</div>
<!-- Кнопки-стрелочки -->
<a class="previous" onclick="previousSlide()">❮</a>
<a class="next" onclick="nextSlide()">❯</a>
</div>Обратите внимание, что у каждого тега <div> есть свой класс. Именно по этим классам будет применяться оформление CSS. В тегах <img> мы указываем ссылки на те изображения, которые будут показываться. В атрибуте onclick мы обращаемся к конкретной функции JavaScript, привязывая к кнопке действие по клику.
CSS
В каскадных стилях задаём ширину, высоту, позиционирование, цвет и анимацию. В нашем случае мы работаем отдельно с контейнером слайдера, отдельно с контейнерами картинок, которые прописаны как item, кнопками, добавлением к ним фона и анимацией слайдов:
/* Слайдер: */
.slider{
max-width: 90%;
/* Положение элемента устанавливается относительно его исходной позиции: */
position: relative;
/* Центрируем по горизонтали: */
margin: auto;
height: 300px;
}
/* Картинка масштабируется по отношению к родительскому элементу: */
.slider .item img {
/* Элемент меняет размер так, чтобы заполнить блок и сохранить пропорции: */
object-fit: cover;
width: 100%;
height: 300px;
}
/* Кнопки назад и вперёд: */
.slider .previous, .slider .next {
/* Добавляет курсору иконку, когда тот оказывается над кнопкой: */
cursor: pointer;
/* Положение элемента задаётся относительно границ браузера: */
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
/* Оформление самих кнопок: */
color: white;
font-weight: bold;
font-size: 16px;
/* Плавное появление фона при наведении курсора: */
transition: 0.6s ease;
/* Скругление границ: */
border-radius: 0 3px 3px 0;
}
.slider .next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* При наведении курсора на кнопки добавляем фон кнопок: */
.slider .previous:hover,
.slider .next:hover {
background-color: rgba(0, 0, 0, 0.2);
}
/* Анимация слайдов: */
.slider .item {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
/* Устанавливаем и изменяем степень прозрачности: */
from {
opacity: 0.4
}
to {
opacity: 1
}
}Со всеми значениями можно поэкспериментировать в редакторе. Если есть сомнения по поводу какого-то из атрибутов, достаточно его удалить и посмотреть, что изменилось.
JavaScript
Веб-разработчик, обучение которого ограничивается HTML и CSS, — это скорее веб-дизайнер. Мы же переходим к главному языку фронтенда, который способен вдохнуть жизнь в визуальное решение:
/* Устанавливаем стартовый индекс слайда по умолчанию: */
let slideIndex = 1;
/* Вызываем функцию, которая реализована ниже: */
showSlides(slideIndex);
/* Увеличиваем индекс на 1 — показываем следующий слайд: */
function nextSlide() {
showSlides(slideIndex += 1);
}
/* Уменьшаем индекс на 1 — показываем предыдущий слайд: */
function previousSlide() {
showSlides(slideIndex -= 1);
}
/* Устанавливаем текущий слайд: */
function currentSlide(n) {
showSlides(slideIndex = n);
}
/* Функция перелистывания: */
function showSlides(n) {
/* Обращаемся к элементам с названием класса "item", то есть к картинкам: */
let slides = document.getElementsByClassName("item");
/* Проверяем количество слайдов: */
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
/* Проходим по каждому слайду в цикле for: */
for (let slide of slides) {
slide.style.display = "none";
}
/* Делаем элемент блочным: */
slides[slideIndex - 1].style.display = "block";
}Но не стоит забывать, что не JavaScript единым: современные библиотеки и фреймворки способны упростить разработку и улучшить функциональность веб-компонента. Например, Bootstrap позволяет верстать сайты в разы быстрее, и даже начинающий разработчик может создать рабочий макет с использованием данного фреймворка. А ещё можно написать слайдер на чистом HTML/CSS, чтобы потренировать навыки в вёрстке и каскадных таблицах стилей.
Приведённый в уроке пример довольно прост и призван показать возможности стандартного взаимодействия HTML, CSS и JavaScript.
Готовый слайдер изображений
В финальной версии слайдера использовано несколько картинок, две кнопки с изменением фона при наведении курсора и плавная анимация перехода. Как видно из нашего примера, обучение веб-разработке может базироваться на практике: это не только пробуждает интерес, но и позволяет экспериментировать, улучшать, изменять функциональность компонентов на своё усмотрение, параллельно пополняя багаж знаний и навыков.
Теперь вы можете попробовать другие способы реализации, перейти к использованию дополнительных инструментов, таких как Bootstrap:
Или CSS Flexbox:
Можете попрактиковаться на слайдере посложнее, с дополнительными эффектами, опираясь на код из данного проекта:
Бэкенд и дополнительные функции
А если добавить к тому, что у нас получилось, бэкенд, можно с помощью API использовать изображения из других ресурсов, например Instagram, или хранить все картинки в своей базе данных, не опасаясь, что изображение удалят и внешняя ссылка станет неактуальной.
Но не практикой единой: не забывайте учить теорию, чтобы долго не буксовать на сложных задачах. Для этого подойдут книги или видео. Также хорошим способом совместить теорию и практику станут курсы веб-разработки с нуля. Например у GeekBrains как раз открыт набор для тех, кто заинтересован в обучении веб-разработке с трудоустройством. Обещают много практики и сразу полтора года опыта, которые можно добавить в резюме.