[html/css] Beginnen met websites bouwen*

[M.amakran]

Hallo mede tweakers,

Vraagje ik wil graag leren hoe ik websites moet designe.
Ik heb al wat dingen gedaan. Filmpjes bekeken en websites bezocht.
Maar voordat ik ga beginnen wou ik vragen of er nog basis dingen zijn die ik moet onthouden.
Tips and Tricks zijn altijd welkom.

[TECHcrime]

ligt erin waarin je wilt designen.. Wil je bijvoorbeeld designs maken voor Wordpress/Joomla/Drupal of wil je in photoshop ontwerpen en dit voor frames beschikbaar maken?

Wat heb je al bekeken en hoever ben je zelf al?

[TheNephilim]

TECHcrime schreef op maandag 14 oktober 2013 @ 16:50:
ligt erin waarin je wilt designen.. Wil je bijvoorbeeld designs maken voor Wordpress/Joomla/Drupal of wil je in photoshop ontwerpen en dit voor frames beschikbaar maken?

Wat heb je al bekeken en hoever ben je zelf al?

Ontwerpen/designen/etc. is platform onafhankelijk. Dus of je nou voor Wordpress of een framework ontwerpt, maakt niet uit. Het ontwerp moet namelijk toch omgezet worden naar een werkende website en dat kun je op allerlei manieren doen, voor welk platform dan ook.

Verder, ontwerpen van websites is anders dan het vormgeven van bijvoorbeeld een folder of brochure. Je moet er rekening mee houden dat elementen aanpasbaar kunnen zijn en dat content niet statisch, maar dynamisch is.

Je kunt zoveel websites bekijken als je wil, maar om websites te kunnen ontwerpen moet je toch een creatieve inslag hebben. Heb je dit niet en wil je toch met websites aan de slag, word dan webdeveloper.

Zoals met zoveel dingen zo is, je moet het doen. Je leert zoiets niet door op websites te gaan lezen, al kun je wel bepaalde dingen opsteken hoor. Zoals hoe je het beste een PSD groepeert en layered. Dan heb je Photoshop kennis natuurlijk, is ook veel over te leren.

Kortom; begin gewoon eens ergens aan. Zie wat voor problemen je tegen komt en ga dan uitzoeken hoe je die oplost. Voor leuke cases kun je altijd bij http://www.sitedeals.nl/ of V&A op Tweakers.net kijken. Lees je in, doe mee en post je resultaat als je er echt wat van gemaakt hebt. Een makkelijke manier om met real-life cases in aanraking te komen en wellicht wat te verdienen.

[Verwijderd]

Is het echt de bedoeling dat je websites gaat designen of wil je de website zelf bouwen? Dit zijn namelijk 2 compleet verschillende zaken. Een website designen kan je gewoon in photoshop doen terwijl je voor het bouwen van de website sowieso kennis van HTML en CSS nodig hebt.

[M.amakran]

Verwijderd schreef op maandag 14 oktober 2013 @ 22:28:
Is het echt de bedoeling dat je websites gaat designen of wil je de website zelf bouwen? Dit zijn namelijk 2 compleet verschillende zaken. Een website designen kan je gewoon in photoshop doen terwijl je voor het bouwen van de website sowieso kennis van HTML en CSS nodig hebt.

Het is echt de bedoeling dat ik hem zelf ga bouwen. Dus met HTML en CSS. HTML ken ik een beetje en snap het principe CSS nog niet.

[NLKornolio]

CSS geeft de look aan jou HTML code. Dus stel je maakt met HTML een box dan kan je met css in een style sheet zeggen ik maak die box groen.

Kijk is naar http://www.w3schools.com/
Ik vondt het erg handig met mozilla firefox dat je een add-on hebt Firebug. Je kan hiermee elementen aanklikken en zien wat voor code eraan zit en je krijgt een wat beter overzicht hoe een site is opgebouwd.

Ik heb het vooral geleerd van andere sites bekijken qua code en zien hoe je dit werkend kan krijgen op jouw site.

Naast HTML en CSS moet je PHP niet vergeten.

[Verwijderd]

caanova1984 schreef op dinsdag 15 oktober 2013 @ 10:05:
CSS geeft de look aan jou HTML code. Dus stel je maakt met HTML een box dan kan je met css in een style sheet zeggen ik maak die box groen.

Kijk is naar http://www.w3schools.com/
Ik vondt het erg handig met mozilla firefox dat je een add-on hebt Firebug. Je kan hiermee elementen aanklikken en zien wat voor code eraan zit en je krijgt een wat beter overzicht hoe een site is opgebouwd.

Ik heb het vooral geleerd van andere sites bekijken qua code en zien hoe je dit werkend kan krijgen op jouw site.

Naast HTML en CSS moet je PHP niet vergeten.

W3Schools is inderdaad een goed startpunt voor het leren van HTML en CSS.
Als je liever met Chrome werkt, kan je gebruik maken van de Chrome developer tools (F12 op Windows).

Voor je begint met PHP (waarom PHP en geen Python, Ruby of ...?), kan je je best eerst focussen op HTML en CSS. Zonder die basiskennis moet je echt niet met PHP (of de andere talen) beginnen klooien.

[NLKornolio]

Heb ie wel gelijk in maar hij moet het niet vergeten. Als je je eerste wordpress site in elkaar gaat flansen krijg je het toch allemaal om je oren.
Je kan ook een hosting nemen is ongeveerd 2,50 per maand. Daar bouw je zo je eigen site op en is niet echt duur.

[ Voor 28% gewijzigd door NLKornolio op 15-10-2013 10:14 ]

[M.amakran]

caanova1984 schreef op dinsdag 15 oktober 2013 @ 10:13:
Heb ie wel gelijk in maar hij moet het niet vergeten. Als je je eerste wordpress site in elkaar gaat flansen krijg je het toch allemaal om je oren.
Je kan ook een hosting nemen is ongeveerd 2,50 per maand. Daar bouw je zo je eigen site op en is niet echt duur.

Het is de bedoeling dat ik het mezelf aanleer het gaat niet om de site. De site in de lucht krijgen en werkende zien is een bijzaak.

[BtM909]

Begin dan eerst met je verdiepen in de materie. Er zijn genoeg tutorials en boeken te vinden die je de basis van HTML en CSS uitleggen. Ik mis een beetje aan je topic wat je zelf hebt gevonden (welke resources, websites)


En kijk ook even wat er in 't verleden is geroepen in diverse topics: http://gathering.tweakers...alAmYLE9NTgzKpUJStDA4NaAA

[eL_Jay]

Front-end: HTML CSS en JQuery
Back-end: PHP en MySQL

Als je dit allemaal beheerst kun je volledige sites bouwen.

Handige sites:
codecademy
udacity
coursera
udemy
khanacademy
w3schools

[MoietyMe]

eL_Jay schreef op dinsdag 15 oktober 2013 @ 12:18:
Front-end: HTML CSS en JQueryJavaScript

Verder zou ik w3schools niemand aanraden, wat een rampen site is dat. Kijk dan gewoon in de specificaties van HTML en CSS.

Verder zijn websites als A List Apart en 24 Ways naast goed geschreven ook erg handig.

[incaz]

Ik vind de specs ook bepaald niet toegankelijk, meestal duikel ik liever een specifieke tutorial op over bepaalde onderwerpen. (Een absolute must is om je te verdiepen in het box-model en de flow.)

Verder heeft CSS-tricks een boel interessante informatie, zoals de http://css-tricks.com/almanac/ en een aantal bijzonder interessante trucs - ook al is een deel ervan absoluut overkill of nog niet geschikt voor productie ivm te weinig compatibiliteit. Het illustreert wel interessante technieken.

[jessy100]

Je moet doelen stellen. Zeggen "Ik wil een website bouwen" is hartstikke algemeen en hierdoor kom je niet erg ver. Wat ik heb gedaan is het volgende:

1) Je bedenkt wat je wilt doen (bv. Content centreren)
2) Google "How to {Wat je wilt doen}"

Gegarandeerd resultaat.

Waarom niet een tutorial volgen? Complete tutorials zijn leuk en aardig maar ik merk aan mijzelf dat het uiteindelijk toch maar gewoon een copy en paste werd en dat je er daarna nog eigenlijk geen zak van snapt.

[R4gnax]

caanova1984 schreef op dinsdag 15 oktober 2013 @ 10:05:
CSS geeft de look aan jou HTML code. Dus stel je maakt met HTML een box dan kan je met css in een style sheet zeggen ik maak die box groen.

Kijk is naar http://www.w3schools.com/
Ik vondt het erg handig met mozilla firefox dat je een add-on hebt Firebug. Je kan hiermee elementen aanklikken en zien wat voor code eraan zit en je krijgt een wat beter overzicht hoe een site is opgebouwd.

Ik heb het vooral geleerd van andere sites bekijken qua code en zien hoe je dit werkend kan krijgen op jouw site.

Naast HTML en CSS moet je PHP niet vergeten.

W3Schools is waardeloos en op veel fronten zelfs contra-productief. Het is zo erg dat er een getekend manifest is genaamd W3Fools waarin prominente frontenders hun zorgen er over uiten.

HTML en CSS van de grond op leren door bestaande websites te bekijken is vreselijk stom vanwege de stortvloed aan oude slecht-in-elkeer gezette meuk die door anderen ook gewoon zonder er bij na te denken gewoon verbatim overgenomen is. (Het PHP syndroom.)

Beter leer je de basis uit goede documentatie of een goed, up-to-date, boek en struin je daarna de blogs af van bovengenoemde prominenten om meer de lezen over de fijnere kneepjes.

Daarnaast is PHP zeker niet de enige server-side taal om een dynamische site mee te implementeren. Sterker nog; ik zou zeggen dat ASP.NET MVC of WebPages (niet WebForms) een stuk handiger in de omgang zijn voor een beginner, omdat alles veel meer voorgestructureerd geleverd wordt en er veel meer aan hand-holding gedaan wordt. Ook door de Visual Studio IDE, waar je tegenwoordig gewoon een gratis versie van kunt krijgen die je ook gewoon voor commerciële doeleinden in mag zetten.

[jbdeiman]

Voor je beeldvorming maar even kort wat CSS is en hoe het werkt, aangezien je al HTMLeen beetje kent (geef je aan), neem ik aan dat je deze constructie wel kent, om bijvoorbeeld een tekst rood en dik te maken (dit is feitelijk een oude constructie en is niet aan te raden nog te gebruiken, het gaat hier om het voorbeeld):

code:

<p>
 <strong><font color="#FF0000">This is some text!</font></strong>
</p>

Wat je met CSS bijvoorbeeld eenvoudiger kan maken door:

code:

<p class="red">
This is some text!
</p>

in je css bestand zet je dan:

code:

p.red
{
 color: #FF0000;
 font-weight:bold;
}

Bovenstaande css zegt dat je voor een alinea (p element) met de classe red (.red, wanneer je id red zou gebruiken krijg je p#red), de tekst rood en dik maakt. De CSS doet dit voor elk p element met de class red.

Het principe van CSS is erop gericht om het stylen van je pagina eenvoudiger te maken door via herbruikbare opmaakcode (de css) deze eigenschappen aan te geven.
Wil je bijvoorbeeld over je gehele pagina een rode kleur gebruiken voor je tekst, dan geef je een "joker" op:

code:

*, html
{
 color: #FF0000;
 font-weight:bold;
}

Deze css zorgt dat standaard al je tekst rood wordt, waardoor je dit maar 1 maal op hoeft te geven en het voor je hele pagina geldt.


Wil je goed met HTML en CSS kunnen werken is het verstandig dat je eerst de principes achter HTML/ CSS probeert te begrijpen, wat er op neer komt dat je voor HTML moet gaan begrijpen welke elementen in welke situatie (en volgorde) gebruikt worden.
Voor CSS zal je moeten leren hoe dat werkt, door bijvoorbeeld eerst simpel te beginnen met een bestaande HTML pagina, waarbij je zelf met wat opmaak gaat spelen en na probeert te gaan "waarom jou wijziging dit gevolg heeft".

[NNF]

R4gnax schreef op zaterdag 19 oktober 2013 @ 11:59:
[...]


W3Schools is waardeloos en op veel fronten zelfs contra-productief. Het is zo erg dat er een getekend manifest is genaamd W3Fools waarin prominente frontenders hun zorgen er over uiten.

HTML en CSS van de grond op leren door bestaande websites te bekijken is vreselijk stom vanwege de stortvloed aan oude slecht-in-elkeer gezette meuk die door anderen ook gewoon zonder er bij na te denken gewoon verbatim overgenomen is. (Het PHP syndroom.)

Beter leer je de basis uit goede documentatie of een goed, up-to-date, boek en struin je daarna de blogs af van bovengenoemde prominenten om meer de lezen over de fijnere kneepjes.

Daarnaast is PHP zeker niet de enige server-side taal om een dynamische site mee te implementeren. Sterker nog; ik zou zeggen dat ASP.NET MVC of WebPages (niet WebForms) een stuk handiger in de omgang zijn voor een beginner, omdat alles veel meer voorgestructureerd geleverd wordt en er veel meer aan hand-holding gedaan wordt. Ook door de Visual Studio IDE, waar je tegenwoordig gewoon een gratis versie van kunt krijgen die je ook gewoon voor commerciële doeleinden in mag zetten.

Zo heel erg dramatisch is W3Schools nu ook weer niet (meer) Veel van de fouten die erin zaten en werden genoemd op W3Fools zijn er inmiddels al uitgehaald (vandaar dat het inmiddels een beetje een loze site is). Het is ook niet mijn favoriete site, ik kijk liever op sites als MDN en QuirksMode als ik iets op wil zoeken, maar ik hoef het niet meer te leren Voor een absolute beginner kan het denk ik best een handige site zijn om de basisprincipes te leren.

[Ramon]

jbdeiman schreef op zaterdag 19 oktober 2013 @ 12:16:
Voor je beeldvorming maar even kort wat CSS is en hoe het werkt, aangezien je al HTMLeen beetje kent (geef je aan), neem ik aan dat je deze constructie wel kent, om bijvoorbeeld een tekst rood en dik te maken (dit is feitelijk een oude constructie en is niet aan te raden nog te gebruiken, het gaat hier om het voorbeeld):

code:

<p>
 <strong><font color="#FF0000">This is some text!</font></strong>
</p>

Wat je met CSS bijvoorbeeld eenvoudiger kan maken door:

code:

<p class="red">
This is some text!
</p>

in je css bestand zet je dan:

code:

p.red
{
 color: #FF0000;
 font-weight:bold;
}

Bovenstaande css zegt dat je voor een alinea (p element) met de classe red (.red, wanneer je id red zou gebruiken krijg je p#red), de tekst rood en dik maakt. De CSS doet dit voor elk p element met de class red.

Het principe van CSS is erop gericht om het stylen van je pagina eenvoudiger te maken door via herbruikbare opmaakcode (de css) deze eigenschappen aan te geven.
Wil je bijvoorbeeld over je gehele pagina een rode kleur gebruiken voor je tekst, dan geef je een "joker" op:

code:

*, html
{
 color: #FF0000;
 font-weight:bold;
}

Deze css zorgt dat standaard al je tekst rood wordt, waardoor je dit maar 1 maal op hoeft te geven en het voor je hele pagina geldt.


Wil je goed met HTML en CSS kunnen werken is het verstandig dat je eerst de principes achter HTML/ CSS probeert te begrijpen, wat er op neer komt dat je voor HTML moet gaan begrijpen welke elementen in welke situatie (en volgorde) gebruikt worden.
Voor CSS zal je moeten leren hoe dat werkt, door bijvoorbeeld eerst simpel te beginnen met een bestaande HTML pagina, waarbij je zelf met wat opmaak gaat spelen en na probeert te gaan "waarom jou wijziging dit gevolg heeft".

Een kleine aanvulling/verbetering:

Cascading Stylesheet:

p.red { color: red; }

Is niet echt slim, want wat ga je doen als je alles wat nu rood is groen wilt hebben?

Cascading Stylesheet:

p.red { color: green; }

Misschien? Dat wordt chaos natuurlijk...

Beter geef je classnames die iets zeggen over wat het element is en niet over hoe het eruit moet komen te zien. Dus ipv p.red, doe je p.main-content etc.

[Zerora]

Verwijderd schreef op dinsdag 15 oktober 2013 @ 10:09:
Als je liever met Chrome werkt, kan je gebruik maken van de Chrome developer tools (F12 op Windows).

De Firefox Developer Tools zijn tegenwoordig ook erg goed. Elementen inspecteren via een 3d weergave van de website is enorm handig.

Maar @ ts:

Een website maken bestaat tegenwoordig uit zo'n 4 dingen:
1) Layout ontwerpen
2) Layout template ontwikkelen vanuit een ontwerp
3) Keuze: hoe ga je de website beheren? (ontwikkeling backend of niet)
4) Widgets ontwikkelen

1) Layout ontwerpen
Dit leer je vooral door te kijken naar wat anderen doen en dan de layout met Photoshop/Fireworks na te maken. Dit is puur creativiteit eigenlijk. Al is enige kennis van webontwikkeling wel handig om erbij te hebben, want dan weet je waar je rekening mee moet houden.
Kijk dus vooral veel naar sites waar ze bijv. templates verkopen of gewoon showen (Deviantart bijv.).

2) Layout template ontwikkelen vanuit een ontwerp
Dit is vooral HTML en CSS of LESS kennis gebruiken. Ga naar sites als W3schools of andere HTML, CSS en LESS tutorial websites. Als je dat begint te begrijpen dan kun de layout van punt 1 gaan namaken.

3) Keuze: hoe ga je de website beheren?
Voordat je aan stap 3 en 4 gaat beginnen, kun je nu een keuze maken. Ga je voor een CMS of DMS systeem of ga je zelf een content beheer systeem ontwikkelen.
Het makkelijkste is natuurlijk te kiezen voor een CMS of DMS systeem. Dit bespaard je namelijk een hele hoop programmeerwerk. Aan de andere kant ben je dan wel weer gelimiteerd aan datgene wat je gekozen CMS of DMS bied aan mogelijkheden qua ontwerp, widgets, databse, etc.. Wanneer je voor een CMS of DMS systeem kiest zul je teven je gemaakte ontwerp moeten aanpassen/aanvullen zodat je ontwerp met het content beheer systeem gebruikt kan worden.
Je kunt ook kiezen om zelf een CMS of DMS systeem te ontwikkelen. Ga er dan wel vanuit dat het een tijdrovende klus is om te doen. Evenals zal je kennis over PHP, ASP of een andere (web)programmeertaal moeten beschikken om iets dergelijks te ontwikkelen. Daarnaast is enige kennis van databases en hun werking ook vereist tijdens de ontwikkeling van een CMS of DMS. Het voordeel wat je hier vooral uit kunt halen is dat je een site kunt bouwen die totaal op maat gemaakt is wat de kwaliteit vaak weer ten goede komt wanneer dit goed gedaan wordt.
Er is ook nog een derde optie waar je voor kunt kiezen. Namelijk helemaal geen beheersysteem gebruiken. Je creëert dan een statische website die iedere keer handmatig geupdate moet worden.

4) Widgets ontwikkelen
Onafhankelijk of of je nu een CMS/DMS systeem gebruikt of niet als je speciale dingen op je site wilt laten zien, zul je widgets moeten zoeken of zelf programmeren. Je hebt hierbij met name kennis van Javascript, AJAX, PHP, ASP of een andere (web)programmeertaal bij nodig hebben. Wat zijn dan die widgets? Nou denk aan widgets als een kalender, fotoalbum, weerbericht, etc... Maar net wat je nodig hebt voor je site.
Dit integreer je dan in je gemaakt layout.

[krosis]

Ik zou 20 euro spenderen aan een codeschool account en een maandje flink werken aan de HTML/CSS courses. Hier leer je meteen de best practices en ook op een best leuke manier (filmpjes, interactieve opdrachten).

[BarôZZa]

Prima tijd om ermee te beginnen. Het IE6 tranentijdperk is voorbij en semantiek is waar het om draait.

Mijn tips zijn:

1. Begin met HTML5 en CSS. Je bent in het voordeel dat je nu gelijk met HTML5 aan de slag kan gaan. Bij mijn collega's zitten de instincten naar eindeloos genestelde div-elementen er flink ingebakken. Leer jezelf meteen de nette manier aan en gebruik HTML om de informatie op je site te structureren en CSS in een los bestand om de layout te regelen.

PHP en CMS'jes zijn van latere zorg. Dat komt vanzelf als je merkt dat het lastiger wordt om een site te onderhouden met alleen HTML pagina's .

2. Laat photoshop nog even links liggen. Veel mensen zijn geneigd om eerst iets in elkaar te tekenen en vervolgens dit koste wat het kost te willen vertalen naar een ontwerp. Met vaak veel lelijke code, hacks, backgroundplaatjes en andere meuk tot gevolg. Mijn advies is: begin met een doodeenvoudige website en leer hoe je het kan uitbouwen en stijlen met behulp van CSS.

3. Bestudeer vooral heel veel andere sites. Waarom zijn die zo in elkaar gezet? Wat vind je lekker werken, wat minder? Rechtermuisknop en element inspecteren is trouwens altijd handig als je iets moois ziet en de CSS opmaak wil weten.

4. Zorg voor een leuk project over iets wat je aanspreekt aan waarmee je andere mensen kan bereiken. Op die manier zorg je dat een site ontwerpen geen eenmalige bezigheid is, maar dat je vooral leert hoe je je site kan blijven verbeteren en moet onderhouden. Probeer een leuk onderwerp of doelgroep aan te spreken, op een persoonlijke site komen niet veel mensen. Zo leer je ook andere zaken als promotie en werken met de zoekmachines. Voor mij helpt dat enorm om gemotiveerd te blijven omdat je feedback en leuke reacties krijgt van andere mensen.

[King of Snake]

Ik ben zelf een tijdje geleden ook begonnen met het leren van de basics in webdesign/development en ik vond deze cursus erg prettig als introductie HTML en CSS:
YouTube: Day 1: Your First Webpage (30 Days to Learn HTML & CSS)