Trevor Davis
Continue to be one
Become a Productive Front-End Developer…
&
Hi, I’m Trevor Davis.
I’m a Front-End Developer at Matrix Group in Alexandria, VA
Title here
1. My path through web development
2. How to become a successful Front-End Developer
3. Questions throughout
Today’s agenda
How did I get here?
By learning “everything”
Title here
‣ Went to Georgetown Prep in Rockville
‣ C++ classes
‣ Summers & winters at Montgomery County Government
‣ User support
‣ Web intern
High school
Title here
‣ 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
College
Title here
Internship - Harrisburg Horizon
Title here
‣ Social networking site for College Musicians
‣ PHP/MySQL
Senior Project - The College Forecast
Ok, now what?
How do I get a job?
Title here
‣ 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
Build a Portfolio
Title here
‣ Slicing sites
‣ Regular updates
‣ Implementations
‣ Mild programming
‣ The “glue” that holds everything together
My role at Matrix Group
Title here
Our process
Information Architecture Design
Slicing Implementation
Programming
Completed Website
Questions so far?
It all starts with the structure
Would you build a house without a foundation?
Title here
‣ 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
Don’t touch that CSS!
Title here
‣ It’s a craft
‣ Semantic (in naming too)
‣ Clear & Concise
‣ Avoid classitis and divitis
‣ Use descendant selectors
‣ Simple Example
How do you define “good” HTML
Let the web be the web
Otherwise, you’re wasting your time
Title here
‣ 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?
Let the web be the web
Stay organized
Your time is money
Title here
‣ 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
Find a system that works
Title here
‣ Reset
‣ Alphabetize
‣ Organization
‣ Consistency
‣ Start in the right place
‣ http://net.tutsplus.com/tutorials/5-tips-to-writing-better-css/
NETTUTS article
Utilize available tools
There is so much awesome free stuff
Title here
‣ ExpressionEngine Core
‣ WordPress
‣ Joomla
‣ Drupal
‣ Textpattern
Content Management Systems
Title here
‣ Django
‣ Ruby on Rails
‣ CakePHP
‣ CodeIgniter
‣ Blueprint CSS
‣ 960 Grid System
‣ JavaScript frameworks (jQuery, Prototype, MooTools, etc)
Frameworks
Avoid Hacks
Maintaining them will make your life hell
Title here
‣ 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
Code for the best, first
Progressive enhancement
Create the best, for the best, but make it work everywhere
Title here
‣ 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
Most browsers move faster
Title here
‣ IE
‣ Screen readers
‣ People without JavaScript
‣ Resizable text (page zoom)
‣ Examine the site’s audience
‣ Drop Down Menu Example
The content needs to work for all
Know how things work
Some things are simpler than you think
Title here
‣ 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)
Learn how to create your own
Collaborate
It can only make you better
Title here
‣ 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
Collaboration is key
Know how to do everything
Make yourself more valuable
Title here
‣ 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
Be a master of all trades
Validation isn’t everything
Don’t live and die by it
Title here
‣ 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
Validation isn’t everything
Title here
‣ 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.
Jeff Croft
Title here
‣ 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/
Jeff Croft
Experiment
How else would you learn?
Title here
‣ If you think of an idea, try it
‣ Talk with others about it
‣ Post it on your site and get feedback
‣ Play, play, play
Experiment
Investigate
Learn from how others have done it
Title here
‣ 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
Investigate
Keep learning
Don’t fall behind
Title here
‣ Read Books
‣ RSS Feeds (96 feeds)
‣ Attend conferences
‣ Visit forums
‣ If you stop learning, it will pass you by; technology moves too fast
Keep learning
Enjoy the jobs you take
You’ll do better work when you are happy
Title here
‣ 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
Enjoy the jobs you take
Title here
‣ At my job: FEDs vs. Programmers
‣ Push the bar
‣ New technology
‣ ExpressionEngine project
Be Passionate
Give back
Use your skills to make a difference
Title here
‣ Participate in forums
‣ Share knowledge through blog articles
‣ Create a website for a good cause
‣ Pro-bono
Give back
Questions?
Title here
‣ Online: http://trevordavis.net/
‣ Twitter: http://twitter.com/davist11
Get in Touch with Me
Thank You.