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.
Hallitsemalla CSS tekniikkaa pystyt mm. muokkaamaan suhteellisen paljon esimerkiksi WordPress sivuston ulkoasua vaikka et tekisi mitään muokkauksia teeman koodiin. Omat CSS säännöt voidaan lisätä sivustoon useissa teemoissa tai itse asennetun lisäosan avulla.
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.
Kesto: 1pv
Hinta: 890 €
hinnat ALV 0 %
Kurssit Helsinki
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
Asemointitekniikoita
- Flexbox
- Grid layout
Hyviä käytäntöjä
- Miten varautua uusiin ominaisuuksiin
- @supports
- Entäs vanhemmat selaimet
Kurssin kouluttajat
Kari Selovuo
CSS osaaminen on web-designerin ehdoton perustaito ja suureksi eduksi sisällöntuottajille!