Создаём сайт с нуля: HTML и CSS для начинающих веб-разработчиков

Пройдите тест, узнайте какой профессии подходите

Сколько вам лет

До 18

От 18 до 24

От 25 до 34

От 35 до 44

От 45 до 49

От 50 до 54

Больше 55

Для кого эта статья:

Новички в веб-разработке, желающие научиться создавать сайты с нуля
Люди, ищущие доступное введение в HTML и CSS без сложного кода
Заинтересованные в смене карьеры или дополнительном обучении в области IT
Мечтаете создать собственный сайт, но не знаете, с чего начать? Забудьте о платных конструкторах и сложных фреймворках! HTML и CSS — это два мощных инструмента, которые позволят вам собственноручно воплотить любую веб-идею без единой строчки сложного кода. В этом руководстве я проведу вас от полного нуля до вашей первой работающей веб-страницы. Даже если вы никогда не писали код, к концу чтения вы удивитесь, насколько это доступно каждому! 🚀

Хотите не просто понять азы, а получить серьезные навыки веб-разработки под руководством практикующих экспертов? Обучение веб-разработке от Skypro — это интенсивная программа с реальными проектами в портфолио и гарантированным трудоустройством. Пока другие экспериментируют с самообучением годами, выпускники Skypro за 9 месяцев получают все необходимые навыки и начинают карьеру в IT. Инвестируйте в себя правильно!

Что такое HTML и CSS: основа для создания сайта

HTML (HyperText Markup Language) и CSS (Cascading Style Sheets) — это фундаментальные технологии, на которых построена каждая веб-страница в интернете. Представьте, что HTML — это скелет вашего сайта, а CSS — его внешний вид и стиль. 🧩

HTML отвечает за структуру и содержание: тексты, изображения, формы, кнопки и другие элементы страницы. Фактически, это набор инструкций для браузера о том, что должно отображаться на странице. HTML использует специальные метки (теги), которые указывают браузеру, как интерпретировать текст.

CSS, в свою очередь, определяет, как эти элементы должны выглядеть: цвета, шрифты, расположение, анимации и другие визуальные аспекты. Без CSS ваша страница будет выглядеть как простой текстовый документ без форматирования.

Вместе эти технологии позволяют создавать всё — от простых одностраничных сайтов до сложных веб-приложений. И самое главное — они доступны каждому: не нужно платить за лицензии или специализированное программное обеспечение.

Технология	Функция	Аналогия
HTML	Структура и контент	Скелет и органы человека
CSS	Стилизация и оформление	Одежда, прическа, макияж
JavaScript	Интерактивность (для справки)	Движения и реакции человека

Почему стоит изучать HTML и CSS, если существуют визуальные конструкторы сайтов?

Полный контроль над кодом и возможностями сайта
Отсутствие ежемесячной платы за использование платформы
Более быстрая загрузка страниц без лишнего кода
Возможность кастомизировать любой аспект дизайна
Фундаментальные знания для дальнейшего развития в веб-разработке

Анна Петрова, веб-разработчик Когда я только начинала свой путь в веб-разработке, меня пугала необходимость учить код. Казалось, что это что-то невероятно сложное, доступное только тем, кто имеет математический склад ума. Я потратила месяцы, экспериментируя с различными конструкторами сайтов, но всегда натыкалась на ограничения: то нельзя добавить нужный функционал, то дизайн не настраивается как хочется. Однажды я решилась и потратила выходные на изучение основ HTML и CSS. К моему удивлению, уже через несколько часов я смогла создать простую страницу. Через неделю — сверстала свое портфолио, а через месяц получила первый заказ на фрилансе. Сейчас, оглядываясь назад, я понимаю, что те два дня, которые я потратила на изучение основ, сэкономили мне годы ограничений и разочарований.

Настройка рабочего пространства: всё для старта

Прежде чем погрузиться в код, необходимо подготовить рабочее пространство. Хорошая новость: для начала работы с HTML и CSS вам понадобится минимум инструментов, большинство из которых уже есть на вашем компьютере! 💻

Вот что вам понадобится для комфортной работы:

Текстовый редактор — специальная программа для написания кода. Простейший вариант (Блокнот в Windows или TextEdit на Mac) уже установлен на вашем компьютере, но лучше использовать специализированные редакторы, которые подсвечивают синтаксис и помогают избегать ошибок.
Веб-браузер — для просмотра результатов вашей работы. Любой современный браузер подойдет, но для разработки особенно хороши Chrome и Firefox благодаря их инструментам для разработчиков.

Рекомендуемые текстовые редакторы для начинающих:

Visual Studio Code (VS Code) — бесплатный, мощный, с огромным количеством плагинов
Sublime Text — легкий и быстрый редактор с минималистичным интерфейсом
Atom — открытый и настраиваемый редактор от GitHub
Brackets — редактор, созданный специально для веб-разработки

Установив редактор, создайте на компьютере отдельную папку для вашего первого проекта. Внутри этой папки вы будете хранить HTML-файлы, CSS-файлы и медиафайлы (изображения, видео и т.д.).

Действие	Windows	macOS
Создание папки	ПКМ → Создать → Папка	Cmd + Shift + N
Создание файла HTML	ПКМ → Создать → Текстовый документ → Переименовать в index.html	В Finder: File → New Folder → Переименовать в index.html
Создание файла CSS	ПКМ → Создать → Текстовый документ → Переименовать в styles.css	В Finder: File → New Folder → Переименовать в styles.css
Открытие HTML в браузере	Двойной клик по файлу	Двойной клик по файлу

Дополнительные инструменты, которые могут пригодиться (не обязательны для старта):

Git — система контроля версий для отслеживания изменений в коде
Figma или Adobe XD — для создания макетов дизайна перед вёрсткой
Графические редакторы для работы с изображениями (GIMP, Photoshop)
Расширения браузера для веб-разработки (например, Web Developer для Chrome)

После настройки рабочего пространства вы готовы приступить к написанию первого кода! 🎯

Базовая структура HTML-документа и первые теги

Теперь, когда ваше рабочее пространство готово, давайте создадим ваш первый HTML-документ. Откройте текстовый редактор и создайте новый файл с именем index.html — это стандартное название для главной страницы сайта. 📄

Каждый 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>
<!-- Здесь будет содержимое вашего сайта -->
<h1>Привет, мир!</h1>
<p>Это мой первый сайт, созданный с помощью HTML и CSS.</p>
</body>
</html>

Давайте разберем эту структуру по частям:

<!DOCTYPE html> — объявление типа документа, сообщающее браузеру, что используется HTML5
<html> — корневой элемент, содержащий весь HTML-документ
<head> — раздел с метаданными (информацией о странице, которая не отображается напрямую)
<meta charset="UTF-8"> — указывает кодировку символов
<title> — заголовок страницы, отображаемый на вкладке браузера
<link> — подключает внешний файл CSS
<body> — содержит видимое содержимое страницы

Сохраните файл и откройте его в браузере (просто дважды кликните на файл). Вы увидите вашу первую веб-страницу! 🎉

Теперь давайте добавим больше контента, используя основные HTML-теги:

<body>
<header>
<h1>Мой первый веб-сайт</h1>
<nav>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#about">Обо мне</a></li>
<li><a href="#projects">Проекты</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav>
</header>

<main>
<section id="about">
<h2>Обо мне</h2>
<p>Здесь я расскажу немного о себе и своих интересах.</p>
<img src="profile.jpg" alt="Моё фото">
</section>

<section id="projects">
<h2>Мои проекты</h2>
<div class="project">
<h3>Проект 1</h3>
<p>Описание первого проекта.</p>
</div>
<div class="project">
<h3>Проект 2</h3>
<p>Описание второго проекта.</p>
</div>
</section>

<section id="contact">
<h2>Связаться со мной</h2>
<form>
<label for="name">Имя:</label>
<input type="text" id="name" name="name">

<label for="email">Email:</label>
<input type="email" id="email" name="email">

<label for="message">Сообщение:</label>
<textarea id="message" name="message"></textarea>

<button type="submit">Отправить</button>
</form>
</section>
</main>

<footer>
<p>&copy; 2023 Мой первый сайт. Все права защищены.</p>
</footer>
</body>

Вот краткое описание использованных тегов:

<header> — шапка сайта с логотипом и навигацией
<nav> — навигационное меню
<ul>, <li> — маркированный список и его элементы
<a> — ссылка с атрибутом href, указывающим на адрес
<main> — основное содержимое страницы
<section> — тематический раздел содержимого
<h1> – <h6> — заголовки разных уровней
<p> — параграф текста
<img> — изображение с атрибутами src (путь) и alt (альтернативный текст)
<div> — универсальный блочный контейнер
<form> — форма для сбора данных от пользователя
<label> — подпись для элемента формы
<input> — поле для ввода информации
<textarea> — многострочное текстовое поле
<button> — кнопка
<footer> — нижняя часть страницы

Обновите страницу в браузере. Пока она выглядит очень просто, без стилизации, но структура уже создана! В следующем разделе мы добавим CSS, чтобы сделать страницу привлекательной. 🎨

Дмитрий Соколов, фронтенд-разработчик Я хорошо помню свой первый HTML-документ. Это было что-то вроде "Привет, мир!" — всего пара строк кода, но ощущения были невероятные. Я создал что-то из ничего, и это работало! В компании, где я сейчас работаю, мы часто проводим мастер-классы для новичков, и я всегда начинаю с базовой структуры HTML. Интересно наблюдать, как загораются глаза у людей, когда они видят, что их код превращается в реальную веб-страницу. Один из участников недавно рассказал, как после нашего мастер-класса за выходные создал простой сайт-визитку для своего хобби — выращивания кактусов. Этот сайт принес ему первых клиентов. Так что не недооценивайте силу даже самых базовых знаний HTML. Для многих это становится началом увлекательного путешествия и даже карьеры.

Как создать стильную страницу: основы CSS

Теперь, когда у нас есть структура сайта в HTML, пришло время добавить стиль с помощью CSS. Если HTML — это содержание и структура, то CSS — это всё, что касается внешнего вида: цвета, размеры, расположение элементов, анимации и многое другое. 🎨

Создайте новый файл в той же папке, что и ваш HTML-файл, и назовите его styles.css. В HTML-файле мы уже подключили этот CSS-файл строкой <link rel="stylesheet" href="styles.css"> в разделе <head>.

Давайте начнем с основных стилей для нашей страницы:

/* Сброс стандартных стилей браузера */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
color: #333;
background-color: #f4f4f4;
padding: 20px;
}

/* Стили для шапки сайта */
header {
background-color: #35424a;
color: white;
padding: 20px;
text-align: center;
margin-bottom: 20px;
border-bottom: 4px solid #e8491d;
}

/* Стили для навигационного меню */
nav ul {
list-style: none;
display: flex;
justify-content: center;
margin-top: 10px;
}

nav li {
margin: 0 15px;
}

nav a {
color: white;
text-decoration: none;
font-weight: bold;
}

nav a:hover {
color: #e8491d;
}

/* Основные секции */
section {
background: white;
margin-bottom: 20px;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

h1, h2, h3 {
color: #35424a;
margin-bottom: 15px;
}

p {
margin-bottom: 15px;
}

/* Стили для изображений */
img {
max-width: 100%;
height: auto;
border-radius: 5px;
margin-bottom: 15px;
}

/* Стили для проектов */
.project {
border-left: 3px solid #e8491d;
padding-left: 15px;
margin-bottom: 20px;
}

/* Стили для формы */
form {
display: flex;
flex-direction: column;
}

label {
margin-bottom: 5px;
font-weight: bold;
}

input, textarea {
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
}

button {
background-color: #e8491d;
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
border-radius: 4px;
font-size: 16px;
}

button:hover {
background-color: #c23616;
}

/* Подвал сайта */
footer {
background-color: #35424a;
color: white;
text-align: center;
padding: 20px;
margin-top: 20px;
border-top: 4px solid #e8491d;
}

Сохраните файл и обновите страницу в браузере. Теперь ваш сайт должен выглядеть гораздо привлекательнее! 🌟

Давайте разберемся с основными принципами CSS:

Селекторы — указывают, к каким HTML-элементам применять стили (например, body, h1, .project, #contact)
Свойства — определяют, что именно нужно изменить (например, color, font-size, margin)
Значения — указывают, как именно изменить свойство (например, red, 16px, 20px)

Основные типы селекторов в CSS:

Селектор элемента: p { color: blue; } — стили применяются ко всем параграфам
Селектор класса: .project { border: 1px solid black; } — стили применяются ко всем элементам с атрибутом class="project"
Селектор идентификатора: #contact { background-color: gray; } — стили применяются к элементу с атрибутом id="contact"
Комбинированные селекторы: nav a { text-decoration: none; } — стили применяются ко всем ссылкам внутри элемента nav

Наиболее часто используемые CSS-свойства:

Категория	Свойства	Примеры использования
Текст	color, font-size, font-family, font-weight, text-align	Изменение цвета, размера и выравнивания текста
Блоки	width, height, margin, padding, border	Управление размерами и отступами блоков
Фон	background-color, background-image	Установка цвета или изображения фона
Позиционирование	position, display, float, flex, grid	Управление расположением элементов на странице

Дополнительные советы по CSS:

Используйте комментарии (/* Комментарий */) для пояснения сложных участков кода
Организуйте CSS логически, группируя связанные стили
Для отладки используйте инструменты разработчика в браузере (F12 или ПКМ → Исследовать элемент)
Изучите медиа-запросы для создания адаптивного дизайна, который хорошо выглядит на мобильных устройствах

Для дальнейшего улучшения вашего сайта, вы можете изучить более продвинутые темы CSS, такие как флексбокс, гриды, анимации и переменные. Но уже сейчас у вас есть все необходимые навыки для создания привлекательного и функционального сайта! 💪

Практический проект: создаём свой первый сайт с нуля

Теперь, когда мы разобрали основы HTML и CSS, давайте применим полученные знания на практике и создадим полноценный одностраничный сайт-портфолио. Этот проект объединит все изученные концепции и даст вам рабочий шаблон, который вы сможете адаптировать под свои нужды. 🚀

Наш проект будет состоять из следующих разделов:

Шапка с навигацией
Геройский блок с приветствием
Раздел "Обо мне"
Раздел "Навыки"
Раздел "Портфолио"
Форма обратной связи
Подвал сайта

Давайте начнем с создания более продвинутой структуры 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="portfolio-style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<!-- Шапка сайта -->
<header>
<div class="container">
<div class="logo">ИП</div>
<nav>
<ul>
<li><a href="#home">Главная</a></li>
<li><a href="#about">Обо мне</a></li>
<li><a href="#skills">Навыки</a></li>
<li><a href="#portfolio">Портфолио</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav>
</div>
</header>

<!-- Героический блок -->
<section id="home" class="hero">
<div class="container">
<div class="hero-content">
<h1>Иван Петров</h1>
<h2>Веб-разработчик</h2>
<p>Создаю современные и функциональные веб-сайты с чистым кодом</p>
<a href="#contact" class="btn">Связаться со мной</a>
</div>
</div>
</section>

<!-- Обо мне -->
<section id="about" class="about">
<div class="container">
<h2 class="section-title">Обо мне</h2>
<div class="about-content">
<div class="about-image">
<img src="https://via.placeholder.com/300" alt="Иван Петров">
</div>
<div class="about-text">
<h3>Кто я такой?</h3>
<p>Я начинающий веб-разработчик с страстью к созданию красивых и функциональных веб-сайтов. Моя цель — помогать бизнесам и частным лицам эффективно представлять себя в интернете.</p>
<p>Я специализируюсь на HTML, CSS и постоянно изучаю новые технологии, чтобы быть в курсе последних тенденций в веб-разработке.</p>
<a href="#" class="btn">Скачать резюме</a>
</div>
</div>
</div>
</section>

<!-- Навыки -->
<section id="skills" class="skills">
<div class="container">
<h2 class="section-title">Мои навыки</h2>
<div class="skills-container">
<div class="skill-item">
<i class="fab fa-html5"></i>
<h3>HTML5</h3>
<p>Создание семантически правильной и доступной структуры веб-страниц.</p>
</div>
<div class="skill-item">
<i class="fab fa-css3-alt"></i>
<h3>CSS3</h3>
<p>Стилизация и визуальное оформление веб-сайтов с использованием современных техник.</p>
</div>
<div class="skill-item">
<i class="fas fa-mobile-alt"></i>
<h3>Адаптивный дизайн</h3>
<p>Создание сайтов, которые отлично выглядят на всех устройствах.</p>
</div>
</div>
</div>
</section>

<!-- Портфолио -->
<section id="portfolio" class="portfolio">
<div class="container">
<h2 class="section-title">Мои работы</h2>
<div class="portfolio-container">
<div class="portfolio-item">
<img src="https://via.placeholder.com/350x200" alt="Проект 1">
<div class="portfolio-info">
<h3>Личный блог</h3>
<p>Веб-сайт для публикации статей о технологиях</p>
<a href="#" class="btn">Подробнее</a>
</div>
</div>
<div class="portfolio-item">
<img src="https://via.placeholder.com/350x200" alt="Проект 2">
<div class="portfolio-info">
<h3>Сайт-визитка для фотографа</h3>
<p>Портфолио с галереей и формой обратной связи</p>
<a href="#" class="btn">Подробнее</a>
</div>
</div>
<div class="portfolio-item">
<img src="https://via.placeholder.com/350x200" alt="Проект 3">
<div class="portfolio-info">
<h3>Лендинг для курса</h3>
<p>Продающая страница для онлайн-курса</p>
<a href="#" class="btn">Подробнее</a>
</div>
</div>
</div>
</div>
</section>

<!-- Контакты -->
<section id="contact" class="contact">
<div class="container">
<h2 class="section-title">Связаться со мной</h2>
<div class="contact-content">
<div class="contact-info">
<div class="contact-item">
<i class="fas fa-envelope"></i>
<p>email@example.com</p>
</div>
<div class="contact-item">
<i class="fas fa-phone"></i>
<p>+7 (123) 456-78-90</p>
</div>
<div class="contact-item">
<i class="fas fa-map-marker-alt"></i>
<p>Москва, Россия</p>
</div>
<div class="social-links">
<a href="#"><i class="fab fa-telegram"></i></a>
<a href="#"><i class="fab fa-vk"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
</div>
</div>
<form class="contact-form">
<div class="form-group">
<input type="text" placeholder="Ваше имя" required>
</div>
<div class="form-group">
<input type="email" placeholder="Ваш email" required>
</div>
<div class="form-group">
<input type="text" placeholder="Тема сообщения">
</div>
<div class="form-group">
<textarea placeholder="Ваше сообщение" required></textarea>
</div>
<button type="submit" class="btn">Отправить сообщение</button>
</form>
</div>
</div>
</section>

<!-- Подвал -->
<footer>
<div class="container">
<p>&copy; 2023 Иван Петров. Все права защищены.</p>
</div>
</footer>
</body>
</html>

Теперь создайте файл portfolio-style.css и добавьте следующие стили:

/* Основные стили */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
}

.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}

.section-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 50px;
position: relative;
padding-bottom: 20px;
}

.section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background-color: #4CAF50;
}

.btn {
display: inline-block;
padding: 10px 25px;
background-color: #4CAF50;
color: white;
text-decoration: none;
border-radius: 4px;
font-weight: bold;
transition: background-color 0.3s ease;
}

.btn:hover {
background-color: #388E3C;
}

section {
padding: 80px 0;
}

/* Шапка */
header {
background-color: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: fixed;
width: 100%;
z-index: 100;
}

header .container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
}

.logo {
font-size: 2rem;
font-weight: bold;
color: #4CAF50;
}

nav ul {
display: flex;
list-style: none;
}

nav ul li {
margin-left: 30px;
}

nav ul li a {
text-decoration: none;
color: #333;
font-weight: 600;
transition: color 0.3s ease;
}

nav ul li a:hover {
color: #4CAF50;
}

/* Героический блок */
.hero {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://via.placeholder.com/1920x1080');
background-size: cover;
background-position: center;
color: white;
height: 100vh;
display: flex;
align-items: center;
text-align: center;
}

.hero-content {
max-width: 800px;
margin: 0 auto;
}

.hero h1 {
font-size: 4rem;
margin-bottom: 20px;
}

.hero h2 {
font-size: 2.5rem;
margin-bottom: 20px;
font-weight: 300;
}

.hero p {
font-size: 1.2rem;
margin-bottom: 30px;
}

/* Секция "Обо мне" */
.about-content {
display: flex;
flex-wrap: wrap;
align-items: center;
}

.about-image {
flex: 1;
min-width: 300px;
text-align: center;
}

.about-image img {
border-radius: 5px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.about-text {
flex: 2;
padding: 0 30px;
}

.about-text h3 {
font-size: 1.8rem;
margin-bottom: 20px;
}

.about-text p {
margin-bottom: 15px;
}

/* Секция "Навыки" */
.skills {
background-color: #f9f9f9;
}

.skills-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
}

.skill-item {
flex: 1;
min-width: 250px;
background: white;
padding: 30px;
border-radius: 5px;
text-align: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
}

.skill-item:hover {
transform: translateY(-10px);
}

.skill-item i {
font-size: 3rem;
color: #4CAF50;
margin-bottom: 20px;
}

.skill-item h3 {
margin-bottom: 15px;
font-size: 1.5rem;
}

/* Секция "Портфолио" */
.portfolio-container {
display: flex;
flex-wrap: wrap;
gap: 30px;
}

.portfolio-item {
flex: 1;
min-width: 300px;
position: relative;
overflow: hidden;
border-radius: 5px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.portfolio-item img {
width: 100%;
display: block;
transition: transform 0.3s ease;
}

.portfolio-info {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(76, 175, 80, 0.9);
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
opacity: 0;
transition: opacity 0.3s ease;
}

.portfolio-item:hover img {
transform: scale(1.1);
}

.portfolio-item:hover .portfolio-info {
opacity: 1;
}

.portfolio-info h3 {
font-size: 1.5rem;
margin-bottom: 10px;
}

.portfolio-info p {
margin-bottom: 20px;
}

/* Секция "Контакты" */
.contact {
background-color: #f9f9f9;
}

.contact-content {
display: flex;
flex-wrap: wrap;
gap: 50px;
}

.contact-info, .contact-form {
flex: 1;
min-width: 300px;
}

.contact-item {
display: flex;
align-items: center;
margin-bottom: 20px;
}

.contact-item i {
font-size: 1.5rem;
color: #4CAF50;
margin-right: 15px;
}

.social-links {
margin-top: 30px;
}

.social-links a {
display: inline-block;
margin-right: 15px;
color: #333;
font-size: 1.5rem;
transition: color 0.3s ease;
}

.social-links a:hover {
color: #4CAF50;
}

.form-group {
margin-bottom: 20px;
}

.contact-form input, .contact-form textarea {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}

.contact-form textarea {
min-height: 150px;
}

/* Подвал */
footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px 0;
}

/* Медиа-запросы для адаптивности */
@media (max-width: 768px) {
.about-content {
flex-direction: column;
}

.about-text {
padding: 30px 0 0 0;
}

.hero h1 {
font-size: 3rem;
}

.hero h2 {
font-size: 2rem;
}
}

Сохраните оба файла и откройте index.html в вашем браузере. Поздравляю! Вы только что создали полноценный одностраничный сайт-портфолио, который включает все основные элементы современного веб-дизайна. 🎉

Этот проект демонстрирует множество современных техник веб-разработки:

Семантическую структуру HTML5
Стилизацию с помощью CSS3
Responsive design (адаптивный дизайн) с использованием медиа-запросов
Flexbox для создания гибких и отзывчивых макетов
CSS-переходы и эффекты наведения для интерактивности
Иконки Font Awesome для улучшения визуального оформления
Формы для взаимодействия с пользователями

Этот сайт-портфолио можно легко настроить под ваши нужды, заменив заполнители своей информацией и изображениями. Вы также можете расширить его функциональность, добавив больше разделов или интегрировав JavaScript для большей интерактивности.

Помните, что веб-разработка — это постоянное обучение и совершенствование. Не останавливайтесь на достигнутом, экспериментируйте с кодом и изучайте новые технологии! 💻

Поздравляю! Вы прошли полный путь от нуля до создания собственного сайта с помощью HTML и CSS. Ощущение, когда видишь свой первый сайт в браузере — бесценно, правда? Это только начало вашего путешествия в мир веб-разработки. Теперь у вас есть прочный фундамент, чтобы двигаться дальше: изучать JavaScript для добавления интерактивности, осваивать фреймворки, погружаться в бэкенд-разработку. Но главное — вы преодолели самый сложный барьер входа и доказали себе, что можете создавать сайты с нуля. Продолжайте практиковаться, экспериментировать и не бойтесь ошибаться — каждая строчка кода делает вас опытнее.

Читайте также

Проверь как ты усвоил материалы статьи

Пройди тест и узнай насколько ты лучше других читателей

Какой тег указывает, что документ является HTML-документом?

1 / 5

Свежие материалы

Что такое HTTP и HTTPS?

6 сентября 2024

Коды состояния HTTP: что они значат?

6 сентября 2024

Мета-теги: как правильно использовать

6 сентября 2024

Создаём сайт с нуля: HTML и CSS для начинающих веб-разработчиков

Что такое HTML и CSS: основа для создания сайта

Настройка рабочего пространства: всё для старта

Базовая структура HTML-документа и первые теги

Как создать стильную страницу: основы CSS

Практический проект: создаём свой первый сайт с нуля

Загрузка...