npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

web-skills

v3.6.0

Published

web-skills

Downloads

13

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

silvanaserrato744silvanaserrato744

Keywords

web

Readme

-----------------------------------------------------

➤ Table of Contents

-----------------------------------------------------

➤ 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 o