HW1 by matiko-ma · Pull Request #1 · matiko-ma/cv_builder

matiko-ma · 2025-10-06T01:31:00Z

В качестве своего проекта я решила сделать конструктор резюме. Это довольно straightforward сервис: человек заполняет информацию о себе и на выходе получает красиво сверстанное резюме в PDF формате.

Макеты сделаны мной исходя из конкурентов, брендбука Вышки и моей фантазии. Ссылка на Figma.
Брендбук влияет, так как основная ЦА данного сервиса - это студенты Вышки.

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

пока что нет адаптации под другие девайсы, так как мне просто не хватило времени.
я так и не разобралась, как стилизовать drop-down list. Это грустно.

emworks · 2025-11-01T19:46:09Z

+            </div>
+        </div>
+        <div class="ltl_block">
+            <form class="center" action="cv_2.html">


Семантически верно будет обернуть тегом <form> не только кнопку сабмита, но и все остальные поля этой формы. Более того, от этого напрямую зависит работа нативной html-формы.

Сейчас получается так, что форма и её поля существуют отдельно друг от друга, и при отправке форма как будто бы пустая:

А вот так выглядит набор полей формы, если они находятся внутри тега <form>:

Конечно, можно и вручную собрать значения всех полей и отправить их запросом на сервер. Но если хочется использовать именно нативную html-форму, то нужно поддерживать семантику.

Вот здесь подробнее о FormData: https://learn.javascript.ru/formdata.

Во второй домашке я и правда собрала все поля вручную. Что будет лучше с семантической стороны: исправить кнопку на просто или все же сделать все формой?

С семантической стороны правильно будет сделать просто кнопку без формы, тем более, что функционал формы по сути не используется. Не использовать form для формы не будет ошибкой, в современных фреймворках часто так делается.

С практической (и с учебной, как мне кажется) стороны – лучше постараться максимально обойтись нативными средствами html и минимально использовать js. Поэтому я бы сразу обернул всё в форму. Тем более, при редактировании полей у формы тоже сработает событие change, через которое можно централизованно отслеживать изменения:

2025-11-02.20.07.59.mov

При этом, js кода потребуется меньше (не придётся вешать обработчик change на каждое поле), и читаться он будет проще.

Спасибо, учту!

emworks · 2025-11-01T19:51:08Z

+    <section class="blocking main">
+        <div class="input_line">
+            <h2 class="h2">Желаемая должность:</h2>
+            <input class="input" placeholder="PR-менеджер">


У полей формы должен быть атрибут "name", чтобы при отправке они попали в FormData:

Suggested change

<input class="input" placeholder="PR-менеджер">

<input class="input" name="job_title" placeholder="PR-менеджер">

emworks · 2025-11-01T19:58:34Z

+    margin-bottom: 15px;
+}
+
+.center{


Это по сути утилитные классы. Если хочется привести названия в порядок, можно взять пример наименования из какой-нибудь либы вроде https://tailwindcss.com/.

Например, класс с text-align: center обычно называется .text-center, для цвета часто используют что-то вроде .color-main, для фона – .bg-color-secondary и т.д.

emworks · 2025-11-01T20:02:46Z

+    </section>
+    <section class="blocking main">
+        <div class="input_line">
+            <h2 class="h2">Желаемая должность:</h2>


Семантически это <label>, но скринридер этого не поймёт. Если хочется поддержать доступность, но не хочется использовать <label>, то можно добавить инпуту атрибут aria-label.

emworks · 2025-11-01T20:06:47Z

+    </section>
+    <section class="blocking pics">
+        <div class="pics_1">
+            <img class="imgS" src="./img/img1.jpg" alt="Картинка 1">


Для скринридера важно корректное содержимое alt. Можно оставить alt пустым в некоторых случаях.

Suggested change

<img class="imgS" src="./img/img1.jpg" alt="Картинка 1">

<img class="imgS" src="./img/img1.jpg" alt="Подробное описание картинки 1">

См. подробнее https://doka.guide/html/alt/

emworks · 2025-11-01T20:10:07Z

+                    <input class="input" id="name" placeholder="Константин">
+                </div>
+                <div class="input_block">
+                    <label for="name" class="input_head">Фамилия</label>


Небольшая опечатка, из-за которой при клике на этот label фокус будет выставлен на другое поле – name.

Suggested change

<label for="name" class="input_head">Фамилия</label>

<label for="surname" class="input_head">Фамилия</label>

emworks · 2025-11-01T20:33:48Z

+            <div class="input_line">
+                <div class="input_block">
+                    <label for="exp_start" class="input_head">Начало работы</label>
+                    <input type="month" class="input" id="exp_start" placeholder="мм.гггг">


Для вёрстки использовать input[type=month] можно, но в дальнейшем при реализации функциональности нужно помнить о его поддержке в разных браузерах.

Например, в Firefox и Safari отобразится обычный текстовый инпут. Нюанс в том, что значение даты в таких инпутах будет храниться по-разному: input[type=month] всегда будет хранить дату в формате YYYY-MM, а текстовый инпут – то, что введёт пользователь. Вот иллюстрация обоих вариантов:

Если поддержка разных браузеров не критична, то можно просто иметь в виду.

А как такое можно исправить? Изменить на input[type=date], он вроде во всех браузерах поддерживается? Или есть какие-то дополнительные библиотеки?

Да, можно переключиться на input[type=date] – там формат всегда будет yyyy-mm-dd.

Если оставить input month, то это тоже ок. Но я бы тогда в качестве минимальной защиты добавил валидацию поля через регулярное выражение. Для этого можно использовать атрибут pattern. В этом случае пользователь при попытке отправки формы с некорректной датой получит ошибку валидации:

Также для единообразия я бы поменял placeholder на YYYY-MM, т.к. этот формат по умолчанию используется в input month. Тогда независимо от браузера дата будет отправлена в формате YYYY-MM. Если хочется мм.гггг, то так тоже можно, но тогда придётся нормализовать дату перед сохранением в localStorage/отправкой на сервер и при получении её оттуда и заполнении поля.

Дальше надо смотреть, в каком формате дата ожидается на бэкенде и преобразовывать её к нужному формату, писать код для этого на фронте/бэке, возможно, подключать библиотеки – но это уже out of scope для текущего задания :)

P.S. К слову о валидации – это тоже нативная функциональность html-формы, ещё один аргумент "за" то, чтобы использовать форму. Например, можно легко предотвратить переход к следующему шагу конструктора, если пользователь не заполнил все поля:

emworks · 2025-11-01T20:36:04Z

+                <p>Высшее</p>
+                <p class="input_years">09.2019 — 06.2023</p>
+            </div>
+            <svg class="delete_svg" viewBox="0 0 20 19" width="20" xmlns="http://www.w3.org/2000/svg">


Мне кажется, лучше сразу использовать <button>, чтобы это были кнопки, доступные с клавиатуры.

emworks · 2025-11-01T20:58:40Z

Комментарии по указанным недочётам.

- пока что нет адаптации под другие девайсы, так как мне просто не хватило времени.

Для поддержки базовой адаптивности можно начать с добавления нескольких правил в блоке @media:

white-space: nowrap; – убрать перенос слов в пунктах меню, чтобы оно растянулось на максимальную длину
overflow-y: auto; – сделать область меню прокручиваемой на маленьких экранах
flex-direction: column; – расположились поля формы одно под другим
подправить отступы (padding)

Результат:

Пример правил, которые можно добавить в main.css:

@media (max-width: 600px) {
    .blocking_heading {
        padding: 0;
    }

    .blocking_heading h1 {
        padding: 50px 50px 0;
    }

    .blocking_heading nav {
        overflow-y: auto;
    }

    .blocking_heading .menu_btn {
        white-space: nowrap;
    }

    .blocking {
        padding: 0 50px;
    }

    .input_line {
        flex-direction: column;
    }
}

Можно добавить остальные нужные правила по аналогии.

- я так и не разобралась, как стилизовать drop-down list. Это грустно.

Уже хорошо стилизовано, но если хочется больше – то без JavaScript не обойтись. Причем, лучше сразу подключить скрипт/библиотеку (к примеру, select2), потому что поддержка доступности и разных устройств может оказаться весьма нетривиальной задачей, если писать такой скрипт самостоятельно.

emworks · 2025-11-01T21:05:24Z

Общий комментарий – кода получилось много, по возможности лучше разбивать решение на шаги/подзадачи и создавать отдельные коммиты на каждом завершенном этапе. Это также помогает во время ревью проследить за мыслью автора и, возможно, что-нибудь подсказать :)

emworks · 2025-11-01T21:12:02Z

matiko-ma · 2025-11-02T17:51:55Z

Спасибо большое за такие подробные комментарии!
Касательно адаптации под другие девайсы, я сделала это в рамках второй домашки. Если интересно, можно посмотреть тут.

annamotoshkina · 2025-11-27T17:46:46Z

На странице "Профессиональное фото": не для всех инпутов есть лейблы
На странице "Профессиональное фото": Я не поняла по макету, где инпут для загрузки фото
На странице "Профессиональное фото": "Больше советов и примеров фотографий можно найти по ссылке", а ссылки нет
На странице "Профессиональное фото": Вместо input type="submit" лучше использовать кнопку
На странице "Персональные данные": правильнее всю форму обернуть в form, а не только кнопку
В css-переменные можно было вынести все значения, которые повторяются и, скорее всего, будут изменяться согласованно

Есть ссылка на вёрстку и исходные макеты [ok]
Используются семантические теги [mostly ok]
В стилях использованы CSS-переменные [mostly ok]
Для задания стилей используются преимущественно классы [ok]
Классы поименованы в соответствие с бизнес-значением элемента [ok]
Есть позиционирование элементов с помощью display: flex / display: grid [ok]
Вёрстка соответствует выбранным макетам [ok]
Итого: 9/10

hw1

8bfa74c

emworks reviewed Nov 1, 2025

View reviewed changes

	<input class="input" placeholder="PR-менеджер">
	<input class="input" name="job_title" placeholder="PR-менеджер">

	<img class="imgS" src="./img/img1.jpg" alt="Картинка 1">
	<img class="imgS" src="./img/img1.jpg" alt="Подробное описание картинки 1">

	<label for="name" class="input_head">Фамилия</label>
	<label for="surname" class="input_head">Фамилия</label>

Conversation

matiko-ma commented Oct 6, 2025

Uh oh!

emworks Nov 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

emworks Nov 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

emworks Nov 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

emworks commented Nov 1, 2025

Uh oh!

emworks commented Nov 1, 2025

Uh oh!

emworks commented Nov 1, 2025

Uh oh!

matiko-ma commented Nov 2, 2025

Uh oh!

annamotoshkina commented Nov 27, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

emworks Nov 1, 2025 •

edited

Loading

emworks Nov 2, 2025 •

edited

Loading

emworks Nov 1, 2025 •

edited

Loading