Flexbox v CSS in HTML: Namestitev začetnega projekta

V tem vodiču se naučite, kako pripraviti svoj projekt za delo s CSS Flexbox . Pomembno je imeti trdno podlago, preden se poglobite v tehnike postavitve Flexbox. Za razvoj uporabljamo Visual Studio Code , vendar lahko izberete tudi preprost urejevalnik besedil in brskalnik . V naslednjih korakih bomo vzpostavili enostaven projekt, ki vam bo pomagal razumeti in uporabljati Flexbox.

Najpomembnejše ugotovitve

• Uporaba razvojnega strežnika olajša delo na vaših projektih.
• Lahko delate brez ogrodij, da se naučite osnov JavaScripta in CSS-ja.
• Datoteka index.html je osrednja točka vašega projekta, od koder boste delovali.

Korak-za-korakom navodila

Najprej odprite terminal v programu Visual Studio Code ali drugem programu po vaši izbiri. Preden nadaljujete, se prepričajte, da je nameščen Node.js, saj je ključnega pomena za izvedbo NPM ukazov.

Zdaj lahko uporabite NPM paket za strukturiranje projekta. V terminalu vnesite ukaz npx create-v, da začnete postopek ustvarjanja vašega projekta. Vprašali vas bodo, ali želite prenesti paket. Potrdite to.

Nato vnesite ime svojega projekta. Predlagam, da ga imenujete preprosto "flexbox", saj je tema ravno to. Ko vnesete ime, vas bodo vprašali po uporabniškem vmesniku. V tem primeru izberite "Vanilla JavaScript", saj ne bomo uporabljali posebnih ogrodij.

V naslednjem koraku vas bodo vprašali, ali želite uporabljati TypeScript. Tudi tukaj je najbolje izbrati "ne", da ohranite preprostost in se osredotočite na osnovne tehnologije.

Zdaj ste skoraj končali. Preostane vam samo, da preklopite v imenik svojega novega projekta. To storite z ukazom cd flexbox. Tako boste vstopili v mapo, ki ste jo pravkar ustvarili.

Nato izvedite ukaz npm install v terminalu. S tem bodo nameščeni vsi potrebni paketi za vaš projekt.

Ko se to konča, zaženite lokalni strežnik za razvoj z ukazom npm run dev. To bo odprlo vaš projekt in ga pripravilo na lokalnem strežniku.

Zdaj si lahko ogledate ustvarjeno datoteko index.html, ki se nahaja v mapi vašega projekta. Ta datoteka je najpomembnejši del vašega projekta, kjer boste ustvarjali vsebino in strukture.

Naslednje, kar bomo storili, je odstranili privzeti skript, ki je bil ustvarjen za projekt. Skripta main.js še ne bomo uporabljali, zato jo preprosto izbrišite. Prav tako lahko odstranite stilski priročnik style.css, saj začetno želimo vse upravljati v datoteki index-HTML.

V index-HTML bomo vzpostavili strukturo našega Flexbox kontejnerja. Potrebujemo nadrejeni kontejner, ki bo vseboval nekaj podrejenih kontejnerjev. To je osnovna struktura, ki jo potrebujemo za Flexbox.

Da si lahko ogledate svoje spremembe v brskalniku, odprite Chrome in pojdite na http://localhost:3000. Ko zaženete razvojni strežnik, vam bo prikazan URL, preko katerega lahko dostopate do vaše datoteke index-HTML.

Pri odpiranju povezav v brskalniku vam priporočam, da uporabite kontrolno tipko (ali Command na Macu), da jih odprete neposredno v privzetem brskalniku. Tako boste imeli svoje spremembe pod nadzorom.

Ko je stran odprta, lahko na primer v index-HTML spremenite naslov iz "Weed App" v "Flexbox" in shranite stran. S takojšnjim posodabljanjem bodo spremembe takoj vidne v brskalniku.

Lahko dodate tudi dodaten besedilo na stran, npr. "Tečaj Flexbox", in opazujete, kako se besedilo dinamično posodablja, ne da bi ročno naložili stran. Ta v živo predogled zelo olajša delo.

Primeri Flexboxa bodo naslednji korak še dodatno obdelani v index-HTML. Tu bomo oblikovali postavitev z CSS in ustvarili Flexbox vsebnike. Bodite pozorni na prihajajoče videoposnetke, kjer bomo poglobili tehnike Flexboxa.

Povzetek

V tem vodiču ste se naučili, kako postaviti preprost projekt za delo s CSS Flexbox. Razumeli ste osnove strukture projekta, pripravili index-HTML datoteko in uporabili lokalni razvojni strežnik. To so prvi koraki na vaši poti do obvladovanja Flexboxa.