Become a Productive Front-End Developer & Continue to be one


Published on

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

Published in: Technology, Design
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Become a Productive Front-End Developer & Continue to be one

  1. 1. Become a Productive Front-End Developer… & Continue to be one Trevor Davis
  2. 2. Hi, I’m Trevor Davis. I’m a Front-End Developer at Matrix Group in Alexandria, VA
  3. 3. Today’s agenda 1. My path through web development 2. How to become a successful Front-End Developer 3. Questions throughout
  4. 4. How did I get here? By learning “everything”
  5. 5. High school ‣ Went to Georgetown Prep in Rockville ‣ C++ classes ‣ Summers & winters at Montgomery County Government ‣ User support ‣ Web intern
  6. 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. 7. Internship - Harrisburg Horizon
  8. 8. Senior Project - The College Forecast ‣ Social networking site for College Musicians ‣ PHP/MySQL
  9. 9. Ok, now what? How do I get a job?
  10. 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. 11. My role at Matrix Group ‣ Slicing sites ‣ Regular updates ‣ Implementations ‣ Mild programming ‣ The “glue” that holds everything together
  12. 12. Our process Information Design Architecture Slicing Implementation Programming Completed Website
  13. 13. Questions so far?
  14. 14. It all starts with the structure Would you build a house without a foundation?
  15. 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. 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. 17. Let the web be the web Otherwise, you’re wasting your time
  18. 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. 19. Stay organized Your time is money
  20. 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. 21. NETTUTS article ‣ Reset ‣ Alphabetize ‣ Organization ‣ Consistency ‣ Start in the right place ‣
  22. 22. Utilize available tools There is so much awesome free stuff
  23. 23. Content Management Systems ‣ ExpressionEngine Core ‣ WordPress ‣ Joomla ‣ Drupal ‣ Textpattern
  24. 24. Frameworks ‣ Django ‣ Ruby on Rails ‣ CakePHP ‣ CodeIgniter ‣ Blueprint CSS ‣ 960 Grid System ‣ JavaScript frameworks (jQuery, Prototype, MooTools, etc)
  25. 25. Avoid Hacks Maintaining them will make your life hell
  26. 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. 27. Progressive enhancement Create the best, for the best, but make it work everywhere
  28. 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. 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. 30. Know how things work Some things are simpler than you think
  31. 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. 32. Collaborate It can only make you better
  33. 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. 34. Know how to do everything Make yourself more valuable
  35. 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. 36. Validation isn’t everything Don’t live and die by it
  37. 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. 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. 39. Jeff Croft ‣ Really, that’s about it. Notably missing from the list is: Use Web Standards (including established best practices). ‣ standards-and-standardistas/
  40. 40. Experiment How else would you learn?
  41. 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. 42. Investigate Learn from how others have done it
  43. 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. 44. Keep learning Don’t fall behind
  45. 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. 46. Enjoy the jobs you take You’ll do better work when you are happy
  47. 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. 48. Be Passionate ‣ At my job: FEDs vs. Programmers ‣ Push the bar ‣ New technology ‣ ExpressionEngine project
  49. 49. Give back Use your skills to make a difference
  50. 50. Give back ‣ Participate in forums ‣ Share knowledge through blog articles ‣ Create a website for a good cause ‣ Pro-bono
  51. 51. Questions?
  52. 52. Get in Touch with Me ‣ Online: ‣ Twitter:
  53. 53. Thank You.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.