Pursuit of Knowlege

• Scroll Magic
• Rellax
• Magic Effects

• COOLORS palette generator
• Stripes Generator
• Transparent Textures
• CSS Gradient Generator
• CSS Matic Gradient Generator +
• HEX to RGBA Converter

• W3C CSS Validation Service
• PX to EM Conversion
• CSS Autoprefixer
• DiffNow (compares html or css)
• How Big is my Brower?
• WEB AIM: Link Contrast
• WEB AIM: Foreground & Background Contrast

• CSS Tricks: border-image

• CSS Clip-Path Generator

• CSS Tricks: The Shapes of CSS
• Alvaros Montoro’s CSS shapes
• Albert Walicki’s CSS shapes

• Greenshot (editble screenshots)
• Colour Contrast Analyzer
• Visual Studio Code 

• A complete quide to flexbox

• Scale font-size with CSS clamp()
• Google Fonts

Helpful tutorial
A Complete Guide to CSS Grid
CSS Grid Garden

Tutorial on Responsive Images

• HTML Beautifier
• HTML escape tool/parser
• ma team list of escape codes
• W3C HTML Markup Validation

Intersection Observers

An intersection observer is JavaScript code that can detect when an element on a page enters the browser viewport.  They can also be set to detect when an element leaves the browser viewport. Intersection observers can have many purposes, and a common one is to trigger animations on a page.

• Introduction to the Intersection Observe JavaScript API

• Beyond Media Queries

• Online SCSS Compiler

Visual Studio Code is a powerful code editor that speeds up production.

Visual Studio Code Keyboard Shortcuts pdf

• Official Beginner Tutorial
• How to get started with VS Code
• VS Code shortcuts & tips to help you work faster
  • ctrl + d /command + d = selects next instance of highlighted code and then all can be changed at once
  • ctrl + shift + L / command + shift + L = selects all instances of highlighted code and then all can be changed at once.
  • Clicking
    • single click = places cursor as usual
    • double click (or ctrl + L) = selects the entire word
    • triple click = selects an entire line
    • quad click = selects everything
  • ctrl + shift + enter / command + shift + enter = moves a line down and places cursor on the newly created line
  • Duplicate coded
    • alt + shift + down-arrow / opt + shift + down-arrow = will duplicate all highlighted code and place it below
    • alt + shift + up-arrow / opt + shift + up-arrow = will duplicate all highlighted code and place it above
  • Scroll through code without mouse
    • ctrl + up-arrow OR ctrl + down-arrow
    • command + up-arrow OR ctrl + down-arrow
  • Move Primary sidebar to the right to prevent code moving around
• VS Code extension that I can’t live without
  • Bracket Pair Colourizer 2 = colorizes brackets, etc for easier matching of pairs
  • Live Server = Displays your work in a live browser
  • Prettier = fixes the alignment of codes
  • Auto Tag Rename = when you change the opening tag, the closing tag automatically changes too.
  • SVG Previewer = can view svgs created in the html
  • Atom Dark One = one of many themes
  • One Dark Pro = one of many themes