Discover everything you need to know about building websites with our ‘Complete Guide to HTML, CSS, and Responsive Design.’ Learn the basics of coding languages and how to make your websites look great on any device. Whether you’re new to coding or already have some experience, this guide will help you create awesome websites that work well on computers, phones, and tablets.

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

Conclusion

So, to sum it up, learning HTML, CSS, and responsive design is important for making cool websites that look good on any device. With the tips from this guide, you’ll be ready to create awesome sites that work well everywhere. Get started now and have fun designing!