Tee verkkosivuistasi kauniit

Kaikki verkkosivujen muotoilu tehdään käyttäen CSS-muotoilusääntöjä. HTML määrittää sivun sisällön rakenteen, JavaScriptilla voidaan sivulle tuoda toiminnallisuutta mutta ulkoasu muotoillaan aina CSS-tyyleillä. Useimmille webdesignereille riittää ulkoasun suunnittelu ja joskus myös toteutus. Sivuston sisältö ja rakenne voit tulla valmiina sisällönhallintajärjestelmästä mutta ulkoasuun voi vaikuttaa vielä jälkeenpäin. Myös valmiin sivuston osien muotoilu, taiton virheiden korjaus tai responsiivisuuden hienosäätö ovat kaikki CSS-muokkausta.

Vaikka et toteuttaisi itse verkkosivua, vaan ainoastaan suunnittelisi ulkoasua, on CSS ominaisuuksien tunteminen edellytys sille, että osaa hyödyntää webin mahdollisuudet oikein ja tehokkaasti.

CSS -perusteet kurssilla opit mm.

  • ymmärtämään selainten toiminnan
  • tietämään miten sivut muokataan toimimaan eri kokoisilla näytöillä
  • opit CSS-kielen syntaksin
  • lukemaan ja ymmärtämään valmiiden sivujen muotoiluja
  • lisäämään omat tyylisi valmiiseen sivustoon
  • määrittämään sivuston typografian
  • käyttämään värejä, läpinäkyvyyksiä, taustoja
  • parantamaan sivuston käytettävyyttä ja käyttökokemusta
  • ja saat monia valmiita käyttöesimerkkejä sivustojen osista

Kurssin kohderyhmä

Kurssi on suunnattu kaikille verkkosivustojen suunnitteluun osallistuville graafikoille / websuunnittelijoille tai sisällön ylläpitäjille, esimerkiksi markkinoinnin tai viestinnän ammattilaisille, jotka päivittävät ja luovat sisältöjä jollain julkaisujärjestelmällä toteutulle verkkosivustolle. Kurssilla oppiminen tapahtuu hands-on-harjoitteluna.

Kurssin esitietovaatimukset

Esitiedoiksi riittävät yleiset tietokoneen käyttötaidot ja webin peruskäsitteiden tunteminen.

CSS logo

Perusteet

Kesto: 1pv
Hinta: 890 €
hinnat ALV 0 %


Selainten toiminta

  • Miten web toimii ja sivut latautuvat
  • Miten selaimet toteuttavat sivun ulkoasun
  • Selainten erot
  • Selainten työkalut

CSS perusteet

  • Sääntöjen rakenne ja kielioppi
  • Kommentit
  • CSS valitsimet vs. HTML rakenne

Valitsimet

  • Elementtivalitsimet
  • class- ja id-valitsimet
  • CSS mittayksiköt

Sääntöjen hierarkia

  • Mihin sääntöjä voidaan kirjoittaa
  • Sääntöjen periytyvyys
  • Sääntöjen spesifisyys
  • !important määre
  • vaikutusalueen määrittäminen

Elementtien asemointi

  • CSS box-model
  • Margin
  • Padding
  • Border
  • HTML: Block, inline ja inline-block
  • Float asemointitekniikkana

Tekstimuotoilut

  • Kirjasimet, web-fontit
  • Kirjasinkoko
  • Rivikorkeus
  • Merkki- ja sanavälit
  • Otsikko- ja kappaletyylit
  • Sisennykset ja tasaukset

Värit

  • Värit selaimissa
  • Hex-arvot, hsl ja rgb
  • Läpinäkyvyys

Käytännön käyttökohteita

  • Navigaatiot
  • Linkit
  • Kuvat ja media
  • Lomakkeet
  • Taulukot

Edistynyt CSS

  • Työkalut ja editorit
  • CSS esiprosessointitekniikat SASS ja LESS

Katsaus tulevaisuuteen

  • Flexbox
  • Grid layout
  • Miten varautua uusiin ominaisuuksiin
  • @supports
  • Entäs vanhemmat selaimet

Kurssin kouluttajat


[vcex_staff_grid include_categories=”selovuo” columns=”1″ filter=”false” thumb_link=”nowhere” img_width=”150″ img_height=”150″]

CSS osaaminen on web-designerin ehdoton perustaito ja suureksi eduksi sisällöntuottajille!