Mobiilisõbraliku veebilehe loomine

1. Sissejuhatus

Ülesandeks oli luua mobiilisõbralik responsive veebileht anekdootide kuvamiseks. Leht pidi töötama nii arvutis kui mobiilis.

Veebilehe loomisel kasutasin järgmisi tehnoloogiaid:

• HTML – lehe struktuuri loomiseks
• CSS / W3.CSS – kujunduse jaoks
• PHP – lehe osade ühendamiseks (require käsk)

2. Koodilõigud

Mobiilivaate seadistamine

See meta tag võimaldab veebilehel kohanduda mobiiliseadmete ekraaniga.

<meta name="viewport" content="width=device-width, initial-scale=1">

Päise failide ühendamine

Kasutasin require käsku, et lisada igale anekdoodi lehele sama päis. See võimaldab kujundust hoida ühtsena.

<?php require("header.php"); ?>

Jaluse ühendamine

Require käsuga lisasin jaluse, et vältida sama koodi kordamist mitmel lehel.

<?php require("footer.php"); ?>

W3.CSS kasutamine

Kasutasin W3.CSS raamistikku, mis aitab luua responsive kujundust.

<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">

3. Mobiilivaade

Telefonis muutub veebileht kitsamaks. Menüüd ja tekst kohanduvad väiksema ekraani jaoks. Külgmenüü avaneb mobiilis nupuga ning sisu paigutus muutub vertikaalseks.