How Front-End Developers Are Made

How FDs Are Made - 图1

Image source: https://github.com/kamranahmedse/developer-roadmap

How exactly does one become a front-end developer? Well, it’s complicated. Still today you can’t go to college and expect to graduate with a degree in front-end engineering. And, I rarely hear of or meet front-end developers who suffered through what is likely a deprecated computer science degree or graphic design degree to end up writing HTML, CSS, and JavaScript professionally. From my perspective, most of the people working on the front-end today generally seem to be self taught from the ground up or cross over into the front-end from design or traditional computer science fields.

If you were to set out today to become a front-end developer I would loosely strive to follow the process outlined below (Part two, “Learning Front-End Dev”, dives into more details on learning resources).

  1. Learn, roughly, how the web works. Make sure you know the “what” and “where” of Domains, DNS, URLs, HTTP, networks, browsers, servers/hosting, JSON, data APIs, HTML, CSS, DOM, and JavaScript. Don’t dive deep on anything, just understand the parts and loosely how they fit together. Focus on the high level outlines for front-end architectures. Start with simple web pages and briefly study front-end applications (aka SPAs)
  2. Learn HTML
  3. Learn CSS
  4. Learn JavaScript
  5. Learn DOM
  6. Learn JSON and data APIs
  7. Learn the fundamentals of user interface design (i.e. UI patterns, interaction design, user experience design, and usability).
  8. Learn CLI/command line
  9. Learn the practice of software engineering (i.e., Application design/architecture, templates, Git, testing, monitoring, automating, code quality, development methodologies).
  10. Get opinionated and customize your tool box with whatever makes sense to your brain (e.g. Webpack, React, and Mobx).
  11. Learn Node.js

A short word of advice on learning. Learn the actual underlying technologies, before learning abstractions. Don’t learn jQuery, learn the DOM. Don’t learn SASS, learn CSS. Don’t learn HAML, learn HTML. Don’t learn CoffeeScript, learn JavaScript. Don’t learn Handlebars, learn JavaScript ES6 templates. Don’t just use Bootstrap, learn UI patterns.

Lately a lot of non-accredited, expensive, front-end code schools/bootcamps have emerged. These avenues of becoming a front-end developer are typically teacher directed courses, that follow a more traditional style of learning, from an official instructor (i.e., syllabus, test, quizzes, projects, team projects, grades, etc.). Keep in mind, if you are considering an expensive training program, this is the web! Everything you need to learn is on the web for the taking, costing little to nothing. However, if you need someone to tell you how to take and learn what is actually free, and hold you accountable for learning it, you might consider an organized course. Otherwise, I am not aware of any other profession that is practically free for the taking with an internet connection, a hundred dollars a month for screencasting memberships, and a burning desire for knowledge.

For example if you want to get going today, consuming one or more of the following self-directed resources below can work:

If you are not a self motivated individual and need a more structured approach you should consider a directed learning path.

When getting your start, you should fear most things that conceal complexity. Abstractions in the wrong hands can give the appearance of advanced skills, while all the time hiding the fact that a developer has an inferior understanding of the basics or underlying concepts.

The remaining parts of this book will point the reader to potential resources that could be used to learn front-end development and the tools used when practicing front-end development. It is assumed that on this journey you are not only learning, but also doing as you learn and investigate tools. Some suggest only doing to learn. While others suggest only learning about doing. I suggest you find a mix of both that matches how your brain works and do that. But, for sure, it is a mix! So, don’t just read about it, do it. Learn, do. Learn, do. Repeat indefinitely because things change fast. This is why learning the fundamentals, and not abstractions, are so important.