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.

HTML5- ja CSS3-kurssi
Perusteet

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

Kari Selovuo

Partner, CPWA saavutettavuusasiantuntija, Adobe Certified Instructor

Aiheeseen liittyviä kursseja