No tech, no code, just plain old simple English as I talk you through the entire journey of front end web development. Whether you're new to the industry or have been in it for years, this talk will help you become a great front end developer.
5. Where is the website?
Global (SC)
Global (NM)
US (SC)
Global (CS)
April 2013
April 2013
March 2013
March 2012
March 2013
90.17
83.22
78.49
66.4
67.1
Bing
3.61
5.4
10.73
16.7
16.9
Yahoo!
3.08
8.01
9.12
11.6
11.8
Google
Key
SC
NM
Net Market
CS
Front end web development – How to be great!
Stat Counter
ComScore
by Frank West, 1 June 2013
6. The basics
• Header tags, h1 – h6
• Page titles and meta tags
• HTML 5
– Header, footer, article, section, aside
– Address
– Time
Front end web development – How to be great!
by Frank West, 1 June 2013
7. Adding more
• Open graph
– Meta tags for social
• Microdata (Schema.org)
– Supported by Google, Yahoo! and Bing
– Define books, movies, people, products, reviews,
organisations, events and much more
Front end web development – How to be great!
by Frank West, 1 June 2013
8. Another step
• Google Analytics
– Events
• Videos being played
• Ajax events being triggers
• Tabs be switched
– Filters
• Logged in vs Logged out
Front end web development – How to be great!
by Frank West, 1 June 2013
10. Understand it
•
•
•
•
•
•
Sprites
Minified files
Code ordering
Compressed images
Do we need external libraries
Even setting heights and widths on images
Front end web development – How to be great!
by Frank West, 1 June 2013
11. Test it
•
•
•
•
Google Chrome developer tools
Google page speed
Gtmetrix
YSlow
Front end web development – How to be great!
by Frank West, 1 June 2013
12. Front end web development – How to be great!
by Frank West, 1 June 2013
13. Front end web development – How to be great!
by Frank West, 1 June 2013
14. Front end web development – How to be great!
by Frank West, 1 June 2013
15. Front end web development – How to be great!
by Frank West, 1 June 2013
16. Front end web development – How to be great!
by Frank West, 1 June 2013
17. Front end web development – How to be great!
by Frank West, 1 June 2013
18. Front end web development – How to be great!
by Frank West, 1 June 2013
19. A gentle hand
•
•
•
•
•
Understand the design
Talk with the designer
Pay attention to detail
Question inconsistencies
Master typography
Front end web development – How to be great!
by Frank West, 1 June 2013
20. They’re all dead Dave
Front end web development – How to be great!
by Frank West, 1 June 2013
21. Is it alive
• Hover, focus, active states
– Links
– Buttons
– Forms
– Table rows
• It doesn’t need to be fast
Front end web development – How to be great!
by Frank West, 1 June 2013
22. Where is it?
• Icons
– Are they obvious?
• Search
– Where is it?
• Terminology
– What does that mean?
• Errors
– The button doesn’t work?
Front end web development – How to be great!
by Frank West, 1 June 2013
23. Front end web development – How to be great!
by Frank West, 1 June 2013
24. Front end web development – How to be great!
by Frank West, 1 June 2013
25. Take the challenge
•
•
•
•
No mouse
Screen readers
Black and white
200% text
Front end web development – How to be great!
by Frank West, 1 June 2013
26. We have arrived
• Functionality
Front end web development – How to be great!
by Frank West, 1 June 2013
27. How to be great!
•
•
•
•
•
•
•
HTML, CSS, JavaScript
SEO
Performance
Design
Interaction
User experience
Accessibility
Front end web development – How to be great!
by Frank West, 1 June 2013