Asjad, mida tuleb õppida, et pääseda front-end arendusse

Veebiarendus front-end HTML CSS JavaScript

Selles artiklis tahtsin rääkida veebiarendusest ja tööriistadest, mida kasutame kaunite veebisaitide ja veebirakenduste loomiseks.

Arusaamine

Enne kui hakkad midagi õppima, küsi endalt, kas sa tead, mis on veebiarendus? Kui te ei tea:

Veebiarendus on IT-tööstuses üks populaarsemaid valdkondi, mis on alati nõutud. Veebiarendajana on teie ülesanne pakkuda kvaliteetset koodi ilusate ja usaldusväärsete veebisaitide ja veebirakenduste loomiseks.

Tavaliselt jagunevad veebiarendajad front-end (klient) ja back-end (server) arendajateks. Selles artiklis tahan lähemalt uurida esiotsa tehnoloogiaid.

Sinu lähtepunkt

front-end, nagu me juba teame, tähendab kliendi poolt. Mida see täpsemalt tähendab? Seega on esiosa kõik, mida kasutaja näeb: lehed, sisendelemendid, nupud, animatsioonid ja muud kasutajaliidese elemendid.

Niisiis, nende elementide ehitamiseks vajame mõningaid tööriistu. Põhimõtteliselt koosneb esiosa kolmest põhitehnoloogiast:

HTML
CSS
JavaScript

Need tehnoloogiad on põhilised veebitehnoloogiad. Muidugi pole need ainsad, raamistikke on palju, kuid enne raamistike tundmaõppimist peaksime selle kolmikuga tutvuma.

HTML

HTML on hüperteksti märgistuskeel. Ei saa aru, eks? Eelistan mõelda sellest kui keelest, mida kasutame tulevase veebisaidi luustiku määratlemiseks. See keel on üsna lihtne, nii et siit peaksite oma õppimise teekonda alustama. Vaatame koodi näidet.


                            index.html
                        
                        <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Page Title</title>
    </head>
    <body>
    <!-- Your code here -->
    </body>
</html>

Iga HTML-fail peaks korralikult töötamiseks järgima seda struktuuri.

HTML-is kasutame asju, mida nimetatakse "märgenditeks", mis näevad välja nagu <tagname></tagname>. Erinevaid silte on tohutult palju ja tõenäoliselt ei tohiks te proovida neid kõiki korraga selgeks õppida, sest aja jooksul kasutate erinevaid silte ikka ja jälle ning jätate paljud neist meelde, kui nendega töötate. Siin on täielik nimekiri olemasolevatest HTML-märgenditest.

HTML-sildid peavad alati olema suletud. Silte on 2 erinevat tüüpi – traditsioonilised ja isesulguvad sildid. Erinevus nende vahel seisneb selles, et kui isesulguvad sildid avatakse ja suletakse ühe sildi sees (nt <img />), peavad traditsioonilistel siltidel olema avatud ja sulgevad sildid (näide <body></body> ).

Peaaegu igal HTML-i märgendil on nn atribuudid. Need on HTML-märgendi omadused, mis võivad muuta sildi välimust, käitumist ja juurdepääsetavust. Mõnda atribuuti saab kasutada erinevatel siltidel, näiteks atribuuti style="" , mida saame kasutada iga sildi puhul, et muuta selle välimust CSS-i abil. Aga iga atribuuti ei saa igas sildis kasutada, alati googelda, mis atribuudid konkreetsel sildis on.

Nüüd vaatame ja selgitame oma näidet:

<!DOCTYPE html> ütleb brauserile, et see on meie dokumenditüüp. See näide täpsustab, et dokumendi tüüp on HTML 5, HTML-i uusim versioon.
<html></html> mängib meie HTML-elementide ümbrisena.
<head></head> on meie metaandmete, linkide ja skriptide kodu. Kasutame seda silti CSS- ja JavaScript-failide linkimiseks, et saaksime neid oma lehel kasutada. Metaandmed on andmed, mis esindavad teavet meie lehe kohta, nagu kodeering, märksõnad, kirjeldus või, nagu meie struktuuris, pealkiri. Kasutame pealkirja silti, et anda oma lehele nimi, mis kuvatakse teie brauseri vahekaardil.
<body></body> on koht, kus me kirjutame oma HTML-koodi.

CSS

Kasutame CSS-i (Cascading Style Sheets), et muuta meie HTML-elemendid kena välja. Selleks peate looma uue CSS-faili, linkima selle oma HTML-failiga ja alustama stiili kujundamist.

CSS-faili linkimiseks peate kasutama HTML-failis märgendit <link/>. Nagu me juba teame, peaksime seda tegema märgendis <head>. Ärge unustage lisada märgendile <link/> atribuute rel="stylesheet" ja href="/path/to/your/style.css"!


                        
                            index.html
                        
                        <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Page Title</title>
        <link rel="stylesheet" href="/path/to/your/style.css" />
    </head>
    <body>
    <!-- Your code here -->
    </body>
</html>

Valijad (Selectors)

Stiilide rakendamiseks peame kirjutama valija. Kasutame selektoreid, et määrata, milliseid HTML-i elemente meie stiilid mõjutavad. CSS-is on palju erinevaid valijaid.

Siin on mõned kõige sagedamini kasutatavad:

Sildi nimed

Kirjutame sildi nime ja meie stiilid mõjutavad iga määratud silti.


                            h1 {
    font-size: 32px;
}

Selles näites on h1 valija. Iga h1 sildi fondi suurus on 32 pikslit.

CSS-i klassid

CSS-klassi kirjutamiseks peame kirjutama punkti ja oma klassi soovitud nime. Need stiilid mõjutavad ainult neid elemente, millel on selle klassi nimi ilma punktita atribuudis class="". Ühel elemendil võib olla mitu klassi.


                            
                                example.css
                            
                            .my-class {
    background-color: red;
}


                            
                                example.html
                            
                            <div class="my-class">
    example
</div>

Selles näites mõjutavad kõik .my-class elementi. Pidage meeles, et neid valijaid saab kombineerida. Järgmises näites töötavad need stiilid ainult koos div-märgenditega, mille klassides on my-class.


                            div.my-class {
    background-color: red;
}

Stiilid

Pärast valija kirjutamist peame alustama stiili kujundamist. Nii et stiilielementide jaoks pole vaja muud teha, kui kirjutada lokkis sulud ja seejärel kirjutada atribuudi nimi ja väärtus. Ärge unustage neid kooloniga jagada ja iga omaduse lõppu panna semikoolon.

Selles näites loome CSS-klassi color atribuudiga, mida kasutame teksti värvi muutmiseks. Ja meie puhul muudame selle roheliseks.


                        .my-heading {
    color: #3ebd49;
}

Iga stiili on peaaegu võimatu seletada, sest neid on nii palju. Nii nagu HTML-märgendite puhul, ei pea te neid kõiki kohe õppima, vaid jätkake harjutamist. Kuid siin on jällegi link kõigi CSS-stiilide loendile.

JavaScript

See on ilmselt kõige raskem asi, mida peate esiotsa arendajaks saamiseks õppima, sest erinevalt HTML-ist ja CSS-ist on JavaScript tõeline programmeerimiskeel ja selle õppimiseks kulub palju rohkem aega.

Kasutame oma veebisaitidele funktsioonide lisamiseks JavaScripti. JavaScripti kasutamiseks peaksite looma uue JS-faili ja ühendama selle meie HTML-failiga, nagu tegime CSS-i puhul, kuid mitte päris.

JS-faili kaasamiseks lisage otse märgendi <body> allossa märgend <script> ja seejärel märgendile atribuut src="". Selles atribuudis peate edastama tee oma JS-faili.


                        
                            index.html
                        
                        <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Page Title</title>
        <link rel="stylesheet" href="/path/to/your/style.css" />
    </head>
    <body>
    <!-- Your code here -->
    <script src="/path/to/your/main.js"></script>
    </body>
</html>

Ja kuna JavaScript on lai teema, siis selles artiklis me sellest ei räägi, seega jääge tulevaste artiklite jaoks lainel! Või võite ka seda ressurssi kasutada.

Kokkuvõtteks

Selles artiklis nägime ainult tohutu jäämäe tippu, mida nimetatakse veebiarenduseks. Nüüd on teil aimu esiotsas kasutatavate tehnoloogiate kohta. Mis järgmiseks? Lihtsate projektide loomisel peaksite kulutama piisavalt aega HTML-i, CSS-i ja JavaScripti õppimisele. Kui tunnete end nende tehnoloogiatega mugavalt, vaadake Bootstrapi ja ReactJS-i. Kuid ärge kiirustage, võtke aega ja nautige!

Praeguseks see on kõik. Täname lugemise eest ja head häkkimist!