TL;DR: Пошаговое руководство по созданию одностраничного сайта на HTML, CSS и JavaScript с использованием jQuery и Font Awesome. Вы получите готовый шаблон, объяснения ключевых приёмов и дополнительные чеклисты, методологии и шпаргалки для дальнейшего развития проекта.
О чём это руководство В этом руководстве вы пройдёте путь от пустого файла до готовой страницы, сверстанной по макету. Мы используем только стандартные технологии: HTML для структуры, CSS для стилей, JavaScript (и jQuery) для логики и межфреймовых эффектов. Это хорошая отправная точка, если вы читали базовые руководства по HTML и CSS, но не знаете, как собрать всё вместе в большой проект.
Кого это руководство ждёт:
абсолютных новичков, которые хотят увидеть практический пример; тех, кто знает базовый HTML/CSS, но не уверен, как организовать код проекта; людей, желающих научиться небольшому JavaScript‑интерактиву (смена изображений). Краткое определение терминов:
HTML — язык разметки для структуры страницы. CSS — каскадные таблицы стилей для внешнего вида элементов. JavaScript — язык программирования для поведения и взаимодействий на странице. jQuery — облегчённая библиотека JavaScript, упрощающая работу с DOM. Дизайн и ресурсы
В руководстве использован готовый макет сайта; доступны варианты изображений и PSD‑файлы, если вы хотите сверстать страницу максимально близко к оригиналу.
PSD‑файл содержит слои, сгруппированные и помеченные цветом — это удобно для точного сопоставления верстки и графики.
Шрифты, использованные в макете: Font Awesome (иконы), PT Serif и Myriad Pro. Myriad Pro обычно доступен в Adobe CC, но для веба мы используем доступные веб‑шрифты (PT Serif и PT Sans через Google Fonts), о чём расскажем ниже.
Important: вам не нужен Photoshop, чтобы пройти этот урок — достаточно текстового редактора и браузера.
Начальный файл и базовая структура Создайте новый файл и сохраните его как index.html. Это «стандартное» имя для главной страницы на большинстве серверов.
Вот минимальная HTML‑структура, с которой мы начнём. Комментарии внутри переведены на русский, чтобы легче было понять, что делает каждый блок.
Что делает этот шаблон:
задаёт минимума структуры HTML; задаёт заголовок страницы Noise Media ; подключает Font Awesome и jQuery через CDN; резервирует места для CSS и JavaScript. Откройте файл в браузере — вы увидите пустую страницу с установленным заголовком в окне/вкладке.
Примечание о title Текст в теге
отображается в заголовке вкладки браузера и важен для SEO и удобства пользователя.</p><h2 class="text-2xl font-bold py-2" id="h2-4">Шапка сайта (Header)</h2><p class="">Добавим верхнюю серую полоску и основной блок с логотипом и навигацией.</p><p class="">Вставьте внутри body в самом верху:</p><div class="code-ui group"><pre class=""><code class="html" class=""><div id="top-bar"></div></code></pre></div><p class="">CSS для этого элемента (добавьте в style):</p><div class="code-ui group"><pre class=""><code class="css" class="">html, body {
margin: 0;
padding: 0;
font-family: 'Helvetica', 'Arial'; /* временные начальные шрифты */
}
#top-bar {
width: 100%;
background: #F1F1F1; /* светло‑серый */
border-bottom: 1px solid #D4D4D4; /* затемнённая линия внизу */
height: 25px;
}</code></pre></div><p class="">Пояснение: селектор с решёткой (#top-bar) указывает на id. Для повторяющихся стилей используйте class (с точкой), для уникальных — id.</p><h3 class="text-xl font-bold py-2" id="h2-5">Контейнер фиксированной ширины</h3><p class="">Добавим контейнер .normal-wrapper шириной 900px, чтобы центрировать содержимое:</p><div class="code-ui group"><pre class=""><code class="html" class=""><div class="normal-wrapper"></div></code></pre></div><div class="code-ui group"><pre class=""><code class="css" class="">.normal-wrapper {
width: 900px;
margin: 0 auto;
padding: 15px 40px;
background: red; /* временно, чтобы увидеть размеры */
overflow: auto;
}</code></pre></div><p class="">Тёмно‑красный фон можно убрать позже; он помогает понять расположение блоков.</p><h3 class="text-xl font-bold py-2" id="h2-6">Логотип</h3><p class="">Внутри .normal-wrapper добавьте HTML для логотипа:</p><div class="code-ui group"><pre class=""><code class="html" class=""><div id="logo-container">
<i class="fa fa-volume-down logo-icon"></i>
<h1>Noise Media</h1>
</div></code></pre></div><p class="">CSS:</p><div class="code-ui group"><pre class=""><code class="css" class="">.logo-icon {
color: #000000;
font-size: 60pt;
float: left;
}
h1 {
float: left;
margin: 21px 0 0 25px;
}</code></pre></div><p class="">Если хотите другую иконку, замените класс fa-volume-down на нужный с сайта Font Awesome.</p><h3 class="text-xl font-bold py-2" id="h2-7">Навигация</h3><p class="">Добавим простой горизонтальный navbar через ul:</p><div class="code-ui group"><pre class=""><code class="html" class=""><ul id="navbar">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Reviews</a></li>
<li><a href="" class="last-link">Contact</a></li>
</ul></code></pre></div><p class="">CSS:</p><div class="code-ui group"><pre class=""><code class="css" class="">#navbar {
list-style-type: none;
margin: 29px 0 0 0;
padding: 0;
float: right;
font-size: 16pt;
}
#navbar li {
display: inline;
}
#navbar li a:link, #navbar li a:visited, #navbar li a:active {
text-decoration: none;
color: #000000;
padding: 0 16px 0 10px;
margin: 0;
border-right: 2px solid #B4B4B4;
}
#navbar li a.last-link {
border-right: 0px;
}
#navbar li a:hover {
color: #EB6361;
}</code></pre></div><p class="">Обратите внимание: селекторы состояния ссылки (a:link, a:visited и т.д.) предназначены для управления внешним видом ссылок в разных состояниях.</p><p class="">Добавим тонкую цветную полосу под шапкой:</p><div class="code-ui group"><pre class=""><code class="html" class=""><div id="top-color-splash"></div></code></pre></div><div class="code-ui group"><pre class=""><code class="css" class="">#top-color-splash {
width: 100%;
height: 4px;
background: #EB6361; /* акцентный цвет */
}</code></pre></div><p class="">Результат: верхняя часть сайта готова и выглядит почти как макет.</p><p class=""><img src="/files/3385a400-b37d-49e1-8994-4db4cae3f508.5" alt="Шапка сайта: логотип и навигация" class="block w-auto max-w-full h-auto mx-auto py-2 rounded-xl "/></p><p class=""><img src="/files/4aa6147d-a0eb-4de6-8d5b-b6d1595b6f32.5" alt="Серый бортик вверху крупно" class="block w-auto max-w-full h-auto mx-auto py-2 rounded-xl "/></p><h2 class="text-2xl font-bold py-2" id="h2-8">Главная область (Above the fold)</h2><p class="">Раздел выше сгиба содержит приветствие и изображение справа. Мы условно делим блок примерно в соотношении 40%/60% (треть/две трети).</p><p class="">HTML:</p><div class="code-ui group"><pre class=""><code class="html" class=""><div class="normal-wrapper">
<div class="one-third">
<h2 class="no-margin-top">Welcome!</h2>
<p>Noise Media is a technology company specialising in tech reviews.</p>
<p>We’re very good at what we do, but unfortunately, we are not a real company.</p>
<p>Make sure you visit makeuseof.com for the full tutorial on how to build this website.</p>
<p>Alternatively, check out our review of the Panasonic G80 shown on the right!</p>
</div>
<div class="two-third">
<img class="featured-image" src="Image_1.jpg" />
</div>
</div></code></pre></div><p class="">CSS:</p><div class="code-ui group"><pre class=""><code class="css" class="">.one-third {
width: 40%;
float: left;
box-sizing: border-box;
margin-top: 20px;
}
.two-third {
width: 60%;
float: left;
box-sizing: border-box;
padding-left: 40px;
text-align: right;
margin-top: 20px;
}
.featured-image {
max-width: 500px;
}
.no-margin-top {
margin-top: 0;
}</code></pre></div><p class="">Ключевой момент: box-sizing: border-box гарантирует, что указанные ширины включают padding и borders — полезно при расчёте сетки.</p><p class=""><img src="/files/3d69164a-53fb-4119-ae43d19c1b5d.5" alt="Главная область с текстом и изображением" class="block w-auto max-w-full h-auto mx-auto py-2 rounded-xl "/></p><h2 class="text-2xl font-bold py-2" id="h2-9">Блок с цитатой</h2><p class="">Добавим тёмный блок с белым текстом — простой способ выделить отзыв:</p><div class="code-ui group"><pre class=""><code class="html" class=""><div id="quote-area">
<div class="normal-wrapper">
<h3>“makeuseof is the best website ever”</h3>
<h4>Joe Coburn</h4>
</div>
</div></code></pre></div><div class="code-ui group"><pre class=""><code class="css" class="">#quote-area {
background: #363636;
color: #FFFFFF;
text-align: center;
padding: 15px 0;
}
h3 {
font-weight: normal;
font-size: 20pt;
margin-top: 0px;
}
h4 {
font-weight: normal;
font-size: 16pt;
margin-bottom: 0;
}</code></pre></div><p class=""><img src="/files/8a740379-d6d8-4b90-b574-43eb8cdf1467.5" alt="Блок с цитатой на тёмном фоне" class="block w-auto max-w-full h-auto mx-auto py-2 rounded-xl "/></p><h2 class="text-2xl font-bold py-2" id="h2-10">Блок иконок</h2><p class="">Три колонки с иконками и краткими описаниями. Для одинаковых блоков удобно использовать class вместо id.</p><p class="">HTML:</p><div class="code-ui group"><pre class=""><code class="html" class=""><div class="normal-wrapper">
<div class="icon-outer">
<div class="icon-circle">
<i class="fa fa-youtube logo-icon"></i>
</div>
<h5>YouTube</h5>
<p>Checkout our YouTube channel for more tech reviews, tutorials and giveaways!</p>
</div>
<div class="icon-outer">
<div class="icon-circle">
<i class="fa fa-camera-retro logo-icon"></i>
</div>
<h5>Reviews</h5>
<p>If you’re planning to buy a new gadget, check here first. We’ll give you in-depth reviews of the latest devices.</p>
</div>
<div class="icon-outer">
<div class="icon-circle">
<i class="fa fa-dollar logo-icon"></i>
</div>
<h5>Buying Guides</h5>
<p>At Buying Guides we strive to provide readers with the tools to get the best stuff for the lowest amount of money.</p>
</div>
</div></code></pre></div><p class="">CSS:</p><div class="code-ui group"><pre class=""><code class="css" class="">.icon-outer {
box-sizing: border-box;
float: left;
width: 33.33%;
padding: 25px;
margin: 0;
text-align: center;
}
.icon-circle {
background: #EEEEEE;
color: #B4B4B4;
width: 200px;
height: 200px;
border-radius: 200px;
margin: 0 auto;
border: 2px solid #D6D6D6;
box-sizing: border-box;
font-size: 75pt;
padding: 30px 0 0 0;
cursor: pointer;
}
.icon-circle:hover {
color: #FFFFFF;
background: #EB6361;
}
h5 {
margin: 15px 0 10px 0;
font-size: 20pt;
}</code></pre></div><p class=""><img src="/files/15a71c5c-2278-4fc6-bf7d-bd18292b4e4c.5" alt="Иконки и описание" class="block w-auto max-w-full h-auto mx-auto py-2 rounded-xl "/></p><h2 class="text-2xl font-bold py-2" id="h2-11">Подвал сайта (Footer)</h2><p class="">Простой серый блок внизу страницы:</p><div class="code-ui group"><pre class=""><code class="html" class=""><div id="footer"></div></code></pre></div><div class="code-ui group"><pre class=""><code class="css" class="">#footer {
width: 100%;
background: #F1F1F1;
border-top: 1px solid #D4D4D4;
height: 150px;
}</code></pre></div><p class=""><img src="/files/d8c073dd-763b-42e4-ab4e-510feecdcaaf.5" alt="Общий прогресс и внешний вид сайта" class="block w-auto max-w-full h-auto mx-auto py-2 rounded-xl "/></p><h2 class="text-2xl font-bold py-2" id="h2-12">Подключение веб‑шрифтов</h2><p class="">Myriad Pro — не всегда доступен как веб‑шрифт, поэтому используем Google Fonts: PT Sans для заголовков и PT Serif для основного текста.</p><p class="">Добавьте в CSS:</p><div class="code-ui group"><pre class=""><code class="css" class="">@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css?family=PT+Serif');
h1, h2, h4, h5, h6 {
font-family: 'PT Sans', 'Helvetica', 'Arial';
}
body {
font-family: 'PT Serif', 'Helvetica', 'Arial';
}</code></pre></div><p class="">Примечание: h3 мы оставляем на PT Serif, чтобы цитата выглядела более «книжно».</p><h2 class="text-2xl font-bold py-2" id="h2-13">Простая анимация — прокрутка изображений (грид‑галерея)</h2><p class="">Добавьте ещё две изображения (Image_2.jpg и Image_3.jpg) и используйте JavaScript с jQuery, чтобы периодически менять видимую картинку.</p><p class="">HTML (в блоке .two-third заменяем один img на три):</p><div class="code-ui group"><pre class=""><code class="html" class=""><div class="two-third">
<img id="f-image-1" class="featured-image" src="Image_1.jpg" />
<img id="f-image-2" class="featured-image hidden" src="Image_2.jpg" />
<img id="f-image-3" class="featured-image hidden" src="Image_3.jpg" />
</div></code></pre></div><p class="">CSS для скрытия:</p><div class="code-ui group"><pre class=""><code class="css" class="">.hidden {
display: none;
}</code></pre></div><p class="">JavaScript (вставьте в нижний script):</p><div class="code-ui group"><pre class=""><code class="javascript" class="">$(document).ready(function() {
// выполнится после загрузки DOM
var time = 2500; // интервал в миллисекундах
var $im1 = $('#f-image-1');
var $im2 = $('#f-image-2');
var $im3 = $('#f-image-3');
setInterval(function() {
changeImage();
}, time);
var currentImage = 1;
function changeImage() {
switch (currentImage) {
case 1:
$im1.hide();
$im2.show();
$im3.hide();
currentImage = 2;
break;
case 2:
$im1.hide();
$im2.hide();
$im3.show();
currentImage = 3;
break;
default:
$im1.show();
$im2.hide();
$im3.hide();
currentImage = 1;
}
}
});</code></pre></div><p class="">Вы можете улучшить эффект, применив jQuery.fadeIn() и fadeOut(), чтобы получить плавное затухание.</p><p class=""><img src="/files/8005f224-16e1-4b30-a6f7-ca6a3f52348a.5" alt="Прокрутка изображений: набор из трёх фотографий" class="block w-auto max-w-full h-auto mx-auto py-2 rounded-xl "/></p><h2 class="text-2xl font-bold py-2" id="h2-14">Заключение основной части</h2><p class="">На этом базовая страница готова: структура, стили и небольшой JavaScript‑фрагмент. Дальше можно улучшать типографику, адаптивность и UX.</p><hr class="thin"/><h2 class="text-2xl font-bold py-2" id="h2-15">Дополнительная ценность: практики, чеклисты и методики развития сайта</h2><p class="">Ниже — набор практических материалов, которые помогут вам развивать этот проект дальше. Выберите подходящие разделы в зависимости от ваших целей.</p><h3 class="text-xl font-bold py-2" id="h2-16">Быстрая методология (mini‑methodology)</h3><ol class="my-6 space-y-2 list-decimal pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">Прототип: подготовьте макет/скетч (PSD, Figma или даже бумажный эскиз).</li><li class="">Структура: создайте семантический HTML с правильной иерархией заголовков и разделов.</li><li class="">Стили: опишите базовую сетку и типографику, подключите веб‑шрифты.</li><li class="">Поведение: добавьте JavaScript/анимации только там, где они добавляют пользу.</li><li class="">Тестирование: проверяйте в браузерах, на мобильных устройствах и с выключенным JS.</li><li class="">Оптимизация: минимизация CSS/JS, сжатие изображений, подключение через CDN.</li></ol><h3 class="text-xl font-bold py-2" id="h2-17">Критерии приёмки (что должно работать, чтобы считать задачу выполненной)</h3><ul class="my-6 list-disc space-y-2 pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">Страница открывается без ошибок в актуальных версиях Chrome, Firefox, Edge и Safari.</li><li class="">Структура HTML валидна и читабельна для поисковых роботов.</li><li class="">Навигация отображается и ссылки кликаются.</li><li class="">Слайдер изображений переключается по таймеру (либо по нажатию, если добавлена кнопка).</li><li class="">Шрифты загружаются с Google Fonts, и заголовки/текст выглядят предсказуемо.</li></ul><h3 class="text-xl font-bold py-2" id="h2-18">Роль‑ориентированные чеклисты</h3><ul class="my-6 list-disc space-y-2 pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class=""><p class="">Для разработчика‑верстальщика:</p><ul class="my-6 list-disc space-y-2 pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="task-list-item"><input type="checkbox" class=""/> валидный HTML</li><li class="task-list-item"><input type="checkbox" class=""/> корректная работа float/box-sizing</li><li class="task-list-item"><input type="checkbox" class=""/> адаптивность началана (meta viewport и медиазапросы в будущем)</li></ul></li><li class=""><p class="">Для фронтенд‑разработчика (JS):</p><ul class="my-6 list-disc space-y-2 pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="task-list-item"><input type="checkbox" class=""/> jQuery подключён и доступен</li><li class="task-list-item"><input type="checkbox" class=""/> слайдер работает на setInterval</li><li class="task-list-item"><input type="checkbox" class=""/> нет глобальных конфликтов переменных</li></ul></li><li class=""><p class="">Для дизайнера/контентщика:</p><ul class="my-6 list-disc space-y-2 pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="task-list-item"><input type="checkbox" class=""/> изображения оптимизированы (размеры и формат)</li><li class="task-list-item"><input type="checkbox" class=""/> текстовые блоки вычитаны и локализованы</li></ul></li></ul><h3 class="text-xl font-bold py-2" id="h2-19">Шпаргалка: часто используемые CSS‑свойства (cheat sheet)</h3><ul class="my-6 list-disc space-y-2 pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">box-sizing: border-box — полезно для расчёта ширины блоков;</li><li class="">display: inline/block/inline-block/flex — управление потоком элементов;</li><li class="">float: left/right + clear — старый способ колонок (в проекте используется float);</li><li class="">border-radius — радиус скругления углов;</li><li class="">:hover, :active, :visited — псевдоклассы для ссылок;</li><li class="">@media (min-width / max-width) — медиазапросы для адаптива.</li></ul><h3 class="text-xl font-bold py-2" id="h2-20">Когда этот подход не подходит (контрпримеры)</h3><ul class="my-6 list-disc space-y-2 pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">Если нужен сложный SPA (одностраничное приложение) с маршрутизацией и состоянием — лучше использовать фреймворки (React/Vue/Angular) или статический генератор сайтов.</li><li class="">Если проект должен быть полностью адаптивным под все устройства — текущая фиксированная ширина (900px) не подходит; потребуется мобильная вёрстка и медиазапросы.</li><li class="">Если ожидается высокий трафик и необходимость масштабирования бэкенда — нужно подключать серверную часть и оптимизировать доставку статических ресурсов (CDN, кэш).</li></ul><h3 class="text-xl font-bold py-2" id="h2-21">Альтернативные подходы</h3><ul class="my-6 list-disc space-y-2 pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">Использовать Flexbox или CSS Grid вместо float — упрощает создание адаптивной сетки.</li><li class="">Отказаться от jQuery в пользу чистого (vanilla) JavaScript — современные браузеры поддерживают всё необходимое.</li><li class="">Превратить проект в статический сайт на Jekyll/Gatsby/Hugo для удобной генерации статичных страниц и блога.</li></ul><h3 class="text-xl font-bold py-2" id="h2-22">Критические шаги безопасности и приватности</h3><ul class="my-6 list-disc space-y-2 pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">Храните только необходимые данные на клиенте; не вставляйте чувствительные токены в JS.</li><li class="">Если подключаете сторонние скрипты (CDN), проверяйте доверенность источника.</li></ul><h3 class="text-xl font-bold py-2" id="h2-23">Тесты приёмки и acceptance criteria</h3><ul class="my-6 list-disc space-y-2 pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">Откройте страницу в трёх браузерах и на мобильном: нет развалившейся верстки.</li><li class="">В консоли разработчика нет ошибок JavaScript при загрузке.</li><li class="">Слайды переключаются корректно и без дергания.</li></ul><h3 class="text-xl font-bold py-2" id="h2-24">1‑строчный глоссарий</h3><ul class="my-6 list-disc space-y-2 pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">DOM — объектная модель документа; HTML становится деревом узлов.</li><li class="">CDN — сеть доставки контента; хранит файлы ближе к пользователю.</li><li class="">Webfont — шрифт, загружаемый в браузер с сервера.</li></ul><h3 class="text-xl font-bold py-2" id="h2-25">Советы по отладке</h3><ul class="my-6 list-disc space-y-2 pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">Используйте инструменты разработчика (DevTools) для просмотра DOM, стилей и консоли.</li><li class="">Временный фон (background: red) помогает быстро понять размер блока.</li><li class="">При некорректном позиционировании — проверьте float/clear и box-sizing.</li></ul><h3 class="text-xl font-bold py-2" id="h2-26">Быстрый roadmap для развития проекта (высокоуровневый)</h3><ol class="my-6 space-y-2 list-decimal pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">Сделать адаптивную версию (медиазапросы, мобильная навигация).</li><li class="">Добавить семантические теги (<header>, <nav>, <main>, <footer>).</li><li class="">Подключить систему сборки (Webpack, Parcel) и минификацию.</li><li class="">Подключить CMS или статический генератор для публикации статей.</li><li class="">Настроить CI/CD и деплой на хостинг (Netlify, Vercel, GitHub Pages).</li></ol><h3 class="text-xl font-bold py-2" id="h2-27">Социальный предпросмотр и анонс</h3><p class="">OG title и описание можно использовать так:</p><ul class="my-6 list-disc space-y-2 pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">OG title: Создание сайта с нуля — полное руководство</li><li class="">OG description: Пошаговый туториал: HTML, CSS, JavaScript, jQuery, шаблоны и чеклисты. Создайте рабочий сайт за один проход.</li></ul><p class="">Короткий анонс (100–200 слов):</p><p class="">Создайте свой первый рабочий сайт: следуйте пошаговому руководству, включающему шаблон HTML, CSS‑стили и простой JavaScript‑слайдер. В уроке — готовые блоки (шапка, главный экран, цитата, иконки, подвал), подключение Font Awesome и Google Fonts, а также дополнительные чеклисты и рекомендации по развитию проекта. Подходит для новичков и тех, кто хочет собрать готовую страницу и понять практические шаги разработки.</p><hr class="thin"/><h2 class="text-2xl font-bold py-2" id="h2-28">Куда двигаться дальше</h2><p class="">Предложения для следующего шага:</p><ul class="my-6 list-disc space-y-2 pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">Сделайте адаптивную версию (mobile first) с помощью медиазапросов;</li><li class="">Замените float на Flexbox или Grid для более простой верстки;</li><li class="">Реализуйте прогрессивное улучшение: сайт должен быть функционален без JS;</li><li class="">Попробуйте добавить серверную часть (Node/Python) и отдавать данные через API (JSON).</li></ul><h2 class="text-2xl font-bold py-2" id="h2-29">Ресурсы и полезные ссылки</h2><ul class="my-6 list-disc space-y-2 pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">Google Fonts — подключение веб‑шрифтов;</li><li class="">Font Awesome — библиотека иконок;</li><li class="">Руководства по HTML/CSS/JS для базовых знаний;</li></ul><hr class="thin"/><h2 class="text-2xl font-bold py-2" id="h2-30">Итог</h2><p class="">Вы научились: собрать страницу из нуля, подключить шрифты и иконки, реализовать простой слайдер изображений и создать базовый макет. Далее остаётся только улучшать дизайн, тестировать и адаптировать сайт под реальные устройства.</p><h3 class="text-xl font-bold py-2" id="h2-31">Ключевые выводы</h3><ul class="my-6 list-disc space-y-2 pl-6 md:pl-8 [&_li]:marker:text-slate-400"><li class="">Простая статическая страница — отличный старт для изучения фронтенда.</li><li class="">box-sizing и применение классов/идентификаторов помогают контролировать верстку.</li><li class="">jQuery упрощает демонстрационные анимации, но современные проекты часто обходятся без него.</li></ul><p class="">Спасибо за прохождение руководства — продолжайте экспериментировать и учиться!</p>
</div>
</div>
<div class="mt-8">
<div class="flex flex-wrap items-center gap-2">
<span class="text-sm text-slate-600 dark:text-slate-300">Поделиться:</span>
<a href="https://twitter.com/intent/tweet?url=https://techhaps.com/ru/p/how-to-make-a-website-for-beginners-94134918&text=%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5%20%D1%81%D0%B0%D0%B9%D1%82%D0%B0%20%D1%81%20%D0%BD%D1%83%D0%BB%D1%8F%20%E2%80%94%20%D0%BF%D0%BE%D0%BB%D0%BD%D0%BE%D0%B5%20%D1%80%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%BE" target="_blank" class="rounded-xl border border-slate-300 px-3 py-1.5 text-sm hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-800">
X/Twitter
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https://techhaps.com/ru/p/how-to-make-a-website-for-beginners-94134918" target="_blank" class="rounded-xl border border-slate-300 px-3 py-1.5 text-sm hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-800">
Facebook
</a>
<a href="https://www.linkedin.com/sharing/share-offsite/?url=https://techhaps.com/ru/p/how-to-make-a-website-for-beginners-94134918" target="_blank" class="rounded-xl border border-slate-300 px-3 py-1.5 text-sm hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-800">
LinkedIn
</a>
<a href="https://t.me/share/url?url=https://techhaps.com/ru/p/how-to-make-a-website-for-beginners-94134918&text=%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5%20%D1%81%D0%B0%D0%B9%D1%82%D0%B0%20%D1%81%20%D0%BD%D1%83%D0%BB%D1%8F%20%E2%80%94%20%D0%BF%D0%BE%D0%BB%D0%BD%D0%BE%D0%B5%20%D1%80%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%BE" target="_blank" class="rounded-xl border border-slate-300 px-3 py-1.5 text-sm hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-800">
Telegram
</a>
<button type="button" id="copyLink" data-url="https://techhaps.com/ru/p/how-to-make-a-website-for-beginners-94134918" class="rounded-xl border border-slate-300 px-3 py-1.5 text-sm hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-800 cursor-pointer">
Скопировать ссылку
</button>
</div>
</div>
<div class="mt-10 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 flex items-center gap-4">
<img src="/images/avatar-78998a9e25a46e051fea19306867798d.svg?vsn=d" alt="" class="h-12 w-12 rounded-full ring-1 ring-slate-200 dark:ring-slate-700" loading="lazy">
<div>
<div class="text-sm text-slate-500">Автор</div>
<div class="text-base font-semibold text-slate-900 dark:text-white">
Редакция
</div>
</div>
</div>
<nav class="mt-10 grid gap-4 md:grid-cols-2">
<a href="/ru/p/how-to-enable-or-disable-the-adaptive-brightness-on-steam-deck-659478" class="group rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4 hover:bg-slate-50/70 dark:hover:bg-slate-800/50 transition">
<div class="text-xs text-slate-500">Предыдущая статья</div>
<div class="mt-1 font-semibold text-slate-900 dark:text-white line-clamp-2 group-hover:text-indigo-600">
Адаптивная яркость на Steam Deck — включение и советы
</div>
</a>
<a href="/ru/p/how-to-use-the-xbox-family-settings-app-to-manage-your-childs-gaming-habit-94130935" class="group rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4 hover:bg-slate-50/70 dark:hover:bg-slate-800/50 transition">
<div class="text-xs text-slate-500">Следующая статья</div>
<div class="mt-1 font-semibold text-slate-900 dark:text-white line-clamp-2 group-hover:text-indigo-600">
Родительский контроль на Xbox через Family Settings
</div>
</a>
</nav>
<div class="mt-12">
<h2 class="text-xl md:text-2xl font-bold tracking-tight text-slate-900 dark:text-white">
Похожие материалы
</h2>
<div class="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-4">
<article class="group relative grid grid-cols-[96px_1fr] gap-4 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-3 hover:bg-slate-50/70 dark:hover:bg-slate-800/50 transition">
<a href="/ru/p/just-got-a-new-iphone-heres-how-to-set-it-up-93871877" class="absolute inset-0 z-10" aria-label="Как настроить новый iPhone — быстро">
</a>
<div class="overflow-hidden rounded-xl">
<img src="/files/92d05dbe-4237-47c3-841e-894b12618eb3.jpg" alt="Как настроить новый iPhone — быстро" class="h-24 w-full object-cover" loading="lazy">
</div>
<div class="min-w-0">
<div class="mb-1 flex items-center gap-2">
<span class="inline-flex items-center rounded-full bg-slate-100 dark:bg-slate-800 px-2.5 py-1 text-xs font-medium text-slate-700 dark:text-slate-200 ring-1 ring-inset ring-slate-200/60 dark:ring-slate-700/60">
Гайды
</span>
<time class="text-xs text-slate-500">02 Jan 2026</time>
</div>
<h3 class="text-sm font-semibold text-slate-900 dark:text-white line-clamp-2">
Как настроить новый iPhone — быстро
</h3>
</div>
</article>
<article class="group relative grid grid-cols-[96px_1fr] gap-4 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-3 hover:bg-slate-50/70 dark:hover:bg-slate-800/50 transition">
<a href="/ru/p/how-to-put-parental-controls-on-an-iphone-or-ipad-93872094" class="absolute inset-0 z-10" aria-label="Как настроить родительский контроль на iPhone и iPad">
</a>
<div class="overflow-hidden rounded-xl">
<img src="/files/88c0f0d9-ea63-4234-8bab-880962f567a2.jpg" alt="Как настроить родительский контроль на iPhone и iPad" class="h-24 w-full object-cover" loading="lazy">
</div>
<div class="min-w-0">
<div class="mb-1 flex items-center gap-2">
<span class="inline-flex items-center rounded-full bg-slate-100 dark:bg-slate-800 px-2.5 py-1 text-xs font-medium text-slate-700 dark:text-slate-200 ring-1 ring-inset ring-slate-200/60 dark:ring-slate-700/60">
Родительский контроль
</span>
<time class="text-xs text-slate-500">02 Jan 2026</time>
</div>
<h3 class="text-sm font-semibold text-slate-900 dark:text-white line-clamp-2">
Как настроить родительский контроль на iPhone и iPad
</h3>
</div>
</article>
<article class="group relative grid grid-cols-[96px_1fr] gap-4 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-3 hover:bg-slate-50/70 dark:hover:bg-slate-800/50 transition">
<a href="/ru/p/how-to-see-wi-fi-passwords-on-a-mac-93872543" class="absolute inset-0 z-10" aria-label="Как увидеть пароль Wi‑Fi на Mac">
</a>
<div class="overflow-hidden rounded-xl">
<img src="/files/a8dce9b5-9ce3-4a91-9472-61c445033b1a.jpg" alt="Как увидеть пароль Wi‑Fi на Mac" class="h-24 w-full object-cover" loading="lazy">
</div>
<div class="min-w-0">
<div class="mb-1 flex items-center gap-2">
<span class="inline-flex items-center rounded-full bg-slate-100 dark:bg-slate-800 px-2.5 py-1 text-xs font-medium text-slate-700 dark:text-slate-200 ring-1 ring-inset ring-slate-200/60 dark:ring-slate-700/60">
macOS
</span>
<time class="text-xs text-slate-500">02 Jan 2026</time>
</div>
<h3 class="text-sm font-semibold text-slate-900 dark:text-white line-clamp-2">
Как увидеть пароль Wi‑Fi на Mac
</h3>
</div>
</article>
<article class="group relative grid grid-cols-[96px_1fr] gap-4 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-3 hover:bg-slate-50/70 dark:hover:bg-slate-800/50 transition">
<a href="/ru/p/how-to-use-screen-time-to-cut-down-your-iphone-usage-93872099" class="absolute inset-0 z-10" aria-label="Как пользоваться Screen Time на iPhone">
</a>
<div class="overflow-hidden rounded-xl">
<img src="/files/8a0bf610-70d1-443e-9904-fba61c653142.jpg" alt="Как пользоваться Screen Time на iPhone" class="h-24 w-full object-cover" loading="lazy">
</div>
<div class="min-w-0">
<div class="mb-1 flex items-center gap-2">
<span class="inline-flex items-center rounded-full bg-slate-100 dark:bg-slate-800 px-2.5 py-1 text-xs font-medium text-slate-700 dark:text-slate-200 ring-1 ring-inset ring-slate-200/60 dark:ring-slate-700/60">
Инструкции
</span>
<time class="text-xs text-slate-500">02 Jan 2026</time>
</div>
<h3 class="text-sm font-semibold text-slate-900 dark:text-white line-clamp-2">
Как пользоваться Screen Time на iPhone
</h3>
</div>
</article>
<article class="group relative grid grid-cols-[96px_1fr] gap-4 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-3 hover:bg-slate-50/70 dark:hover:bg-slate-800/50 transition">
<a href="/ru/p/how-to-lock-apps-on-your-iphone-with-a-password-face-id-and-more-93872318" class="absolute inset-0 z-10" aria-label="Как заблокировать приложения на iPhone">
</a>
<div class="overflow-hidden rounded-xl">
<img src="/files/6635433f-432d-49bb-a3bc-604fc0da379f" alt="Как заблокировать приложения на iPhone" class="h-24 w-full object-cover" loading="lazy">
</div>
<div class="min-w-0">
<div class="mb-1 flex items-center gap-2">
<span class="inline-flex items-center rounded-full bg-slate-100 dark:bg-slate-800 px-2.5 py-1 text-xs font-medium text-slate-700 dark:text-slate-200 ring-1 ring-inset ring-slate-200/60 dark:ring-slate-700/60">
Приватность
</span>
<time class="text-xs text-slate-500">02 Jan 2026</time>
</div>
<h3 class="text-sm font-semibold text-slate-900 dark:text-white line-clamp-2">
Как заблокировать приложения на iPhone
</h3>
</div>
</article>
<article class="group relative grid grid-cols-[96px_1fr] gap-4 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-3 hover:bg-slate-50/70 dark:hover:bg-slate-800/50 transition">
<a href="/ru/p/how-to-scan-a-qr-code-on-android-and-iphone-93872539" class="absolute inset-0 z-10" aria-label="Как сканировать QR‑код на Android и iPhone">
</a>
<div class="overflow-hidden rounded-xl">
<img src="/files/6c29a4e9-81bf-42b8-84c0-64b443539161.jpg" alt="Как сканировать QR‑код на Android и iPhone" class="h-24 w-full object-cover" loading="lazy">
</div>
<div class="min-w-0">
<div class="mb-1 flex items-center gap-2">
<span class="inline-flex items-center rounded-full bg-slate-100 dark:bg-slate-800 px-2.5 py-1 text-xs font-medium text-slate-700 dark:text-slate-200 ring-1 ring-inset ring-slate-200/60 dark:ring-slate-700/60">
Руководство
</span>
<time class="text-xs text-slate-500">02 Jan 2026</time>
</div>
<h3 class="text-sm font-semibold text-slate-900 dark:text-white line-clamp-2">
Как сканировать QR‑код на Android и iPhone
</h3>
</div>
</article>
</div>
</div>
</div>
<div class="hidden lg:block">
<aside class="lg:sticky lg:top-24">
<div class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4">
<h2 class="text-sm font-semibold text-slate-900 dark:text-white">
Содержание
</h2>
<ul class="mt-3 space-y-1 text-sm">
<li class="leading-5 ml-0">
<a href="#h2-0" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
О чём это руководство
</a>
</li>
<li class="leading-5 ml-0">
<a href="#h2-1" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
Дизайн и ресурсы
</a>
</li>
<li class="leading-5 ml-0">
<a href="#h2-2" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
Начальный файл и базовая структура
</a>
</li>
<li class="leading-5 ml-3">
<a href="#h2-3" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
Примечание о title
</a>
</li>
<li class="leading-5 ml-0">
<a href="#h2-4" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
Шапка сайта (Header)
</a>
</li>
<li class="leading-5 ml-3">
<a href="#h2-5" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
Контейнер фиксированной ширины
</a>
</li>
<li class="leading-5 ml-3">
<a href="#h2-6" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
Логотип
</a>
</li>
<li class="leading-5 ml-3">
<a href="#h2-7" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
Навигация
</a>
</li>
<li class="leading-5 ml-0">
<a href="#h2-8" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
Главная область (Above the fold)
</a>
</li>
<li class="leading-5 ml-0">
<a href="#h2-9" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
Блок с цитатой
</a>
</li>
<li class="leading-5 ml-0">
<a href="#h2-10" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
Блок иконок
</a>
</li>
<li class="leading-5 ml-0">
<a href="#h2-11" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
Подвал сайта (Footer)
</a>
</li>
<li class="leading-5 ml-0">
<a href="#h2-12" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
Подключение веб‑шрифтов
</a>
</li>
<li class="leading-5 ml-0">
<a href="#h2-13" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
Простая анимация — прокрутка изображений (грид‑галерея)
</a>
</li>
<li class="leading-5 ml-0">
<a href="#h2-14" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
Заключение основной части
</a>
</li>
<li class="leading-5 ml-0">
<a href="#h2-15" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
Дополнительная ценность: практики, чеклисты и методики развития сайта
</a>
</li>
<li class="leading-5 ml-3">
<a href="#h2-16" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
Быстрая методология (mini‑methodology)
</a>
</li>
<li class="leading-5 ml-3">
<a href="#h2-17" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
Критерии приёмки (что должно работать, чтобы считать задачу выполненной)
</a>
</li>
<li class="leading-5 ml-3">
<a href="#h2-18" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
Роль‑ориентированные чеклисты
</a>
</li>
<li class="leading-5 ml-3">
<a href="#h2-19" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
Шпаргалка: часто используемые CSS‑свойства (cheat sheet)
</a>
</li>
<li class="leading-5 ml-3">
<a href="#h2-20" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
Когда этот подход не подходит (контрпримеры)
</a>
</li>
<li class="leading-5 ml-3">
<a href="#h2-21" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
Альтернативные подходы
</a>
</li>
<li class="leading-5 ml-3">
<a href="#h2-22" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
Критические шаги безопасности и приватности
</a>
</li>
<li class="leading-5 ml-3">
<a href="#h2-23" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
Тесты приёмки и acceptance criteria
</a>
</li>
<li class="leading-5 ml-3">
<a href="#h2-24" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
1‑строчный глоссарий
</a>
</li>
<li class="leading-5 ml-3">
<a href="#h2-25" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
Советы по отладке
</a>
</li>
<li class="leading-5 ml-3">
<a href="#h2-26" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
Быстрый roadmap для развития проекта (высокоуровневый)
</a>
</li>
<li class="leading-5 ml-3">
<a href="#h2-27" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
Социальный предпросмотр и анонс
</a>
</li>
<li class="leading-5 ml-0">
<a href="#h2-28" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
Куда двигаться дальше
</a>
</li>
<li class="leading-5 ml-0">
<a href="#h2-29" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
Ресурсы и полезные ссылки
</a>
</li>
<li class="leading-5 ml-0">
<a href="#h2-30" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
Итог
</a>
</li>
<li class="leading-5 ml-3">
<a href="#h2-31" class="block rounded px-2 py-1 text-slate-600 hover:text-indigo-600 dark:text-slate-300">
Ключевые выводы
</a>
</li>
</ul>
</div>
</aside>
</div>
</div>
</article>
</main>
<footer class="mt-10 border-t border-zinc-200 dark:border-zinc-800">
<div class="mx-auto max-w-7xl px-4 py-10 text-sm text-zinc-500 grid md:grid-cols-2 align-middle">
<div>
<img src="/logo.svg" alt="Гид по технологиям" width="280" height="40" class="w-full md:w-[280px]">
</div>
<div class="mt-4 md:mt-0">
<ul>
<li class="mt-1">
<a href="/about" class="hover:underline">О нас</a>
</li>
<li class="mt-1">
<a href="/privacy" class="hover:underline">
Политика конфиденциальности
</a>
</li>
<li class="mt-1">
<a href="/ru/feed" class="hover:underline">
Лента статей
</a>
</li>
</ul>
<div class="mt-1">
© 2026 Создание сайта с нуля — полное руководство
</div>
</div>
</div>
</footer>
</body>
</html> 
