Cod propriul site

v-ați dorit vreodată să învețe cum să proiecteze pagini web sau de a face un site online? Astăzi, vă vom arăta cum să vă construiți propriul site personal! Check out video tutorial pentru a viziona Juni Instructor Maya te plimbi prin fiecare pas din drum.

citiți mai departe pentru mai multe informații despre importanța învățării dezvoltării web, un ghid pas cu pas pentru a însoți videoclipul și pentru a afla despre instrumentele pe care le puteți utiliza pentru a vă îmbunătăți și mai mult experiența de dezvoltare web.

amintiți-vă:

  • site-ul din acest tutorial este doar un exemplu de proiect în scopuri didactice. Înainte de a începe, rețineți că minorii nu ar trebui să posteze informații personale online, cum ar fi numele dvs. complet, adresa sau numărul de telefon! De asemenea, aveți grijă când încărcați fotografii personale online.
  • dacă nu sunteți sigur ce este bine să încărcați, verificați întotdeauna cu un adult.

pentru cine e asta?

rezultatele învățării pentru site-ul personal al proiectului de codificare HTML/CSS începător.
aceste informații despre proiect și rezumatul rezultatelor învățării vă vor ajuta să decideți dacă acest proiect de codare HTML/CSS este potrivit pentru dvs.

acest proiect se încadrează în clasa noastră de codificare JavaScript Level 1 pentru copii. Acest începător HTML / CSS tutorial este pentru studenții care doresc un proiect provocare mediu, aproximativ 121 de linii de cod lung. Vă va ajuta să aveți o înțelegere de bază a modului în care funcționează HTML și CSS în prealabil, dar dacă sunteți complet nou, vă explicăm și mai multe elemente de bază în acest videoclip!

acest tutorial este excelent pentru începători în codificare, în special pentru cei interesați de design sau artă. Vă recomandăm ca elevii să fie 12 ani sau mai în vârstă să urmeze de-a lungul.

pentru rezultatele învățării, Veți obține o mulțime de practici cu div, liste, link-uri, poziție, afișare, text (h1/h2/p), fonturi și CSS general. Se estimează că acest proiect vă va dura aproximativ 40 de minute sau mai mult, în funcție de cât de creativ Obțineți, dar ar trebui să vă mișcați mai repede sau mai lent în ritmul propriu!

De Ce Să Înveți Dezvoltarea Web?

în zilele noastre, nu trebuie să cunoașteți dezvoltarea web sau codificarea pentru a crea un site web. Spre sfârșitul acestui articol, vă vom arăta câțiva creatori de site-uri drag-and-drop care vor face procesul incredibil de ușor de făcut. Deci, de ce ar trebui să înveți dezvoltarea web? E o întrebare grozavă.

personalizare nelimitată

toate instrumentele ușoare de creare a site-urilor web sunt de fapt limitate. Acestea vă oferă un set de teme și pluginuri care sunt foarte ușor de utilizat pentru începători – atâta timp cât nu este nevoie să le modificați.

când trebuie să modificați o temă sau să faceți ceva mai personalizat cu site-ul dvs. web, totuși, veți avea nevoie de cel puțin o înțelegere de bază a codului de dezvoltare web. De exemplu, cu un pic de cunoștințe Javascript, puteți integra aproape orice feed social media în site-ul dvs. web!

codificare cariere& fundații

dacă v-ați gândit vreodată o carieră în codificare, web design și cunoștințe de dezvoltare web vă va oferi, de asemenea, un start cap imens. Dezvoltarea Web ajută copiii și noii coderi interesați de artă și design să-și exploreze pasiunea în timp ce învață și elementele de bază ale codării. Cariera deoparte, există, de asemenea, nenumărate beneficii de calificare de viață pentru învățare de codificare pentru copii.

aplicabil în multe domenii

în cele din urmă, posibilitatea de a vă construi propriul site web este o abilitate valoroasă în era digitală de astăzi. Bloggerii doresc ca dezvoltatorii să le facă bloguri personalizate. Companiile de Internet caută dezvoltatori pentru a construi site-uri de comerț electronic în loc să posteze doar articole pe Amazon.

este o epocă de aur pentru proiectarea și dezvoltarea site-urilor web și un moment minunat pentru a învăța cum să vă construiți propriul site!

să începem!

vom folosi HTML și CSS de bază pentru a învăța cum să facem un site personal simplu.

Demo de proiect

înainte de a începe să scrieți cod, consultați Cum funcționează proiectul nostru finalizat pentru referință. Urmăriți videoclipul pentru a verifica toate caracteristicile site-ului nostru de proiect.

puteți vizualiza, de asemenea, codul nostru soluție de proiect, dacă te blochezi.

ce trebuie să țineți cont înainte de a începe:

  • există un antet de imagine cu text pe ea. Textul are dimensiuni diferite și folosește două fonturi diferite. De asemenea, are un contur alb.
  • secțiunea albă de sub ea are două părți una lângă alta.
  • avem o listă de hyperlink-uri, care se leagă de o altă pagină. Când treceți peste ele se schimbă în albastru.
  • există, de asemenea, o secțiune despre mine cu text.
  • mai jos, există o secțiune de experiență cu un fundal de culoare diferită.

pași pentru a codifica proiectul

pentru a construi site-ul nostru, vom urma această ordine de pași. Urmăriți tutorialul pentru a vedea cum instructorul Maya codifică fiecare parte și urmați împreună cu explicațiile de mai jos.

  1. Adăugați antetul imaginii & textul care merge pe ea.
  2. Creați lista de linkuri pe care doriți să le partajați.
  3. creați secțiunea Despre mine.
  4. creați secțiunea experiență.

Tutorial pas cu pas

Pasul 1: Adăugați antetul imaginii & textul care merge pe el.

  • creați un div cu poziționare relativă pentru a conține imaginea și textul.
  • creați un div pentru a conține textul și utilizați poziționarea absolută pentru a-l plasa pe imagine.
  • utilizați <h1> și <h3> pentru a adăuga textul.
  • utilizați CSS pentru a modifica fontul textului.
  • utilizați CSS pentru a elimina marginea suplimentară & padding în jurul imaginii.

Pasul 2: Creați lista de linkuri pe care doriți să le partajați.

  • creați un div cu poziționare relativă pentru a conține secțiunea link-uri și despre mine.
  • adăugați umplutură la div.
  • creați un div cu afișaj inline-block pentru a conține lista de linkuri.
  • utilizați <ul> pentru a crea o listă.
  • utilizați <li> și <a> pentru a crea legăturile.
  • utilizați <i> și un link-font minunat pentru a adăuga pictograme.
  • modifica CSS pentru a face sa arate ca originalul.

Pasul 3: Creați secțiunea Despre mine.

  • creați un div cu afișaj inline-block pentru a conține secțiunea Despre mine.
  • utilizați <h3> și <p> pentru a adăuga text.

Pasul 4: Creați secțiunea experiență.

  • creați un div cu poziționare relativă pentru a conține secțiunea experiență.
  • creați un div pentru prima experiență și utilizați <h4> și <p> pentru a adăuga text.
  • adăugați mai multe divs experiență!

următorii pași

mare de locuri de muncă! Acum, nu ezitați să adăugați mai multe secțiuni pe site-ul dvs. web. Unele idei ar putea include o secțiune pentru proiectele la care ați lucrat sau cluburile în care vă aflați. De asemenea, puteți încărca noul dvs. site web pe web folosind paginile Github și Github.

instrumente de creare a paginilor web

mai multe persoane folosesc un instrument de creare a paginilor web pentru a construi un site web

după cum am menționat mai devreme, există mai mulți creatori de site-uri web. Majoritatea celor mai buni constructori de site-uri web sunt creați pentru a eficientiza procesul, oferindu-vă șabloane, interfețe drag-and-drop și orice alte funcționalități de care aveți nevoie pentru a crea un site personal gratuit.

doar pentru că aveți o înțelegere de bază a dezvoltării web nu înseamnă că ar trebui să uitați de aceste instrumente. Acestea vă pot ajuta să găzduiți noul dvs. site web, să găsiți un domeniu personalizat (numele și adresa site-ului dvs. web) și să vă ofere șabloane, teme și pluginuri care vă vor accelera procesul de proiectare web.

având grijă de elementele de bază, aceste instrumente vă oferă șansa de a vă concentra noile abilități de codificare pe personalizarea site-ului dvs. web la perfecțiune! Sau-chiar dacă doriți să construiți totul de la zero — aceste instrumente vă pot oferi câteva idei grozave despre ce să construiți și cum să îl construiți.

iată câteva dintre cele mai populare instrumente pentru crearea de pagini web:

  • Wix

Wix este unul dintre cei mai ușor de utilizat constructori de site-uri web. Planul lor gratuit este suficient de complet pentru a-l face o opțiune excelentă pentru constructorul de site-uri web pentru copii, atâta timp cât sunteți în regulă cu adresa dvs. URL fiind un subdomeniu al Wix (sitename.wixsite.com). ei au plătit planuri cu prețuri rezonabile dacă depășiți nivelul gratuit.

  • WordPress

deși oamenii o cunosc ca un constructor de site-uri gratuite, ceea ce WordPress este într-adevăr un sistem de gestionare a conținutului (CMS). Într-un sens simplu, diferența este că un constructor de site-uri web este mai ușor de utilizat, dar un CMS oferă mai multe oportunități de personalizare. Deși WordPress în sine este gratuit, poate fi necesar să plătiți pentru unele teme și pluginuri sau pentru găzduire dacă doriți propriul nume de domeniu.

  • Weebly

Weebly este un constructor de site-uri web, la fel ca Wix. Diferența principală este că Weebly oferă mult mai puțină personalizare, făcându-l o opțiune Ușor de utilizat, care este excelentă pentru codificarea copiilor, dar mai puțin probabil să crească odată cu dvs. pe măsură ce abilitățile de construire a site-ului dvs. se îmbunătățesc.Continuați să învățați: Cursuri de dezvoltare Web pentru Copiifelicitări, acum aveți propriul site web! Acesta este un pas interesant pentru care ar trebui să te simți incredibil de mândru. Învățarea nu trebuie să se oprească nici aici.

Keep Learning: Cursuri de dezvoltare Web pentru copii

Juni Learning oferă cursuri de programare Web pentru copii care vă vor oferi abilitățile de care aveți nevoie pentru a vă supraîncărca noul site sau chiar pentru a vă deplasa pentru a construi aplicații web și portofolii. În afara dezvoltării web, predăm, de asemenea, cursuri de codificare pentru copii 8-18 într-o varietate de limbi precum Scratch, Python, Java, C++ și multe altele.

consultați cursurile noastre online pentru copii sau contactați echipa noastră de consilieri Juni pentru a afla ce curs este cel mai potrivit pentru elevul dvs.!

Articles

Lasă un răspuns

Adresa ta de email nu va fi publicată.