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

לאחרונה פרסמנו קורס בן שעתיים בערך הYouTube הספרדי של freeCodeCamp.org שידורך אתך בצעד אחר צעד בבניית שלושה פרוייקטים בעזרת HTML, CSS ו JavaScript. אתה תתעמל על הכישורים שלך על ידי בניית סרגל הניווט הגמיש עם תפריטים מורד, סליידר, ודף ההגעה עם מודל מותאם אחראי.

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

ג 'ורדן אלקסנדר קרוס גרסי מלמד את הקורס הזה. הוא מפתח רשת שאוהב לשתף את הידע שלו וללמד אחרים על העולם המדהים של CSS.

💡 טיפה: תשימו לב שהקורס מתמקד בHTML וCSS אך גם דורש ידע בסיסי של JavaScript על מנת ליישם את האינטראקציות.

HTML, CSS, ו JavaScript

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

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

💡 טיפ: אתרים שמתאימים לגדלי מסך שונים נקראים "אתרים תגובתיים".

רגילים לכתוב CSS בקובץ חיצוני שאנחנו מתייחסים אליו כ־"קובץ סגנונות". לאחר מכן, אנחנו מקשרים את הקובץ הזה לקובץ ה־HTML ומחליטים את כל הסגנונות לאלמנטים המתאימים ב־HTML בהתאם למזהים והתכונות של CSS.

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

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

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

פרויקטים ב־HTML, CSS ו־JavaScript בספרדית

נהדר. עכשיו שיש לך יותר מידע על HTML, CSS ו־JavaScript, בוא נראה את הפרויקטים שתבנה במהלך הקורס.

פרויקט 1: סרגל ניווט

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

💡 טיפ: האפשרויות הראשיות תמיד יוצגו. כאשר המשתמש לוחץ על "אודות" או "פרויקטים", תפריט נפתח עם אפשרויות נוספות יופיע.

גרסת שולחן עבודה

כאן ניתן לראות את גרסת שולחן העבודה.

גרסה ניידת

זוהי הגרסה הניידת שתראה במכשירים קטנים.

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

פרויקט 2: סליידר

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

💡טיפ: סליידרים מועילים לשיתוף משוב משתמשים, ציטוטים וביקורות.

פרויקט 3: דף נחיתה

לבסוף, תבנה דף נחיתה שלב אחר שלב עם CSS Grid.

כאשר המשתמש לוחץ על כפתור "הצטרף אלינו!", מודאל מותאם אישית יופיע. תיישם מודאל זה עם HTML, CSS ו-JavaScript שלב אחר שלב.

אם אתה מוכן להתחיל לתרגל את כישורי ה-HTML, CSS ו-JavaScript שלך, בדוק את הקורס בערוץ ה-freeCodeCamp.org ספרדי YouTube:

✍️ קורס שנוצר על ידי ג'ורדן אלכסנדר קרוז גרסיה (AlexCG).