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.

1. Frank West
Front end web developer
Lover of cats
@frankjwest
Front end web development – How to be great!
by Frank West, 1 June 2013

2. Distractions
Front end web development – How to be great!
by Frank West, 1 June 2013

3. Front end web development – How to be great!
by Frank West, 1 June 2013

4. Introducing Ella
Front end web development – How to be great!
by Frank West, 1 June 2013

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

9. 3 seconds

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