סקירה - קורסים של Flexbox בנושא Skillshare


האם אתה מעוניין ב- Flexbox. במאמר זה אני סוקר שני קורסים של Skillshare העוסקים באותו נושא, היסודות של מאפייני Flexbox. בדומה ל- CSS3 אחר, אתה זקוק לבסיס של המאפיינים והערכים של CSS לפני שתוכל להתחיל לבנות אתרים עם Flexbox.


CSS: יסודות Flexbox
איסמעיל ראג'י, מהנדס תוכנה, מפתח אתרים ומדריך
משך: 11 דקות

בקורס זה בן 11 דקות, איסמאל ראג'י דן בנכסי Flexbox. כמובן שזה לא מסלול מעמיק אלא סיכום והדגמה מהירה של המאפיינים. Ismall משתמש בעורך html של תצוגה מפוצלת כדי להדגים כל מאפיין Flexbox וערכיהם. לאחר מכן הוא דן כיצד להשתמש ב- Flexbox ללא שאילתות מדיה לעיצוב אתרים מגיב. לבסוף הוא שולח את צופיו ל- Flexbox Froggy, משחק מקוון של Flexbox.




CSS Flexbox: השיעור השלם
פיטר סומרוף, למד קידוד ללא מוך!
משך: שעתיים

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

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

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

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

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

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

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

"The Most Advanced Airtable I've Ever Seen!" (אוגוסט 2022)



מאמר תגיות: סקירה - קורסים של פלקסבוקס בנושא מיומנות, אומנות ועיצוב דיגיטלי, קורס מיומנות Flexbox קורס וידאו מקוון