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:
. 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.- CSS assessments van Mozilla: cool-looking box; fancy letterhead; fundamental CSS comprehension; en typesetting landingspagina community college. Laatste heb ik overgeslagen van de les aangezien ik aan mijn eigen pagina wil werken.
- Information Architecture van beide websites. De structuur van de websites en hoe een gebruiker erdoor wordt geleid.
- Nieuwe instrumenten leren gebruiken. Gaandeweg kom ik er meer tegen maar bijvoorbeeld MS Visual Studio Code en Paint.net.
-
Bij GitHub krijg je GitBash, "all your terminal needs."Gedaan! - Geavanceerde CSS en HTML die back-end en programmeertalen helpen en/of vervangen. HTML forms stylen en geavanceerd stylen. Onderdeel van algemeen web forms
- Beter bekend raken met W3school, vergelijkbaar met deze mozilla cursus en wellicht zal het handig zijn die ook eens te bekijken.
- Algoritmische puzzels en concepten (8 programmeer concepten) leren. Dus kunnen coderen op papier en uit te kunnen leggen wat er gebeurt. Freecodecamp heeft bijvoorbeeld algorithmic scripting challenges.
-
Beter worden in het maken en stijlen van tabellen. Hoe hou je het
behapbaar voor jezelf
maar zeker ook
hoe hou je het leesbaar
voor de lezer.
Handige websites.
Dit zijn websites die tijdens het leren zijn besproken als handig danwel onmisbaar voor web-development.- Spiekbrief om snel HTML, CSS en JS op te zoeken.
- lay-out cookbook voor CSS.
- CSS elements reference sheet.
- Pseudo-class en pseudo-elements reference sheet
- Lijst met Web documentatie van Mozilla. Een soort encyclopedie voor beginnelingen.
- Lijst met CSS syntax van Mozilla.
- tinyPNG maakt plaatjes kleiner en je website dus sneller.
- Html checker controleert je HTML, maar de meeste editors doen dit al automatisch.
- CSS checker.
- Programmeer uitdagingen. Erg populair bij autodidacten maar is net als alle andere leermiddelen niet genoeg op zichzelf. Freecodecamp beta bestaat en video bilbiotheek.
- Verschil art-direction en responsive images, en je voor het veranderen van alleen resolutie je srcset moet gebruiken.
- Uitleg over browser developer tools. Ik ga proberen Chrome hiervoor te gebruiken.
- Deze lijst nog even langs gaan om te kijken of ik nog iets mis.
- HTML elements reference
- Encyclopedie met manieren om CSS te gebruiken voor veelgebruikte oplossingen.
- Symbolen die in HTML danwel CSS gebruikt kunnen worden.
- CSS arrow please: genereer een peil via CSS.
- Creeëren van CSS gradients en backgrounds.
- CSS wordt nu veel consistenter getoond tussen verschillende browsers. Maar wellicht dat hiernaar kijken om te leren wel leerzaam is: normalizeCSS
- CCS text-shadow examples.
- Voor als ik mij ooit druk maak over lettertype.
- Enkele pagina's om mij te helpen bij het vinden van foto's, rechtenvrij (of bijna). Unsplash is één van de grootste bronnen. Een andere grote is Pexels. Kijk ook even op Pixabay en Barnimages. Als laatste is het de moeite waard om op Flickr te zoeken op Creative Commons 0 (CC0).
Nog veel later belangrijk
Hier komen dingen te staan waarvan ik pas veel later gebruik zal maken, als ik het al zal doen.-
CodePen is
the most active front-end development community in the world
, wellicht kan ik daar ooit deel van uitmaken en de vruchten van plukken. -
JSfiddle is een
humble code playground
maar kan ook veel meer zijn dan dat. - CSS wordt geschreven in verschillende standaarden om het overzichtelijk te houden, misschien één kiezen om te volgen.
- Tableizer maakt automatisch een HTML table van spreadsheets zoals Excel en Google Docs. asdf