Overzicht tussentijds werk: https://cvoprofiel2021.netlify.app/
- software & tools leren gebruiken
- VS Code
- GitHub
- Netlify
- Git Client
- HTML herhaling
- CSS herhaling
- JavaScript herhaling
- Toepassen van CMS functionaliteit
- navigatie moet duidelijk en goed zijn
- wanneer je op de site komt is het meteen duidelijk over wat de website gaat
- crëeren van nieuw logo is aangewezen
- style guide toepassen op website (moodboard/kleuren)
- website is upgeload in Github
- website staat online
- testen in diverse browsers / devices
- responsive
- is leesbaar op PC
- werkt ook op GSM
- Alle HTML in alle pagina’s moet volledig valid zijn volgens W3 regels. Anders wordt de website niet verbeterd; zie sectie Praktisch Advies
- alle links werken (naar externe websites, foto's, video's)
- links naar emails openen automatisch de email client van de gebruiker (gebruik
mailto:) - links naar telefoon nummers openen automatisch telefoon van de gebruiker (indien op mobiel, gebruik
tel:)
- links naar emails openen automatisch de email client van de gebruiker (gebruik
- het is duidelijk voor de gebruiker wat interactief is (links etc.) met behulp van aangepaste opmaak
- Regels voor CSS
- geen inline CSS
- hergebruik klasses wanneer je dezelfde stijl meerdere keren toepast
- plaats je CSS in één extern CSS bestand (dus er mogen geen <style> tags staan in je HTML) zie hier hoe
- alle tekst moet duidelijk leesbaar zijn qua contrast (bv. geen donkergrijs op zwart, of blauw op paars)
- foto’s / afbeeldingen hou je op gepaste grootte / resolutie (de gebruiker moet niet scrollen om de pagina te zien). Geen afbeeldingen die groter zijn dan een halve MB (500kb) - als je de originele afbeelding erop wil zetten kan je dat doen als een link / href.
- gebruik genoeg (wit)ruimte waar dit gepast is; je kan hiervoor padding gebruiken (zie hier)
- maak gebruik van een CSS animatie.
- Je kan hier vinden hoe je dit doet.
- Extra inspiratie kan je vinden op Codepen
- Je moet een favicon integreren, hier vind je hoe: uitleg
Link naar Project Webdesign op Smartschool
Zoals beschreven in de technische vereisten is de hoofdbedoeling dat je de website online zet.
Dit doe je in de volgende stappen:
-
Je maakt een eigen GitHub Repository klik hier hoe repository creatie te doen
-
Je plaatst de bestanden van je website op je eigen GitHub repository - zoals in Les 1 gezien is je repository dus gewoon een soort van online map / foldeR. Hier zie je hoe mbhv Github Desktop je bestanden van je project in je repository plaatst (als voorbeeld wordt de repository github-voorbeeld gebruikt maar het werkt op exact dezelfde manier voor je eigen repository)
-
Je zet de portfolio online door gebruik te maken van Netlify en door Netlify de inhoud van je Github Repository te laten lezen. Hoe je dit doet kan je terugvinden hier: Klik hier om te zien hoe je een site die op Github staat online zet via Netlify Na deze stap te vervolledigen zal je ook de link kunnen zien.
Daarnaast moet je ook:
- .zip / .rar bestand van je verbeterde site in de Uploadzone plaatsen
- als commentaar geef me je de link naar je website
- geef me ook de screenshot van je Netlify pagina zodat ik kan zien dat je het online hebt gezet via Netlify
Bekijk ook zeker deze cursus & de pagina https://www.studieanker.be/html/ voor meer info.
Het is de bedoeling dat iedereen ook gebruik maakt van het forum van Project Webdesign, om zowel dingen te delen als vragen te stellen, en dat de cursisten elkaar dan kunnen helpen.
Je mag natuurlijk ons nog steeds aanspreken, maar maak gebruik van het forum van Project Webdesign zodat het antwoord te zien kan zijn voor alle cursisten. Als we dan een vraag oplossen / beantwoorden, kunnen je collegacursisten later ook zien hoe hun probleem op te lossen.