Your SlideShare is downloading. ×
0
Front end web development: How to be great
Front end web development: How to be great
Front end web development: How to be great
Front end web development: How to be great
Front end web development: How to be great
Front end web development: How to be great
Front end web development: How to be great
Front end web development: How to be great
Front end web development: How to be great
Front end web development: How to be great
Front end web development: How to be great
Front end web development: How to be great
Front end web development: How to be great
Front end web development: How to be great
Front end web development: How to be great
Front end web development: How to be great
Front end web development: How to be great
Front end web development: How to be great
Front end web development: How to be great
Front end web development: How to be great
Front end web development: How to be great
Front end web development: How to be great
Front end web development: How to be great
Front end web development: How to be great
Front end web development: How to be great
Front end web development: How to be great
Front end web development: How to be great
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Front end web development: How to be great

245

Published on

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 …

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
245
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×