Hoe te beginnen met website leren bouwen.

[Joramk]

Hallo tweakers,

Ik ben Joram en 15 jaar oud. Ik zit nu in 3 havo en ik ben van plan om over enkele jaren HBO ICT (of iets vergelijkbaars) te gaan doen. Het lijk mij dus een goed plan om alvast wat kennis te vergaren over programmeren. Op internet zag ik dat HTML/CSS het makkelijkst is en binnen enkele weken te leren is. Hebben jullie tips (of ervaring met) voor het leren van een eerste computertaal? Een cursuswebsite of een taal?

Alvast bedankt,
Joram

[Anoniem: 80910]

probeer eens: https://www.w3schools.com/ en veel vragen (met nog meer antwoorden) zijn te vinden op https://stackoverflow.com...matted-special-characters . daarnaast is een programmeertaal ook vaak aan de order (85% van het web draait php) wellicht ook handig om wellicht met php7.2 te oefenen (php.net)

[gitaarwerk]

Een van de fijnere sites om bij je te houden voor het leren websites te maken is Mozilla Developer network. (MDN). W3C staat veel diepe informatie, maar te diep misschien voor de start (afhankelijk wat je eigen insteek is). Vergeet W3Schools. Die komt als eerste vaak naar boven, en soms handig, maar is vaak ook niet correct.

(@Anoniem: 80910 Sorry, W3Schools is echt niet goed, dan leer je veel verkeerde informatie)


- HTML5 Doctor heeft veel info over welke elementen moet je waarvoor gebruiken. Super interessant.

- De site van CSSTricks kun je helpen met prima oplossingen en diepere informatie over oplossingen die je misschien kan gebruiken.

- SmashingMagazine, maar is veel algemener.

[ Voor 6% gewijzigd door gitaarwerk op 17-05-2018 16:05 ]

[Anoniem: 80910]

gitaarwerk schreef op donderdag 17 mei 2018 @ 16:04:
(Sorry, W3Schools is echt niet goed)

wellicht een onderbouwing nodig, want als ik weleens vergeten ben hoe iets soms heet e.d. dan komt w3schools toch echt met het goede antwoorden. daarnaast beginnen met html e.d. is er veel voor te vinden...

[ Voor 0% gewijzigd door Moonsugar op 23-04-2025 14:22 . Reden: Username van geanonimiseerde gebruiker weggehaald uit post ]

[AW_Bos]

De kennis van HTML5 en CSS3 kan je wel in een paar weken leren, maar een goede tip: Vergeet niet om veel te oefenen! Je moet ook weten hoe de elementen en CSS-properties precies gebruikt, en hoe het box-model in elkaar steekt.

Kijk vooral naar de opbouw van andere grote sites, en dat is ook erg leerzaam. Een handige tool is de WebDeveloper add-on in de browser. Je kan de hele HTML en CSS eenvoudig uitlezen zoals dat de browser die verwerkt.

Ik vind W3schools niet zozeer mis. Er staan ook een hoop snippets op voor mooie website-effecten in HTML en CSS die in zijn. Maar de uitleg vind ik vaak wel erg summier.

[ Voor 15% gewijzigd door AW_Bos op 17-05-2018 16:11 ]

[gitaarwerk]

Anoniem: 80910 schreef op donderdag 17 mei 2018 @ 16:07:
[...]


wellicht een onderbouwing nodig, want als ik weleens vergeten ben hoe iets soms heet e.d. dan komt w3schools toch echt met het goede antwoorden. daarnaast beginnen met html e.d. is er veel voor te vinden...

Snap ik :-)

Ik verwijs je hiervoor naar dit topic op stackoverflow. Zoals enkele reacties daar vermelden al, is het al een stuk beter geworden. https://meta.stackoverflo...478/why-not-w3schools-com


MDN groupeert ook wel beter relevante informatie. Dat is handig als je op de site komt en je wilt weten welke andere mogelijkheden je hebt.

Aanvulling op AS_Bos;
Google Chrome heeft hele gijne developer tools wat je leven heel veel makkelijker maakt. Ook uitleg over deze tools zijn heel erg goed. (Videos)

[ Voor 11% gewijzigd door gitaarwerk op 17-05-2018 16:12 ]

[Gaargod]

Ik heb mijn HTML & CSS basics hiervandaan: https://www.freecodecamp.org/

Zoals @AW_Bos aangeeft is het echt belangrijk om te blijven oefenen / gebruiken (net als het spreken van een daadwerkelijke taal!) anders verwaterd het snel.

Succes!

[Aegean]

https://www.freecodecamp.org/ en https://www.codecademy.com/ zijn leuke sites! Persoonlijk heb ik meer gehad aan freeCodeCamp!

[Gaargod]

Haha, 2 zielen 1 gedachte @Aegean . Nice1!

[corset]

Aegean schreef op donderdag 17 mei 2018 @ 16:15:
https://www.freecodecamp.org/ en https://www.codecademy.com/ zijn leuke sites! Persoonlijk heb ik meer gehad aan freeCodeCamp!

Precies dit dus

[Joramk]

Bedankt allemaal! Ik zal eens even op de verschillende websites gaan kijken. Codecademy ziet er goed uit en het proberen waard

[MAX3400]

Ligt het aan mij of is het idee HBO ICT != programmeren leren?

[Joramk]

MAX3400 schreef op donderdag 17 mei 2018 @ 16:39:
Ligt het aan mij of is het idee HBO ICT != programmeren leren?

Dat is een deel van de opleiding. Er is ook een economische kant. Maar een basiskennis is natuurlijk niet verkeerd.

[botwood]

Wat ik overigens ook wel een goede site vond, naast alle andere die al zijn genoemd, is https://sabe.io/

En vergeet niet dat HTML en CSS anders is dan programmeren in bijvoorbeeld Javascript of PHP, want eigenlijk is HTML en CSS geen programmeren : ) Je hebt toch een ander soort gedachtengang voor nodig.

Daar bij komt ook nog eens dat je CSS tegenwoordig ook niet echt moet onderschatten door alle grids, responsiveness, browsersupports etc.

En wat eigenlijk het belangrijkste is van alles: Blijf up to date en richt je eerst op 1 a 2 talen. Ga niet van alles door elkaar doen, want er zijn eigenlijk "teveel" bronnen waar je wat kan leren en dan zie je door de bomen het bos niet meer.

Succes in ieder geval!

[Joramk]

botwood schreef op donderdag 17 mei 2018 @ 16:53:
Wat ik overigens ook wel een goede site vond, naast alle andere die al zijn genoemd, is https://sabe.io/

En vergeet niet dat HTML en CSS anders is dan programmeren in bijvoorbeeld Javascript of PHP, want eigenlijk is HTML en CSS geen programmeren : ) Je hebt toch een ander soort gedachtengang voor nodig.

Daar bij komt ook nog eens dat je CSS tegenwoordig ook niet echt moet onderschatten door alle grids, responsiveness, browsersupports etc.

En wat eigenlijk het belangrijkste is van alles: Blijf up to date en richt je eerst op 1 a 2 talen. Ga niet van alles door elkaar doen, want er zijn eigenlijk "teveel" bronnen waar je wat kan leren en dan zie je door de bomen het bos niet meer.

Succes in ieder geval!

Had ik ook al gelezen ja, dat HTML niet echt een programmeertaal is. Ik ben inderdaad van plan om eerst te beginnen met HTML en dan als dat redelijk gaat door te gaan met CSS.

[DJMaze]

HTML en CSS zijn markup talen, net als DocBook, Markdown, LaTeX en XML.

Daarna kan je wel een scripting taal leren zoals: JavaScript
D.m.v JavaScript leer je dan het basis concept van programmeren en hoe structuren werken.

P.S. JavaScript kent "events" zoals onClick. Als je later aan de slag gaat met een IDE zoals Code::Blocks, Embarcadero of Visual Studio, dan maak je een Window/Form (net zoiets als HTML + CSS) en kan je ook aan een element "onClick" hangen.
Verschil:
HTML + CSS + JavaScript = direct testen in webbrowser
C#/C++ IDE = eerst "compileren" daarna kan je pas testen

[ Voor 44% gewijzigd door DJMaze op 17-05-2018 18:46 ]

[Wary87]

Als je CSS wilt leren verdiep je dan ook in SASS. CSS is belangrijk als basis maar in een echte werk situatie ga je waarschijnlijk alleen maar pre-processors zoals SASS (of LESS) gebruiken. Dit geeft je veel meer mogelijkheden om de CSS zo op te zetten zodat het beheersbaar is.

Je kan dit eenvoudig opzetten met Webpack, Gulp in combinatie met NPM. Er zijn veel tutorials te vinden die dit stap voor stap met je doornemen waardoor je met een goede basis kan beginnen.

[ Voor 27% gewijzigd door Wary87 op 17-05-2018 23:54 ]

[DJMaze]

Wary87 schreef op donderdag 17 mei 2018 @ 23:51:
in een echte werk situatie ga je waarschijnlijk alleen maar pre-processors zoals SASS (of LESS) gebruiken.

Nope, never, nooit niet hier. Die dingen zijn ellende in mijn opinie en worden obsolete.
https://www.w3.org/TR/css-variables-1/
(Dit duurt nog wel even, ondanks dat Internet Exploiter EOL is, hebben we nu oude Android versies. Kom nu nog Samsung telefoons met Chrome/3x tegen).

Laat die jongen eerst eens de basis leren.
Het is ook een stuk makkelijker CSS aanpassen/debuggen in je webbrowser developer toolbar/window, dan op zoek te gaan naar tricky SASS variabelen met met meer impact.
Bied hem dan de optie voor een CSS template zoals normalize.css of bootstrap.css

[ Voor 5% gewijzigd door DJMaze op 18-05-2018 03:13 ]

[gitaarwerk]

Wat nuance in Pre-processor of niet:

Waarom?
Wij gebruiken een hoop pre-processors (SASS & Gulp incl WebPack voor JS). Het helpt je ook structureren van grote bestanden en imports. Er is geen truc. De variabelen helpen zeker totdat de support goed genoeg is voor CSS variabelen. IE is bijvoorbeeld nog steeds geen EOL bij ons, we moeten supporten tot 11.
De kunst van SASS/LESS gebruiken is dat je niet overboard gaat met het schrijven van je CSS en het dynamisch maken ervan.

Het is handig om media-querys te structureren en consistent houden door gebruik van enkele mixins (kleine functies), enkele variabelen zoals kleurstylen en font-sizes. Wij gebruiken ook SASS voor geneneren van het grid, omdat het anders een hoop tiepwerk is wat je ook veel moet bijhouden. Oh ja, en natuurlijk dus support behouden voor oudere browsers met Autoprefixer. Maar dat zijn details en voor meer gevorderde front-end devs lijkt me. Sta voor veel later.

Waarom niet?
Kleine sites waar je het meeste toch custom voor schrijft hebben dit niet nodig. Dan is het gelijk een complex ding om te beheren. Daarnaast moet je build-stappen bouwen, en vereist een hoop extra aandacht, tenzij je daarvoor de infrastructure hebt.

Beginnen?
Kan altijd, het is een interessante tool. Mijn advies zou zijn om zoveel mogelijk basis nog steeds te schrijven en gebruik maken van de kleine handigheidjes maar niet overboard gaan met dit. Zo blijft het leesbaar en overzichtelijk. Daarnaast is de output van de preprocessor ook schoner

[ Voor 25% gewijzigd door gitaarwerk op 18-05-2018 09:47 ]

[RM-rf]

Wary87 schreef op donderdag 17 mei 2018 @ 23:51:
Als je CSS wilt leren verdiep je dan ook in SASS. CSS is belangrijk als basis maar in een echte werk situatie

CSS is belangrijk als basis en in een echte werksituatie zal het voornamelijk belangrijk zijn dat je die basis goed beheerst en 'snapt' waarom bepaalde dingen zo werken...

Sommige technieken als preprocessors zijn leuk, maar hooguit een beheertool die gebaseerd is op CSS en waar je voor toepasing vooral er veel aan hebt dat je die basis goed kent.

Als je meeneemt dat de TS hier 15 is en het goed mogelijk is dat hij pas professioneel met een beroepsmatige werksituatie zal beginnen over minimaal 5 jaar in een groter project (en hi daar daadwerkelijk als frontender werkzaam zal zijn) is er een gerede kans dat juist de 'hippe technieken' als bv de preprocessors die nu veel gebruikt worden, tegen die tijd lang niet meer zo alomtegenwoordig zijn maar opgeolgd dor een ofwel nieuwe technieken of uitbreidingen van bv de CSS-stanaard...


Dan moet je continue weer bereid zijn bij te leren en nieuwe technieken toe te passen, hierbij heb je het meeste aan ..... een zeer goede basiskennis en die leer je door eerst goed te begrijpen hoe CSS nu precies werkt.

Een andere optie is dat iemand noit daadwerkelijk zelf als frontender zal werken maar mogelijk eerder een nstee als backender of analyst zal hebben en hoguit te maken zal hebben met bv zaken als CSS via derden die de daadwerkelijke uitwerking doen...
in zo'n situatie heb je ook eerder minder aan specifieke technische toepassingen bij de generatie, maar véél meer aan de basiskennis.


Overigens,
voor TS zn vraag hoe te leren hoe een website op te zetten;
Los van het direkt leren van specifieke technieken, ontwikkel,methodes kan het ook gewoon praktisch, snel en ook motiverend werken om gewoon zelf bv een bestaand CMS systeem op te zetten, wordpress oid en dan te leren hoe een bestaand template toe te passen, de admin-opgeving op te zetten en gebruiken...
en daarna stapsgewjs ook bepaalde aanpasingen hierin te leren aanbrengen:
Zowel in de template (wat dat vaak ook een leerervaring vergt van HTML structuur toepassen en CSS aanpassen) en later mogelijk het aanpassen van bestaande backend-plugin tot het zelf ontwikkelen hiervan...


Vel mensen die zichzelf programmeur noemen en zich heel wat vinden kijken daar graag op neer...
maar als leerervaring kan het een goed iets zijn waarmee je zeer snel ook zichtbaar iets kunt opbouwen en stapsgewijs een 'introdustie' krijgt van wat allemaal mogelijk is en hoe verschillende bereiken (backend, frontend en een hostingomgevng en databases) met elkaar samenwerken

[ Voor 23% gewijzigd door RM-rf op 18-05-2018 09:57 ]

[gitaarwerk]

RM-rf schreef op vrijdag 18 mei 2018 @ 09:53:
[...]
maar als leerervaring kan het een goed iets zijn waarmee je zeer snel ook zichtbaar iets kunt opbouwen en stapsgewijs een 'introdustie' krijgt van wat allemaal mogelijk is en hoe verschillende bereiken (backend, frontend en een hostingomgevng en databases) met elkaar samenwerken

Het lastige is dat niemand hetzelfde pad bewandelt en iedereen graag gewoon in de richting leert wat hij/zij moet doen. Enkele wellicht niet. Daarom is het lastig om iemand de goede kant op te wijzen direct. Ik denk dat de TS wel wat duidelijker is geweest met beginnen van gewoon html/css.

[Wary87]

DJMaze schreef op vrijdag 18 mei 2018 @ 01:19:
[...]

Nope, never, nooit niet hier. Die dingen zijn ellende in mijn opinie en worden obsolete.
https://www.w3.org/TR/css-variables-1/
(Dit duurt nog wel even, ondanks dat Internet Exploiter EOL is, hebben we nu oude Android versies. Kom nu nog Samsung telefoons met Chrome/3x tegen).

Laat die jongen eerst eens de basis leren.
Het is ook een stuk makkelijker CSS aanpassen/debuggen in je webbrowser developer toolbar/window, dan op zoek te gaan naar tricky SASS variabelen met met meer impact.
Bied hem dan de optie voor een CSS template zoals normalize.css of bootstrap.css

Ik ben het met je eens dat eerst een goede basis leren belangrijk is. Maar ook in SASS kan je gewoon beginnen met basis CSS als je dit wilt. Daarna kan je de code eens bekijken en testen wat er slimmer geschreven kan worden waarbij de vuistregel is Dont Repeat Yourself.

Juist met Webpack en Sass kan je de config al zo instellen dat je Lint warnings terug krijgt en als je een fout maakt in de CSS compiled het niet en krijg je een uitgebreide beschrijving terug wat waar fout is gegaan. Deze feedback krijg je niet terug in gewoon CSS dan zie je alleen in de inspector waarschijnlijk een doorgestreepte regel CSS omdat er iets fout is gegaan.

Ik maak wel eens developers mee van begin 20 die al verder zijn dan collega's van 35+ omdat ze zich verdiepen in nieuwe ontwikkelingen en hier induiken terwijl de oudere collega's blijven hangen in technieken die jaren terug goed werkte maar nu eigenlijk al outdated zijn. Dat zijn wel de developers die op hun 15e veel interesse hebben in nieuwere technieken en niet blijven hangen in wat ze al kennen.

[DJMaze]

Wary87 schreef op vrijdag 18 mei 2018 @ 20:46:
Deze feedback krijg je niet terug in gewoon CSS dan zie je alleen in de inspector waarschijnlijk een doorgestreepte regel CSS omdat er iets fout is gegaan.

Ik heb een editor: Geany
Ik druk op F8
Die knalt mijn pure CSS bestand door csslint
De feedback is er dus wel degelijk!

Wary87 schreef op vrijdag 18 mei 2018 @ 20:46:
Ik maak wel eens developers mee van begin 20 die al verder zijn dan collega's van 35+ omdat ze zich verdiepen in nieuwe ontwikkelingen en hier induiken terwijl de oudere collega's blijven hangen in technieken die jaren terug goed werkte maar nu eigenlijk al outdated zijn.

Ik maak wel eens developers mee van begin 20 die nog niks weten
Ik ben 40 en leer elke dag over nieuwe technieken. Dat moet ook, stilstand is achteruitgang in de IT.

Je kan dus niet zeggen "ik ken developers" of "Ik maak wel eens developers mee". Dat is je gelijk willen halen, terwijl je altijd naar de kwaliteiten van een individu moet kijken.

Wary87 schreef op vrijdag 18 mei 2018 @ 20:46:
Dont Repeat Yourself

Cascading Stylesheet:

* { border: 0 solid #0F0; }
.default-border { border-width: 1px; }

Zo ik heb de standaard definitie voor een border. Ik herhaal niks

[ Voor 11% gewijzigd door DJMaze op 19-05-2018 00:06 ]

[Ramon]

@Wary87 Je weet het mooi te brengen maar het blijft onzin in dit geval. Webpack is een handige tool voor grotere projecten waar vanalles gecompileerd moet worden ja, maar er valt weinig aan te leren (tenzij je onder leren verstaat "eindeloos door github issues heen scrollen en hopen dat iemand jouw exacte probleem al eerder heeft opgelost") en de configuratie blijft kut (vind ik dan), dus ik zou het niet aanraden om mee te beginnen, maar pas als je het nodig hebt (en zelfs dan zijn er legio alternatieven die imho veel fijner werken!).

Betreffende SASS vind ik grappig dat je dat combineert met een verhaaltje over nieuwe technieken terwijl ik (en het bedrijf waar ik werk) allang SASS hebben ingewisseld voor PostCSS, maar dat is vast een kwestie van perspectief over wat je "nieuwe ontwikkelingen" noemt.

Daarnaast heb je het over linting en vergeet daarbij dat moderne editors (over nieuwe ontwikkelingen gesproken) ook aan linting doen zonder enige configuratie, dus daar heb je geen buildtooling voor nodig.

Simpel voorbeeld in VSCode:


En tegen de TS. Begin lekker met HTML en CSS. Als je dan tegen problemen aan loopt dan kan je die (indien van toepassing) wel oplossen met tools natuurlijk. Als je dat onder de knie hebt kan je naar dingen als JavaScript gaan kijken. Laat je niet afschrikken door het immense JavaScript ecosysteem en alle nerds die denken de waarheid in pacht te hebben; er geen "juiste manier", dus gewoon lekker doen!

[ Voor 4% gewijzigd door Ramon op 18-05-2018 21:16 ]