HTML, CSS & Responsiveness Reference Sheet

#html #css #design #webdev

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

HTML , CSS & Responsiveness Reference Sheet

HTML
- Basic HTML
- Useful Elements
CSS
Responsiveness
Other Useful Concepts

HTML

CHEATSHEET

Basic HTML

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

Useful Elements

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

base + typography
general layout
grid
page layout
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
      */
  }