Как создать портфолио-разработчика на HTML и CSS
Есть много деталей, которые нужно учитывать при создании сайта-портфолио. Если вы разработчик программного обеспечения, сайт должен показывать ваши лучшие проекты. Но есть и ряд других мелких деталей, которые влияют на полноту и профессионализм портфолио.
Первое, что нужно понять: всем разработчикам полезно иметь собственное портфолио. В этой пошаговой статье вы узнаете, как создать привлекательный сайт-портфолио на HTML и CSS и что важно учесть на каждом этапе.
Зачем важно иметь сайт-портфолио
Ваш сайт-портфолио должен решать две задачи: демонстрировать навыки и показывать их в действии. Навыки демонстрируются через проекты, а умение работать с фронтендом — через дизайн, интерфейс и поведение самого сайта.
Некоторые разработчики ошибочно используют визуальные конструкторы (например, Wix) для создания портфолио. Это может сработать для бэкендера, но если вы — фронтенд- или full-stack-разработчик, работодатели и рекрутеры ожидают увидеть пример вашего кода и дизайна. Первое впечатление — сам сайт: его чистота, производительность и доступность.
Важно: целевая аудитория портфолио — рекрутеры, тимлиды и инженер-менеджеры. Делайте интерфейс понятным, самопрезентацию — ёмкой, а проекты — релевантными вакансии, на которую вы претендуете.
Подготовка и структура сайта
Перед началом разработки определите:
- Цветовую палитру и типографику.
- Набор разделов: Home, Portfolio/Projects, About, Contact, Footer.
- Порядок показа проектов: от наиболее значимых к менее значимым.
Далее создайте базовые файлы HTML и CSS. Соблюдение принципа «separation of concerns» (разделение ответственности) поможет содержать код чистым и сопровождаемым.
Файл index.html
Ниже — стартовый шаблон HTML-файла, который подключает внешний CSS. (Содержимое блока кода сохранено без изменений.)
Portfolio Website | Jane Doe
Следуя принципу разделения ответственности, HTML-файл выше подключает внешний CSS-файл.
Файл style.css
Ниже — пример базового CSS-файла с утилитными классами и подключением веб-шрифта. (Содержимое блока кода сохранено без изменений.)
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
body{
font-family: 'Roboto', sans-serif;
line-height: 1.5rem;
}
/* utility Classes */
.container{
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
h1{
font-size: 35px;
font-weight: 500;
}
h2{
text-align: center;
padding: 1rem;
}
h3{
padding: 1rem;
}
.primary-color{
color: #0000ff;
}
.secondary-color{
color: #fff ;
}
.primary-text{
color: #000;
}
.margin{
margin-left: 3.5rem;
}
.btn{
font-size: 18px;
display: inline-block;
padding: 0.5rem;
margin: 0.5 0rem;
background: blue;
color: #fff;
border-radius: 5px;
border: none;
}
.btn-2{
font-size: 18px;
display: inline-block;
padding: 0.3rem 0.5rem;
margin: 0.5rem;
border: blue solid;
color: blue;
border-radius: 5px;
}
Сброс значений через * даёт контроль над стилями всех элементов. В body задайте шрифт на весь сайт. В CSS-файле также присутствуют утилитные классы, которые удобно переиспользовать.
Навигация (Navbar)
Навбар — это меню, с помощью которого пользователи переходят между разделами сайта. Для портфолио обычно достаточно: Home, Portfolio (Projects), About, Contact.
HTML навбара
(HTML-блок оставлен без изменений.)
Portfolio
CSS навбара
(Содержимое CSS-блока сохранено без изменений.)
#navbar{
position: fixed;
width: 100%;
padding: 1rem;
background: #0000ff;
}
#navbar .container{
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1;
}
#navbar .container .logo a{
color:#fff;
}
#navbar .menu li{
list-style: none;
display: inline-block;
}
#navbar .menu li a{
font-size: 18px;
font-weight: 600;
padding: 0.45rem;
margin: 0 0.25rem;
color: #c0c0c0;
}
#navbar .menu li a:hover{
color: #fff;
}
Важно: подключите Font Awesome (или другую библиотеку иконок), если хотите отображать иконки в навбаре.
Главная секция (Home)
Главная страница — первое, что увидит посетитель. Используйте её для краткого представления: кто вы и чем занимаетесь.
Home HTML
(HTML-блок сохранён без изменений.)
Hello, my name is
Jane Doe
And I'm a Software Developer
Learn More
Home CSS
(Содержимое CSS-блока сохранено без изменений.)
#home{
display: flex;
background: url("/images/showcase.jpg") no-repeat center;
height: 100vh;
min-height: 500px;
}
#home .container{
margin: auto 0px auto 2rem;
}
#home .home-content .text-1{
font-size: 29px;
margin: 1.2rem;
}
#home .home-content .text-2{
font-size: 65px;
font-weight: 500;
margin: 1rem;
}
#home .home-content .text-3{
font-size: 32px;
margin: 1.2rem;
}
#home .home-content .text-3 span{
color: #0000ff;
font-weight: 600;
}
#home .btn{
margin-left: 1rem;
font-size: 1.5rem;
}
Подставьте собственную картинку для background вместо указанного URL.
Раздел «Портфолио» (Projects)
Лучшая практика — показывать проекты сразу после Home. Пользователь пришёл на сайт, чтобы увидеть ваши работы: сначала проекты, затем информация о вас и контактные данные.
Projects HTML
(HTML-блок сохранён без изменений.)
My Portfolio
Project Name
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Impedit blanditiis illum nihil esse vitae repellendus, ex
harum doloremque saepe expedita corporis nisi ea maxime.
Eveniet adipisci ab inventore atque quos!
Stack
HTML CSS JavaScript
Project Name
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Impedit blanditiis illum nihil esse vitae repellendus, ex
harum doloremque saepe expedita corporis nisi ea maxime.
Eveniet adipisci ab inventore atque quos!
Stack
MongoDB Express Angular Node
Project Name
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Impedit blanditiis illum nihil esse vitae repellendus, ex
harум doloremque saepe expedita corporis nisi ea maxime.
Eveniet adipisci ab inventore atque quos!
Stack
SQLite React Django
Project Name
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Impedit blanditiis illum nihil esse vitae repellendus, ex
harum doloremque saepe expedita corporis nisi ea maxime.
Eveniet adipisci ab inventore atque quos!
Stack
MongoDB Express React Node
Projects CSS
(Содержимое CSS-блока сохранено без изменений.)
/* Portfolio */
.portfolio .container h2{
margin-top: .5rem;
}
.projects{
display: flex;
flex-wrap: wrap;
padding: .5rem;
}
.project{
flex: 1;
padding: 1.5rem;
}
.img-container img{
max-width: 450px;
}
.project-content{
max-width: 450px;
}
.stack-container{
display: flex;
align-items: center;
justify-content: space-between;
padding: .2rem;
margin-right: 1rem;
}
.stack-container li {
list-style: none;
}
.stack-container li a {
color: #000;
font-weight: 600;
}
.btn-container{
display: flex;
align-items: center;
justify-content: space-between;
}
Совет по содержанию: публикуйте только лучшие проекты. Лучше 4–6 сложных и законченных работ, чем дюжина простых демо.
Раздел «Обо мне» (About)
Кратко опишите достижения и области компетенции. Дайте ссылку на резюме для тех, кто хочет подробностей.
About HTML
(HTML-блок сохранён без изменений.)
About Me
My Achievements
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae nostrum, rem facere quo totam distinctio labore.
Illum velit ipsa perspiciatis laudantium autem eveniet fuga, consequatur eum deleniti doloremque aspernatur ratione!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae nostrum, rem facere quo totam distinctio labore.
Illum velit ipsa perspiciatis laudantium autem eveniet fuga, consequatur eum deleniti doloremque aspernatur ratione!
View CV
Languages I Know
CSS
HTML
JavaScript
Python
Java
About CSS
(Содержимое CSS-блока сохранено без изменений.)
/* About */
#about p{
padding: .5rem;
margin-bottom: 0.5rem;
}
#about .btn{
margin-left: .5rem;
}
.about-content {
display: flex;
padding: 1rem;
}
.about-content .column {
flex: 1;
padding: 1rem;
}
.pro-languages{
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
}
.pro-languages .language {
flex: 1;
text-align: center;
padding: 1rem ;
margin: 1.32rem;
}
.pro-languages .language i {
background: blue;
border-radius: 50%;
margin-bottom: .5rem;
margin-top: -1rem;
}
.pro-languages .language h3 {
margin-bottom: 2rem;
}
Контактная секция
Сделайте контакт максимально простым: видимая контактная информация и форма отправки сообщений.
Contact HTML
(HTML-блок сохранён без изменений.)
Contact Me
Get in Touch
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos harum corporis fuga corrupti. Doloribus quis soluta nesciunt veritatis vitae nobis?
Name
Jane Doe
Address
New York, USA
Email
jane@email.com
Message Me
Contact CSS
(Содержимое CSS-блока сохранено без изменений.)
/* Contact */
.contact-content {
display: flex;
padding: 1rem;
}
.contact-content .column {
flex: 1;
padding: 1rem;
}
.contact-text{
margin-top: 1rem;
}
.row{
display: flex;
padding: .5rem;
}
.row i{
padding: 1rem;
color: #0000ff;
}
.row .info {
margin-top: .8rem;
}
.contact-form .form-group {
margin: 0.75rem;
}
.contact-form label {
display: block;
}
.contact-form .field,
.contact-form textarea {
width: 100%;
padding: 0.5rem;
border-radius: .2rem;
}
.contact-form textarea{
height: 8rem;
}
.contact-content .column .contact-form .btn{
margin-left: .8rem;
}
Футер
Футер завершает сайт и показывает авторство и права.
Footer CSS
(Содержимое CSS-блока сохранено без изменений.)
/* footer */
footer{
background: blue;
padding: 15px 23px;
color: #fff;
text-align: center;
}
Хостинг и домен
Для портфолио часто достаточно бесплатного хостинга (GitHub Pages, Netlify, Vercel). Однако профессиональное впечатление создаёт собственный домен — рекомендуем зарегистрировать персональный домен и серверную почту (например, hello@вашеимя.ru).
Важно: используйте HTTPS и оптимизированные изображения, чтобы сайт загружался быстро.
Вспомогательные рекомендации и лучшие практики
Критерии приёмки
- На сайте отображаются 4–6 полных проектов с описанием и ссылками на исходники/демо.
- Навигация работает и корректно прокручивает по якорям.
- Форма контакта отправляет данные (или содержит почту/телефон).
- Сайт адаптивен и корректно отображается на мобильных.
- Есть мета-теги (title, description), Open Graph и favicon.
Мини-методология разработки (быстро)
- Прототип в фигме/бумаге: структура страниц и приоритеты.
- Верстка мобильного first + адаптивные точки.
- Доступность: семантические теги и alt у картинок.
- Оптимизация: минификация CSS, сжатие изображений.
- Деплой и проверка метрик (Lighthouse).
Чек-лист по ролям
- Front-end:
- Семантическая разметка (header, main, nav, footer).
- Адаптивность и кроссбраузерность.
- Примеры кода и интерактивность в проектах.
- Back-end / Full-stack:
- Демонстрация архитектуры проекта (скриншоты/диаграммы).
- Ссылки на репозиторий и README с инструкцией запуска.
- Дизайнер / UI:
- Показать макеты, доступные цветовые схемы и решения по UX.
Когда этот подход не подходит (контрпримеры)
- Нужно много интерактивных демо или сложная серверная логика — лучше использовать отдельный хостинг/серверные окружения.
- Если цель — маркетинговая посадочная страница с аналитикой и A/B тестами, простой статический сайт может быть ограничен.
Альтернативные подходы
- Статические генераторы: Gatsby, Next.js (статический режим), Hugo — для быстрых и расширяемых сайтов.
- CMS/No-code: Webflow или Wix — если важна скорость запуска и визуальная настройка, но при этом вы теряете контроль над кодом.
- SPA-фреймворки (React/Vue): если планируете сложные интерактивные демонстрации.
Mental model — как думать о структуре
Думайте о сайте как о резюме + витрине:
- Резюме = About + CV.
- Витрина = Projects (каждый проект — карточка с проблемой, решением и результатом).
- Контакт = мост к следующему шагу (интервью / тестовое задание).
Шаблон мета-тегов (SEO-сниппет)
(Адаптируйте содержимое тегов под себя.)
Короткая справка по приоритетам (факты)
- Покажите 4–6 законченных проектов.
- Загрузка страницы < 3 секунд для хорошего UX.
- Минимум 1 способ контакта (email или форма).
Советы по безопасности и приватности
- Не публикуйте в открытом доступе секретные ключи и конфигурации.
- Если собираете данные через форму — укажите, куда они отправляются, и настройте защиту от спама (reCAPTCHA) и HTTPS.
Заключение
Создание портфолио — это не только верстка. Это процесс отбора работ, подачи и заботы о пользователе. Фокусируйтесь на качестве проектов, простоте навигации и доступности. Разместите сайт на надёжном хостинге и зарегистрируйте собственный домен — это повышает доверие рекрутеров.
Important: начните с малого — выложите 4 сильных проекта, обновляйте портфолио по мере роста навыков.
Краткое резюме:
- Подготовьте структуру и визуальную идентичность.
- Реализуйте сайт на HTML/CSS, соблюдая семантику и доступность.
- Публикуйте только лучшие проекты, добавьте контакты и домен.
Похожие материалы
Менеджер паролей на Android — настройка и автозаполнение
Телемедицина: как подготовиться и оставаться в безопасности
Научно обоснованные советы по продуктивности
Перенос лицензии Windows 10 на новый ПК
NFT как аватар в Twitter — как настроить
