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 %

Kurssit Helsinki

  • 05.11.2019 - ilmoittaudu
  • 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

    Kari Selovuo, Partner, ACE Web Specialist, Adobe Certified Instructor

    Kari Selovuo

    Partner, ACE Web Specialist, Adobe Certified Instructor

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