Harjoitus 2 - Verkkokaupan etusivu

Tredun ohjelmistokehittäjien kurssimateriaaleja

Harjoitus 2 - Verkkokaupan etusivu

Olet tekemässä kuvitteellisen verkkokaupan etusivun. Tee Harjoitukset-kansioon kansio Harjoitus 2, jonne laitat kaikki tiedostot.

Etusivulla pitää olla seuraavat osat:

  1. Header-osio, jossa on logo sekä kaupan nimi.

  2. Navigaatiopalkki kuvitteellisille muille sivuille sivustolla (esimerkiksi Kategoriat, Yhteystiedot, Tietoa meistä, Kirjaudu sisään jne). Muista hover-efekti. Ostoskori-ikoni ja hakuikoni voivat olla joko navigaatiopalkin osana tai erikseen oikeassa ylänurkassa.

  3. Lyhyt esittelyteksti kaupasta (eli mitä myy ja millainen valikoima kaupalla on).

  4. Neljä esimerkkituotetta, joissa on kuva tuotteesta, tuotteen nimi, hinta sekä ostamisnappi (voit näyttää enemmänkin tietoja, mutta nuo riittävät).

  5. Footer-osio, jossa on pienikokoisempi navigaatio sekä copyright.

Kehitä kaupalle nimi ja tarvittavat tekstit. Valmistele kuvat eli logo sekä tuotekuvat ja mahdolliset muut kuvakkeet kuten ostoskori-ikoni. Mieti sitten muu ulkoasu eli värimaailmat, fontit jne. Tee ensin html valmiiksi ja lähde tekemään css ylhäältä alaspäin, ensin isot asettelut ja lopuksi pienet yksityiskohdat.