Front End Web Skills Tree

Bob Ziroll -

The following list is a complete outline of every skill our students in the front end web course should be able to exit V School with.

Skills Tree

  • Static Websites
    • Level 1
      • HTML: Create an HTML document, double click it to show up in a browser, bare bones skeleton
      • CSS: selectors, colors, fonts, linking external stylesheets
    • Level 2
      • HTML: inline/block-level, lists, div/span, headers, paragraph, writing semantic HTML (HTML5 new tags, avoid div-itis)
      • CSS: box model (margin, padding, border, width/height), Bootstrap
    • Level 3
      • General: Understand how browser works
      • HTML: Tables, Forms, Events (which trigger JS Event Listeners)
      • CSS: layout, positioning, sizing, responsive design, media queries
      • JavaScript: DOM manipulation, Event Listeners
    • Level 4
      • General: Create site from PSD, writing performant/optimized HTML (where to put js files, css files, etc.)
      • CSS: Transitions/Animations
      • JavaScript: AJAX, jQuery
    • Level 5
      • General: Create own design from scratch
      • CSS: Preprocessors
      • JavaScript: integration with popular JS libraries (other than jQuery)
  • Web applications
    • Level 1
      • Learn difference between web app and website
      • Build very basic web apps (like a to-do list, e.g.)
      • Understand JSON
    • Level 2
      • Making HTTP calls
      • Accessing external APIs
      • Single-page Applications (SPA)
      • Reusable web components and services
      • Saving a user’s data (no db, no auth)
  • Programming Principles
    • Level 1
      • Variables, data types, code style (consistent indentation, naming, etc.)
      • Navigating/working in the terminal
    • Level 2
      • Functions
      • Loops
      • Conditionals
    • Level 3
      • Objects
      • Classes & Constructors
      • Callback functions, functional programming concepts
  • Version Control (Git)
    • Level 1
      • Understand the need for version control
      • Create new local and remote repos
    • Level 2
      • Stage files for commit
      • Create a new commit/practicing good commit messages
    • Level 3
      • Push changes to remote repo
      • Pull from remote repo
      • Clone repo
    • Level 4
      • Unstaging files
      • Reverting back to a past commit
      • Creating, reviewing, accepting PRs
      • Using Git within a team
  • HTTP/APIs
    • Level 1
      • What HTTP stands for
      • What an API is
    • Level 2
      • Understand the basics of the Request/Response cycle
      • Access data from an API (Postman)
      • GET, PUT, POST, DELETE, and how they map to CRUD
    • Level 3
      • Access an external API in code
      • URL Params & Query Strings
      • Understand RESTful architecture
    • Level 4
      • Create own RESTful API
    • Level 5
      • CORS, JSONP
  • Troubleshooting/Debugging
    • Level 1
      • Understand what debugging is
      • Elements tab
      • Altering CSS
      • Using Google
    • Level 2
      • Debug syntax errors
      • Gaining insight from errors
      • Write code in dev console
      • Watch expressions
      • Semantic comments in code
      • Reading documentations
    • Level 3
      • Debug semantic errors
      • Looking up answers to errors
      • Gaining insights from stack overflow
      • Network calls
      • Breakpoints
      • Self-documenting code w/ semantic comments
    • Level 4
      • Debug runtime/logic errors
      • Posting to stack overflow
      • Thinking like a computer
    • Level 5
      • Refactor code to be more maintainable and safe after fixing bugs
  • Project Management
    • Level 1
      • Knowledge of available tools (task management, communication, documentation)
      • Knowledge of common team roles
    • Level 2
      • Requirements gathering
      • Agile Scrum methodology
      • Efficient standups
    • Level 3
      • Dividing requirements into tasks
      • Dealing with Scope Creep
      • "Time, Quality, Cost" triangle of project management
    • Level 4
      • Points/time estimates
      • Time management for increased productivity
      • Delivering messages to different audiences
  • Deployment
    • Level 1
      • Opening static HTML files in browser
    • Level 2
      • Running local server
      • Understanding IP Addresses
    • Level 3
      • Spin up Digital Ocean droplet, redirect own site to new server
  • Problem Solving
    • Level 1
      • Able to apply learned method/algorithm to new scenario
    • Level 2
      • Able to combine methods/algorithms to solve problems
    • Level 3
      • Ability to solve problems by using known methods and learning finding new methods through breaking down a problem into smaller pieces
      • Ability to recognize their involvement in the problem solving process