כיצד לבנות ולפרוס אתר פורטפוליו אישי משלך

שלום! שמי קווין פאוול. אני אוהב ללמד אנשים כיצד לבנות את האינטרנט וכיצד לגרום לו להראות טוב בזמן שהם נמצאים בו.

אני נרגש לבשר שהשקתי זה עתה קורס בחינם המלמד אותך ליצור אתר פורטפוליו מגיב לחלוטין שלך .

לאחר שתסיים קורס זה יהיה לך אתר תיק עבודות מסודר שיעזור לך לנחות ראיונות עבודה והופעות עצמאיות. זה גם דבר מגניב להראות לחברים ובני משפחה.

אנו הולכים לבנות את התיק באמצעות פלטפורמת הלמידה הקוד האינטראקטיבית של Scrimba, ואז לפרוס אותו באמצעות שירותי הענן של DigitalOcean.

כמו כן, DigitalOcean נדיבה לתת לכל מי שנרשם זיכוי בחינם , כך שזה לא יעלה לך כלום להפעיל אותו.

פוסט זה הוא פירוט של הקורס עצמו, נותן לך מושג מה כלול בכל השיעורים. אם אתה אוהב את מה שאתה רואה, הקפד לבדוק את זה על Scrimba!

שיעור 1: מבוא

בשיעור הראשון תקבלו סקירה על הקורס כדי שתדעו למה לצפות, מה עליכם לדעת לפני שתסיימו אותו ולמה תגיעו לאחר שתסיימו. אני גם נותן לך הקדמה מהירה לעצמי.

מידע כללי כלשהו אודות מחבר הקורס

שיעור 2: הגדרת דברים - HTML

בחלק השני אני אראה לכם סביבה בסקרימבה וגם נקים את הפרויקט.

כל התמונות מסופקות, כך שעדיין לא תצטרכו לדאוג לחפש את התמונה המושלמת. אנחנו יכולים להתמקד בבניית התיק!

אל תשכח שאתה יכול לגשת לכל מה שאתה צריך מטקסט וצבעים לגופנים ועוד הרבה בדף העיצוב הייעודי שלנו.

שיעור 3: אזור הכותרת - HTML

סוף סוף הגיע הזמן להתחיל לבנות את התיק. בהרצאה זו ניצור את קטע הכותרת. אנו נבריש את מתודולוגיית BEM להגדרת שמות כיתות ב- CSS, ואני חושב שתגלה שהדבר הופך את הניווט לפשוט ופשוט ליצירה.

שיעור 4: קטע מבוא

הבא הוא החלק המבוא של התיק. זה המקום בו נציג את עצמנו ונשים תמונה של עצמנו.

בסופו של דבר, אנו מוסיפים חלק על הכישורים / השירותים העיקריים שאנו יכולים לעשות. כרגע אנחנו יכולים פשוט למלא את כל זה בטקסט "Lorem ipsum" כמציין מיקום, עד שתהיה מוכן למלא אותו בטקסט משלך.

שיעור 5: אודותיי, עבודה וכותרת תחתונה - HTML

בפרק זה, אנו מסיימים את שאר ה- HTML שלנו בשלושת הסעיפים האחרונים: אודותיי, שם אנו מתכוונים להציג את עצמנו בפירוט רב יותר; עבודה, שבה אנו נוסיף כמה מדוגמאות תיק העבודות שלנו וכותרת תחתונה שלנו.

כותרות תחתונות אידיאליות לקישור לכתובות דוא"ל ואני אראה לך כיצד לעשות זאת באמצעות תג. אנחנו יכולים גם להוסיף שם את קישורי המדיה החברתית שלנו.

לעת עתה הכל נראה מעט גולמי וכל הכיף של CSS לפנינו.

שיעור 6: הגדרת המאפיינים והסגנונות הכלליים המותאמים אישית

בסדר, הגיע הזמן לגרום לדף הזה להראות מדהים!

בחלק זה נלמד כיצד להוסיף מאפיינים מותאמים אישית.

אמנם הגדרת משתני CSS עשויה להימשך זמן מה, אך זה באמת משתלם כאשר האתר מתחבר. הם מושלמים גם כדי לאפשר לך להתאים אישית את צבעי האתר ואת הגופנים תוך שניות ספורות, מה שאני בוחן כיצד לעשות לאחר שנסכם את האתר.

שיעור 7: עיצוב הכותרות והכתוביות

לאחר שקבעתי את כל הטיפוגרפיה הנדרשת, אוביל אותך דרך הכתוביות של עיצוב ועיצוב הכותרות והכתוביות בחלקים שלנו.

שיעור 8: הגדרת קטע המבוא

במהלך הפרקים הבאים זה יהיה די מעשי, אז אל תדאג אם מתחשק לך לצפות מחדש בתוכניות המסך כמה פעמים.

אנו שומרים על הכל בתגובה, משתמשים ב- CSS Grid וצוללים מעט גם לשימוש emביחידות.

זוהי הדוגמה המושלמת שבה CSS Grid זורח ואנחנו נלמד כיצד להשתמש במאפיינים כמו grid-column-gap, grid-template-areasו- grid-template-columns.

קטע מבוא באתר

שיעור 9: עיצוב סגנון השירות

כדי להוסיף מעט עניין, אני מסתכל כיצד נוכל להוסיף background-imageקטע לחלק זה באתר. זו דרך נחמדה לפרק את השנייה ולהימנע מעצם רקע בצבע אחיד בכל מקום, ואני גם מסתכל כיצד תוכל להשתמש background-blend-modeבכדי לשנות את צבע התמונה כדי לשמור על מראה עקבי של האתר שלך.

כבונוס, אנו גם נלמד כיצד לעצב כפתורים כאשר מעבירים אותם או נבחרים כאשר נעבור לדף.

מדור השירותים באתר

שיעור 10: החלק אודותיי

התקדמות נהדרת! אז זה החלק החשוב עלי. זה די דומה למבוא מכיוון שאנחנו הולכים להשתמש ב- CSS Grid, אבל להזיז את התמונה לצד ימין ולמצוא דוגמה שימושית frליחידת CSS .

החלק אודותיי באתר

שיעור 11: התיק

מדור התיקים

בתכנית זו אני אראה כיצד לבנות את קטע התיקים שלנו כדי להציג כמה מעבודותינו הגדולות. ואנחנו אפילו נלמד להשתמש cubic-bezier()בהשפעה נהדרת ומרשימה עם סטיילינג מרחף!

מדור תיק עם פריט מודגש

שיעור 12: הוספת הסמלים החברתיים עם Font Awesome

צוות השחקנים הזה יהיה מתוק וקצר, כך שתוכלו לנוח קצת וללמוד כמה טיפים וטריקים מהירים.

הוספת קישורי מדיה חברתית עם אייקוני פונט מדהים היא משב רוח. אנו יכולים לעשות זאת באמצעות תג ואז להוסיף שם מחלקה של סמל שברצונך להוסיף.

כדוגמה, הנה כיצד להוסיף אייקון עבור GitHub ברגע שיש לך קישור Font Awesome בסימון שלך.

שיעור 13: עיצוב הכותרת התחתונה

הכותרת התחתונה

בעוד שהסמלים נמצאים במקום, עלינו להוסיף עוד סטיילינג כאן כדי להגדיר אותם כמו שאנחנו צריכים.

עם מעט שימוש ב- Flexbox והסרת הסטיילינג מהרשימה list-style: noneכשהיא יחסית ישרה.

שיעור 14: הגדרת סגנונות הניווט

השארנו את הניווט עד אחרון מכיוון שלעתים קרובות זה אחד מאותם דברים פשוטים שיכולים לקחת הכי הרבה זמן להגדיר ולעשות נכון.

לאחר השלמתם, הניווט יהיה מחוץ למסך, אך יחליק פנימה כאשר משתמש לוחץ על סמל ההמבורגר. הצעד הראשון הוא לעצב את זה כמו שאנחנו רוצים שייראה, ואז נוכל לדאוג שזה יעבוד בפועל!

תפריט ניווט מעוצב

שיעור 14: יצירת ההמבורגר

יורה לראש הדף עם חץ המדגיש את סמל המבורגר

בשידור מסך זה תלמד כיצד להוסיף תפריט המבורגר למעבר לתצוגת הניווט. זה לא סמל או SVG, אלא CSS טהור.

אנחנו הולכים לקיים מנהג סיכוי ::beforeו ::after-סלקטורים פסבדו, מעבר, ו, מאז זה לא קישור אלא button, אנחנו גם צריכים להגדיר את הסמן השונה כשאנו בריחוף מעל הסמל המבורגר כדי לציין שהוא ניתן ללחוץ עם cursor: pointer.

שיעור 15: הוספת ה- JS

עם מעט JavaScript, אני אלווה אתכם ביישום של מעבר ממש נחמד וחלק מהמסך הראשי שלנו לחלון הניווט בלחיצה על תפריט ההמבורגר.

תפריט פתיחה / סגירה של אנימציה

אני גם בודק כיצד אנו יכולים להוסיף גלילה חלקה עם CSS רק באמצעות scroll-behavior: smooth. כן, זה באמת כל כך פשוט! זה גם יוצר ציוץ נהדר ל- Today I Learned (TIL). אתם מוזמנים לשלוח אליכם TILs ל- @ scrimba ואני בטוח שהם ישמחו באמת לצייץ אותם מחדש!

שיעור 16: יצירת דף פריט תיק

עם עמוד הבית עטוף, הגיע הזמן לעבוד על דף תיק תבניות שניתן להשתמש בו כדי לתת פרטים נוספים על כל אחד מהפרויקטים שאתה מכניס לתיק העבודות שלך.

אנו גם נלמד כיצד לקשר אותו בצורה חלקה לדף הראשי שלנו לחוויית משתמש נחמדה.

דף פריט תיק

שיעור 17: התאמה אישית של הדף שלך

כאן נכנס הקסם של מאפיינים מותאמים אישית של CSS!

בסרטון זה אני בוחן כיצד אנו יכולים להתאים אישית את המאפיינים המותאמים אישית שהקמנו בכדי לשנות את ערכת הצבעים של האתר שלכם תוך שניות, וכיצד נוכל לעדכן את הגופנים במהירות ובקלות גם על מנת להפוך את האתר לשלכם!

שיעור 18: טיפות DigitalOcean - מהן וכיצד להגדיר אחת מהן

בתכנית המסך הזו אנו הולכים לחקור טיפות של DigitalOcean. הן מכונות וירטואליות מבוססות לינוקס ושכל טיפה היא שרת חדש שתוכל להשתמש בו.

זה יכול להיראות מרתיע, אבל הם קלים מאוד להתקנה, ניתנים להתאמה אישית ומגיעים עם הרבה תכונות שימושיות, כמו חומת אש באופן אוטומטי.

לוח מחוונים של DigitalOcean

אני אדבר איתך בכל צעד ושעל כדי שתדע בדיוק איך להגדיר טיפה.

שיעור 19: טיפות DigitalOcean - העלאת קבצים באמצעות FTP

לסיום התהליך כולו, הרשו לי להראות לכם כיצד נוכל להעלות את תיק העבודות לטיפה שיצרנו בפרק הקודם ועכשיו זה מקוון לראות אחרים!

שיעור 20: להתעטף

וזה הכל! השלב הבא שלך יכול להיות להפוך את הדף הזה לכל אודותיך, להוסיף את כל הדוגמאות הרלוונטיות, לספר לנו עליך ולהפוך אותו לחי בטיפה של DigitalOcean.

לאחר שרכבת את שלך וקיבלת אותו ברשת, אנא שתף ​​את תיק העבודות שלך איתי ועם הצוות ב- Scrimba! תוכלו למצוא אותנו ב- @KevinJPowell ו- @ scrimba בטוויטר, ונשמח מאוד לשתף את מה שאתם מתכננים!

בדוק את הקורס המלא

זכרו, קורס זה הוא לגמרי בחינם. עבור אל Scrimba עכשיו ותוכל לעקוב אחריה ולבנות אתר שנראה נהדר!