Як створити та розгорнути власний сайт особистого портфоліо

Привіт! Мене звати Кевін Пауелл. Я люблю навчати людей, як будувати Інтернет і як зробити так, щоб вони добре виглядали.

З радістю повідомляю, що я щойно запустив безкоштовний курс, який вчить вас створювати власний веб-сайт, що повністю реагує на портфоліо.

Після закінчення цього курсу у вас буде охайний портфоліо-сайт, який допоможе вам оформити співбесіди та вільні концерти. Це також класна річ, щоб показати своїм друзям та родині.

Ми збираємося створити портфоліо за допомогою інтерактивної платформи навчання коду Scrimba, а потім розгорнути його за допомогою хмарних сервісів DigitalOcean.

Крім того, DigitalOcean щедро надав кожному, хто зареєструвався, безкоштовний кредит , тому вам не буде коштувати нічого, щоб його запустити.

Ця публікація являє собою розподіл самого курсу, який дає вам уявлення про те, що включено в усі уроки. Якщо вам подобається те, що ви бачите, обов’язково перевірте це на Scrimba!

Урок 1: Вступ

На першому уроці ви отримаєте огляд курсу, щоб ви знали, чого очікувати, що слід знати перед тим, як пройти його, і чим закінчите, закінчивши. Я також даю вам короткий вступ до себе.

Деякі загальні відомості про автора курсу

Урок 2: Налаштування речей - HTML

У другій частині я збираюся показати вас у середовищі Скрімба, і ми також створимо проект.

Всі зображення поставляються, тож вам не потрібно буде турбуватися про те, щоб шукати ідеальну фотографію ще. Ми можемо зосередитись на створенні портфоліо!

Не забувайте, що ви можете отримати доступ до всього необхідного - від тексту, кольорів, шрифтів та багато іншого на нашій спеціальній сторінці дизайну.

Урок 3: Область заголовка - HTML

Нарешті настав час розпочати формування портфоліо. У цій лекції ми створимо заголовок. Ми розглянемо методику BEM для встановлення імен класів у CSS, і я думаю, ви виявите, що це робить навігацію простою та зрозумілою для створення.

Урок 4: Вступний розділ

Далі йде вступний розділ портфоліо. Тут ми представимось і складемо свою картину.

Врешті-решт, ми додаємо розділ про основні навички / послуги, які ми можемо зробити. На даний момент ми можемо просто заповнити все текстом “Lorem ipsum” як заповнювач, поки ви не будете готові заповнити його власним текстом.

Урок 5: Про мене, робота та нижній колонтитул - HTML

У цьому розділі ми закінчуємо решту нашого HTML останніми 3 розділами: Про мене, де ми збираємось представити себе більш докладно; Робота, де ми збираємося додати деякі з наших прикладів портфоліо та наш нижній колонтитул.

Колонтитули ідеально підходять для посилання на адреси електронної пошти, і я покажу вам, як це зробити за допомогою тегу. Ми також можемо додати туди свої посилання на соціальні мережі.

Наразі все це виглядає дещо необробленим, і все задоволення від CSS попереду.

Урок 6: Налаштування власних властивостей та загальних стилів

Гаразд, час зробити цю сторінку чудовою!

У цій частині ми збираємось навчитися додавати власні властивості.

Хоча налаштування змінних CSS може зайняти деякий час, це дійсно приносить свої результати, коли сайт об’єднується. Вони також ідеально підходять для того, щоб дозволити вам налаштувати кольори та шрифти сайту всього за кілька секунд, і я розглядаю, як це зробити, коли ми завершимо роботу сайту.

Урок 7: Стиль заголовків та субтитрів

Визначивши всю необхідну типографіку, я проведу вас по субтитрах для проектування та стилізації заголовків та субтитрів у наших розділах.

Урок 8: Налаштування вступного розділу

Протягом наступних кількох розділів це буде доволі практичним, тому не хвилюйтеся, якщо вам захочеться переглядати кілька разів екранні трансляції.

Ми постійно реагуємо на все, використовуючи CSS Grid, а також трохи занурившись у використання emодиниць.

Це ідеальний приклад, коли просвічує CSS Grid, і ми збираємось навчитися використовувати властивості, такі як grid-column-gap, grid-template-areasі grid-template-columns.

Вступний розділ сайту

Урок 9: Стиль розділу послуг

Щоб додати трохи інтересу, я розглядаю, як ми можемо додати a background-imageдо цього розділу сайту. Це приємний спосіб розбити другий і уникнути просто наявності однотонних фонів скрізь, і я також розглядаю, як ви могли б використовувати background-blend-modeдля зміни кольору зображення, щоб допомогти зберегти вигляд вашого сайту узгодженим.

Як бонус, ми також збираємося навчитися стилізувати кнопки, коли вони наводяться на них або вибираються, коли ми переходимо на сторінку.

Розділ послуг сайту

Урок 10: Розділ Про мене

Великого прогресу! Отже, це найважливіший розділ Про мене. Цей дуже схожий на Intro, оскільки ми збираємося використовувати CSS Grid, але перемістіть зображення в праву сторону і знайдіть корисний приклад для CSS- frмодуля.

Розділ "Про мене" на сайті

Урок 11: Портфоліо

Розділ портфоліо

У цьому скрінкасті я покажу, як створити наш розділ портфоліо, щоб відобразити деякі наші великі роботи. І ми навіть збираємось навчитися використовувати cubic-bezier()чудовий та вражаючий ефект за допомогою стилю наведення курсору!

Розділ портфоліо з виділеним елементом

Урок 12: Додавання соціальних піктограм за допомогою Font Awesome

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

Додавання посилань у соціальних мережах за допомогою піктограм Font Awesome - це дуже просто. Ми можемо зробити це за допомогою тегу, а потім додати назву класу піктограми, яку ви хочете додати.

Як приклад, ось як додати піктограму для GitHub, як тільки у вашій розмітці буде зв’язано Font Awesome.

Урок 13: Стилістика нижнього колонтитула

Нижній колонтитул

Поки значки є на місці, нам потрібно додати сюди ще більше стилів, щоб налаштувати їх так, як вони нам потрібні.

З невеликим використанням флексбоксу і вилучення стилю зі списку, list-style: noneце відносно прямо.

Урок 14: Налаштування стилів навігації

Ми залишили навігацію до останнього, оскільки дуже часто це одна з тих простих речей, яка може зайняти найдовший час, щоб налаштувати та зробити правильно.

Після завершення навігація буде поза екраном, але вставте, коли користувач натисне піктограму гамбургера. Першим кроком, однак, є стилістика, як ми хочемо, щоб вона виглядала, тоді ми можемо турбуватися про те, щоб насправді зробити так, щоб це працювало!

стилі меню навігації

Урок 14: Створення гамбургера

постріл у верхній частині сторінки зі стрілкою, що виділяє значок гамбургера

У цій скрінкасті ви дізнаєтесь, як додати меню гамбургера для переходу до подання навігації. Це не піктограма чи svg, а чистий CSS.

У нас буде практика випадків ::beforeі ::afterпсевдоселектори, перехід, і, оскільки це не посилання, а a button, нам також потрібно визначити інший курсор, коли ми наводимо курсор на піктограму гамбургера, щоб вказати, що на неї можна клацнути cursor: pointer.

Урок 15: Додавання JS

Трохи JavaScript, я проведу вас через реалізацію справді приємного і плавного переходу від нашого головного екрана до навігаційного вікна за натисканням меню гамбургера.

меню відкриття / закриття анімації

Я також подивився, як ми можемо додавати плавну прокрутку за допомогою CSS лише за допомогою scroll-behavior: smooth. Так, це справді так просто! Це також робить чудовий твіт для Today I Learned (TIL). Не соромтеся надсилати вам TIL-адреси на @scrimba, і я впевнений, що вони будуть дуже раді їх ретвітнути!

Урок 16: Створення сторінки елемента портфоліо

Загорнувши домашню сторінку, настав час попрацювати над сторінкою портфоліо шаблонів, яка може бути використана для надання детальної інформації про кожен проект, який ви розміщуєте у своєму портфоліо.

Ми також дізнаємось, як це легко пов’язати з нашою головною сторінкою для приємного користувацького досвіду.

сторінка портфоліо

Урок 17: Налаштування вашої сторінки

Тут виникає магія власних властивостей CSS!

У цьому відео я розглядаю, як ми можемо налаштувати власні властивості, які ми налаштували для зміни колірної схеми вашого сайту за лічені секунди, і як ми можемо швидко та легко оновлювати шрифти, щоб зробити сайт вашим власним!

Урок 18: Крапельки DigitalOcean - що це таке і як їх налаштувати

У цьому сюжеті ми збираємось дослідити краплі DigitalOcean. Вони є віртуальними машинами на базі Linux, і кожна крапелька - це новий сервер, яким ви можете користуватися.

Це може здатися страшним, але їх надзвичайно просто налаштувати, вони дуже налаштовуються і мають безліч корисних функцій, таких як брандмауер автоматично.

Приладова панель DigitalOcean

Я поговорю вас на кожному кроці, щоб ви точно знали, як налаштувати крапельку.

Урок 19: Крапельки DigitalOcean - Завантаження файлів через FTP

Щоб закінчити весь процес, дозвольте мені показати вам, як ми можемо завантажити наше портфоліо до дроплету, який ми створили в попередньому розділі, і тепер його бачать інші!

Урок 20: Завершіть

І це все! Вашим наступним кроком може стати ця сторінка про вас, додати всі відповідні приклади, розказати нам про вас і опублікувати її в краплі DigitalOcean.

Після того, як ви зібрали своє та отримали його в Інтернеті, поділіться своїм портфоліо зі Мною та командою Scrimba! Ви можете знайти нас у @KevinJPowell та @scrimba у Twitter, і ми були б дуже раді поділитися з вами тим, що ви задумали!

Ознайомтесь із повним курсом

Пам’ятайте, цей курс абсолютно безкоштовний. Поїдьте до Scrimba зараз, і ви зможете слідувати за нею та створити фантастичний сайт!

Original text