HTML ja CSS tehokäyttöön
HTML ja CSS kehittyvät nopeasti ja selaimet ovat alkaneet tukemaan uusia ominaisuuksia, joiden avulla verkkosivujen toteuttaminen voidaan tehdä aiempaa fiksummin. CSS -kieleen on tullut uusia asemointitekniikoita, valitsimia ja mittayksiköitä. Näiden tehokkaalla hyödyntämisellä voit helpottaa omaa työtäsi merkittävästi. Tällä kurssilla opit hyviä käytäntöjä koodin toteuttamiseksi siten, että se on helpommin hallinnoitavissa ja muokattavissa myös tulevaisuudessa ja, että sivustosi toimii kaikissa selaimissa.
HTML ja CSS -jatkokurssilla opit mm.
- Uudet CSS asemointitekniikat; Flexible box ja CSS Grid
- Käyttämään skaalautuvaa tekstiä
- Hyödyntämään CSS uusia ominaisuuksia (mm. feature queries, calc()…)
- Lisäämään sivustollesi aidosti responsiivisia kuvia (näytön koon mukaan valikoituvia kuvia)
Kurssin kohderyhmä
Kurssi on suunnattu kaikille websivustojen tuotantoon osallistuville, jotka haluavat viedä osaamisensa perusteista ylemmälle tasolle. Kurssilla oppiminen tapahtuu hands-on-harjoitteluna.
Kurssin esitietovaatimukset
Esitiedoiksi riittävät HTML ja CSS perusteiden hallinta.
Kesto: 2pv
Hinta: 1150 €
hinnat ALV 0 %
Kurssit
Mitä uutta perusteiden jälkeen
- harvinaisempia HTML -elementtejä
- Hyviä käytäntöjä sivurakenteen toteuttamiseksi
Taulukoiden käsittely ja muotoilu
- taulukot ja käytettävyys
- taulukoiden muotoilu
- responsiiviset taulukot
SVG vektorigrafiikkaa sivuille
- vektori- vs. pikseligrafiikka
- skaalautuminen
- SVG tiedostojen liittämistavat
- SVG ja animointi / tapahtumat
Responsiiviset kuvat verkkosivuilla
- kuvien tuottaminen verkkosivuille
- responsiivisten kuvien tekniikka; kuvan vaihtaminen – ei skaalaaminen
- Picture -elementti
- srcset ja sizes
CSS Flexbox -asemointi
- selaintuki ja käyttötapa
- container elementtien ominaisuudet
- child -elementtien ominaisuudet
CSS Grid -asemointi
- selaintuki ja käyttökohteet
- Grid tekniikka, ominaisuudet
CSS eri asemointitekniikat yhdessä, esimerkkisivu
- float ja absoluuttinen asemointi
- Flexbox komponentit sivulla
- CSS Grid sivun taittopohjana
CSS uutuuksilla muotoilut joustavammaksi
- skaalautuva teksti
- uudet mittayksiköt
- tilan jakaminen laskennalla, calc() -funktio
- feature queries, @supports
Kurssin aiheita harjoitellaan luomalla sivusto, jossa hyödynnetään kaikkia kurssin aiheita siten, että saat kurssilta mukaasi joukon valmiita esimerkkejä tekniikoiden hyödyntämiseksi käytännössä.
Kurssin kouluttajat
