Како да направите и примените сопствени сајт са личним портфељем

Здраво! Зовем се Кевин Повелл. Волим да подучавам људе како да граде мрежу и како да изгледа добро док су код ње.

Узбуђена сам што могу да објавим да сам управо покренула бесплатни курс који вас учи да креирате своју властиту веб страницу са пуним одзивом .

Након што завршите овај курс, имаћете уредну веб страницу портфолија која ће вам помоћи да нађете интервјуе за посао и слободне концерте. Такође је цоол ствар показати својим пријатељима и породици.

Изградићемо портфељ користећи Сцримбину интерактивну платформу за учење кода, а затим ћемо га применити користећи ЦлоудОве услуге ДигиталОцеан.

Такође, ДигиталОцеан је великодушно дао свима који се упишу бесплатан кредит , тако да вас неће коштати ништа ако га покренете.

Овај пост је преглед самог курса који вам даје идеју шта је све укључено у све лекције. Ако вам се свиђа оно што видите, проверите то на Сцримби!

Лекција 1: Увод

У првој лекцији добићете преглед курса како бисте знали шта можете очекивати, шта бисте требали знати пре поласка и са чим ћете завршити када завршите. Такође вам дам брз увод у себе.

Неке опште информације о аутору курса

Лекција 2: Постављање ствари - ХТМЛ

У другом делу ћу вам показати околину Сцримба, а ми ћемо такође поставити пројекат.

Све слике су испоручене, тако да још увек нећете морати да бринете о томе да ли ћете потражити савршену фотографију. Можемо се усредсредити на изградњу портфеља!

Не заборавите да на нашој посвећеној страници о дизајну можете приступити свему што вам је потребно, од текста и боја до фонтова и још много тога.

Лекција 3: Подручје заглавља - ХТМЛ

Напокон је време да почнемо да градимо портфељ. У овом предавању креираћемо заглавље. Размотрићемо БЕМ методологију за постављање имена класа у ЦСС-у и мислим да ћете открити да ово чини навигацију једноставном и једноставном за стварање.

Лекција 4: Уводни одељак

Следи уводни део портфеља. Овде ћемо се представити и ставити слику о себи.

На крају додајемо одељак о главним вештинама / услугама које можемо да пружимо. Тренутно то можемо само попунити текстом „Лорем ипсум“ као резервирано место, док не будете спремни да га попуните својим текстом.

Лекција 5: О мени, посао и подножје - ХТМЛ

У овом поглављу довршавамо остатак ХТМЛ-а са последња 3 одељка: О мени, где ћемо се представити детаљније; Посао, где ћемо додати неке примере из портфеља и подножје.

Подножја су идеална за повезивање са адресама е-поште и показаћу вам како се то ради помоћу ознаке. Тамо такође можемо додати наше везе до друштвених мрежа.

За сада све изгледа помало сирово и сва ЦСС забава је пред нама.

Лекција 6: Постављање прилагођених својстава и општих стилова

Добро, време је да та страница изгледа невероватно!

У овом делу ћемо научити како да додамо прилагођена својства.

Иако постављање ЦСС променљивих може потрајати, то се заиста исплати како се страница окупља. Они су такође савршени за то што вам омогућавају да прилагодите боје и фонтове странице за само неколико секунди, а ја ћу погледати како то учинити након што завршимо са завршетком странице.

Лекција 7: Стилизовање наслова и титлова

Пошто сам подесио сву потребну типографију, провест ћу вас кроз титлове за дизајнирање и обликовање наслова и титлова у нашим одељцима.

Лекција 8: Постављање уводног одељка

Током следећих неколико поглавља биће прилично практично, тако да не брините ако желите неколико пута да прегледате екранске програме.

Одржавамо све да реагујемо, користећи ЦСС Грид и мало зарањајући и у употребу emјединица.

Ово је савршен пример где ЦСС Мрежа сија кроз и ми ћемо научити како да користите својства као што су grid-column-gap, grid-template-areasи grid-template-columns.

Уводни део странице

Лекција 9: Обликовање одељка за услуге

Да бих додао мало интересовања, гледам како можемо да додамо а background-imageовом делу веб локације. То је леп начин да разбијете секунду и избегнете само постојање једнобојних позадина свуда, а такође гледам и како бисте могли background-blend-modeда промените боју слике како бисте задржали доследан изглед своје веб локације.

Као бонус, научићемо и како да обликујемо дугмад када прелазе курсором преко или одабиром када прелазимо преко странице.

Одељак услуге на веб локацији

Лекција 10: О мени одељак

Велики напредак! Дакле, ово је најважнији одељак О мени. Овај је прилично сличан уводном, јер ћемо користити ЦСС мрежу, али померите слику на десну страну и пронађите користан пример за ЦСС frјединицу.

Одељак странице О мени

Лекција 11: Портфељ

Одељак портфеља

У овом сцреенцаст-у, показаћу како да направимо наш одељак портфеља како бисмо приказали нека наша сјајна дела. А чак ћемо научити и како да користимо cubic-bezier()сјајан и импресиван ефекат помоћу стајлинга лебдења!

Одељак портфеља са истакнутом ставком

Лекција 12: Додавање друштвених икона помоћу Фонт Авесоме

Ова глумачка екипа биће слатка и кратка, па се можете мало одморити и научити неке брзе савете и трикове.

Додавање веза на друштвене медије помоћу икона Фонт Авесоме је поветарац. То можемо да урадимо помоћу ознаке, а затим додамо име класе иконе коју желите да додате.

Као пример, ево како да додате икону за ГитХуб након што повежете Фонт Авесоме у свом означавању.

Лекција 13: Стилизовање подножја

Подножје

Док су иконе на месту, овде треба додати још стилова да би се поставиле онако како ми треба.

Уз мало употребе флексбокса и уклањања стајлинга са листе list-style: none, релативно је право напред.

Лекција 14: Постављање навигационих стилова

Навигацију смо оставили до краја, јер је врло често то једна од оних једноставних ствари којима треба најдуже да се правилно подеси и уради.

По завршетку, навигација ће бити ван екрана, али се увући кад корисник кликне на икону хамбургера. Први корак је ипак да се стилизује онако како ми желимо да изгледа, а онда можемо да бринемо да ли ћемо заиста успети!

стилизовани мени за навигацију

Лекција 14: Стварање хамбургера

снимак врха странице стрелицом која истиче икону хамбургера

У овом сцреенцаст-у научићете како да додате мени хамбургера за прелазак у приказ навигације. То није икона или свг, већ чисти ЦСС.

Имат ћемо прилику за вјежбање ::beforeи ::afterпсеудо-селекторе, пријелаз, и, пошто то није веза, већ а button, такође морамо дефинирати различити курсор када задржимо показивач изнад иконе хамбургера како бисмо назначили да се на њу може кликнути cursor: pointer.

Лекција 15: Додавање ЈС

Уз мало ЈаваСцрипт-а, провести ћу вас кроз имплементацију заиста лепог и глатког преласка са нашег главног екрана на навигацијски прозор на клик менија хамбургера.

мени отварање / затварање анимације

Такође погледам како можемо додати глатко помицање са ЦСС-ом само помоћу scroll-behavior: smooth. Да, заиста је тако једноставно! Такође представља одличан твит за Тодаи И Леарнед (ТИЛ). Слободно вам пошаљите ТИЛ-ове на @сцримба и сигуран сам да ће их заиста радо просветити!

Лекција 16: Креирање странице ставке портфеља

Када је почетна страница замотана, време је да радите на страници портфеља шаблона која се може користити за давање више детаља о сваком од пројеката које стављате у свој портфељ.

Такође ћемо научити како га без проблема повезати са нашом главном страницом ради лепог корисничког искуства.

страница предмета портфеља

Лекција 17: Прилагођавање ваше странице

Ту долази до чаролије ЦСС прилагођених својстава!

У овом видеу гледам како можемо прилагодити прилагођена својства која смо поставили за промену шеме боја ваше странице у року од неколико секунди и како можемо брзо и лако ажурирати фонтове како бисмо сајт учинили својим!

Лекција 18: ДигиталОцеан капљице - шта су и како их поставити

У овом сцреенцаст-у истраживаћемо капљице ДигиталОцеан. Они су виртуелне машине засноване на Линуку и свака капљица је нови сервер који можете користити.

То може изгледати застрашујуће, али они су изузетно једноставни за подешавање, врло прилагодљиви и долазе са пуно корисних функција, као што је аутоматски заштитни зид.

ДигиталОцеан контролна табла

Провешћу вас кроз сваки појединачни корак како бисте тачно знали како поставити капљицу.

Лекција 19: ДигиталОцеан капљице - Отпремање датотека путем ФТП-а

Да завршимо цео процес, дозволите ми да вам покажем како можемо да пренесемо свој портфолио у капљицу коју смо креирали у претходном поглављу, а сада је на мрежи да је други виде!

Лекција 20: Заврши

И то је то! Ваш следећи корак може бити да ову страницу направите о себи, додате све релевантне примере, испричате нам о себи и учините је живом у капљици ДигиталОцеан.

Једном када саставите свој и на мрежи, поделите свој портфолио са Мном и тимом у Сцримби! Можете нас наћи на @КевинЈПовелл и @сцримба на Твиттеру, и били бисмо заиста срећни да поделимо са вама на чему сте!

Погледајте цео курс

Запамтите, овај курс је потпуно бесплатан. Крените одмах до Сцримбе и можете пратити заједно са њом и направити фантастичан сајт!