I look down at my hands

Mijn leerplan voor web-development.

Introductie van dit project

Mijn doel is het maken van een website die mij professioneel ondersteund. Het moet een plek zijn waar ik op een constructieve manier bezig ben met mijn gedachten. Ik wil daar mijn kennis en denkbeelden genereren en produceren.

Ik maak gebruik van de volgende dienst: Logo Neocities. Ik heb gekozen voor Neocities aangezien zij zich sterk maken voor het Indieweb. Oftewel, gebruikers van het internet creëren en beheren wat zij toevoegen aan het internet, en het blijft hun eigendom. Dit is belangrijk voor mij gezien een aantal van mijn politieke overtuigingen. In het kort: de macht van Big Tech ondermijnen zelfbeschikking van het individu en de democratische waarden en slagkracht van Nederland.

Ik heb nu verschillende videos gekeken over web-development in 2020. Het is duidelijk dat je de basis hebt met 3 talen: HTML voor de structuur; CSS voor de stijl; JavaScript voor het dynamische karakter van de website. Ik wil een functionele website hebben met de eerste 2 talen zodat ik verantwoording kan afleggen naar mijzelf en de twee lezers. Daarna begin ik pas met JavaScript wat mijn eerste echte programmeertaal zal worden. Gelukkig blijkt dit een erg veelzijdige taal te zijn die ook zijn weg vind in back-end development (node.js) en frameworks (react.js), hoewel ik daar ver weg van zal blijven. Maar het maakt het leren ervan wel aantrekkelijker.

Ik zal neocities advies opvolgen en gebuik maken van de Mozilla cursus voor het maken van deze website en de politieke website.

Behalve de talen zal ik moeten leren vanaf mijn computer websites te publiceren naar een host. Ik moet hiervoor wat command-lines leren, GitHub en Microsoft Visual Studio Code. Dit zijn instrumenten om websites goed te creëren en beheren op een gestroomlijnde, eenvoudige en stabiele manier. Wellicht is automatisering ook mogelijk voor mij, maar ik zou nu nog niet weten wat ik dan precies zou willen automatiseren. Op het moment ben ik zover dat ik MS Visual Code gebruik.

Planning en doelen.

Ik heb een online schema gemaakt met leerdoelen per week in hoofddoelen en in kleine stappen. Terwijl ik dit schrijf weet ik alleen maar dat ik het in vier weken wil en dat ik hiervoor de HTML structuur van een tabel ga gebruiken.

Het volgende schema is het overzicht van de mozilla cursus in een text bestand. Ik heb voor nu de tijdsplanning erg globaal gehouden omdat ik geen idee heb hoe lang het zal duren om de verschillende onderdelen te leren. Waarschijnlijk zal ik veel langer doen over JavaScript. In het laatste rijtje staat hoe ik mijn nieuw-verworven kennis en kunde wil implementeren op beide websites. Om mijn motivatie op peil te houden en het overzichtelijk te hebben. Het zou mooi zijn als het een website is waar ik alles zowel heb geschreven als geprogrammeerd!

Week Taal Categorie Les Implementie op deze site?
Week 1 CSS CSS Building blocks Overview
Casacade and inheritance !important gebruiken om te zien of ik iets verkeerd implementeer of dat ik de stijl niet veranderd zoals ik wil.
CSS selectors Wat CSS selector reference sheets toegevoegd aan links hieronder
The box model Vergeet niet: box-sizing: border-box. Border is dan de maat van je box, niet de maat van je content.
Backgrounds and borders Paar handige websites hierbeneden toegevoegd.
Handling different tekst directions
Overflowing content
Values and units Verschil RGBA en opaque: met RGBA alleen opacity van kleur die je instelt; opaque van de hele box.
Sizing items CSS
Images, media, and form elements
Styling tables
Debugging CSS
Organizing your CSS
Styling text Styling text overview
Fundamental text and font styling Use rem where possible as standard and avoid setting font-size of containers where possible. Set HTML to 10px so that rem are easy to calculate.
Styling lists
Styling links Order is important in styling links, os can use a mnemonic like LoVe Fears HAte. Link; Visited; Focus; Hover; Active.
Web fonts
Assesment: typesetting a community school homepage Overgeslagen aangezien ik al een pagina heb om aan te werken.
CSS layout CSS layout overview
Introduction
Normal flow
Flexbox
Grids
Floats
Positioning
Multiple-column layout
Repsonsive design
Beginner's guide to media queries
Legacy layout Methods
Supporting Older browsers
Fundamental layout comprehension
Week 2 JavaScript JS first steps JS first steps overview
What is JavaScript?
A first splash into JS
What went wrong? Troubleshooting JS
Storing the information you need — variables
Basic math in JS — Numbers and operators
Handling text — stings in JS
Useful string methods
Arrays
Assessment: Silly story generator
JavaScript building blocks JS building blocks overview
Making decisions in your code — Conditionals
Looping code
Functions — Reusable blocks of code
Build your own function
Function return values
Introduction to events
Assesments: Image gallery
Week 3 Introducing JavaScript objects Introducing JS objects overview
Objects basics
Object-oriented JS for beginners
Object prototypes
Inheritance in JS
Working with JSON data
Object building practice
Assessment: Adding features to our bouncing balls demo
Week 4 Asynchronous JavaScript Asynchronous JS overview
General asynchronous programming concepts
Introducing asynchronous JS
Cooperative asynchronous JS: Timeouts and intervals
Graceful asynchronous programming with Promises
Making asynchronous programming easier with async and await
Choosing the right approach
Client-Side web APIs Client-side web APIs overview
Introduction to web APIs
Manipulating documents
Fetching data from the server
Third party APIs
Drawing graphics
Video and audio APIs
Client-side storage

Wat daarna?

Een korte opsomming van dingen waarvan ik weet dat die moeten gebeuren maar voor langer termijn zijn. Dingen die mij te binnen schoten maar niet passen in een planning van 4 weken.

Handige websites.

Dit zijn websites die tijdens het leren zijn besproken als handig danwel onmisbaar voor web-development.

Nog veel later belangrijk

Hier komen dingen te staan waarvan ik pas veel later gebruik zal maken, als ik het al zal doen.