GitHub - andreasbm/web-skills: A visual overview of useful skills to learn as a web developer

Web Skills

Web Skills is a visual overview of useful skills to learn as a web developer. Go to https://andreasbm.github.io/web-skills to check out the visual overview or scroll through this readme to get the overview as a list. If you like the project you are very welcome to become a stargazer 🤩

📖 Table of Contents

➤ Table of Contents

➤ FAQ
➤ Fundamentals
- HTML
- Syntax
  - Basic Tags
- Forms
- SEO
  - Discoverable Content
- Svg
- Best Practices
- CSS
- Syntax
- Selectors
  - Specificity
  - Pseudo Selectors
- Box Model
  - Margin Collapsing
- Colors
- Calc
- Layout
  - Flex
  - Grid
- Transforms
  - Animations
- Responsive Design
  - Media Queries
  - Relative Units
  - Images
- CSS Variables
- Best Practices
- Javascript
- Syntax
  - Spread
  - Destructuring
- DOM
  - DOM Manipulation
- Events
- Objects
  - Prototype
    - Classes
- Regex
- Template Literals
- Promises
  - Callbacks
  - Async/await
  - Fetch
- Web Animations
- Modules
- Intl
- Canvas
- Documentation
- Best Practices
- The Browser
- Standardization
  - W3C
  - TC39
  - WHATWG
  - Specifications
- Browser Engines
  - Webkit
  - Blink
  - Gecko
- HTTP
- The Internet
- Polyfills
- Debugging
  - Developer console
➤ Accessibility
➤ Web Components
➤ Progressive Webapps
➤ Build tools
- Package Managers
  - NPM
  - Yarn
- Module Bundlers
  - Rollup
  - Webpack
  - Parcel
  - Snowpack
- Linters and formatters
  - Prettier
  - ESLint
- Task Runners
  - NPM Scripts
- Transpilers
  - Babel
  - Typescript
- CSS Pre-processors
  - SASS
  - PostCSS
- Node.js
➤ Frameworks & Libraries
- lit-element
- Vue
- React
- Angular
- Svelte
- Stencil
➤ Testing
➤ Architecture & paradigms
➤ Team Collaboration
➤ Design & UX
➤ The Modern Web
➤ Algorithms & Data structures
➤ Databases & Servers
- Databases
- Relational Databases
  - SQL
  - MySQL
  - PostgreSQL
- Non-relational Databases
  - Redis
  - MongoDB
- Data Modelling
  - ER Diagram
  - Keys
- Indexing
- Data Integrity
- Normalization
  - Functional Dependencies
  - Normal Forms
- Transactions
- Servers
- Architectural Models
- Middleware
- Request-Reply Protocol
  - UDP
  - TCP
- REST API
  - CRUD
- Express
- GraphQL
- GNU/Linux
- Docker
- SSH
➤ Contributors
➤ License

➤ FAQ

What is Web Skills?

Web Skills is a visual overview of useful skills to learn as a web developer. It is useful for people who just started learning about web development and for people who have been in the field for years and want to learn new things. As a beginner, I would encourage you not to see this website as the definitive list of what you need to know but as an example of what you can learn and where you can start. The skills are arranged in chronological order based on what learning path I recommend you to take but feel free to jump around freely.

How did you choose the skills?

The skills are derived from a combination of 10 years of experience, a bachelor in software engineering and what I personally find to be the most useful to know on a day-to-day basis. Therefore, you'll notice that it's missing a lot of things. For example, I am not a PHP developer - because of this, PHP is not included. If you were a PHP developer, this overview would probably look a lot different.

How can I support you?

I am spending my spare time building Web Skills for free because I want to help people get into web development. My motivation comes from people finding Web Skills useful, so if you like the project feel free to support me in any way you like! For example, you are more than welcome to become a stargazer, share Web Skills with your friends and followers or create blog articles linking to Web Skills. If you want to, it will absolutely make my day if you support me with a cup of coffee! <3

How can I get involved?

You are welcome to get involved in any way you like. If you want to, you can go to the issues page and help me fix the spelling, fix issues or suggest some new features. Any involvement is highly appreciated!

How can I keep track of what skills I know?

If you scroll to the bottom of the page, you will find a button that says "Sign in with Google". If you click this button and sign in, you will be able to mark skills as completed.

I am overwhelmed! Help me!

I totally understand if you are a bit overwhelmed by the amount of skills on the page – but I can assure you that this overview includes much, much more than most people will ever need to know. My main goal is to provide a visual overview of web development and make people hungry for learning more. One of the things I absolute love about being a developer is learning new skills. I think it is amazing to be in a field where you can do what you do for a lifetime and still learn something new! People cannot be an expert in every skill on this page so try to find what excites you the most and become really good at that.

Why haven't you included XYZ Technology?

The skills are based on what I personally find to be the most useful on a day-to-day basis. If you think something really important is missing, you can always suggest it on the issues page.

What does the "experimental" banner mean?

When a skill is described as experimental, it means that the technology is immature and currently in the process of being added to the Web platform (or considered for addition). Think carefully before you start using experimental technology in any kind of production project. The definition used in Web Skills is based on the excellent definition used on MDN. You are very welcome to open an issue if you see a skill you believe should be marked as "experimental" or have the banner removed.

How can I get in contact with you?

Reach out to me on Twitter at @AndreasMehlsen or take a look at my website if you want to learn more about what other projects I'm working on.

➤ Fundamentals

HTML

Syntax

Learn the basics of HTML and get comfortable with it's syntax and main concepts.

Basic Tags

Get familiar with the basic HTML tags

Forms

Learn how to design efficient forms, validating them effectively and keeping the user informed along the way.

SEO

Learn how to make your content search-friendly.

Discoverable Content

Learn how to structure your HTML in a way that provides a rich experience when sharing it online.

Svg

Learn how to work with SVG files to make graphics look crisp across all screen resolutions.

Best Practices

Learn the best practices of writing HTML.

CSS

Syntax

Learn the basics of CSS and get comfortable with it's syntax and main concepts.

Selectors

Learn about CSS selectors and how to effeciently target DOM elements.

Specificity

Learn what specificity means and how to use it when writing CSS.

Pseudo Selectors

Learn how to use pseudo selectors.

Box Model

Learn what the CSS box model means.

Margin Collapsing

Learn about margin collapsing.

Colors

Learn the different ways you can define colors in CSS.

Calc

Learn how to use the CSS calc function.

Layout

Learn the different layout types for web.

Flex

Learn how to create layouts using flexbox.

Grid

Learn how to create layouts using CSS Grid.

Transforms

Learn the different ways to transform elements through CSS.

Animations

Learn how to animate elements through CSS using keyframes.

Responsive Design

Learn how to make your website responsive so it works across different screen sizes.

Media Queries

Learn how use media queries to build responsive layout.

Relative Units

Learn how to use relative units for properties such as font sizes and spacing.

Images

Learn how to make images responsive, always showing the best possible version for the screen size.

CSS Variables

Learn how to define and use CSS variables.

Best Practices

Learn the best practices of writing CSS.

Javascript

Syntax

Learn the basics of Javascript and get comfortable with it's syntax and main concepts.

Spread

Learn how the spread syntax can help you when working with arrays.

Destructuring

Learn how destructuring can help you when working with objects.

DOM

Learn how the HTML is represented as objects that comprise the structure and content of a document.

DOM Manipulation

Learn how to query HTML elements through Javascript and manipulate them.

Events

Learn how to dispatch and listen for events.

Objects

Learn how to create and use objects.

Prototype

Learn how to extend objects and functions through its prototype.

Classes

Learn how to define and use classes. Get somewhat comfortable with some of the object oriented concepts such as inheritence and encapsulation.

Regex

Learn how to use regex to extract information from strings.

Template Literals

Learn how template literals and tagged templates and help you manipulate strings.

Promises

Learn how to use promises and what asynchronous code means.

Callbacks

Learn how to use callbacks and why they are not always a good idea.

Async/await

Learn how to use the async and await keywords to make it easier to write asynchronous code.

Fetch

Learn how to use the fetch API to fetch data.

Web Animations

Learn how to use web animations to animate elements in the DOM.

Modules

Learn how to modularize your code into ES6 modules using the export and import keywords.

Intl

Learn how to localize your website using the Intl API.

Canvas

Learn how to paint graphics onto a canvas.

Documentation

Learn how to create good documentation and why it is important.

Best Practices

Learn the best practices of writing Javascript.

The Browser

Standardization

Learn why web standards are important and how new specifications are standardised.

W3C

Learn what W3C are doing and how they are moving the web forward.

TC39

Learn what TC39 are doing and how they are moving the web forward.

WHATWG

Learn what WHATWG are doing and how they are moving the web forward.

Specifications

Learn how to read specifications developed by the standards committees.

Browser Engines

Learn what a browser engine is and get an overview of the browser landscape and market share.

Webkit

Learn about the Webkit browser engine.

Webkit

Blink

Learn about the Blink browser engine.

Blink

Gecko

Learn about the Gecko browser engine.

Gecko

HTTP

Learn how data is distributed through the HTTP protocol.

The Internet

Learn the basics of how the internet works.

Polyfills

Learn how it is possible to use polyfills to increase the browser support for your website.

Debugging

Learn about the basics concepts of debugging.

Developer console

Learn how to use the developer console to debug your code.

➤ Accessibility

The why

Learn what accessibility is and why it is important.

Screen Readers

Learn about assistive technology such as screen readers that reads sections of the page aloud based on the current focus.

Accessibility tree

Learn about the accessibility tree and how assistive technology uses it.

Google Devs - The Accessibility Tree

ARIA

Learn how to use ARIA descriptions an labels to help assistive technology understanding your website.

Accessible HTML

Learn how to write HTML in such as way that assistive technology better understands it.

Alt text

Learn how to use the alt attribute to provide a useful text alternative to this image.

Accessible CSS

Learn how to write CSS in such as way that assistive technology better understands it.

Webaim - CSS

Accessible forms

Learn how to build accessible forms that makes it usable to as many people as possible.

UI States

Learn how to make the state of each UI element clear.

Google Devs - Accessible Styles

Keyboard Accessibility

Learn how to make it easy for keyboard users to navigate your site.

Focus

Learn how to create a sensible tab order and how to make it easy for the users to locate the currently focused element.

Accessible Colors

Learn how to select colors in such a way that users, including those with visual disabilities, can perceive the content on the page.

Laws & Policies

Learn about the governmental policies related to web accessibility.

Audits

Learn how to conduct an accessibility review to improve the overall experience of using your site. Remember, good accessibility equals good UX!

➤ Web Components

Custom Elements

Learn how to create new HTML tags with Custom Elements.

HTML Templates

Learn how to use HTML templates to create flexible templates that can then be used to populate the Shadow DOM.

Shadow DOM

Learn how to encapsulate your CSS using Shadow DOM.

Shadow Parts

Learn how to style the inside of a shadow tree from outside of that Shadow Tree by using Shadow Parts.

Slots

Learn how to compose Custom Elements by using slots.

Best practices

Get familiar with best practices when it comes to building Web Components.

Constructible Stylesheets

Learn how the Constructible Stylesheets proposal enables reusable styles when using shadow dom.

Form Participation

Learn how the Form Participation API proposal enables elements, other than built-in form control elements, to participate in form submission and validation.

➤ Progressive Webapps

API's

Storage

Learn how to store data for your web app.

Routing

Learn what routing means in single page applications.

History API

Learn how to use the history API to add single page applicaiton routing to your web app.

Service Workers

Learn how to register a service worker to provide a rich native-like experience.

Offline first

Learn how to make your web app working offline with an offline first approach.

Push notifications

Learn how to add push notifications to your web app.

Web App manifest

Learn how to tell the browser about your web app and how it should behave when 'installed' by creating a web app manifest.

Add to homescreen

Learn how to make your web app installable.

Pointer Events

Learn how to handle inputs from pointing devices such as a mouse, pen/stylus or touch.

Loading Performance

App shell

Learn how to use an app shell to provide an instant and reliable experience to users on repeat visits

Render-Blocking Resources

Learn about render-blocking resources and why they are bad for the user-experience.

Compression

Learn how to minimize the overall download size by optimizing and compressing resources.

Performance metrics

Learn why it is important to measure performance and which metrics you should prioritize.

Largest Contentful Paint

Learn about Largest Contentful Paint and how it impacts the overall performance.

Total Blocking Time

Learn about Total Blocking Time and how it impacts the overall performance.

Time to Interactive

Learn about Time to Interactive and how it impacts the overall performance.

Lazy Loading

Learn how to use lazy loading to lower the initial page payload and load time.

Dynamic Import

Learn how to use dynamic import to lazy load javascript.

Offscreen images

Learn why offscreen images increase the load time and how to avoid them by lazy loading images.

Critical Request Chains

Learn about the critical request chains and how to find them in your web app.

Tree shaking

Learn how to use tree shaking to eliminate dead code.

Codesplitting

Learn about codesplitting an how dividing your code into multiple chunks makes your web app faster.

PRPL Pattern

Learn how to use the PRPL pattern to make web apps more performant.

Resource Prioritization

Learn about resource prioritization and how to inform the browser about the importance of a resource.

Caching

Learn about caching and how it can be uses to make web apps load faster.

Rendering Performance

Rendering

Learn about rendering, how a page is rendered and why it is important to keep your web app interactive and smooth running.

Event loop

Learn about the event loop and how Javascript simulate like it’s running our commands in a multi-thread environment.

Microtask

Learn about microtasks and the microtask queue.

Stack

Learn about the stack and how to investigate the staack trace when debugging.

Heap

Learn about the heap and how to investigate the heap snapshots when debugging.

RAIL Model

Learn how to use the RAIL model to ensure a good user experience.

requestAnimationFrame

Learn how to use the requestAnimationFrame API to create butter-smooth animations.

requestIdleCallback

Learn how to use the requestIdleCallback to defer heavy tasks.

Critical Rendering Path

Learn about the critical rendering path and how to identify it.

The Pixel Pipeline

Learn about the five key points in the pixels-to-screen pipeline.

Style calculations

Learn how to optimize your CSS to avoid heavy style calculations.

Google Devs - Style Calculations

Transforms

Learn about transforms and how it is possible to avoid both layout and paint.

Paint areas

Learn about paint areas and how it is possible to reduce them.

Layout Trashing

Learn about layout trashing and how to avoid it.

Layers

Learn about layers and how to promote an element to another layer.

Debounce

Learn how to debounce computationally expensive code to avoid blocking the UI.

CSS Containment

Learn how to use CSS containment to improve the performance of your web app.

Web Workers

Learn how to use web workers to run a script operation in a background thread separate from the main execution thread.

Security

HTTPS

Learn about HTTPS and why a website should always be protected with HTTPS.

Browser Sandbox

Learn about the sandbox security mechanism and how it restricts the execution environment.

OWASP

Learn about the OWASP organization and how they help with web application security.

Cross-Site Scripting

Learn about cross-site scripting and how it is possible mitigate these kind of attacks.

Clickjacking

Learn about clickjacking and how it is possible to mitigate these kind of attacks.

Content Security Policy

Learn about content security policy and how it can help to detect and mitigate certain types of attacks.

Audits

Performance budgets

Learn about performance budgets and how you can create one for your web app.

Lighthouse

Learn about lighthouse and how it can be used to audit your web app.

Chrome DevTools

Learn about the Chrome DevTools and how it can be used to audit your web app.

➤ Build tools

Package Managers

Learn about package managers and how they make managing dependencies easier.

NPM

Learn about NPM and how it can be used to manage dependencies.

Yarn

Learn about Yarn and how it can be used to manage dependencies.

Module Bundlers

Learn about module bundler and how they can help bundling your code.

Rollup

Learn how you can use Rollup to bundle your code.

Webpack

Learn how you can use Webpack to bundle your code.

Parcel

Learn how you can use Parcel to bundle your code.

Snowpack

Learn how Snowpack can replace the traditional app bundler during development.

Linters and formatters

Learn how you can improve your code quality with linters and formatters.

Prettier

Learn how you can use Prettier to format your code.

ESLint

Learn how you can use ESLint to lint your code.

Task Runners

Learn about task runners and how you can automate code execution.

NPM Scripts

Learn about NPM scripts and how you can run your own.

Transpilers

Learn what transpilers are and why we need them.

Babel

Learn about Babel and how you can use it to transpile your code.

Typescript

Learn how to use Typescript and how it can help making your code typesafe.

CSS Pre-processors

Learn about CSS pre-processors and why we need them.

SASS

Learn about SASS and how you can use it to simplify your styles.

PostCSS

Learn about PostCSS and how you can use its ecosystem of plugins to extend your CSS build pipeline.

Node.js

Learn how to use Node.js.

➤ Frameworks & Libraries

lit-element

Learn how to use lit-element for creating fast, lightweight web components.

Vue

Learn about Vue and how you can use it for building web apps.

React

Learn about React and how you can use it for building web apps.

Angular

Learn about Angular and how you can use it for building web apps.

Svelte

Learn about Svelte and how it can convert your component into highly efficient imperative code.

Stencil

Learn how Stencil can be used for generating small, fast web components.

➤ Testing

Testing Methodologies

Learn about various software testing methodologies and why it is important to test your code.

Unit Testing

Learn about unit testing and how it can be used to test individual units of code.

Integration Testing

Learn about integration testing and how it can be used to test modules as a group.

System Testing

Learn about system testing and how it can be used to test the fully integrated software product.

Acceptance Testing

Learn about acceptance testing and how it can be used to test the software for acceptability

Smoke Testing

Learn about smoke testing and how it can be used to ensure that critical functionalities of the program are working fine.

Performance Testing

Learn about performance testing and how it can be used to determine the responsiveness and stability of a program.

Usability Testing

Learn about usability testing and how it can be used to determine if the system is easily usable for the end-user.

White Box Testing

Learn about white box testing and how it can be used to test the software's internal structure, design, and coding.

Black Box Testing

Learn about black box testing and how a test can be carried out without looking at the internal code.

Automated Testing

Learn about automated testing and when it should be applied.

Manual Testing

Learn about manual testing and when it should be applied.

Continuous integration

Learn about continuous integration and it can enable iterative software development.

A/B Testing

Learn about A/B testing and how it can be used to optimize your web app.

Test Runners

Learn about test runners and how they can help running tests.

Karma

Learn about the Karma test runner.

Mocha

Learn about the Mocha testing framework.

Jasmine

Learn about the Jasmine testing frameworks.

Cypress

Learn how to use Cypress for end-to-end-testing.

Ava

Learn about the Ava test runner.

Best Practices

Learn about the best practices when it comes to testing.

Javascript Testing Best Practices

License

andreasbm/web-skills

Launching GitHub Desktop

Launching GitHub Desktop

Launching Xcode

Launching Visual Studio Code

Latest commit

Git stats

Files

README.md

Web Skills

➤ Table of Contents

➤ FAQ

What is Web Skills?

How did you choose the skills?

How can I support you?

How can I get involved?

How can I keep track of what skills I know?

I am overwhelmed! Help me!

Why haven't you included XYZ Technology?

What does the "experimental" banner mean?

How can I get in contact with you?

➤ Fundamentals

HTML

Syntax

Basic Tags

Forms

SEO

Discoverable Content

Svg

Best Practices

CSS

Syntax

Selectors

Specificity

Pseudo Selectors

Box Model

Margin Collapsing

Colors

Calc

Layout

Flex

Grid

Transforms

Animations

Responsive Design

Media Queries

Relative Units

Images

CSS Variables

Best Practices

Javascript

Syntax

Spread

Destructuring

DOM

DOM Manipulation

Events

Objects

Prototype

Classes

Regex

Template Literals

Promises

Callbacks

Async/await

Fetch

Web Animations

Modules

Intl

Canvas

Documentation

Best Practices

The Browser

Standardization

W3C

TC39

WHATWG

Specifications

Browser Engines