What makes someone to be a web developer?

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

Things to Know

  • 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