DEV Community

Cover image for HTML, CSS & Responsiveness Reference Sheet
Arjun Porwal
Arjun Porwal

Posted on

HTML, CSS & Responsiveness Reference Sheet

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>
Enter fullscreen mode Exit fullscreen mode
  • 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 -->
Enter fullscreen mode Exit fullscreen mode
  • 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
      }
Enter fullscreen mode Exit fullscreen mode

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
  }
Enter fullscreen mode Exit fullscreen mode
  • 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
      */
  }
Enter fullscreen mode Exit fullscreen mode

Top comments (15)

Collapse
 
bennouihemza profile image
BENNOUI hemza

thank you Arjun Porwal

Collapse
 
mateusz_ksiazek_8 profile image
Mateusz Ksiazek

This is a lot of helpfull information thx !!

Collapse
 
sufyanhabib1 profile image
sufyanhabib

Great job thanks buddy

Collapse
 
zinox9 profile image
Arjun Porwal

Loved Making it too ! 🤘

Collapse
 
christosgiamakis profile image
Christos Giamakis

Thank you very much! We appreciate your work!

Collapse
 
wadocode profile image
Walter Arroyo

Thank you

Collapse
 
imiahazel profile image
Imia Hazel

Thanks for the roundup.

Collapse
 
zinox9 profile image
Arjun Porwal

Happy To Help ! 🤘

Collapse
 
paras594 profile image
Paras 🧙‍♂️

Great reference list !!

Collapse
 
zinox9 profile image
Arjun Porwal

Thanks Buddy !!

Collapse
 
braxtonmainse profile image
Braxton Mainse

Useful. Thank you.

Collapse
 
zinox9 profile image
Arjun Porwal

It's good that you found it useful 😊

Collapse
 
wenura profile image
Wenura Ravindu

Great One

Collapse
 
alessan34732291 profile image
deste_x04

bro if you want consider this website BoxCoding

Collapse
 
atulnagose1499 profile image
ATUL WAMAN NAGOSE

thanks a lot "Arjun" sir