טיפים שימושיים

הדרכות HTML ו- CSS

Pin
Send
Share
Send
Send


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

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

כן וורדפרס מפנק אותנו ומאפשר לנו ליצור פרויקטים פשוטים ללא ידיעת שפות תכנות.

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

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

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

אז בואו נלך, מאיפה להתחיל?

1. אני חושב שאתה צריך להתקין קודם כל עורך נוח ונוח לקוד. אחד המובילים כרגע הוא קוד ה- VSC או Visual Studio של מיקרוסופט

אני ממליץ להוריד את העורך מ-. האתר והנה קישור ההורדה.

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

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

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

1. HTML Academy

משאב מגניב למי שמתחיל מהתחלה.

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

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

HTML, CSS למתחילים מאפס ומחוצה לה.

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

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

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

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

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

2. קורסים בווידיאו.

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

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

הקורס של מיכאיל רוסאקוב די אינפורמטיבי ושהוא טוב בשיעורי בית.

קורס HTML ו- CSS בחינם

יותר משש שעות של שיעורים + תרגילים

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

הדרך שלי ללמוד HTML ו- CSS

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

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

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

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

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

הדרכות מקוונות!

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

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

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

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

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

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

ההדרכה השנייה עליה ברצוני להמליץ ​​היא פריסת האינטרנט תחילת העבודה על ידי wayup.in

זה משולם, זה לדעתי 9 דולר. אבל את הכסף הזה אתה משלם עבור עזרתו של מנטור שבודק את ה- TK שלך ומוביל אותך.

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

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

אבל הקורס ממש טוב ופועל, אז אני ממליץ עליו בבטחה למתחילים.

זה כנראה כל מה שרציתי לומר לך היום.

בסופו של דבר, עוד כמה טיפים כיצד ללמוד בצורה הטובה ביותר ומה לעשות הלאה.

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

שלבי לימוד HTML ו- CSS

הכי נוח לפרק את כל התהליך לשלבים:

  • הצגת HTML ולמידת היסודות
  • הצגת CSS ומושגי יסוד
  • רמה מתקדמת. לימוד HTML5 ו- CSS3

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

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

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

הדרכות מיטב HTML ו- CSS

והנה המשאבים עצמם שאליהם אתייחס ואשר אני קורא להשתמש בהם באופן פעיל:

  • קורסים של יבגני פופוב
  • קורס Codecademy, HTML & CSS. אנו נשתמש רק בשיעורים. מבחנים ופרויקטים שם משלמים, אנחנו יכולים להסתדר בלעדיהם.
  • HTML Academy. אתה יכול להשתמש בקוד השותף שלי 1115104d039 כדי לקבל הנחה טובה על קורסים מתקדמים.

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

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

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

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

אני מחשיב את אקדמיית HTML כבית הספר החזק והרציני ביותר למשאבים בשפה הרוסית, שם אני לוקח קורסים מתקדמים הזמינים רק במנוי, אבל זה בכלל לא יקר (300 רובל לחודש) לעומת בית ספר לקודים (המחיר הוא 20 עד 30 דולר תלוי במניות המוחזקות). באמצעות קוד השותפים שלי ב- HTML Academy - 1115104d039, אתה מקבל הנחה על המנוי שלך.

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

תוכנית למידה לשליטה קלה ב- HTML ו- CSS

אני מציע לך לדבוק בתוכנית זו. עשיתי זאת בעצמי, אהבתי את התוצאה ואת תהליך הלמידה עצמו.

  1. קורס HTML של E. Popop. מה אתה לומד שם ואיך להשיג אותו, עיין במאמר שלי.
  2. קורס Codecademy, HTML & CSS. יחידה 1, יחידה 2, יחידה 3
  3. HTML Academy, ששת הקורסים הראשונים לפני קורס "היכרות עם CSS", בהמשך
  4. קורס א. פופוב CSS. ראו פרטים במאמר שלי.
  5. קורס Codecademy, HTML & CSS. יחידה 4, יחידה 5, יחידה 6. בשלב זה נסיים להשתמש ב- Codecademy.
  6. HTML Academy, החל בקורס הכרות עם CSS 5 שנים, ומסתיים בקורס הקלדת טקסטים CSS
  7. קורס: תרגול HTML5 ו- CSS3
  8. HTML Academy, כל הקורסים שנותרו מהדרגה הבסיסית, החל מ"חסום מודל המסמך "ומסתיים בקורס" מבחני סיום. " נראה כי יש לקחת את מסלול הפריסה של פופוב לאחר HTML Academy (כלומר החלף את שני הצעדים האחרונים). נקודת מבט זו ראויה גם לכבוד, אך נראה לי שתקבל אחריות רבה יותר בקורסי קורסים מ- HTML Academy לאחר שתפתח את הדפים שהציע יוג'ין, וזה ייזכר טוב יותר ויותר.
  9. רמה מתקדמת. יש לנו רק את בית הספר HTML Academy בו אנו צריכים לעבור רמות נוספות על ידי מנוי. אל תשכח מקוד השותפים שלי שציינתי לעיל. למדו קורסים מתקדמים ומעבדי קדם. בזמן כתיבת שורות אלה אני בקורס מעבר צבע ליניארי. אני מתכנן לקחת את כל הקורסים האלה עד הסוף.

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

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

קורסים ב- HTML5 ו- CSS3, פריסה מודרנית ועיצוב אתרים

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

  • יסודות פריסת אדפטציה ב- HTML5 ו- CSS3
  • HTML5 ו- CSS3 מ- Scratch ל- Pro
  • תרגול פריסת אתרים למכשירים ניידים
  • עיצוב אתרים: קורס מעשי ביצירת דף נחיתה
  • מעצב אתרים הוא בעל מקצוע. צור פריסות פופולריות
  • מגמות לפיתוח אתרים
  • הכל על יצירת אתרים
  • תוכנית ליצירת שלב אחר שלב
  • JavaScript & jQuery מאפס ועד מקצוענים
  • סודות SEO מעשי
  • PHP מודרני: עבודה עם VKontakte
  • למדו כיצד ליצור דפי מנוי ומכירות יפים, מודרניים.
  • בית ספר לבלוגים

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

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

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

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

שלב ראשון

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

שלב רביעי:

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

  • טקסט נשגב
  • אטום
  • קוד סטודיו חזותי

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

שלב חמישי:

ולבסוף, כמה משאבים מועילים יותר:

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

מפתח קדמי ב- N-iX,
מרצה בבית הספר למחשבים הלל.

צפו בסרטון: מדריך HTML - שיעור 1: תגיות בסיסיות (אַפּרִיל 2020).

Pin
Send
Share
Send
Send