Pentru acest mini-proiect, veți analiza pagina web existentă și o veți recrea din nou. Nu vă faceți griji dacă legăturile nu merg nicăieri și formularul de căutare nu va funcționa atunci când îl trimiteți. Scopul este să începeți să vă gândiți la modul în care elementele sunt plasate pe pagină, la modul de aliniere și stilizare. Poate că unii dintre voi încearcă să creeze ceva folosind HTML pentru prima dată (incitant, nu-i așa?).
Utilizați Developer Tools din browser-ul (click-dreapta oriunde pe pagină și faceți clic pe elementul „element de a examina“), ei vor deveni cei mai buni prieteni. Creați o pagină într-un fișier text cu extensia .html, și deschideți-l în browser-ul dvs. pentru a vedea cum arată (sau încercați CodePen sau jsfiddle.net).
Încercați acest lucru înainte de a începe
Aceste abilități vor fi utile atunci când începeți să scrieți codul. Puteți să le încercați sau, cel puțin, asigurați-vă că știți cum să faceți acest lucru:
- Două moduri de a muta o div în jurul unei pagini
- Blocați div în partea de jos sau în partea de sus a paginii
- Determinați culorile unei pagini existente
- Obțineți adresa URL a imaginii dintr-o pagină existentă
- Aliniați elementul în centru (orizontal)
- Identificați trei moduri în care puteți include stiluri CSS pe o pagină
- Înțelegerea modului de utilizare a clasei și a id-ului pentru a atribui stilurile CSS elementelor specifice dintr-o pagină
- Creați un formular foarte simplu (chiar dacă nu duce nicăieri)
Configurarea depozitului Github pentru proiectul dvs. (opțional)
Aceste instrucțiuni vor fi aceleași pentru fiecare proiect pe care îl executăm. La început, acestea pot părea ciudate (mai ales dacă nu știți deja nimic despre Git, vom completa acest lucru mai târziu), dar nu vă faceți griji - veți fi confortabil cu ei, deoarece veți face aceste acțiuni de mai multe ori. Dacă ați greșit ceva - nu vă faceți griji și nu vă faceți griji, poate fi amânată pentru o vreme. Codul de scriere este mai important acum decât Git!
Efectuați comiterea (salvarea) README actualizată în depozitul dvs. pe Github utilizând următoarele comenzi:
Când lucrați la proiecte, probabil că rulați comenzile git add + git commit de mai multe ori. Înainte de a vă pregăti să trimiteți modificări la Github cu comanda push git.
Ar trebui să vedeți modificările de pe pagina dvs. README pe Github după actualizarea paginii.
Dacă încă nu se simt confortabil folosind Git din linia de comandă, puteți să faceți clic pe butonul „Editare“ în interfața web Github și editați fișierul direct pe site. Acest lucru este acoperit în a doua parte a articolului menționat mai sus cu privire la modul de a crea un depozit
Notă: Toate comenzile Git să fie efectuate în interiorul directorul de proiect (în cea în care ați introdus init git), altfel veți primi o eroare în răspunsul!
Bine, asta e destul pentru acum, cu noi Git - e timpul să scriem codul!
Versiune ușoară: creați o pagină de pornire Google.com
(cel mai simplu, cu un singur câmp de căutare).
În directorul proiectului, creați un fișier index.html
- sfaturi:
- Nu fi perfecționist! Tu doar încercarea de a face să arate ca google.com, și nu pe deplin pus să lucreze ca un motor de căutare, iar pagina nu arata ca o copie completă, pixel cu pixel. Orice meniu vertical, sau care prezintă o formă sau luminile Hover trebuie ignorate.
- UTILIZAȚI GOOGLE! Voi, cel mai probabil, vă veți întâlni cu orice obstacole, pentru a înțelege independent ceea ce nu puteți. Faceți ce fac dezvoltatorii în acest caz. Google problema ta!
- Dacă sunt umplute cu iritare, încercarea de a obține un câmp de buton sau de intrare pentru a arăta modul în care doriți (de exemplu, ei pur și simplu nu-și schimbă aspectul lor), uita-te in css-proprietate -webkit-Aspect: nici unul; sau -moz-aspect. dacă utilizați Firefox.
Pentru început, trebuie doar să plasați elementele de bază pe pagină (imaginea logo-ului și formularul de căutare), apoi să le setați pe orizontală. Puteți descărca logo-ul Google sau puteți folosi direct linkul în interiorul etichetei .
Apoi, faceți bara de navigare în partea de sus a paginii, adăugați mai întâi conținutul și apoi încercați să o poziționați. Vedeți cum să creați un panou orizontal utilizând CSS. dacă aveți probleme cu acest lucru.
În cele din urmă, creați un subsol care ar trebui să fie foarte similar cu bara de navigare de sus.
Trimiteți proiectul dvs. către Github urmând instrucțiunile de mai sus!
Versiune completă (opțional): creați o pagină cu rezultatele căutării Google.com
Resurse suplimentare
Această secțiune conține legături utile cu materiale suplimentare. Ele nu sunt necesare, deci considerați-le utile dacă doriți să mergeți mai adânc în subiect
Dacă vă simțiți nesigur în ceea ce privește înțelegerea HTML și CSS, este normal! Până când trebuie să fii expert în toate astea. Aceste resurse ar trebui să vă ajute dacă doriți să vă consolidați cunoștințele dobândite și să înțelegeți ceea ce este cunoscut:
Articole similare
Trimiteți-le prietenilor: