Becoming a web developer!
A friend asked me recently for a rundown of things to learn to get an entry-level web developer position. The following is the email I sent, which ended up being longer than I initially anticipated! All of this I based on my experience. I’m curious to hear of any resources I may have omitted due to ignorance. This could likely be improved!
So a few things in general:
- I’ve learned way more from trying stuff out than reading about it. Like we might be different kinds of learners, but I think side / example projects are invaluable. Even if they are just like for personal uses.
- I Google everything all the time.
- HTML5 For Web Designers: A book about newer stuff happening with the HTML spec. Also has a good history. (The full text of the book is available online).
- Dave Raggett’s Introduction to HTML: A very mellow guide to how HTML documents are structured. I suspect you know a lot of this already.
- Getting started with CSS: Goes a bit into the history of CSS, how it works, some tutorials and examples. It’s a little dry, but it is the best I can think of.
- Mastering CSS coding: A little dated, but gets into the box model, which is important.
- Responsive Web Design: I turned this into a whole section (below) because it is super important.
- CSS Preprocessors: Writing CSS can be repetitive and tedious, so people write in languages that get compiled to CSS like Sass and Less. It’s better to learn CSS first, but this is something you’ll likely run into down the line.
- CSS Frameworks: Again, writing CSS can be really fun and rewarding, but also a drag. There are tons of CSS frameworks that try to offer common patterns, especially for things like layout. A good example is Bootstrap.
Blogs / Resources
- CSS-Tricks: Definitely more than CSS. Lots of good examples/tutorials. Probably end up here Googling for help.
- HTML5 Rocks: Sponsored by Google. Goes pretty in depth to new stuff coming to browsers.
- dropshado.ws: Gets into edge cases and minutiae of web development. Tends to be more advanced stuff.
- MDN: Wiki for web development. Very good. Always opt for this over w3 schools in search results. (That site used to be good, but now it is shitty, full of ads, and kind of spammy).
- Stack Overflow: Question and answer site for programmers. Often I Google something and end up here because someone has already asked and answered the question.
- How DNS Works: A really good series on DNS, basically how like google.com gets resolved to a server somewhere.
- The Lodge: From CSS-Tricks. Free.
- Code Academy: Also free, some additional stuff not covered on The Lodge.
- Treehouse: Cost money, more support (I assume!).
- Text editors: They are all pretty good. Super teched out folks use vim or emacs (don’t use these). I use Sublime Text. Coda is nice because it has a built in browser for testing. Atom is like Sublime Text but free.
- CodePen: Text editor in the browser. Nice feedback loop of edit => preview => edit => preview… Associated with the CSS-Tricks folks. Good place to get started.
- Chrome Developer Tools: The cool thing about the web is you can always view the source of websites and see how they are made.
Git / Version Control
- Atlassian’s Getting Git Right: The whole series of tutorials is pretty good, I refer back to it often. Good place to get started: What is version control.
- GitHub: A git repository hosting service. Important, monolithic. This is me.
- Tower: A good GUI for git. Cost money. (Graphical User Interface… as apposed to a Command Line Interface or CLI…) GitHub has a free GUI. It’s okay.
Responsive Web Design
This is perhaps more of a conceptual point, but is mega-important to writing CSS. So, briefly… websites used to be designed for a specific screen size (a long time ago 640px or 800px wide, in more recent eras 960px). After the iPhone (this is somewhat of a simplification, but you get the idea), the idea is to build websites that are flexible to any screen size (within reason), often considering the mobile screen first and expanding to the larger tablet and desktop views. This was an important conceptual change in the early 2010s, but now is 100% integrated with like everything. So mega-important. Anyhow, here’s some articles and books:
- Responsive Web Design: Early article coining the terminology and discussing the benefits of the approach.
- Responsive Web Design: What It Is and How To Use It: Kind of rehashes the previous link but gets more into media queries.
- Responsive Web Design: Book by the guy who wrote the first article.
- Responsive web design basics: Documentation of the technical details of responsive web design, made by Google.
- Mobile First: Another book on the concept of developing for mobile first which I briefly mentioned above.
- CSS: Cascading Stylesheets
- HTML: HyperText Markup Language
- DNS: Domain Name System
- API: application programming interface
- GUI: graphic user interface
- CLI: command line interface