Follow the General path
How The Internet Works
Hosting
A lolololol web hosting service is a type of Internet hosting service that hosts websites for clients, i.e. it offers the facilities required for them to create and maintain a site and makes it accessible on the World Wide Web.
DNS
The Domain Name System (DNS) is the hierarchical and decentralized naming system used to identify computers, services, and other resources reachable through the internet or other internet protocol networks.
HTTP
The Hypertext Transfer Protocol (HTTP) is an application layer protocol in the Internet protocol suite model for distributed, collaborative, hypermedia information systems.
Web Browser
A web browser is application software for accessing the World Wide Web. When a user requests a web page from a particular website, the web browser retrieves the necessary content from a web server and then displays the page on the user's device.
Domain Name
A domain name is an identification string that defines a realm of administrative autonomy, authority or control within the Internet.
Basic Tools
Text Editor
Visual studio Code
Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux.
Sublime Text
Sublime Text is a commercial source code editor. It natively supports many programming languages and markup languages.
Atom
A hackable text editor for the 21st Century
Vim
Vim is a highly configurable text editor built to make creating and changing any kind of text very efficient.
Web Browser
Google Chrome
Google Chrome is a cross-platform web browser developed by Google.
Microsoft Edge
Microsoft Edge is a cross-platform web browser created and developed by Microsoft.
Mozilla Firefox
Mozilla Firefox or simply Firefox is a free and open-source[19] web browser developed by the Mozilla Foundation and its subsidiary, the Mozilla Corporation.
Terminal
Powershell
PowerShell or Microsoft PowerShell (formerly Windows PowerShell) is a task automation and configuration management program from Microsoft, consisting of a command-line shell and the associated scripting language.
ZSH
The Z shell (Zsh) is a Unix shell that can be used as an interactive login shell and as a command interpreter for shell scripting. Zsh is an extended Bourne shell with many improvements, including some features of Bash, ksh, and tcsh
Bash
Bash is a Unix shell and command language written by Brian Fox for the GNU Project as a free software replacement for the Bourne shell.
Design
Figma
Figma is a vector graphics editor and prototyping tool which is primarily web-based, with additional offline features enabled by desktop applications for macOS and Windows.
Adobe XD
Adobe XD (also known as Adobe Experience Design[1]) is a vector-based user experience design tool for web apps and mobile apps, developed and published by Adobe Inc
HTML
HTML Basics
Best Practices
For writing maintainable and scalable HTML documents
Semantic HTML
semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
Forms & Validation
A webform, web form or HTML form on a web page allows a user to enter data that is sent to a server for processing
Accesibility
Always write HTML code with accessibility in mind! Provide the user a good way to navigate and interact with your site. Make your HTML code as semantic as possible.
SEO
Search engine optimization (SEO) is the process of improving the quality and quantity of website traffic to a website or a web page from search engines.
CSS
Basics
Basics
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML
Flexbox
CSS Flexible Box Layout, commonly known as Flexbox,[2] is a CSS 3 web layout model.[4] It is in the W3C's candidate recommendation (CR) stage
Grid
n Cascading Style Sheets, CSS grid layout or CSS grid creates complex responsive web design layouts more easily and consistently across browsers.
Custom Properties
A custom property is most commonly thought of as a variable in CSS.
Transitions/Animations
Plain CSS Transitions
CSS transitions allows you to change property values smoothly, over a given duration.
GSAP
GSAP is a JavaScript library for building high-performance animations that work in **every** major browser.
Anime.js
Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.
Responsive Design
Mobile First
As the term suggests, mobile-first design is an approach in which web designers start product design for mobile devices first.
Rem Units
Relative length units specify a length relative to another length property. Relative length units scale better between different rendering medium.
Viewport
The viewport is the user's visible area of a web page.
Fluid Witdh
By setting a percentage width and a fixed pixel max-width , the content wrapper will always be relative to the screen size
Media query
Media queries is a feature of CSS 3 allowing content rendering to adapt to different conditions such as screen resolution
CSS Preprocessors
Sass
Sass (short for syntactically awesome style sheets) is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS).
PostCSS
PostCSS is a software development tool that uses JavaScript-based plugins to automate routine CSS operations
Modern CSS
Styled Components
styled-components is the result of wondering how we could enhance CSS for styling React component systems.
CSS Modules
CSS files in which all class names and animation names are scoped locally by default.
