Onze collega's over .netto- magazine, 's werelds best verkochte tijdschrift voor webontwerpers en -ontwikkelaars, is dol op niets anders dan down en dirty worden met een stuk broncode.

Hun website bevat een schat aan informatie voor site-bouwers over onderwerpen als CSS, JavaScript, PHP en meer.

Hier zijn vijf van hun CSS-zelfstudies die u kunt gebruiken om uw website snel en gemakkelijk te verbeteren. Geen van deze projecten duurt meer dan ongeveer 20 minuten om te voltooien.

Klik op de onderstaande links voor de volledige zelfstudies en ondersteuningsbestanden.

1. Codeer flexibele lay-outs
Tegenwoordig kan een schermresolutie van 1.024x768 als 'standaard' worden beschouwd, waardoor er meer ruimte is, met name in termen van breedte, voor het ontwerpen van de site. Dit is ook een tijd waarin we voortdurend worden gehamerd met informatie en klanten eisen regelmatig dat je tegelijkertijd ongeveer 40 miljard verschillende dingen laat zien op de websites die je voor hen aan het maken bent. Flexibele CSS-gebaseerde lay-outs, gebaseerd op een onderliggende raster- en gootstructuur, voor informatiezware sites die vol zitten met inhoud, flexibele lay-outs kunnen uw antwoord zijn.
Lees flexibele code-indelingen

2. Transformeer uw type door een basislijnraster te gebruiken
Een basislijnraster is iets dat tekst dwingt om zich aan de afstand in een regelvak te houden. Het verticale ritme wordt op de pagina onderhouden, wat vooral handig is voor boeken omdat de woorden op één pagina niet zichtbaar zijn in de openingen tussen de regels op de volgende pagina. Het resulteert echter ook in een grote afstand die gemakkelijk in het oog ligt. Het afdrukprobleem is niet zo relevant online, maar het ritme is - tekst kan moeilijk te lezen zijn op het scherm, dus elke methode die dit proces gemakkelijker kan maken, is het waard om te onderzoeken.
Lezen Transformeer uw type met behulp van een basislijnraster

3. Bouw een schaalbare grafische navigatiebalk
In deze zelfstudie onderzoekt de schrijver een grafische navigatiebalk die verwant is aan die op Apple.com, maar die niet is opgebouwd met behulp van vaste afbeeldingen. In plaats daarvan gebruikt het een HTML-lijst (met HTML-tekst voor de inhoud van het lijstitem, wat betekent dat de tekst kan worden ingezoomd), plus CSS voor stijlen, inclusief achtergrondafbeeldingen.
Lezen Bouw een schaalbare grafische navigatiebalk

4. Maak sitekaarten met behulp van lijsten
Typische plattegronden zijn lijsten met secties, vaak met subsecties, die op hun beurt hun eigen subsecties kunnen bevatten. Hoewel een op vectoren gebaseerde tekening een perfect goed middel is om zoiets te illustreren, geldt dat ook voor een basis opsommingstekenlijst, waarbij ingesprongen items de inhoud van een deelsectie vertegenwoordigen. Het enige probleem met een lijst met opsommingstekens is dat de relatie tussen pagina's en hun broers en zussen niet erg duidelijk is, maar - zoals de CSS-savvy zal weten - HTML-lijsten zijn vrij veelzijdig en kunnen op veel verschillende manieren worden gestileerd, wat visuele zwier en bruikbaarheid voor wat oorspronkelijk gewoon een stel zwarte klodders en woorden was.
Lezen Maak plattegronden aan met behulp van lijsten

5. Wissel eenvoudig over sitestijlen
Stel je voor dat iedereen op deze planeet weet hoe je de grootte van je tekst kunt aanpassen met hun browser. Gelukzaligheid! Maar helaas doen ze dat niet - een internationale reclamecampagne zou nodig zijn om zelfs maar een deukje te maken. Niet alleen hebben mensen niet de kennis over hoe je de grootte van een tekst moet aanpassen, de meerderheid weet niet dat het zelfs mogelijk is, dus ze zoeken niet naar 'how to' informatie. Dus waarom zou u geen stijlswitcher op uw site opnemen? Hier is hoe.
Lees eenvoudig Sitestijlen veranderen

-------------------------------------------------------------------------------------------------------

Lees nu 10 serieus nuttige Photoshop-zelfstudies en 10 buitengewoon nuttige Flash-zelfstudies

Meld je aan voor de gratis wekelijkse TechRadar-nieuwsbrief
Ontvang technisch nieuws rechtstreeks in uw inbox. Meld u aan voor de gratis TechRadar-nieuwsbrief en blijf op de hoogte van de grootste verhalen en productreleases van de week. Meld u aan op http://www.techradar.com/register

Volg TechRadar op Twitter