DEV Community

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


Basic HTML

Useful Elements


Basic CSS



Images & Transformation

Styling Forms

Useful Properties


  • 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

      <!-- 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">
  • 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
      font-size: 62.5%; //defines 1rem everywhere as 10px
      box-sizing: border-box;
      Define project wide font family and size in body selector

Discussion (6)

Editor guide
paras594 profile image
Paras 🧙‍♂️

Great reference list !!

zinox9 profile image
Arjun Porwal Author

Thanks Buddy !!

braxtonmainse profile image
Braxton Mainse

Useful. Thank you.

zinox9 profile image
Arjun Porwal Author

It's good that you found it useful 😊

sufyanhabib1 profile image

Great job thanks buddy

zinox9 profile image
Arjun Porwal Author

Loved Making it too ! 🤘