В этом уроке мы начнем создание простого портфолио. Мы сделаем базовую структуру HTML и подключим стили, чтобы наша страница выглядела аккуратно и профессионально. Это будет основа, к которой мы добавим контент в следующих уроках.
Первым делом откройте текстовый редактор (например, Visual Studio Code или Notepad++) и создайте новый файл с именем index.html. Этот файл станет основой вашего проекта. В нём мы будем описывать, как будут выглядеть и располагаться элементы на странице.
Добавим базовую структуру HTML. Каждый HTML-документ начинается с объявления типа документа, а дальше следуют основные теги: <html>, <head> и <body>.
Вот что нужно написать в файле index.html:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Вставьте в блок ниже Ваше имя! -->
<title>Портфолио Александра Иванова</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<!-- Здесь скоро появится наш контент -->
</div>
</body>
</html>
<!DOCTYPE html> — это обязательная строка, которая сообщает браузеру, что мы используем HTML5. Без неё браузеры могут странно интерпретировать код.
<html lang="ru"> — этот тег открывает HTML-документ, а атрибут lang="ru" указывает, что страница на русском языке.
<head> — в этом блоке содержится служебная информация о нашей странице, например, её название.
<meta charset="UTF-8"> — эта строка нужна для того, чтобы корректно отображались любые символы, включая русские буквы.
<link rel="stylesheet" href="styles.css"> — здесь мы подключаем файл стилей, который создадим чуть позже.
<body> — в этом блоке содержится весь видимый контент страницы.
Теперь давайте создадим файл styles.css, чтобы наша страница выглядела аккуратно. В этом файле мы будем писать CSS-код, который отвечает за внешний вид элементов на странице. Создайте файл с именем styles.css в той же папке, где находится index.html, и добавьте в него следующие стили:
/* Убираем отступы по умолчанию у всех элементов */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Устанавливаем основной шрифт и цвет фона для страницы */
body {
font-family: 'Arial', sans-serif;
background-color: #fbeef5;
color: #333;
line-height: 1.6;
}
/* Контейнер для всей страницы */
.container {
max-width: 800px;
margin: 50px auto;
padding: 20px;
background-color: #fff;
border-radius: 15px;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}
В этих стилях мы убрали все отступы по умолчанию (браузеры часто добавляют их к элементам) и установили приятный розовый фон для всей страницы. Также мы добавили белый блок-контейнер посередине, в котором будет размещен наш контент. У этого контейнера закругленные углы и лёгкая тень, что делает его визуально привлекательным.
Если вы сейчас откроете файл index.html в браузере, то увидите пустую страницу с розовым фоном и белым блоком посередине. Отличное начало!
Теперь давайте добавим заголовок с кратким описанием. Откройте файл index.html и внутри тега <div class="container"> добавьте следующий код:
<header class="header">
<!-- Эмодзи для аватарки, можете использовать любое! -->
<div class="avatar">👨💻</div>
<h1>Привет, я Александр Иванов</h1>
<!-- Вставьте в блок ниже информацию о себе -->
<p class="description">Веб-дизайнер и Frontend разработчик. Люблю создавать цифровые продукты.</p>
</header>
Теперь добавим стили для этого блока. Откройте файл styles.css и добавьте следующий код:
/* Центрируем текст в заголовке */
.header {
text-align: center;
padding-bottom: 20px;
border-bottom: 1px solid #e0e0e0;
}
/* Эмодзи для аватарки */
.avatar {
font-size: 80px;
margin-bottom: 20px;
}
/* Заголовок */
.header h1 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
/* Описание */
.description {
font-size: 16px;
color: #777;
margin-bottom: 20px;
}
Мы добавили блок <header> с аватаркой, заголовком и описанием. Аватарка представлена в виде эмодзи 👨💻. Заголовок (<h1>) сообщает, что это ваше портфолио, а в описании (<p>) вы коротко рассказываете о себе.
В стилях мы выровняли текст по центру и добавили серую линию под заголовком для разделения. Аватарка (эмодзи) увеличена до 80 пикселей, а описание сделано чуть меньшего размера и серого цвета для визуального контраста с заголовком.
Если сейчас открыть страницу в браузере, вы увидите, что у нас появился приятный заголовок с аватаркой и описанием.
Для завершения этого урока давайте добавим ссылки на социальные сети. Добавьте следующие строки прямо под описанием в блоке <header>:
<!-- В ссылках вместо символа # вставьте ссылку до ваших соц сетей, например https://github.com/Coursme -->
<div class="social-links">
<a href="#">
<img src="https://coursme.hb.ru-msk.vkcloud-storage.ru/media/github-brands-solid.svg" alt="GitHub">
</a>
<a href="#">
<img src="https://coursme.hb.ru-msk.vkcloud-storage.ru/media/vk-brands-solid.svg" alt="VK">
</a>
<a href="#">
<img src="https://coursme.hb.ru-msk.vkcloud-storage.ru/media/telegram-brands-solid.svg" alt="Telegram">
</a>
</div>
Теперь, если вы посмотрите на страницу, вы увидите, что под описанием появились три иконки: GitHub, VK и Telegram. Они выровнены по центру, а между ними есть небольшой отступ.
На этом уроке мы создали основу нашего портфолио: добавили заголовок, описание и социальные иконки. В следующем уроке мы добавим блок "О себе" и начнём работать с карточками проектов.