DEV Community

loading...
Cover image for HTML, CSS & Responsiveness Reference Sheet

HTML, CSS & Responsiveness Reference Sheet

zinox9 profile image Arjun Porwal ・5 min read

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

  • 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
      */
  }

Discussion (6)

pic
Editor guide
Collapse
paras594 profile image
Paras 🧙‍♂️

Great reference list !!

Collapse
zinox9 profile image
Arjun Porwal Author

Thanks Buddy !!

Collapse
braxtonmainse profile image
Braxton Mainse

Useful. Thank you.

Collapse
zinox9 profile image
Arjun Porwal Author

It's good that you found it useful 😊

Collapse
sufyanhabib1 profile image
sufyanhabib

Great job thanks buddy

Collapse
zinox9 profile image
Arjun Porwal Author

Loved Making it too ! 🤘