Becoming a web developer is a choice. It’s a personal decision that must be decided by each individual.
I cannot make assumptions of what makes you, them or me a web developer because each of us have our own reasons. However, what I can share for you is important if you want to become a front-end web developer:
1. Learn basic HTML and CSS
Things to Know: HTML
- General HTML structure of a webpage (html, head, body).
- The Document Object Model (DOM) – What it is.
- Tags – How to make links, lists, etc. It doesn’t need to be memorized, but you should be able to use different tags when you need them from a reference.
- How to structure the content of a website with divs (div-based markup)
- Semantic markup – when to use different headers (h1s, h2s, h3s) and tags (article, section, span, etc.)
- How to embed a .css file into a page
- (Advanced) How to structure markup that supports accessibility compliance, like for users with screen readers
Things to Know: CSS
- How to target different elements on a page, at different depths (i.e. a span within a div).
- Displaying elements – block, inline-block and inline
- Style attributes that can be set for colors, fonts, borders, etc.
- Positioning (relative, absolute, fixed) and floating elements
- The box model, margin/padding, and what box-sizing: border-box does (note: it will save your life)
- ids (#id) vs classes (.class) and CSS selectors.
- CSS specificity, or when styles override other styles.
- (Advanced) Responsive design — What is it? What are media queries and how do you use them?
- (Advanced) SASS, LESS — CSS compilers. This will make your life much easier, and any modern web shop will be using a compiler nowadays. I will say to only start using SASS/LESS after you write CSS by hand, to both remove the “magic” and to internalize the lesson of how much writing CSS by hand sucks.
- (Advanced) CSS3: border-radius, box-shadow, text-shadow, etc.
2. Learn vanilla JavaScript
- What do you mean “everything is an object?”
- What is a callback and why is it important?
- Global scope, function scopes, what is the global namespace and why can it be bad?
- Namespacing your code and why
- (Advanced) Closures
- (Building on closures) Object-oriented JavaScript — the biggest game changer for me personally. I found the “Object Oriented JavaScript” chapter in John Resig’s “Pro JavaScript Techniques” to be very enlightening.
- (OO JS) Prototypal inheritance
3. Understand the basic concepts of programming
Things to Know
- Data types: string, int, double, char, etc.
- Variables
- Functions/methods and passing arguments
- For loops
- If-else statements
- Arrays and how to loop over their contents
- Key-value pairs and how to loop over their contents
- Operations: addition, subtraction, modular arithmetic, concatenating strings, substrings, etc.
4.
Learn jQuery
Things to Know
- (document).ready(function() { });
- What (this) represents (wrapping a DOM element as a jQuery object, which can then be manipulated using jQuery commands)
- How to select classes and ids
- Familiarity with api.jquery.com and how to look up different functions
- How to use the various effects (fade, slide, hide, show, etc.)
- Traversing the DOM tree (children(), parents(), find(), etc.)
- Chaining commands
- How to respond to and trigger events
- What does it mean for something to be asynchronous?
- How do people debug jQuery bugs? What is console.log() and the `debugger` command? How can you set breakpoints in JavaScript files and step in/over them?
- (General) What JSON is, and what a JSON response looks like
- (Advanced) What is AJAX?
- (Advanced) How to receive data from an API via AJAX and parse the data into the DOM