I have had a couple people ask me recently about how to do a career change into web design and development since I recently switched over from doing some freelance work on the side to a full time job as a junior front end developer. After giving out advice in rambling emails and Gchat messages, I thought it might be better to organize and condense my thoughts down into a hopefully helpful blog post.
That’s my background, and so my advice will skew towards a skill set more in the middle of the technical and design spectrum: good advice for someone wanting to get into a web designer or interaction designer role, but it should also be useful for anyone wanting to land a jr. position as a front end developer at smaller shop where you will, perhaps, be expected to think about and take on a more diverse set of skills. So, without further ado…
To be a front end developer you absolutely need to know:
HTML! It’s the markup language that defines the structure of any website, so you had best know it very well.
CSS, the styles that define how a website looks. At first glimpse CSS and HTML appear straightforward and simple, but they are their own complicated beasts, especially in today’s world of more widespread browser support for the newest and greatest CSS3 modules and HTML5 tags. Definitely know at least a little bit about responsive design and cross browser compatibility and quirks. As a bare minimum for CSS, I’d say you should understand the box model, positioning, and floats. I learned the basics so long ago that I don’t even remember where I started, but current resources I’ve heard good things about include the Mozilla Developer Network and Codecademy.
The basics of a Unix-style command line. If you use Windows, that’s fine, there are command line tools out there for you, but most developers I’ve come across all use OS X or a flavor of Linux and do a lot of work from the command line. You should know how to navigate the file structure of your computer using the command line, how a Unix system is organized, and how to do basic things like install things and create and delete directories from the command line. There are very useful tools like Homebrew for OS X and Grunt that run from the command line and are worth looking into. If you get into more languages (like Ruby) or server administration, knowing how to use the command line is essential. Start using it now; it will save you time and you’ll understand better how things work.
How to host a website locally. At the very least, know how to use a basic Apache and MySQL server (MAMP is my go-to recommendation). It will make working with more complicated sites easy and is essential for local development of sites that depend upon a database, like any WordPress site.
How to use a text editor designed to write code and markup. It doesn’t really matter what you choose; Sublime Text is very trendy right now and is what I use, but do some research and choose one that seems to fit your needs. In any case, know how to use it to write code and markup successfully. Know how to use syntax highlighting and autocompletion for the languages you use. Know how to make your life easier with your text editor. In Sublime Text, for example, I use the multiple cursors feature, find and replace tools, search tools, and package manager to install other extensions all the time, and all of these features make me more productive and help me write better code.
How to change and learn new things–how to adapt. The technology world changes quickly. There’s always a new framework, a new technique, a new style, etc. to learn. Try to stay abreast of these changes at least a little bit, and it will serve you well. There are a myriad of resources out there that will help you stay up to date. My favorites are A List Apart, Smashing Magazine, and CSS Tricks. Simply Googling a question or problem is also a good bet, and searching StackOverflow for specific coding problems is usually fruitful. I also always try to follow respected designers and developers on Twitter, which can be a great source for articles and news (here is my design/web design/webdev Twitter list). I also think there is some benefit in keeping up with social sites like Reddit (there are many subreddits that are relevant, r/webdev and r/frontend are good places to start, but most languages/frameworks have their own community) and Hacker News. They will talk about issues relating to the technology world as a whole, and keep you in the loop with what’s going on in general. Every industry is a little microcosm of its own, and you should be at least somewhat invested in learning the culture and news of your given microcosm.
Extra things that will make you a more competitive applicant:
Knowing how to use Git and Github. Git is a version control system; do some reading and start using it on your own projects. Set up a Github account and put open source sites and projects on it. Use Github to look at other people’s code, and, ideally, start contributing to open source projects on Github. I used this online book to learn the basics of Git.
Experience with existing front end design frameworks like Bootstrap or Compass. At the very least studying a framework like Bootstrap will introduce you to a very competent way of solving common problems on websites, and in some cases companies will begin designing sites or applications using a basic framework like Boostrap, and so knowing the existing structure and classes in it can be very helpful. Compass makes it easier to write CSS that’s supported across many browsers and adds its own timesaving tips to a project. Knowing how to work within an existing framework is a good skill to have in general; at my job, one of the senior developers wrote his own internal front end CSS framework, and knowing how to work with existing structure is certainly an important skill.
Basic knowledge of web servers and how they work so you can understand at least a little bit what backend developers do. In general, when you work in the web world, the more you know about the nuts and bolts about how web servers actually work and the full request cycle for a website or web application, the more help you will be.
How to work with APIs. Experiment with some common APIs like Google Maps and Twitter, and see what you can build with them.
If you are interested in a more technical position/being a front end engineer, then try to do these things:
(This is not my current area of expertise, but from working with front end engineers and senior developers, I think these are at least good starting points.)
Know the MVC software model, and popular MVC frameworks and how they interact with the front end. Keep up to date with the new darling frameworks, and be able to leap into a new framework and learn it at a base level quickly.
Understand and know how to do test-driven development.
Eventually, be able to learn more than one language relatively quickly. Understand the similarities between different languages and be flexible enough to pick up the basics of one quickly.
If you are interested in more of a design or UX role, then try to do these things:
Have a good basic design sense and sensibility. You can teach good design principles, just like you can teach someone to draw passably well. There are rules around things like typography and grid systems that are taught, and you should at least know a little bit about them. If you only had to learn two things in relation to graphic design, I would say learn about typography and grid systems, and then learn how to translate those principles onto the web.
Speaking of typography, learn about the different options for type on the web. Look into TypeKit, Google WebFonts, and hosting your own font files using CSS3′s @fontface. Know what you can do with CSS3 and text on the web. Gone are the days when you have to use images of text on websites. A lot of what you can do in PhotoShop with text is now possible just with CSS.
Likewise, speaking of grids, look into existing responsive CSS grid systems and how they can be used to speed up your design and development process.
I also hope it goes without saying, but whatever you decide to do in this field, have work and examples to back it up. You should almost certainly have a website. Some very talented people with a lot of open source contributions or great coding chops may be able to get away with just a Github page or an active StackOverflow account, but I have never seen a job listing that didn’t want at least some examples of code and design in the wild, and a great place to showcase these is on your own personal page. Also consider your online self: do you keep a blog, are you active on Twitter or other places where employers can see a favorable side of you, or where potential clients can get to know you? This isn’t necessary, but can be a help.
Finally, I didn’t do enough of this, but having started this calendar year to get more into the local Portland technology scene, I cannot say enough the advantages that networking has in terms of getting a job and getting a feel for the industry in whatever place you want to work. Meetup.com has never failed in helping me find local developer meetups. Most meetups welcome beginners and may have specific beginner groups, too. Get on mailing lists for the languages and technologies you are interested in, go to meetups, talk to people.
Good luck! If you have any tips I didn’t cover, feel free to share them in the comments.