HTML , CSS & Responsiveness Reference Sheet

Here is my collection of all references of HTML & CSS that can be used as a reference while studying them as a path , explanation to use responsiveness is also available here.

You can get the markdown at my Github

Table Of Contents

HTML , CSS & Responsiveness Reference Sheet

• HTML
  • Basic HTML
  • Useful Elements
• CSS
  • Basic CSS
  • Positioning
  • Animations
  • Images & Transformation
  • Styling Forms
  • Useful Properties
• Responsiveness
  • Screen Width Usage
  • Order to apply Media queries
  • Handling Images
  • Feature Queries
• Other Useful Concepts

HTML

• CHEATSHEET

Basic HTML

• All Tags - Reference
• Class & ID - Usage
• Adding CSS & other files - Link Tag
• Adding JS - Script

Useful Elements

• Forms & Form Elements
• Tables
• Figure, iFrames

CSS

• CHEATSHEET
• All Properties Reference

Basic CSS

• Box Model - Explained
• Selectors - All Pseudo Selectors & Common 30 Cheatsheet
• Positioning - Relative, Absolute & Other
• States - Link | Visited | Hover | Active | Focus
• After & Before Elements - Reference | Applications
• Pseudo Class Selectors - :not | :nth-child | others
• Special Functions - calc() | others
• Variables - Reference

Positioning

• Floats - All About Floats
• Display - block, inline, inline-block, tables
• Flexbox - Explanation , Cheatsheet
• Grids - Explanation , Cheatsheet

Animations

• Creating Animations - Reference
• Using Animations -Transition
• Cubic Bezier: Create Your Own or Premade

Images & Transformation

• Background Images & Gradients - Reference
• Transformation - Transform
• Clipping & Masking - Reference, Clipping Tool

Styling Forms

• Styling Inputs - Reference
• Selectors - :input-placholder | :input-placeholder-shown | :valid | :invalid | :focus
• Other Inputs - Radio Button, Checkbox, Toggle Styling
• Dropdown - Reference

Useful Properties

• Target - to target an element having ID
• Background-clip - to clip background with text or content
• Perspective - change the perspective of 3d animations
• Backface visibility - for the elements behind
• Overflow - for overflowing content
• Background-blend-mode, Mix-blend-mode - blend background with some color , or blend text with background
• Box Decoration Break - to fix the decoration for multiline text
• Shape Outside - to align paragraph according to the shape of image with it
• Image Filter - to add filters to images
• Object fit - to fit images and videos in containers
• Hyphens - for multiline content
• backdrop-filter - gives filter to the background

Responsiveness

• Media Queries

• Meta Tag - <meta name='viewport' content="width=device-width, initial-scale=1.0">

Screen Width Usage

• Desktop First : use max-width; (higher to lower)
• Mobile First : use min-width (lower to higher)

Order to apply Media queries

1. base + typography
2. general layout
3. grid
4. page layout
5. components

Handling Images

• Density Switching - high-res (2px for 1px) & low-res(1px for 1px)

  • <img srcset="img1x.png 1x, img2x.png 2x" alt="Image">

• Art directions - different images for different screen
  
  

  <picture>
      <!-- when lower than 600px -->
    <source srcset="imgsmall1x.png 1x, imgsmall2x.png 2x" media="(max-width: 37.5em)"> 
      <!-- using density switching with art directions -->
      <img srcset="img1x.png 1x, img2x.png 2x" alt="img">
  </picture>

• Resolution Switching - large & small screen

  <!-- in srcset , the images are specified with their original width-->
  <img srcset="img1.png 300w, img1-large.png 1000w" 
       sizes="(max-width: 900px) 20vw, (max-width: 600px) 30vw, 300px">
  <!-- in sizes , the screen size is speicified with the image width to be used, last one being the default size -->

• Handling Images in CSS - media queries combined with screen res & width

  // for resolution greater than 1px and 600px width or webkit is for safari browser
  @media (min-resolution: 192pi) and (min-width:600px) ,
      (-webkit-min-device-pixel-ratio: 2) and (min-width:600px){
      // image you want to set
      }

Feature Queries

• Browser

  @supports (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)){
    -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      //use only if the browser supports these properties
  }

• Touch Capability - This will apply for small screen OR non hover screen. @media only screen and (max-width: 56.25em), only screen and (hover:none){}

Other Useful Concepts

• Optimizing Images - By cropping or using Optimizilla

• Search Engine Optimization - By using Meta tags

• Class Naming Convention - BEM

• Global Reset
  

  * {
      margin: 0;
      padding: 0;
      box-sizing: inherit; //from body element
  } 
  html{
      font-size: 62.5%; //defines 1rem everywhere as 10px
  }
  body{
      box-sizing: border-box;
      /*
      Define project wide font family and size in body selector
      */
  }