Download as ZIP, PPTX
Uploaded byWilfred Nas
front end workshop v3
The document outlines an introductory workshop on client side development given by Wilfred Nas. It covers HTML, CSS, and JavaScript. For HTML, Wilfred discusses proper document structure using appropriate tags like div, table, and headings. For CSS, he covers selectors, positioning, and working around browser inconsistencies. For JavaScript, he emphasizes progressive enhancement and avoiding reliance on it for accessibility.
Editor's Notes
- #3 I have been working on the web for the past 14 years. I started out as a designer bugging developers. In the past years I have come full circle, becoming the developer that is bugging designers.
- #4 giving workshops is not my main job, just something I do on the side. mostly when people give me beer and get me talking :)
- #5 the only url you have to write down
- #6 There are three sides to a website... mvc...
- #7 we will start with the basics, HTML. boring isn’t it. after all html is easy...
- #8 There are a lot of things to think about, like;
- #9 html is for structure, a way to show the content...
- #11 Which doctype do you use?
- #12 Strict is the way to go, if you can
- #14 sketch the difference between ie and w3c
- #15 and still this is the way most websites were build...
- #19 especially if your building data intensive applications...
- #22 make sure you specify this one BEFORE the tbody
- #31 most people, turning away from tables, will use div’s in the same way...
- #41 to identify, must be unique
- #42 not just for css. to classify
- #44 most developers get a fo and a graphic design. they will use the design to build and the fo to tweak. they should do the reverse
- #45 bad
- #46 don’t add extra div’s to create that border the design calls for. You allready have enough elements to play with...
- #56 should be around 10.30
- #58 start 11.00
- #60 selectors are not limited to id’s and can be chained... multiple classes can be used. and such...
- #61 supported in most browsers
- #78 support is not as wide spread
- #82 Match any E elements, whose att atribute value begins with ‘val’
- #83 Matches any E element that has no children (including text nodes)
- #84 matches any F element that is preceded by an E element... general sibling selector
- #98 style the page you just made with proper html... start 12.00
- #99 should be 11.45
- #101 around 12.30
- #102 start 13.00
- #103 === is exactly equal to (value and type) == is equal to
- #110 build a good app and make it better. don’t build a good app and let it slip away...
- #111 build as if you have no javascript en HIJACK the form actions with javascript
- #114 please don’t try to make it into it...
- #115 Really it is not.
- #124 power, confusion ie is the problem
- #125 further than that, I will not go. as stuart talk opens my eyes but not enough. there is more in this than I know...
- #127 Don’t put all of your trust in patterns...
- #135 transactie module by the dutch police to process your tickets is suffering...
- #136 used to be no problem, as we left the page after a while
- #137 We don’t leave the page anymore, instead we keep producing more and more dom objects...
- #138 he forgot css and left out json or html as a data layer...
- #139 Where does the name ajax stood for in the beginning...
- #140 sorry for that, a mistake...
- #141 The cleaner was a household name for so long, that we should use it...
- #142 look into the architecture document for a good example, me I make the mistake sometimes, that’s where my hair is going...
- #154 including main characters and a compelling story line...
- #155 JavaScript as a language is great, but has many bad parts. You want to avoid them...
- #156 A must have reference guide of a gaziljon pages. Any decent JavaScript developer has a copy handy...