Presentation given to Mr. Brown's class at Damascus High School on 3/27/2009

1. Become a Productive
Front-End Developer…
& Continue to be one
Trevor Davis

2. Hi, I’m Trevor Davis.
I’m a Front-End Developer at Matrix Group in Alexandria, VA

3. Today’s agenda
1. My path through web development
2. How to become a successful Front-End Developer
3. Questions throughout

4. How did I get here?
By learning “everything”

5. High school
‣ Went to Georgetown Prep in Rockville
‣ C++ classes
‣ Summers & winters at Montgomery County Government
‣ User support
‣ Web intern

6. College
‣ Went to Dickinson College in Pennsylvania
‣ Knew I wanted to do something with computers
‣ Majored in Computer Science
‣ Worked breaks from school at Montgomery County Government
‣ Thought I wanted to go to grad school
‣ First real HTML/CSS exposure: Senior internship & project

7. Internship - Harrisburg Horizon

8. Senior Project - The College Forecast
‣ Social networking site for
College Musicians
‣ PHP/MySQL

9. Ok, now what?
How do I get a job?

10. Build a Portfolio
‣ College cheerleading site for girlfriend
‣ Portfolio for mom’s friend who is a makeup artist
‣ Scoured Craigslist for small projects and full time jobs
‣ Ended up at Matrix Group

11. My role at Matrix Group
‣ Slicing sites
‣ Regular updates
‣ Implementations
‣ Mild programming
‣ The “glue” that holds everything together

12. Our process
Information
Design
Architecture
Slicing Implementation
Programming
Completed Website

13. Questions so far?

14. It all starts with the structure
Would you build a house without a foundation?

15. Don’t touch that CSS!
‣ Always start with the HTML
‣ CSS with bad HTML is worthless
‣ “CSS doesn’t care which element is doing what, an element is an
element” - Eric Meyer
‣ Once you have a solid foundation, then you should add the style
and the behavioral level
‣ jQuery is amazing

16. How do you define “good” HTML
‣ It’s a craft
‣ Semantic (in naming too)
‣ Clear & Concise
‣ Avoid classitis and divitis
‣ Use descendant selectors
‣ Simple Example

17. Let the web be the web
Otherwise, you’re wasting your time

18. Let the web be the web
‣ The web is constantly evolving
‣ Don’t waste time trying to get everything to look exactly the same
in all browsers
‣ Do you think end users are going to open your site in 2 browsers
to compare?

19. Stay organized
Your time is money

20. Find a system that works
‣ Folder structure
‣ files, images, includes, scripts, stylesheets
‣ Start with a “framework”
‣ Comments in CSS
‣ Alphabetize CSS properties
‣ Single line vs. multi-line CSS
‣ Find what works for you

21. NETTUTS article
‣ Reset
‣ Alphabetize
‣ Organization
‣ Consistency
‣ Start in the right place
‣ http://net.tutsplus.com/tutorials/5-tips-to-writing-better-css/

22. Utilize available tools
There is so much awesome free stuff

23. Content Management Systems
‣ ExpressionEngine Core
‣ WordPress
‣ Joomla
‣ Drupal
‣ Textpattern

24. Frameworks
‣ Django
‣ Ruby on Rails
‣ CakePHP
‣ CodeIgniter
‣ Blueprint CSS
‣ 960 Grid System
‣ JavaScript frameworks (jQuery, Prototype, MooTools, etc)

25. Avoid Hacks
Maintaining them will make your life hell

26. Code for the best, first
‣ Firefox, Safari & others first
‣ Then, use conditional comments for IE
‣ Code with the knowledge of what will break in IE
‣ Double margin bug
‣ Duplicate characters bug

27. Progressive enhancement
Create the best, for the best, but make it work everywhere

28. Most browsers move faster
‣ Take advantage of advanced selectors
‣ Just make sure that it’s non-essential to reading the content
‣ CSS itself is progressive enhancement
‣ Drop Cap Example

29. The content needs to work for all
‣ IE
‣ Screen readers
‣ People without JavaScript
‣ Resizable text (page zoom)
‣ Examine the site’s audience
‣ Drop Down Menu Example

30. Know how things work
Some things are simpler than you think

31. Learn how to create your own
‣ Ability to use someone else’s code is good
‣ Being able to create your own version to suit your needs is better
‣ Some plugins are ridiculously bloated
‣ Accordion, Tabs, Resets, Scrollers, etc
‣ Lightbox Example
‣ Accordion Example (UI)

32. Collaborate
It can only make you better

33. Collaboration is key
‣ Each discipline speaks different “languages”, and you can learn
something new from everyone
‣ I learned so much from my fellow FEDs; I never would have
gotten to where I am today
‣ Collaborate all the time during the day
‣ Network with others at events or online

34. Know how to do everything
Make yourself more valuable

35. Be a master of all trades
‣ Learn programming languages
‣ There is no reason for programmers to code simple things
like email forms
‣ Take design classes
‣ Designers aren’t going to design every element for a site
‣ While it’s great to be able to collaborate, it’s also awesome to
“own” an entire site

36. Validation isn’t everything
Don’t live and die by it

37. Validation isn’t everything
‣ Validation is just a tool to help in building
‣ CSS is an immature language
‣ You should always strive to do everything as semantically as
possible, but sometimes you can’t
‣ Image Replacement Example
‣ Sometimes you just need to get it done

38. Jeff Croft
‣ As such, “standards” will never appear on my priority list. When
I’m working on a project, my priorities look something like this:
1. Create solutions that solve the client’s stated problems.
2. Find ways to achieve the client’s stated goals.
3. Find ways to solve problems the client doesn’t even know they
have.
4. Use tools that are elegant and efficient, and help me produce
quality work within the client’s budget and timeframe.

39. Jeff Croft
‣ Really, that’s about it. Notably missing from the list is: Use Web
Standards (including established best practices).
‣ http://jeffcroft.com/blog/2007/aug/29/standards-web-
standards-and-standardistas/

40. Experiment
How else would you learn?

41. Experiment
‣ If you think of an idea, try it
‣ Talk with others about it
‣ Post it on your site and get feedback
‣ Play, play, play

42. Investigate
Learn from how others have done it

43. Investigate
‣ I rarely go to a webpage and don’t look at the markup, CSS,
JavaScript, etc.
‣ Firebug
‣ Web Developer Toolbar
‣ HTML Validator
‣ Think about how you would do things differently

44. Keep learning
Don’t fall behind

45. Keep learning
‣ Read Books
‣ RSS Feeds (96 feeds)
‣ Attend conferences
‣ Visit forums
‣ If you stop learning, it will pass you by; technology moves too fast

46. Enjoy the jobs you take
You’ll do better work when you are happy

47. Enjoy the jobs you take
‣ Do projects that you want to do
‣ Do something that will challenge yourself or expand your skillset
‣ You most likely won’t be a millionaire, so make sure you enjoy
what you are doing
‣ Example of bad projects
‣ WordPress migration
‣ Online store customization

48. Be Passionate
‣ At my job: FEDs vs. Programmers
‣ Push the bar
‣ New technology
‣ ExpressionEngine project

49. Give back
Use your skills to make a difference

50. Give back
‣ Participate in forums
‣ Share knowledge through blog articles
‣ Create a website for a good cause
‣ Pro-bono

51. Questions?

52. Get in Touch with Me
‣ Online: http://trevordavis.net/
‣ Twitter: http://twitter.com/davist11

53. Thank You.