Сьогодні ми створимо CV (Curriculum vitae), або іншими словами резюме ІТ-шника і навчимося додавати меню і використовувати сторонні бібліотеки з вже готовими елементами HTML та стилями CSS. Окрім технічної теми, ми дізнаємося, як краще створювати резюме, що туди варто додавати.
CV – це коротенький опис навичок кандидата на якусь ІТ-вакансію. Важливо, описувати досвід коротко, але підкреслюючи свої важливі навички і сильні сторони.
В середньому HR (рекрутер) витрачає на одне резюме до хвилини часу. Тому чим краще ви структуруєте інформацію, тим більше шансів, що вас помітять і запросять на співбесіду.
В нашому проєкті може бути вигадане і навіть не серйозне резюме, бо ми тільки тренуємося
В нашому проєкті може бути вигадане і навіть не серйозне резюме, бо ми тільки тренуємося 😎
1: Для початку, створимо меню, яке міститиме в собі 4 сторінки з інформацією. Воно допоможе зручно перемикатися між сторінками. Додайте такий код в body:
<ul>
<li><a class="active" href="index.html">Основна</a></li>
<li><a href="experience.html">Досвід</a></li>
<li><a href="courses.html">Курси</a></li>
<li><a href="add.html">Додатково</a></li>
</ul>Як бачимо, для меню застосовуються теги списків. Але без додаткових стилів наше меню працювати не буде. Розробнику не обов’язково придумувати дизайн самотужки. Є кілька корисних сайтів, які мають в собі шаблони, які можна переробити під себе:
https://www.w3schools.com/css/css_navbar_vertical.asp
Це один з них. Цей чудовий сайт може стати вашим надійним другом на шляху створення сайтів. Тут можна знайти кілька чудових прикладів і застосувати їх у своїх проєктах.
Після кожного прикладу є кнопка “Try it yourself”, яка відкриває приклад у редакторі коду і його можна змінити і спробувати, як то кажуть на зуб. В нашому CV ми та використаємо один з таких стилів для меню. Ось він:
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 20%;
background-color: #a1a1a1;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #018960;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
Додайте цей код і файл стилів. Змініть деякі стилі за потребою.
2: Додайте основну частину. Це буде div, який міститиме заголовок.
<div class="main">
<h1>Кіт Котенко</h1>
</div>Для такого main div-у ми пропишемо спеціальні відступи, щоб текст шикувався відповідним чином.
.main {
margin-left:25%;
padding:1px 16px;
height:1000px;
}Чудово! На цьому етапі меню є на сторінці, але це не працює. Давайте це виправимо.
3: Створіть нові сторінки
index.html – головна сторінка CV, тут буде інформація про кандидата, його контактні дані і набір навичок, якими володіє кандидат.
experience.html – це сторінка досвіду. Список місць де працював, стажувався або вчився кандидат.
courses.html – курси, які проходив, сертифікації, які здавав
add.html – додаткові відомості : мови, якими спілкується, хоббі, якості особистості.
4: Скопіюйте увесь код на решту сторінок. Змініть основний заголовок. На кожній сторінці заголовок має бути інший. На першій – ім’я кандидата. Ось приклади для решти сторінок:
<h1>Кіт Котенко</h1>
<h1>Досвід</h1>
<h1>Курси</h1>
<h1>Додаткова інформація</h1>Додайте також стилі для заголовка:
h1 {
text-align: center;
color: white;
background: #018960;
}Змініть активний пункт меню для кожної сторінки та перевірте, що при переключенні, змінюється заголовок і активний пункт.
Приклад переключення:
<ul>
<li><a href="index.html">Основна</a></li>
<li><a href="experience.html">Досвід</a></li>
<li><a class="active" href="courses.html">Курси</a></li>
<li><a href="add.html">Додатково</a></li>
</ul>Перевірте, що при переключенні меню вас перекидає на іншу сторінку і світиться саме той пункт меню, що відповідає за сторінку.
Додаємо контактні дані
Наша задача – створити таку шапку. Збоку фото і поряд контакти
5: Для цього нам знадобиться div class=”container” – в цей div складаємо фотку і контакти. А це означає, що в середині нього будуть ще два div-и: class=”ava” і class=”contacts”. В перший додайте фото, в другий контактну інформацію
<div class="container">
<div class="ava">
<img src="cat.jpg" class="avatar" alt="Avatar">
</div>
<div class="contacts">
<p><span class="cont">Job:</span> Junior Frontend developer</p>
</div>
</div>
Не забуваємо про стилі (для контейнера важливо правильно розташувати елементи. Для avatar – гарно підсвітити зображення. Contacts – додає тільки відступ для тексту, щоб не зливалося. Con – спеціальний стиль, щоб виділяти тип контакту кольором):
.container {
display: flex;
align-items: center;
justify-content: center;
background-color: #018960;
}
.avatar {
vertical-align: middle;
max-width: 100%;
max-height: 250px;
border-radius: 50%;
padding: 20px;
}
.contacts {
padding: 20px;
}
.cont {
color: #ffffff;
}Не забудьте додати ще контактної інформації. Можете взяти фото як приклад
Додаємо навички (skills)
6: Створіть новий заголовок “Технології”. Ми додамо туди кілька progress bar-ів з нашими навичками. Вони будуть показувати наскільки глибоко ми розуміємося в темі.
Progress bar – це шкала, на якій можна позначити рівень у відсотках. Це дуже наочно і приємно читається. Цей progress bar ми візьмемо зі сторонньої бібліотеки https://www.w3schools.com/w3css/. Тут дуже багато прикладів, для нашого випадку , наприклад ось тут:
https://www.w3schools.com/w3css/w3css_progressbar.asp
Оберіть будь-який приклад і за допомогою “Try it yourself” відкрийте приклад коду. Додайте такий код на свою сторінку.
Не забудьте, що бібліотеку треба підключити, додавши в head:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">Можете трохи змінити кольори.https://www.w3schools.com/w3css/w3css_colors.asp – ця сторінка підкаже, які кольори доступні в бібліотеці
Додайте кілька навичок і встановіть відповідний рівень для кожної
Домашня робота
Це завдання розраховано на два заняття. Домашка після першого заняття: 1 і 2 завдання і 1-ше завдання Level Up. Домашка після другого заняття: решта завдань
1: Додайте 4 абзаци тексту на сторінку “Досвід”. Це може бути опис досвіду роботи або відомості про те, де людина вчилася (приклади можна глянути на картинках, але також можна написати щось видумане або смішне). Перед кожним абзацом додайте назву і роки.
Приклад:
Жовтень 2023 – поточний час
Курс CSS JavaScript
Навчався героїчно боротися з помилками у Javascript, додавати файні кольори в усі свої проєкти. Створював мега-кольорові стікери та прапори. Писав без помилок слово background і феєрично користувався кнопками Ctrl+C та Ctrl+V.
2: Додайте клас до кожного абзацу з минулого завдання. За допомогою стилів розташуйте текст першого абзацу зліва, для другого абзацу – справа, для третього – по центру, останній має розтягнутися по ширині. CSS властивості, які з цим допоможуть тут:
text-align: left;
text-align: right;
text-align: center;
text-align: justify;3: Додайте інформацію на сторінку “Додатково”. Додайте розділи:
- Хоббі (перелічіть ваші хоббі)
- Персональні якості (можна написати, наприклад, комунікабельний, працьовитий..)
- Мови (додайте progress bar для кожної мови та зазначте рівень володіння нею)
4: На вкладку Курси додайте мінімум 2 курси. Додайте різні стилі за допомогою класів чи id.
5: На головну або у “Досвід” додайте розділ “Пет проєкт”. Додайте туди посилання на 2-3 ваших минулих проєкти. (Посилання додаються за допомогою тега <a href=….>)
Level Up
1: Створіть горизонтальне меню за допомогою сторінки : https://www.w3schools.com/css/css_navbar_horizontal.asp. Можете розташувати його на сторінці резюме або створити окремий проєкт. Меню має переключатись і відображати різні сторінки з різним текстом.
2: Додайте ще якийсь компонент в резюме з бібліотеки https://www.w3schools.com/w3css/
