Învățarea codării este întotdeauna interesantă și distractivă pentru toată lumea, iar când vine vorba de a păși în lumea programării, majoritatea oamenilor încep cu cel mai simplu lucru HTML și CSS. Călătoria de codare a fiecărui începător în frontend începe cu aceste două blocuri de bază și trebuie să fii creativ atunci când vine vorba de proiectarea unei aplicații frumoase.
La început, începătorilor le place să facă butoane, să adauge link-uri, să adauge imagini, să lucreze cu layout-ul și o mulțime de lucruri interesante în designul web, dar când vine vorba de a face un proiect folosind doar HTML și CSS, ei se blochează și sunt confuzi cu privire la ceea ce ar trebui să facă pentru a practica toate aceste lucruri. La urma urmei, cunoștințele lor sunt limitate doar la HTML și CSS. Nu contează ce, după ce ați învățat totul, la un moment dat vă veți da seama că realizarea unui proiect este importantă pentru a exersa abilitățile HTML și CSS. Trebuie să verificați modul în care HTML și CSS lucrează împreună pentru a proiecta o aplicație frontend frumoasă. Așadar, întrebarea este care sunt câteva proiecte prietenoase pentru începători pe care le puteți construi pentru a exersa tot ceea ce ați învățat…Să discutăm despre asta.
O pagină de omagiu
Cel mai simplu site pe care îl puteți face ca începător este o pagină de omagiu a unei persoane pe care o admirați în viața dumneavoastră. Ea necesită doar cunoștințe de bază de HTML și CSS. Faceți o pagină web în care să scrieți despre acea persoană adăugând imaginea sa. În partea de sus a paginii web, adăugați imaginea și numele persoanei, iar mai jos dați layout pentru restul detaliilor. Puteți folosi paragrafe, liste, linkuri, imagini cu CSS pentru a-i da un aspect decent. Adăugați o culoare de fundal și un stil de font adecvat pe pagina dvs. web. Cele mai multe dintre părți le puteți realiza folosind HTML, dar pentru a-i da un aspect mai bun folosiți puțin CSS. Luați ajutor din linkul dat mai jos.
- Pagina mea de omagiere
- Pagina de omagiere a lui Steve Jobs
- Pagina de omagiere a lui Albert Einstein
Pagină web care include un formular
Formularele sunt întotdeauna o parte esențială a oricărui proiect și veți lucra cu o mulțime de formulare în majoritatea aplicațiilor, așa că de ce să nu le exersați mai devreme și să vă testați cunoștințele. Odată ce v-ați familiarizat cu câmpul de introducere sau cu etichetele de bază din HTML pentru a crea un formular, faceți un proiect folosind toate aceste etichete. Cum să folosiți un câmp de text, o casetă de selectare, un buton radio, o dată și alte elemente importante într-un singur formular. Veți învăța cum să dați o structură adecvată unei pagini web în timp ce creați un formular. Cunoștințele de HTML/HTML5 sunt suficiente, dar puteți folosi un pic de CSS pentru a face ca proiectul să arate mai bine. Luați ajutor din link-urile date mai jos.
- Formular de sondaj
- Formular de vibrații bune
- Formular de sondaj
Site web parallax
Un site web parallax include imagini fixe în fundal pe care le puteți menține la locul lor și puteți derula în jos pe pagină pentru a vedea diferite părți ale imaginii. Cu cunoștințe de bază de HTML și CSS, puteți da un efect parallax unui site web. Utilizarea efectului parallax în proiectarea web este foarte populară și conferă un aspect frumos paginii web. Încercați și împărțiți întreaga pagină în trei sau patru secțiuni diferite. Setați 3-4 imagini de fundal, aliniați textul pentru diferite secțiuni, setați marja și umplutura, adăugați background-position și alte elemente și proprietăți CSS pentru a crea un efect parallax. Puteți lua ajutor de la Parallax Website.
Landing Page
O landing page este un alt proiect bun pe care îl puteți realiza folosind HTML și CSS, dar necesită o cunoaștere solidă a acestor două blocuri de construcție. Veți folosi multă creativitate în timp ce realizați o landing page. Veți exersa cum să adăugați footer și header, să creați coloane, să aliniați elementele, să împărțiți secțiunile și o mulțime de lucruri. Va trebui să folosiți CSS cu atenție, ținând cont de faptul că diferitele elemente nu se suprapun unele peste altele. De asemenea, veți avea grijă de combinațiile de culori, padding, margin, spațiul dintre secțiuni, paragrafe și cutii. Combinațiile de culori trebuie să se potrivească bine între ele pentru diferite secțiuni sau fundaluri. Vă puteți ajuta din linkul dat mai jos.
- Full Screen Landing
- Landing Page
Restaurant Website
Mostrați-vă cunoștințele solide de HTML și CSS creând o pagină web frumoasă pentru un restaurant. Realizarea unui layout pentru un restaurant va fi un pic mai complicată decât exemplele de proiecte anterioare. Veți alinia diferitele produse alimentare și băuturi folosind o grilă de layout CSS. Veți adăuga prețuri, imagini și va trebui să dați un aspect frumos și să folosiți o combinație adecvată de culori, stil de font și imagini. Puteți adăuga o galerie de imagini pentru diferite produse alimentare, puteți adăuga, de asemenea, imagini glisante pentru un aspect mai bun. Adăugați link-uri pentru redirecționarea către pagini interne. Fă-l responsive setând un viewport, folosind media queries și grid. Puteți lua ajutor de la Restaurant Website.
Pagina web a unui eveniment sau a unei conferințe
Puteți face o pagină statică care să țină un eveniment sau o conferință. Oamenii care sunt interesați să participe la conferință creați un buton de înregistrare pentru ei. Menționați diferite link-uri pentru vorbitor, locul de desfășurare și program în partea de sus, în secțiunea de antet. Descrieți scopul conferinței sau categoria de persoane care pot beneficia de această conferință. Adăugați pe pagina dvs. web o introducere și imagini ale vorbitorului, detalii despre locul de desfășurare și scopul principal al conferinței. Împărțiți pagina în secțiuni, adăugați antet și subsol prezentând meniul. Folosiți o culoare de fundal adecvată care să se potrivească bine între ele pentru diferitele secțiuni. Alegeți un stil de font decent și o culoare de font care să se potrivească cu tema paginii dvs. web. Este nevoie de cunoștințe HTML/HTML5 și CSS în profunzime. Puteți lua ajutor de la Conferința de stil.
Pagină magazin de muzică
Dacă sunteți un iubitor de muzică puteți face o pagină web pentru aceasta. Aceasta necesită cunoștințe de HTML5/CSS3. Adăugați o imagine de fundal potrivită care să descrie scopul sau despre ce este vorba în pagină. În secțiunea header adăugați diferite meniuri. Adăugați butoane, link-uri, imagini și unele descrieri despre colecția de melodii disponibile. În partea de jos menționați link-urile pentru cumpărături, magazin, carieră sau detalii de contact. De asemenea, puteți adăuga și alte caracteristici pe paginile dvs. web, cum ar fi o opțiune de încercare, carduri cadou sau abonament. Fă-l responsive setând viewport sau folosind media queries și grid. Puteți lua ajutor de la myTunes.
Site de fotografie
Dacă aveți cunoștințe aprofundate de HTML5 și CSS3, puteți face un site de fotografie responsive de o pagină. Folosiți flexbox și media queries pentru responsivitate. Adăugați numele companiei cu o imagine (legată de fotografie) în partea de sus (landing page). Mai jos, prezentați munca dvs. adăugând mai multe imagini. Menționați detaliile de contact ale fotografului în partea de jos (footer). Adăugați un buton pentru a vă vizualiza lucrările. Acest buton vă va duce direct în jos la secțiunea de imagini. Trebuie să aveți grijă de marjă, padding, combinație de culori, font-size, font-style, dimensiunea imaginii și stilizarea unui buton. Puteți lua ajutor de la Acme Photography.
Portofoliu personal
Cu cunoștințe de HTML5 și CSS3, puteți, de asemenea, să vă creați portofoliul. Expuneți-vă mostrele de muncă și abilitățile în portofoliul dvs. cu numele și fotografiile dvs. Puteți, de asemenea, să vă adăugați CV-ul acolo și să vă găzduiți portofoliul complet pe contul GitHub. În secțiunea de antet menționați câteva meniuri precum despre, contact, muncă sau servicii. În partea de sus adăugați una dintre imaginile dvs. și prezentați-vă acolo. Mai jos adăugați câteva mostre de muncă și la final (footer) adăugați informații de contact sau contul de social media. Vă puteți ajuta din Portofoliul personal.
Documentație tehnică
Dacă aveți câteva cunoștințe de Javascript atunci puteți crea o pagină web de documentație tehnică. Este nevoie de cunoștințe de HTML, CSS și javascript de bază. Împărțiți întreaga pagină web în două secțiuni. În partea stângă creați un meniu cu toate subiectele listate de sus în jos. În partea dreaptă trebuie să menționați documentația sau descrierea pentru subiecte. Ideea este ca odată ce faceți clic pe unul dintre subiectele din secțiunea din stânga să se încarce conținutul din dreapta. Pentru a face clic, puteți utiliza fie javascript, fie opțiunea de marcaj CSS. Nu trebuie să o faceți prea fantezistă, dați-i doar un aspect simplu și decent, care să arate bine pentru documentația tehnică. Puteți lua ajutor de la Technical Documentation.
Helpful Link: 10 sfaturi pentru un design web eficient în 2019
