Modernin ulkoasun perusteet - ilmainen kurssi Hexletiltä, koulutus 9 tuntia, Päivämäärä: 5.12.2023.
Miscellanea / / December 06, 2023
Opit lisää HTML-merkinnöistä ja nykyaikaisen HTML5-standardin ominaisuuksista. Saat myös perustiedot tyylistä CSS: n avulla: opit yhdistämään tyylejä, käyttämään valitsimia ja työskentelemään kaskadin kanssa. HTML: n ja CSS: n lisäksi opit käyttämään selaimen sisäänrakennettuja asetteluvirheenkorjaustyökaluja, erityisesti Google Chrome DevToolsia. Tämän seurauksena opit käyttämään HTML-kuvauskieltä tekstin asettamiseen verkkosivustolle ja tutustut myös CSS: n ja tekstin muotoilun perussääntöihin.
Pystyt heti soveltamaan uusia taitojasi käytäntöön - opiskelemme niille asettelueditoreja ja laajennuksia. Jokaisen oppitunnin lopussa on pieniä itsenäisiä tehtäviä. Ne on tarkoitettu käsitellyn aiheen käytännön ymmärtämiseen, ja siksi niitä suositellaan toteutettavaksi.
Asettelun perusteet ovat hyödyllisiä, jos päätät opiskella verkkokehitystä suunnasta riippumatta. Tämän kurssin tiedot auttavat ohjelmoijia merkitsemään tietoja ja näyttämään ne sivustolla. Tämä kurssi sopii aloittelijoille ja kehittäjille, jotka eivät ole kohdanneet
Johdanto
Kurssi ”Modernin asettelun perusteet” on perusta HTML- ja CSS-sivuston ulkoasun perusteiden oppimiselle. Tällä oppitunnilla puhumme lyhyesti siitä, mitä opimme kurssilla ja kuinka tätä tietoa voidaan soveltaa käytännössä.
Johdatus HTML: ään
Oppitunti on omistettu HTML-asettelulle alusta alkaen. Puhumme attribuuttien roolista ja tutkimme HTML-tunnisteiden yleistä kuvausjärjestelmää.
Block malli
Mitkä elementit ovat vastuussa sivun kehyksestä ja mitkä auttavat sen muotoilussa tai toiminnallisten osien lisäämisessä? Tutustutaan lohko- ja inline-HTML-elementteihin ja tutkitaan tyylien vaikutusta elementtien lopulliseen leveyteen.
Semanttinen HTML
Minkä tahansa HTML-asettelun päätavoite on välittää lohkojen merkitys. Tällä oppitunnilla tutkimme uusimman HTML5-standardin semanttisia ominaisuuksia ja opimme verkon esteettömyydestä.
HTML-dokumentin perusrakenne
Kaikilla HTML-dokumenteilla on perusrakenne, joka koostuu tunnisteista ja palveluelementeistä. Selain tarvitsee niitä näyttääkseen tiedot oikein. Tällä oppitunnilla tarkastelemme tämän rakenteen jokaista riviä.
CSS: n perusteet
CSS-kieli luotiin verkkosivun visuaalista suunnittelua varten. Tutkimme kielen perusominaisuuksia, selvitämme kuinka niitä käytetään yhdessä HTML: n kanssa. Opimme sisällyttämään CSS-tiedostoja ja tutustumme valitsimien perustyyppeihin.
CSS: ssä CSS
Mikä on kaskadi ja miten se toimii CSS: ssä? Oppitunti on omistettu valitsijoiden prioriteettien eroille ja kyvylle käyttää tätä projekteissasi.
Chrome DevTools
Sivustoa asetettaessa on tärkeää löytää virheet ajoissa tai ymmärtää, kuinka tarvitsemamme lohko muunnetaan oikein. Aikaisemmin tämä tehtiin pääasiassa käsin. Nykyaikaisissa selaimissa on verkkotarkistustoiminto. Tarkastellaanpa yhden niistä - Chrome DevToolsin - ominaisuuksia.
Koodieditorit
Tarvitset koodieditorin työsi tallentamiseen. Tällä oppitunnilla tarkastellaan Visual Studio Coden asentamista. Tämä on tehokas työkalu, jota voidaan käyttää paitsi asettelun lisäksi myös ohjelmointiin millä tahansa kielellä.
Emmet
Tutkitaan yhtä hyödyllisimmistä taittosuunnittelijoiden laajennuksista - Emmetiä. Se nopeuttaa HTML-koodin merkitsemistä ja poistaa useimmat rutiinivaiheet.
Julkaisu Internetissä
Projektin sijoittamiseksi Internetiin sinun on käytettävä isännöintiä - erityistä palvelinta, joka tallentaa tiedostoja ja tarjoaa pääsyn niihin verkkotunnuksen kautta. Tässä opetusohjelmassa tarkastellaan ilmaista GitHub-isännöintiä.
Graafinen editori
Markkinoilla on useita merkittäviä toimittajia. Jotkut niistä koskevat vain yhtä käyttöjärjestelmää, toiset voidaan asentaa mihin tahansa niistä. Tässä osiossa tarkastellaan päävaiheita, kun taittosuunnittelija työskentelee Figma-verkkoeditorin kanssa.
Itsenäinen työ
Lisätehtävät, joiden avulla voit vahvistaa hankittua teoriaa
Lisämateriaalit
Hexlet-tiimin kuratoimat artikkelit ja videot. Auttaa sukeltamaan syvemmälle kurssin aiheeseen