web-skills v3.6.0
➤ Table of Contents
- ➤ FAQ
- ➤ Fundamentals
- HTML
- Syntax
- Forms
- SEO
- Svg
- Best Practices
- CSS
- Syntax
- Selectors
- Box Model
- Colors
- Calc
- Layout
- Transforms
- Responsive Design
- CSS Variables
- Best Practices
- Javascript
- Syntax
- DOM
- Events
- Objects
- Regex
- Template Literals
- Promises
- Web Animations
- Modules
- Intl
- Canvas
- Documentation
- Best Practices
- The Browser
- Standardization
- Browser Engines
- HTTP
- The Internet
- Polyfills
- Debugging
- ➤ Accessibility
- ➤ Web Components
- ➤ Progressive Webapps
- API's
- Storage
- Routing
- Service Workers
- Web App manifest
- Add to homescreen
- Pointer Events
- Loading Performance
- App shell
- Render-Blocking Resources
- Compression
- Performance metrics
- Lazy Loading
- Critical Request Chains
- Tree shaking
- Codesplitting
- PRPL Pattern
- Resource Prioritization
- Caching
- Rendering Performance
- Rendering
- Event loop
- RAIL Model
- Critical Rendering Path
- The Pixel Pipeline
- CSS Containment
- Web Workers
- Security
- HTTPS
- Browser Sandbox
- OWASP
- Content Security Policy
- Audits
- Performance budgets
- Lighthouse
- Chrome DevTools
- ➤ Build tools
- ➤ Frameworks & Libraries
- ➤ Testing
- ➤ Architecture & paradigms
- ➤ Team Collaboration
- ➤ Design & UX
- ➤ The Modern Web
- Streams
- Speech Synthesis
- Web Sockets
- Geolocation
- Device orientation & motion
- Fullscreen
- Variable Fonts
- HTTP/2
- Payment Request API
- Web Audio
- Observers
- Scrollsnapping
- Web Assembly
- Beacon
- Clipboard
- Share
- Performance API
- Gamepad API
- Speech Recognition
- Interaction Media Queries
- Browser Extensions
- Pointer Lock API
- Picture In Picture
- Proxies
- Houdini
- Project Fugu
- Web Authentication API
- Native File System
- Shape Detection
- Web Bluetooth
- Web USB
- Web XR
- Presentation
- Network Information API
- ➤ Algorithms & Data structures
- ➤ Databases & Servers
- ➤ 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
- MDN - HTML elements reference
- Tutorialspoint - Basic HTML tags
- Elated - First 10 HTML tags
- W3Schools - 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.
- Google Web - Social Discovery
- Google Search - Search Features
- Google Search - Structured Data
- web.dev - Easily discoverable
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.
- MDN - CSS Basics
- W3Schools - CSS Tutorial
- Supercharged - CSS Selectors
- MDN - CSS first steps
- MDN - CSS building blocks
- MDN - CSS values and units
- MDN - CSS Syntax
Selectors
Learn about CSS selectors and how to effeciently target DOM elements.
- MDN - CSS selectors
- MDN - All selectors
- CSS Tricks - Child and Sibling Selectors
- CSS Tricks - All Selectors
- W3Schools - CSS Combinators
Specificity
Learn what specificity means and how to use it when writing CSS.
- MDN - Specificity
- MDN - Cascade and inheritance
- dev.to - CSS Specificity
- Specificity Calculator
- W3Schools - CSS Specificity
Pseudo Selectors
Learn how to use pseudo selectors.
- MDN - Pseudo-classes
- CSS Tricks - Meet the Pseudo Class Selectors
- When do the :hover, :focus, and :active pseudo-classes apply?
- W3Schools - CSS Pseudo-elements
- W3Schools - CSS Pseudo-classes
Box Model
Learn what the CSS box model means.
- MDN - Introduction to the CSS basic box model
- MDN - The box model
- CSS Tricks - Inheriting box-sizing
Margin Collapsing
Learn about margin collapsing.
- MDN - Mastering margin collapsing
- Margin Collapse in CSS: What, Why, and How
- CSS Tricks - What You Should Know About Collapsing Margins
- What's the Deal with Collapsible Margins?
- What’s the Deal with Margin Collapse?
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.
- Chrome Dev - Basic Layout
- W3Schools - CSS Website Layout
- MDN - Document and website structure
- MDN - CSS layout
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.
- MDN - Responsive design
- Responsive Web Design Fundamentals by Google
- Google Dev - Responsive Design
- Google Dev - UX Patterns
- Google Dev - Responsive Content
- Codelabs - Responsive Design
Media Queries
Learn how use media queries to build responsive layout.
- CSS Tricks - CSS Media Queries & Using Available Space
- MDN - Using media queries
- MDN - Using Media Queries for Accessibility
Relative Units
Learn how to use relative units for properties such as font sizes and spacing.
- MDN - Sizing items in CSS
- MDN - CSS values and units
- The CSS Workshop - Relative Units
- CSS Tricks - Fun with Viewport Units
- dev.to - 15 CSS Relative units
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.
- MDN - Using CSS custom properties
- Google Devs - CSS Variables: Why Should You Care?
- dev.to - CSS Quickies: CSS Variables
- CSS Variables explained with 5 examples
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.
- MDN - Spread syntax
- Freecodecamp - An introduction to Spread syntax
- Object rest and spread properties
Destructuring
Learn how destructuring can help you when working with objects.
- MDN - Destructuring assignment
- MDN - ES6 In Depth: Destructuring
- javascript.info - Destructuring assignment
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.
- MDN - Introduction to events
- MDN - Creating and triggering events
- Event Bubbling and Event Capturing in JavaScript
- Freecodecamp - A simplified explanation of event propagation
- JavaScript Events Explained
- MDN - addEventListener()
- MDN - removeEventListener(
- Event order
Objects
Learn how to create and use objects.
- MDN - Introducing JavaScript objects
- MDN - Working with objects
- javascript.info - Objects
- MDN - this
- W3Schools - The JavaScript this Keyword
- MDN - bind()
- MDN - new operator
- MDN - new.target
- Data Structures: Objects and Arrays
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.
- MDN - Template literals
- MDN - ES6 In Depth: Template strings
- Google Devs - Getting Literal With ES6 Template Strings
Promises
Learn how to use promises and what asynchronous code means.
- Google Devs - JavaScript Promises: an Introduction
- MDN - Promise
- Master the JavaScript Interview: What is a Promise?
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.
- Google Devs - Introduction to fetch
- Google Devs - Networking
- Freecodecamp - Fetch practical guide
- MDN - CORS
- Alligator - Fetch API
- Supercharged - Fetch
- Codelabs - Fetch
Web Animations
Learn how to use web animations to animate elements in the DOM.
- Google Devs - Animations
- MDN - Using The Web Animations API
- CSS Tricks - CSS Animations vs Web Animations API
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.
- Getting Started with JSDoc
- A beginner’s guide to writing documentation
- Write Good Documentation
- The power of jsDoc
- Document your Javascript code with JSDoc
Best Practices
Learn the best practices o