[HTML, CSS, JS] Frontend #43: 0 === -0

quote:

<ul>
<li class="wrap">
<a href="#">

<li class="logo"><img src="img/--.png" alt="Nuon"></li>

<li class="kenmerk"> kenmerk </li>

<li class="prijs"> prijs </li>

</a>
</li>
</ul>

Dit is wat ik tot nu toe heb, de eerste li een width van 33%, tweede li 33%, derde li 33%, etc. Maar dit werkt dus niet.

Edit: dit is niet m'n eerste aanpak geweest, maar als redelijk ervaren html/css'er kwam ik er gewoon niet uit en maakte ik zoiets fout als hierboven

quote:

Op woensdag 4 maart 2015 21:02 schreef LeNick het volgende:

[..]

Dit is wat ik tot nu toe heb, de eerste li een width van 33%, tweede li 33%, derde li 33%, etc. Maar dit werkt dus niet.

Edit: dit is niet m'n eerste aanpak geweest, maar als redelijk ervaren html/css'er kwam ik er gewoon niet uit en maakte ik zoiets fout als hierboven

Zoiets? Even in 2 minuten opgezet.
http://jsfiddle.net/agjek7Lw/1/

quote:

Op woensdag 4 maart 2015 21:16 schreef donroyco het volgende:

[..]

Zoiets? Even in 2 minuten opgezet.
http://jsfiddle.net/agjek7Lw/1/

Perfect ja! Thanks

quote:

Op woensdag 4 maart 2015 20:45 schreef LeNick het volgende:
Een tabel (geen td/tr shit)

Een tabel is "td/tr shit".

Als je informatie als tabel wilt weergeven, waarom dan niet gewoon een tabel gebruiken?

quote:

Op woensdag 4 maart 2015 21:48 schreef LeNick het volgende:

[..]

Perfect ja! Thanks

Waar kan ik de factuur naartoe sturen?

quote:

Op woensdag 4 maart 2015 22:11 schreef Leshy het volgende:

[..]

Een tabel is "td/tr shit".

Als je informatie als tabel wilt weergeven, waarom dan niet gewoon een tabel gebruiken?

Le-zen.

quote:

Op woensdag 4 maart 2015 18:39 schreef dimmak het volgende:

[..]

Ik heb ook wel een klein beetje kennis van JS. Maar ben met iets bezig waarvoor jQuery me handig lijkt. Dit zal niet het enige zijn wat ik eruit nodig heb. Spelenderwijs hoop ik met beide straks goed overweg te kunnen.

Waar veel beginnende mensen juist de mist in gaan is dat ze of niet weten of vergeten dat jQuery is gebouwd op JavaScript. Het heeft (tenminste, vind ik) érg veel meerwaarde om eerst je JavaScript bij te schaven en een beetje te leren waarom dingen werken zoals ze werken voordat je je verdiept in jQuery. Dit gaat je veel bloed, zweet en tranen besparen. Niet dat je geen jQuery kan gebruiken, maar hou het feit dat jQuery uiteindelijk gewoon JavaScript is en niet andersom in je achterhoofd.

[ Bericht 1% gewijzigd door Wicketd op 04-03-2015 22:46:14 ]

quote:

Op woensdag 4 maart 2015 22:13 schreef donroyco het volgende:
Le-zen.

Hij zegt nergens waarom hij geen daadwerkelijke tabel wil gebruiken.

Je voorbeeld werkt prima, maar het enige dat je hebt gedaan is de <tr> en <td> tags vervangen door <div>s. Leuk, maar dat heeft natuurlijk geen enkel praktisch nut.

quote:

Op woensdag 4 maart 2015 19:47 schreef Tshot het volgende:

[..]

Duidelijk! Kwestie van mezelf die nieuwe elementen eigen maken dus. Nog een vraag als beginneling: nu kopieer ik vaak stukjes HTML die ik dan een beetje aanpas naar mijn eigen wensen, maar hoe doen jullie dit?

Kennen jullie echt ieder element, iedere class etc uit je hoofd en typ je deze ook steeds opnieuw?

Het kopiëren en aanpassen van code is aardig om een beetje te zien wat een stukje code doet maar als je zelf echt een website op wilt zetten is dat het beste gewoon zelf te schrijven.

Dat is ook de beste manier om het te leren. Bouw met het handje vol elementen wat je kent iets heel simpels. Zelf bedenken welke elementen het beste op elke plek in je code werken geeft je een veel beter begrip van de elementen dan afkijken bij andere sites. Als je dan iets nieuws geleerd hebt voeg je dat toe aan je pagina.
De logica van een voorbeeld van een boek/site volgen is makkelijker dan die logica zelf te gebruiken in iets nieuws. Daarom lekker zelf blijven oefenen.

Er zijn altijd wel wat elementen of attributen die je niet uit je hoofd weet, of waarvan je even vergeet hoe ze precies heten. Dan is Google je vriend. Maar het meeste van de veelgebruikte elementen leer je vanzelf uit het hoofd, simpelweg om je ze steeds blijft gebruiken.

Daarnaast zijn er wel tools die helpen te voorkomen dat je onnodig je code moet blijven herhalen.

Te beginnen bij een goede code editor. Het aanvullen van wat je typt, verschillende kleuren voor de verschillende elementen in je code, allemaal van die kleine dingen die je helpen snel en overzichtelijk te coden.

Zelf gebruik ik Sublime Text 3, die is lekker snel en heeft een uitgebreide selectie aan plug ins. Ook Brackets is naar mijn idee wel een goede editor. Die heeft een handige mogelijkheid om de veranderingen die je maakt direct op je pagina weer te geven. Als je schermgrootte het toe staat kun je dan je editor en browser naast elkaar openen en krijg je direct visuele feedback van wat je code aan het doen is. Sublime kan dat met een plug in ook.

Daarnaast heeft een beetje code editor de mogelijkheid om stukken veel gebruikte code op te slaan als zogeheten snippets. Die kun je dan later oproepen in plaats van het helemaal weer uit te typen.
Denk daarbij bijvoorbeeld aan de basis structuur van je pagina (html/head/body). Die is elke keer het zelfde dus het is handig om die snel in te kunnen laden in plaats van voor elke pagina uit te gaan typen.

Daarnaast is het een erg fijne toevoeging om Emmet te gebruiken. Dat is een plug in waarmee je met minder typ werk dezelfde code neer te zetten.
Wil je bijvoorbeeld een div maken om je pagina mee in te pakken dan typ je
en druk je op Tab en Emmet maakt er

Als je de regels van Emmet kent en weet wat de structuur van je code moet zijn kun je een serie elementen aan elkaar plakken en sneller dingen die in je hoofd zitten uit typen.


Het zijn kleine dingetjes maar op de grote hoeveelheid code die gaat schrijven in de tijd dat je hier mee bezig bent scheelt het toch een hoop tijd. Tijd die beter besteed is aan het nadenken over wat je wilt bouwen en hoe je dat gaat doen.

quote:

Op woensdag 4 maart 2015 22:22 schreef Wicketd het volgende:

[..]

Waar veel beginnende mensen juist de mist in gaan is dat ze of niet weten of vergeten dat jQuery is gebouwd op JavaScript. Het heeft (tenminste, vind ik) érg veel meerwaarde om eerst je JavaScript bij te schaven en een beetje te leren waarom dingen werken zoals ze werken voordat je je verdiept in jQuery. Dit gaat je veel bloed, zweet en tranen besparen. Niet dat je geen jQuery kan gebruiken, maar hou het feit dat jQuery uiteindelijk gewoon JavaScript is en niet andersom in je achterhoofd.

Daar ben ik me volledig van bewust. Net zoals ik zeg, ik weet wel wat van JS. Heb er jaren geleden wel mee gewerkt maar de kennis moet bijgeschaafd worden. Dat hoop ik spelenderwijs te doen.

Echt goed JavaScript leren doe je door artikelen te lezen. En niet alleen over de taal zelf, maar ook over debuggen. Je devtools goed kennen is de sleutel.

quote:

Op donderdag 5 maart 2015 02:28 schreef BrainOverfloW het volgende:
Daarnaast is het een erg fijne toevoeging om Emmet te gebruiken. Dat is een plug in waarmee je met minder typ werk dezelfde code neer te zetten.

Prachtig, ik werk zelf met notepad++ maar zie dat het daar ook beschikbaar voor is, pfff dat gaat een hoop typen schelen!!!

quote:

Op donderdag 5 maart 2015 08:22 schreef Catch22- het volgende:
Echt goed JavaScript leren doe je door artikelen te lezen. En niet alleen over de taal zelf, maar ook over debuggen. Je devtools goed kennen is de sleutel.

Met codecademy schiet ik wel een stuk op toch?

quote:

Op donderdag 5 maart 2015 09:22 schreef dimmak het volgende:

[..]

Met codecademy schiet ik wel een stuk op toch?

Geen idee, ken ik niet A List Apart is bijvoorbeeld wel een goeie. Ik had "vroeger" een feed in Google Reader met allerhande gerelateerde sites waaruit ik veel heb geleerd. Nu lees ik artikelen uit mijn twitterfeed van een aantal vooraanstaande frontend devs (Christian Heilman en Paul Irish (re)tweeten veel handige artikelen)

quote:

Op donderdag 5 maart 2015 09:22 schreef dimmak het volgende:

[..]

Met codecademy schiet ik wel een stuk op toch?

Dé site voor mij wat betreft front-end is voor mij in het begin altijd Smashing Magazine geweest. Ik kijk er nog steeds regelmatig op. Zeker een aanradertje.

Smashing is wel vrij conceptueel en soms een beetje html/css, weinig JS.

quote:

Op donderdag 5 maart 2015 08:44 schreef Chandler het volgende:

[..]

Prachtig, ik werk zelf met notepad++ maar zie dat het daar ook beschikbaar voor is, pfff dat gaat een hoop typen schelen!!!

Emmet heeft inderdaad support voor aardig wat van de populaire editors. Het zit zelfs in Codepen en JSFiddle ingebouwd. Het werkt overigens ook voor CSS. "w100" wordt bijvoorbeeld "width: 100px;" Ook heeft het wat extra functionaliteiten rondom text selecteren e.d.

Hier een screencast van Chris Coyer (van CSS-Tricks en Codepen) die een aardig overzicht geeft van wat Emmet zoal kan.

Hij heeft ook wel een interessant verhaal over wat een goede workflow is voor het bouwen van een website. Gaat over dingen als Git, Sublime, Emmet, Sass. Handige dingen om van op de hoogte te zijn.

Thanks, heb er al even mee gespeeld maar idd scheelt me aardig wat typen!!

quote:

Op donderdag 5 maart 2015 16:00 schreef Chandler het volgende:
Thanks, heb er al even mee gespeeld maar idd scheelt me aardig wat typen!!

doe jezelf een lol en kies een goede editor

quote:

Op donderdag 5 maart 2015 16:07 schreef Catch22- het volgende:
doe jezelf een lol en kies een goede editor

Precies, dat heb ik dus ook gedaan. Notepad++ voldoet aan al mijn eisen, is lightweight, typt precies zoals ik wil en heeft bergen met plugins die mij het leven gemakkelijker maken. Er zullen ongetwijfeld genoeg IDE's zijn die beter zijn, maar het blijft toch de voorkeur van de gebruiker Catch !:)
Ik schrijf al jaren mijn programeersels met notepad++ en zal niet weten waarom ik voor een andere editor zou moeten gaan, ik koop toch ook geen nieuwe auto omdat die beter is terwijl ik zeer tevreden ben met mijn huidige auto? (heb helemaal geen auto, dat terzijde )

quote:

Op donderdag 5 maart 2015 16:09 schreef Chandler het volgende:

[..]

Precies, dat heb ik dus ook gedaan. Notepad++ voldoet aan al mijn eisen, is lightweight, typt precies zoals ik wil en heeft bergen met plugins die mij het leven gemakkelijker maken. Er zullen ongetwijfeld genoeg IDE's zijn die beter zijn, maar het blijft toch de voorkeur van de gebruiker !:)
Ik schrijf al jaren mijn programeersels met notepad++ en zal niet weten waarom ik voor een andere editor zou moeten gaan, ik koop toch ook geen nieuwe auto omdat die beter is terwijl ik zeer tevreden ben met mijn huidige auto? (heb helemaal geen auto, dat terzijde )

Omdat je dan betere code-completion en docs hebt. Scheelt een hoop werk

quote:

Op donderdag 5 maart 2015 16:10 schreef Catch22- het volgende:
Omdat je dan betere code-completion en docs hebt. Scheelt een hoop werk

Beter wil niet altijd zeggen fijner, werk met heel veel plezier met deze editor..
Maar wil best een keer met je mee kijken hoe fijn andere IDE's werken!

quote:

Op donderdag 5 maart 2015 16:13 schreef Chandler het volgende:

[..]

Beter wil niet altijd zeggen fijner, werk met heel veel plezier met deze editor..
Maar wil best een keer met je mee kijken hoe fijn andere IDE's werken!

Nouja, hoe meer code er completed wordt, hoe minder je fout kan doen natuurlijk. Je moet uiteindelijk kiezen wat je fijner vindt, maar er zijn IDE's die je leven makkelijker maken.

Misschien is het gebrek aan ervaring van IDE's wel mijn probleem hoor heb je een voorbeeld wat voor mij een leuke zou zijn? je hebt namelijk zo ontiegelijk veel... ennuh moet wel portable zijn

quote:

Op donderdag 5 maart 2015 16:26 schreef Chandler het volgende:
Misschien is het gebrek aan ervaring van IDE's wel mijn probleem hoor heb je een voorbeeld wat voor mij een leuke zou zijn? je hebt namelijk zo ontiegelijk veel... ennuh moet wel portable zijn

portable als in je wil niet betalen?

Ik gebruik zelf Netbeans (want dat gebruiken mijn backenders ook en anders kan ik de Java projecten niet draaien), maar eclipse is ook fijn. Voor MacOSX zijn er een aantal andere prettige (SublimeText et al)