Web developer should know

A list of skills and technologies

level	description
👶 junior	has a little commercial web development experience
👷 middle	can implement typical* projects without external supervision; can decompose a typical project and provide a detailed estimate to complete it
🍅 senior	is able to decompose any type of complex project into feasible tasks, has experience in different domains; can organize development, integration and delivery flows in a team

• General

  • CS?

    Materials:

    Expected result:

    • Big O (time & space); why do we need this notation?; how to use? be able to to determine big O of operations of main data structures
    • Data structures: linked list, stack, queue, tree, graph, hash table (know pros and cons, be able to choose most suitable one to solve a given problem)
    • Know how base data structures is implemented in your language of choice
    • Know about algorithms on base data structures (is not required to remember in details, but undertand pros & cons)
    • Know and avoid N+1 problem
    • Recursion (stack overflow)

  • Testing

    Material:

    Expected result:

  • Git

    Materials:

    • Git Book
    • Git tutorial
    • GuitHub Flow

    Expected result:

    • 👶 Have an own github account
    • 👶 Understood how Git (or other Version control system) helps in development
    • 👶 How to clone an existing project/ How to create a new project
    • 👶 How to add new or/and changed files and create a commit
    • 👶 How to write a proper message to commit
    • 👶 How to create a branch, how to switch between branches
    • 👶 How to update a branch from remote repository
    • 👶 How to merge changes from one branch to another
    • 👶 How to publish your changes to a remote repository
    • 👶 How to create a Pull request (understood the idea behind the pull request)
    • 👶 Know tools to see a diff, and resolve possible merge conflicts
    • 👶 stash, cherry-pick

  • Network

    Materials

    • HTTP tutorial from Mozilla
    • HTTP headers
    • OSI model

    Expected result:

    • 👶 HTTP vs HTTPS
    • 👶 CDN (content delivery networks) - why it can be useful
    • 👶 Know how to use ssh, dig, ping, curl, wget (no need to now all available parameters but know how these tools can help)
    • 👷 HTTP/2 - what is new, and what problems it tries to solve
    • 👷 Awareness about OSI model
    • 👷 How DNS works, A, CNAME, MX...
    • 👷 Know how to use different HTTP headers (caching, auth, content type, ...)

  • Security

    Expected result:

    • 👶 CORS, Why is it necessary?
    • 👶 XSS, CSRF
    • 👶 How to send a sensitive data securily via network
    • 👶 Know in general how authentication (session, token based) works
    • 👷 Know in details how authentication, authorization works (session, tokens, JWT, OAuth...)

  • Extra

    Expected result:

    • 👷 Docker usage (choose a proper base image, add required libs, soft, configs, code; build, run, attach to it, see logs...)
    • 👷 scp, rsync, sftp

• Backend

  • Auth

    Materials:

    • 👶 Json Web Tokens
    • 👶 Safe password resets with JWT

  • Databases

    Materials:

    • SQL from A to Z

    Expected result:

    • 👶 SQL vs noSQL
    • 👶 SQL common commands (select, insert, delete, transaction, bulk load, dump, restore)
    • 👷 Be able to understand the output of EXPLAIN command
    • 👷 ACID
    • 👷 OLTP vs OLAP
    • 👷 Be able to build a database schema for a project (correct data types, indexes, foreign keys, data normalization)
    • 👷 key-value databases: Redis, memcache; what they are applicable for?

  • Microsevices

    Materials:

    • 👷 12 factors

  • Specific to programming language

    • NodeJS

      Materials:

      • nodejs.dev
      • Typescript
      • NVM
      • Event Loop

      Expected result:

      • ES6+ basics
      • nvm, npm, package.json, package-lock.json - how to install and use
      • event loop, async/await, promises, try catch
      • understanding why static typing is useful

• Frontend

  • HTML5

    Materials:

    • Mozilla HTML
    • How browsers render page
    • Can I Use
    • UI frameworks
      • Twitter Bootstrap
      • Google Material
      • Whatever is popular now

    Expected result:

    • 👶 Be able to build a layout from picture (PSD, sketch) - the result must be "Pixel Perfect" - using correct fonts, sizes, colors, margins, paddings
    • 👶 How to build and use Forms (radio, checkboxes, inputs, especialy file uploading)
    • 👶 Trying different UI frameworks
    • 👶 Know why to make a semantic markup (SEO just simple understandig)

  • CSS3

    Materials:

    • CSS tutotrial from Mozilla
    • A guide to Flexbox
    • [SASS] https://tokar.ua/read/6672
    • Pre-,post-processors:
      • http://sass-lang.com
      • http://lesscss.org
      • http://postcss.org
    • CSS Tricks - useful articles

    Expected result:

    • 👶 How to include CSS into HTML
    • 👶 CSS selectors, pseudoselectors
    • 👶 How to use Media queries and why (responsive design)
    • 👶 Mobile first
    • 👶 CSS animation
    • 👶 Webfonts
    • 👶 Flexbox / Grid
    • 👶 Crossbrowser validation
    • 👶 Try to use any CSS pre/post processors and why they might be useful

  • Javascript

    Materials:

    • Cheatsheat - to quickly refresh knowledge
    • JavaScript. Ядро
    • Basics
    • Tutorial from Mozilla
    • Web API

    Expected result:

    • 👶 How to include a javascript code into your HTML page
    • 👶 Data types; const, let, var
    • 👶 Syntax: conditions, iterations, functions, classes...
    • 👶 Variable scope, hoisting, IIFE, modules, "this", closures
    • 👶 Sync and async code execution (callbacks, promises, async/await)
    • 👶 JSON, XML
    • 👶 Cookie
    • 👶 Web API:
      • 👶 Manipulating DOM elements: create, update, remove, move
      • 👶 Handling DOM events: click, hover, onKey...
      • 👶 Local and sesion storage, what is a difference
      • 👶 XMLHttpRequest, fetch
    • 👷 Web API in more details:
      • 👷 geolocation
      • 👷 media (camera access)
      • 👷 canvas
      • 👷 web workers
      • 👷 service workers
      • 👷 web sockets
    • 👶 Work with one popular js framework: angular, react, vue...
    • 👷 Be able to build an app from scratch by using some popular js framework

  • Chrome dev tools

    Materials:

    • http://devtoolstips.com

    Expected result:

    • 👶 debugging code (debugger, console.log,...)
    • 👶 inspecting DOM elements
    • 👶 testing a layout on different screens (responsive design)
    • 👷 debug application performance (memory usage/leaks, cpu intensive operations)