כיצד לראות תצוגה מקדימה חיה של הקוד שלך באמצעות codepen

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

CodePen.io

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

לאחר שתעשו זאת תוכלו ליצור “עט” על ידי לחיצה על כפתור “עט חדש” בפינה השמאלית העליונה של המסך.

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

כך ייראה העט שלך עם קוד כלשהו בו (באדיבות פרויקט מחנה קוד חופשי שנקרא עמוד מחווה):

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

כאן תוכלו לעבור על הכרטיסיות HTML, CSS ו- JavaScript כדי להוסיף מידע מסוים. בלשונית HTML תוכל להוסיף מידע מטא, דברים שצריכים להיכנס כרטיסייה וכן הלאה. תחת CSS תוכל להוסיף מעבדי מקדמי CSS כמו LESS ו- Sass. לא רק זה, אבל אתה יכול להוסיף CSS חיצוני כמו Bootstrap ו- Foundation. בכרטיסייה JavaScript, אתה יכול להוסיף מעבד מקדים של JavaScript כמו Babel או CoffeeScript. בנוסף, באפשרותך להוסיף מסגרות JavaScript חיצוניות כמו Angular, React, Lodash, D3 וכן הלאה.

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

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

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