כיצד ליצור אתר אינטרנט חלק V: משאבים נוספים

השבוע הראינו לכם כיצד ליצור אתר אינטרנט באמצעות HTML ו-CSS... אבל מה עכשיו? הנה כמה משאבים ושיטות נוספים שבהם תוכל להשתמש כדי ללמוד עוד.

דבר ראשון: אם אתה רוצה את ההערות עבור כל השיעורים כקובץ PDF, אתה יכולהורד אחד כאן.

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

אל תהססו להשתמש במנוע החיפוש הרצוי כדי ללמוד עוד על רכיבי HTML שונים, מאפייני CSS או סתם טריק מגניב שאתם יודעים לתאר. מפתחי אתרים אחרים מוכנים לעתים קרובות לשתף פרטים המסבירים כיצד הם השיגו משהו. במהלך החיפוש שלך, סביר מאוד שתתקל בתוצאות שיפנו אותך אל W3Schools. הW3 שוטיםאתר האינטרנט טוען (אולי בצורה דרמטית מדי) ש-W3Schools הוא דבר רע. עם זאת, זה לא מושלם, אז קח את זה עם גרגר מלח. אתר כמוHTML Dogמהווה אלטרנטיבה נחמדה.

השלב ההגיוני הבא לאחר לימוד HTML ו-CSS הוא להרים קצת JavaScript. למרבה המזל, יש לנו אותך מכוסה עם שלנוללמוד לקוד שיעורי. זה ילמד אותך את היסודות של תכנות מונחה עצמים וכיצד לעשות כמה דברים בסיסיים עם JavaScripts. בעתיד אנו מקווים להתמודד עם תכנות בצד השרת עם PHP ו-MySQL, אבל אנחנו עדיין לא שם. כמו תמיד, אתה יכול לבקר בעמוד בית ספר הלילה של Lifehackerכדי לבדוק את כל השיעורים שהרכבנו.

כל זאת, בואו נסתכל על כמה משאבים אחרים שבהם תוכלו להשתמש כדי ללמוד עוד על CSS ו-HTML ולשפר את הכישורים שלכם.

(אדם פאש קופץ לכאן.) אפילו יותר טוב מ-View Source (מתואר בסרטון למעלה), תרצה להכיר את כלי פיתוח האינטרנט הטובים ביותר של הדפדפן שלך. בדפדפנים מסוימים, כמו כרום או ספארי, מובנים כלי מפתחים טובים באמת. בדפדפנים אחרים, כמו פיירפוקס, תרצה להתקין אתתוסף Firebug.

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

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

החלק הכי טוב? אתה יכול לשחק עם ה-CSS בשידור חי בעמוד, להוסיף מאפיינים, לדחוף פיקסלים ולשנות כל דבר שתרצה לראות איך זה עובד, מה מאפיין מסוים עושה, וכן הלאה. בצילום המסך למעלה, תוכלו לראות ששיניתי את צבע הכותרת של הפוסט הזה והגדלתי את גודל הגופן ל-50px. אני מבין שאנחנו סוג של קוברים את זה בפוסט משאבים נוספים, אבל לדעתיזהו הכלי היחיד הטוב ביותר בערכת מפתחי אתרים. אל תהססו להשתמש בו כדי לחטט בדף ולשחק עם קוד המקור. (השינויים הם רק מקומיים בדפדפן שלך; בפעם הבאה שתרענן את הדף, הכל יחזור לקדמותו.)

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

משאבים מקוונים

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

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

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

• תָכנִית אָב- Blueprint היא עוד מסגרת CSS שהיא, אולי, קצת יותר גמישה מ-Primary ומתרכזת בקיצוץ בכל זמן הפיתוח שלך. זה לא רק עוזר בפריסות, אלא גם עוזר לך ליצור בקלות כפתורים, כרטיסיות ורכיבי עמוד אחרים.

• 3 טכניקות CSS3 מתקדמות שכדאי ללמוד- זה רק מאמר, אבל הוא ילמד אותך שלוש טכניקות ב-CSS3 שאולי תרצה לדעת: בוררים מתקדמים, אנימציה ושאילתות מדיה. אנימציה, במיוחד, מגניבה מאוד. השניים האחרים מעשיים.

ספרים

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

• CSS: המדריך החסרמאת דיוויד סוייר מקפרלנד

• CSS: המדריך הסופימאת אריק א. מאייר

• HTML ו-XHTML: המדריך הסופימאת צ'אק מוסיאנו וביל קנדי

• ראש HTML עם CSS ו-XHTMLמאת אריק טי פרימן ואליזבת פרימן

• HTML עבור Dummiesמאת אנדי האריס

יש לך משאבים נהדרים אחרים ללימוד HTML ו-CSS? שתפו אותם בתגובות!

(function(){var w = window,amznAsin = (w.amznAsin && w.amznAsin.constructor === אובייקט) ? w.amznAsin: {};amznAsin["0470537558"] = "0470537558";w.amznAsin = amznAsin;})();