Selles õpetuses saate teada, kuidas valmistada ette oma projekt CSS Flexboxi kasutamiseks. Enne Flexboxi paigutustehnikatesse süvenemist on oluline omada kindlat alust. Arendamiseks kasutame Visual Studio Code'i, kuid võite valida ka lihtsa tekstiredaktori ja brauseri. Järgmistes sammudes loome lihtsa projekti, mis aitab teil mõista ja rakendada Flexboxi.
Olulisemad järeldused
- Arendusserveri kasutamine hõlbustab tööd teie projektide kallal.
- Saate töötada raamistiketa, et õppida JavaScripti ja CSSi põhialuseid.
- Index-HTML-fail on teie projekti keskpunkt, kust alustate.
Juhend samm-sammult
Avage esmalt terminal Visual Studio Code'is või muus teie valitud programmis. Enne jätkamist veenduge, et Node.js on installitud, et saaksite NPM-käske käivitada.
Nüüd saate projektistruktuuri loomiseks kasutada NPM-paketti. Alustage terminalis käsku npx create-v, et alustada projekti loomise protseduuri. Teil palutakse alla laadida pakett. Kinnitage see.
Seejärel sisestage oma projekti nimi. Soovitan seda lihtsalt "flexbox" nimetada, kuna see on just selle teemaga seotud. Pärast nime sisestamist küsitakse teilt, millist kasutajaliidese raamistikku soovite kasutada. Sel juhul valige "Vanilla JavaScript", kuna me ei kasuta spetsiifilisi raamistikke.
Järgmisena küsitakse teilt, kas soovite kasutada TypeScripti. Ka siin on soovitatav valida "ei", et hoida lihtsust ja keskenduda põhitehnoloogiatele.
Nüüd olete peaaegu valmis. Peate lihtsalt minema oma uue projekti kataloogi. Seda saate teha käsuga cd flexbox. Nii jõuate kaustani, mis just loodi.
Käivitage seejärel terminalis käsk npm install. Sellega paigaldatakse kõik vajalikud paketid teie projekti jaoks.
Kui see on lõppenud, käivitage kohalik arendusserver käsu npm run dev. See avab ja valmistab teie projekti ette kohalikus serveris.
Nüüd saate vaadata oma projektikaustas olevat loodud Index-HTML-faili. See fail on teie projekti kõige olulisem osa, kus loote kogu oma sisu ja struktuurid.
Järgmine samm on projekti alguses loodud vaikeskripti kustutamine. Skripti main.js pole vaja kohe kasutada, seega lihtsalt kustutage see. Samuti võite eemaldada stiililehe style.css, kuna soovime esialgu kõike hallata Index-HTML-is.
Index-HTML-is hakkame looma oma Flexboxi konteinerstruktuuri. Vajame ülemist konteinerit, mis sisaldab omakorda mitmeid alamkonteinereid. See on põhiline struktuur, mida Flexboxi jaoks vajame.
Selleks, et oma muudatusi brauseris näha, avage Chrome ja minge aadressile http://localhost:3000. Kui käivitate arendusserveri, kuvatakse teile URL, mille kaudu saate oma Index-HTML-faili avada.
Soovitan brauseris linke avades kasutada klahvi Ctrl (või Mac-is klahvi Command), et need avaneksid otse vaikimisi brauseris. Nii saate oma muudatusi hõlpsasti jälgida.
Kui leht on avatud, saate näiteks muuta Index-HTML-is pealkirja "Weed App" pealkirjaks "Flexbox" ja salvestada lehte. Otseülekanne toob teie muudatused kohe brauserisse.
Saate leheküljele lisada ka muud teksti, nt "Flexboxi kursus", ja näete, kuidas tekst uueneb dünaamiliselt ilma, et peaksite lehekülge käsitsi värskendama. See reaalajas eelvaade muudab töö oluliselt lihtsamaks.
Järgmises etapis töötlevad flexboxi näited indeksi-HTML-is. Seal kujundatakse paigutus CSS-iga ja luuakse flexboxi konteinerid. Oleme põnevil järgmistest videotest, kus me süveneme flexboxi tehnikatesse.
Kokkuvõte
Selles juhendis õppisite, kuidas luua lihtne projekt CSS flexboxiga töötamiseks. Mõistsite projekti struktuuri alused, valmistasite ette indeksi-HTML-faili ja kasutasite kohalikku arendusserverit. Need on esimesed sammud teel flexboxi valdamiseni.
Sagedased küsimused
Kuidas paigaldada Node.js?Laadige allalaadimispakett Node.js ametlikust veebisaidilt ja järgige juhiseid.
Kas ma saan kasutada Flexboxi ilma raamistikuta?Jah, on täiesti võimalik kasutada Flexboxi ainult HTML-i ja CSS-i abil.
Kuidas käivitada arendusserver?Käivitage terminalis käsk npm run dev, et käivitada kohalik arendusserver.
