Testimonials-sivun grid osio

Tervehdys 👋

Tämä tehtävä perustuu Frontend Mentrorin haasteeseen, löydät sen täältä ja paljon muita hyviä haasteita: Frontend Mentor

Tähän tehtävään tarvitset perustiedot HTMLstä ja CSSstä

Tehtävä

Tehtävänä on rakentaa sivulle testimonials-osio ruudukkoon design-suunnitelmaa noudattaen.

Mistä kaikki löytyy?

Löydät tehtävän suunnitelmat /design kansiosta. Siellä on mobiilinäkymä ja desktopnäkymät erikseen. Tarkoitus on toteuttaa molemmat.

Muutamia tyyliohjeita löytyy tyyliopas.md tiedostosta, mutta suurimman osan muotoiluista saat arvioida itse. Eli päätä itse mitkä ovat sopivat arvot esim. font-size, padding ja margin määrittelyille, niin että lopputulos vastaa tavoitetta.

Tarvittavat kuvat ovat /images kansiosta. Ne ovat valmiita käyttöön.

index.html tiedostossa on kaikki tarvittava teksti, mutta sitä ei ole jäsennelty järkeviin osiin.

Projektin rakentaminen

Voit toki tehdä miten haluat, mutta suosittelemme seuraavia steppejä:

1. Asenna itsellesi VSCodeen Live server -lisäosa, jotta tallentamasi muutokset päivittyvät selaimeen.
2. Tutki suunnitelmaa ja mieti mitä eri osia sen toteuttamiseen tarvitaan. Kannattaa tehdä muistiinpanoja vaikkapa paperille.
3. Mieti CSS määrittelyiden toistumista - miten kannattaa hyödyntää luokkia jne.
4. Ennen kuin lisäät tyylejä, jäsennä HTML-sivun rakenne. Järkevä HTML koodi helpottaa tyylien määrittelyä.
5. Kirjoita perustyylimäärittelyt projektille, kuten esim font-family ja font-size.
6. Mobile first lähestyminen on järkevää - eli tee ensin mobiilinäkymä kuntoon ja sen jälkeen desktop näkymä.
7. Aloita koodaaminen ja tyylien lisääminen sivun yläosasta ja siirry seuraavaan, kun olet tyytyväinen nyt työstämääsi alueeseen.

Tehtävän palautus

Siirrä tämä testimonials-projetktikansio public-kansion juureen. Varmista, että sivu aukeaa selaimessa osoitteessa https://public.bc.fi/s2XXXXXXX/testimonials/, kun korvaat X-kirjaimet omalla opiskelijanumerollasi. Palauta linkkiprojektiin ItsLearningissä.

Tee oma README.md tiedosto

Tee projektille oma README.md tiedosto omin sanoin. README-tiedostot kirjoitetaan yleensä englanniksi, mutta voit käyttää myös suomea. Voit hyödyntää README-pohjamuokattavaksi.md tiedostoa tämän pohjana. Kun olet valmis, poista tämä nykyinen README-tiedosto ja nimeä README-pohjamuokattavaksi.md uudelleen README.md tiedostoksi.

Hauskaa koodausta! 🚀