Финал: собираем портфолио и идём работать

Самая частая ошибка: страница со скриншотами и подписями «лендинг», «магазин». Такое портфолио ничего не сообщает — красивую картинку мог сделать кто угодно.

Работодателя интересует не результат, а как ты думаешь. Три проекта с разбором решений весят больше, чем десять скриншотов.

По каждой работе полезно ответить на четыре вопроса: что было задачей, какие решения принял и почему, с чем столкнулся, что сделал бы иначе.

<article class="work">
  <img src="shot.jpg" alt="Лендинг">
  <h3>Лендинг кофейни</h3>
  <p>Адаптивная вёрстка, HTML, CSS</p>
</article>

<article class="work">
  <h3>Лендинг кофейни</h3>
  <p class="work__task">Задача: страница записи на дегустацию,
    срок — неделя.</p>
  <p class="work__solve">Сложность была в карточках тарифов:
    названия разной длины ломали ряд. Решил через subgrid
    с запасным вариантом на флексах.</p>
  <a href="…">Живая версия</a>
  <a href="…">Код на GitHub</a>
</article>

Портфолио — это многостраничный сайт, а не одна длинная страница. Отдельная страница под каждый проект даёт две вещи: место для подробного разбора и ссылку, которую можно отправить точечно.

1portfolio/2  index.html            обо мне + три работы карточками3  works/4    landing.html        разбор первого проекта5    dashboard.html6    shop.html7  about.html            подробнее о себе и контакты8  styles/9    main.css10    base/  layout/  components/11  assets/12    fonts/  img/

Сайт из статических файлов выкладывается бесплатно и без сервера. Два самых простых способа.

Ссылку на репозиторий откроют. Что там увидят — часть впечатления.

• Файл README. Что за проект, скриншот, ссылка на живую версию, как запустить. Пять строк лучше, чем ничего.
• Осмысленные коммиты. «Добавил карточки тарифов» вместо «фикс», «правки», «ещё раз».
• Никакого мусора. Папки редактора, системные файлы и черновики — в .gitignore.
• Понятная структура. Та самая, из сорокового урока.

1# Лендинг кофейни «Полка»23Страница записи на дегустацию. Чистые HTML и CSS, без библиотек.45**Живая версия:** https://имя.github.io/coffee-landing67## Что интересного8- Карточки тарифов выровнены через subgrid,9  запасной вариант на флексах через @supports10- Аккордеон вопросов на <details name> — без JavaScript11- Тёмная тема на семантических токенах1213## Запуск14Открыть index.html в браузере. Сборка не нужна.

Резюме читают меньше минуты. Работает конкретика, не прилагательные.

• Перевёрстывай существующие сайты. Возьми страницу, которая нравится, и собери сама. Сравнение с оригиналом покажет, где ты пошёл длинным путём.
• Бесплатные макеты. Дизайнеры выкладывают работы в общий доступ — там есть и мобильные версии, и состояния.
• Мелкие заказы у знакомых. Сайт для парикмахерской или частного мастера. Настоящее ограничение по срокам и живые правки — то, чего не даст учебный проект.
• Открытый код. Исправить опечатку в документации или починить контраст в чужом проекте — нормальный первый вклад.
• Собственные инструменты. Считалка, список дел, страница с рецептами. Такие проекты доводят до конца охотнее.

Вёрстка — законченная профессия, но одна она ограничивает круг задач. Порядок, в котором обычно двигаются дальше.

Пятьдесят уроков позади. Стоит перечислить вслух, потому что через месяц это будет казаться самоочевидным.

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

Знаешь, почему сайт тормозит и как это измерить. Понимаешь доступность не как список требований, а как работу с фокусом, ролями и объявлениями. Умеешь оценить цену техники: поддержку браузерами, производительность, сложность поддержки.

И главное — можешь объяснить любое своё решение. Это отличает верстальщика от человека, который копирует код с форумов.

Он появится здесь же, отдельным разделом. Движок сайта с самого начала рассчитан на несколько курсов: прогресс будет считаться так же, уроки будут той же структуры, а начатое здесь не потеряется.

Пока его нет — лучшее, что можно сделать, это довести портфолио до состояния, за которое не стыдно, и выложить его в интернет. Ссылка работает лучше любого сертификата.

<article class="work">  <h3 class="work__title">Лендинг кофейни</h3>  <!-- Добавь описание задачи, разбор и две ссылки --></article>

.work {  display: grid;  gap: 10px;  max-width: 420px;  padding: 18px;  background: #f5f5fa;  border-radius: 14px;}​.work__title { margin: 0; font-size: 18px; }.work p { margin: 0; font-size: 14px; color: #5b6070; }​.work__links { display: flex; gap: 12px; }.work__links a { color: #6544e0; font-weight: 600; font-size: 14px; }​/* Добавь видимый фокус */​

1<article class="work">2  <h3 class="work__title">Лендинг кофейни</h3>34  <p class="work__task">Задача: страница записи на дегустацию, срок неделя, вся вёрстка без библиотек.</p>56  <p class="work__solve">Сложность была в карточках тарифов: названия разной длины ломали ряд кнопок. Сделал через subgrid с запасным вариантом на флексах — на старых браузерах кнопки просто прижаты вниз.</p>78  <p class="work__links">9    <a href="https://example.com/coffee" target="_blank" rel="noopener">Живая версия</a>10    <a href="https://github.com/user/coffee" target="_blank" rel="noopener">Код на GitHub</a>11  </p>12</article>

1.work {2  display: grid;3  gap: 10px;4  max-width: 420px;5  padding: 18px;6  background: #f5f5fa;7  border-radius: 14px;8}910.work__title { margin: 0; font-size: 18px; }11.work p { margin: 0; font-size: 14px; color: #5b6070; }1213.work__links { display: flex; gap: 12px; }14.work__links a { color: #6544e0; font-weight: 600; font-size: 14px; }1516.work a:focus-visible {17  outline: 3px solid #6544e0;18  outline-offset: 2px;19  border-radius: 4px;20}