De uitdaging die ik mijzelf stelde in de eerste aflevering van deze nieuwe serie over de vorderingen die ik maak tijdens mijn opleiding tot webontwikkelaar was om een website te bouwen. De serie heet Web development uitdagingen en toen bleek dat het bijbehorende domein nog vrij was, heb ik dat maar snel geregistreerd.

Het resultaat van uitdaging 1 is dan ook te bewonderen op dat nieuwe domein. Dat geeft mij de vrijheid om te oefenen zonder dat ik mijn blog in de weg zit. Neem vooral even een kijkje, ik loop niet weg.

De uitdaging die ik mij hier stelde viel uiteen in een tweetal deeluitdagingen:

1. Ontwerp een pagina die responsive is. Of te wel een pagina die er op elk formaat scherm goed uitziet. Natuurlijk had ik het mezelf makkelijk kunnen maken door uit te gaan van een kant-en-klaar Bootstrap ontwerp maar daarmee zou de uitdaging een stuk minder interessant zijn. Het was er mij juist om te doen om een zelf van de grond af een responsive website te bouwen en zo toe te passen wat ik tijdens mijn opleiding heb geleerd.Gelukkig blijkt responsive design niet heel ingewikkeld. Het geheim zit hem vooral in de grid en de media queries. Het eerste is een matrix waarmee je een scherm onderverdeelt in vlakken. Bij grid systems als Bootstrap zijn dat er meestal 12. Een pagina is dan opgebouwd uit rijen met daarin kolommen. De som van het totale aantal kolommen in een volledige rij bedraagt altijd 12. Ik heb in mijn ontwerp gekozen voor een item van drie kolommen (het menu), een van zes voor de hoofdtekst  waar nu nog een dummytekst staat en waar drie kolommen voor Done/To do.

   Bekijk je de pagina echter met een smartphone dan zijn de elementen gestapeld, of stacked, zoals dat in het Engels heet. Dat doe je door media queries op te nemen in je stylesheet. Een media query ziet er bijvoorbeeld zo uit:

   @media screen and (max-width: 767px){
   	[class*="col-"] {
       width: 100%;
   }
   

   Deze regel zorgt ervoor dat op schermen die maximaal 767 pixels breed zijn (smartphones) alle elementen de klasse “col-” in de naam 100% breed zijn en dus gestapeld worden.

   In de stylesheet en de html pagina heb ik ook van jQuery gebruikt om de pagina schaalbaar te maken,  het menu te verbergen bij kleine schermen om de breedte van het middengedeelte breder te maken als er een geen menu in beeld is. In code ziet dat er als volgt uit:

   <script>
   	$(document).ready(function() {
   		$("#menubutton").click(function() {
   			$("#menubutton").hide();
   			$("#menu").show();
   			$("#content").toggleClass("col-md-9");
   		});
   	});
   </script>

2. Het tweede deel van de uitdaging lag in het grafisch ontwerp van de de site. Zelf heb ik weinig kleurgevoel maar gelukkig is daar Paletton (voorheen Color Scheme Designer). Kleurenlay-outs met 2, 3,  of 4 kleurgroepen of juist varianten van één bepaalde tint, het kan allemaal met een paar klikken. Zelf koos ik via de kleurencirkel voor een ontwerp met 1 hoofdkleur en 2 secundaire kleuren die ik keurig geëxporteerd kreeg naar CSS waarden. Maar het bleek nog een aardige klus om en ander te verwerken in mijn eigen pagina-ontwerp. Eerst had ik ook nog een lichtgroene zijbalk, maar dat vond ik minder mooi. Wat er staat, bevalt me zolang het duurt. Het aanpassen van het kleurenschema hoeft echter – dat heb ik nu wel geleerd – geen heel ingewikkelde zaak te zijn en omdat ik daarbij niet op mijn eigen gevoel voor kleurencombinaties hoef te vertrouwen, heb ik goede hoop dat het resultaat blijft ogen.

Web development uitdaging 2

Tot zover mijn uitwerking van de uitdaging van anderhalve week geleden.  Nu staat er nog dummycontent op de site en werken de links nog niet. Voordat ik aan mijn opleiding begon heb ik ook wat gewinkeld bij Udemy. De uitdaging voor volgende week is om de opdrachten die ik daarvoor gemaakt heb nog eens door te nemen en te verwerken in mijn nieuwe site.

PS: bij nader inzien leek het mij handiger om de verschijningsdagen van Van lezen naar doen en Web development uitdagingen om te draaien. De tweede aflevering van Van lezen naar doen verschijnt dan ook komende vrijdag en de web development uitdagingen blijven op de maandag.

Zoals ik afgelopen maandag al schreef ben ik begonnen met een opleiding tot webontwikkelaar. Programmeren heeft me al tijd al getrokken en het einde van mijn vorige baan leek me een mooie gelegenheid om te kijken of ik me niet alsnog in die richting kon specialiseren. Ik heb uiteindelijk voor web development gekozen omdat de talen die daarvoor nodig zijn het minst abstract zijn. Een van de redenen dat ik na de middelbare school niet voor informatica/ict koos, was dat ik van wiskunde weinig kaas gegeten had.

Nu dus alsnog

Vorige maand ben ik met mijn opleiding gestart. Ter voorbereiding had ik al het nodige gegaan. Ik las Lezen, weten en niet vergeten van Mark Tigchelaar, volgde de MOOC Learning how to learn en ging aan de slag met het boek waarop die cursus is gebaseerd, A mind for numbers van Barbara Oakley. Het leek me nuttig om mijn kennis over leren te actualiseren omdat het toch al weer even geleden is dat ik nog studeerde.

Een van de dingen die ik opstak was dat dagelijks er bezig zijn het leren bevordert. Dat gaat me gelukkig met al mijn training met het wandelen aan de hand van deze serie van Peter over het boek Zen Habits – Mastering the Art of Change van Leo Babauta uitstekend af. Dagelijks ermee bezig zijn, versterkt het geheugen, losse onderdelen smelten samen waardoor je ze gemakkelijker onthoudt en je krijgt routine.

Wat me naar aanleiding van de boeken en de MOOC ook van belang leek, was om te oefenen en daarbij meerdere bronnen te gebruiken. De een legt het toch iets anders uit dan de ander uit en bovendien zorgen ze voor divers oefenmateriaal. Jezelf testen is een van de beste manieren om te toetsen of je iets begrijpt.

Oefenstof

Al met al heb ik afgelopen maanden al behoorlijk wat geoefend met HTML/CSS, JavaScript/jQuery, PHP/MySQL en Bootstrap. Het lijkt me daarom nu mijn opleiding echt begonnen is tijd voor de volgende stap: een wekelijkse web devopment uitdaging waarmee ik wat ik leer kan toepassen. Ik ga proberen om de opdracht steeds net iets moeilijker te maken dan ik al heb geleerd omdat dat ik dan de hard start, jump to easy techniek kan toepassen. Maar daarover waarschijnlijk meer in een van mijn afleveringen en mijn nieuwe serie Van lezen naar doen, waarvan maandag het eerste deel verschijnt.

Wat is het idee?

Het is mijn bedoeling om (mijzelf)* voortaan iedere vrijdag (voor de eerste aflevering heb ik vanwege onverwacht bezoek een dag gesmokkeld) een web devopment uitdaging te geven. De week daarna presenteer ik dan de oplossing en de uitleg daarbij plus een nieuwe opdracht. Op die manier hoop ik een leuke manier wat ik leer nog eens extra toe te passen en met een beetje geluk bouw ik dan ook een aardig portfolio op.

Uitdaging 1

• Bouw een website om alle web development uitdagingen op te presenteren.

*Uiteraard mag je meedoen en jouw oplossing van de uitdaging hier of volgende volgende week als reactie achterlaten.

@foto VIA PIXABAY met CC0 verklarinG