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.

HTML

CSS

  • 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.

JavaScript

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.

Courses

  • 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!).

Tools

  • 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

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:

Web Standards

Oh god, this should also be mentioned. There used to be a time when each browser supported different things. Writing cross browser code was a nightmare. There was a big push for web standards. Things have gotten better, but there is still not 100% parity between all browsers, especially mobile. W3C & WHATWG both kind of manage the HTML spec, W3C for CSS too, and ECMA for JavaScript.

Vocabulary

  • CSS: Cascading Stylesheets
  • HTML: HyperText Markup Language
  • DNS: Domain Name System
  • API: application programming interface
  • GUI: graphic user interface
  • CLI: command line interface
  • Front-end: Things that happen in the browser—HTML, CSS, JavaScript.
  • Back-end: Things that happen on the server. Lots more programming languages, some common PHP, Ruby, Python, MySQL (databases), Node.js (JavaScript again, this is confusing I know)…
← View other notes