Как да изградите и внедрите свой собствен личен портфолио сайт

Здравейте! Казвам се Кевин Пауъл. Обичам да уча хората как да изграждат мрежата и как да изглежда добре, докато са в нея.

Радвам се да съобщя, че току-що стартирах безплатен курс, който ви учи да създадете свой собствен напълно отзивчив уебсайт за портфолио.

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

Ще изградим портфолиото, използвайки интерактивната платформа за обучение на 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псевдо-селектори, преход и, тъй като това не е връзка, а button, ние също трябва да дефинираме различния курсор, когато задържим курсора на мишката върху иконата за хамбургер, за да покажем, че върху нея може да се щракне cursor: pointer.

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

С малко JavaScript ще ви преведа през изпълнението на един наистина хубав и плавен преход от нашия основен екран към навигационния прозорец при щракване на менюто на хамбургера.

анимация за отваряне / затваряне на менюто

Също така разглеждам как можем да добавим при гладко превъртане с CSS само с помощта на scroll-behavior: smooth. Да, наистина е толкова просто! Това също прави страхотен туит за „Днес научих“ (TIL). Чувствайте се свободни да ви изпращате TIL на @scrimba и съм сигурен, че те с удоволствие ще ги ретуитат!

Урок 16: Създаване на страница с елементи на портфолио

С опаковането на началната страница е време да работите върху страница с портфолио от шаблони, която може да се използва за предоставяне на повече подробности за всеки от проектите, които поставяте в портфолиото си.

Също така ще научим как да го свържем безпроблемно с нашата основна страница за приятно потребителско изживяване.

страница с портфолио

Урок 17: Персонализиране на вашата страница

Тук идва магията на персонализираните свойства на CSS!

В това видео разглеждам как можем да персонализираме персонализираните свойства, които сме задали, за да променим цветовата схема на вашия сайт за секунди, и как можем да актуализираме шрифтовете бързо и лесно, за да направим сайта ваш собствен!

Урок 18: DigitalOcean Droplets - какви са те и как да ги настроите

В този екран ще разгледаме капките DigitalOcean. Те са базирани на Linux виртуални машини и че всяка капчица е нов сървър, който можете да използвате.

Може да изглежда обезсърчително, но те са изключително лесни за настройка, много се персонализират и идват с много полезни функции, като защитна стена автоматично.

Табло за управление DigitalOcean

Ще ви разкажа през всяка една стъпка от пътя, за да знаете точно как да настроите капчица.

Урок 19: DigitalOcean Droplets - Качване на файлове чрез FTP

За да завършите целия процес, позволете ми да ви покажа как можем да качим нашето портфолио в капчицата, която създадохме в предишната глава и сега е онлайн, за да я видят другите!

Урок 20: Приключи

И това е! Следващата ви стъпка може да бъде да направите тази страница изцяло за вас, да добавите всички подходящи примери, да ни разкажете за вас и да я направите жива в капчица DigitalOcean.

След като сглобите своето и го вземете онлайн, моля, споделете портфолиото си с мен и екипа на Scrimba! Можете да ни намерите в @KevinJPowell и @scrimba в Twitter и ние с удоволствие бихме споделили с какво се занимавате!

Вижте пълния курс

Не забравяйте, че този курс е напълно безплатен. Насочете се към Скримба сега и можете да го последвате и да създадете фантастично изглеждащ сайт!

Original text