webdev Intermediate

HTML and CSS : INTERMEDIATE LEVEL

Last updated on

Part 1: Intermediate HTML (Data, Accessibility & Media)

At this level, you stop thinking about tags as just “text” or “images” and start thinking about them as structured data and accessible interfaces.

1. The <head>: Your Page’s “Control Panel”

The <head> is not just a box for the <title>. It’s the “engine room” that tells the browser how to render, tells Google who you are (SEO), and tells social media what to display when your link is shared.

Code Snippet:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mr. Whiskers' Deep Thoughts</title>
  
  <meta name="description" content="A 1-2 sentence blog description for Google.">
  <meta property="og:title" content="Mr. Whiskers' Deep Thoughts">
  <meta property="og:image" content="https://techwithowais.co.in/images/mr-whiskers-og.jpg">
  <meta property="og:url" content="https://techwithowais.co.in/blog/cat-philosophy">
  
  <link rel="icon" href="/favicon.ico" sizes="any">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  
  <link rel="stylesheet" href="/css/main-styles.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>

Conceptual Explanations:

  • meta charset="UTF-8": This command tells the browser which “alphabet” to use. UTF-8 is the universal standard that includes letters, numbers, symbols, and emojis. Without it, special characters might break.
  • meta name="viewport": This is the most important tag for mobile. It tells the phone’s browser, “Stop pretending to be a 980px desktop. Set your width to your actual screen size (e.g., 390px) and don’t zoom out.” This is what enables responsive design.
  • meta name="description": This is purely for SEO (Search Engine Optimization). It’s the blurb Google shows in its search results.
  • og:title & og:image: “OG” stands for Open Graph. These tags are for social media. When someone shares your link on Facebook, X, or Slack, it reads these tags to create that rich preview card.
  • link rel="preconnect": This is an intermediate performance trick. It tells the browser, “I’m probably going to need files from fonts.googleapis.com soon. You should start the secure connection (the ‘handshake’) now so it’s ready when I ask for the fonts.” It’s like calling a restaurant to say you’re on your way.

2. The Full Form: Inputs as “Widgets”

Intermediate forms are about using the right tool for the job. You stop using <input type="text"> for everything and start using built-in browser “widgets” that are more user-friendly, especially on mobile.

Code Snippet:

<form action="/submit" method="POST">
  <fieldset>
    <legend>Your Details</legend>
    
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name" required minlength="2">
    
    <label for="pass">Password:</label>
    <input type="password" id="pass" name="user_pass"
           pattern="(?=.*\d)(?=.*[a-z]).{8,}"
           title="Must contain at least one number and 8 or more characters">
  </fieldset>
  
  <fieldset>
    <legend>Your Preferences</legend>
    
    <label for="dob">Date of Birth:</label>
    <input type="date" id="dob" name="user_dob">
    
    <label for="fav-color">Favorite Color:</label>
    <input type="color" id="fav-color" name="user_color" value="#3498db">
    
    <label for="experience">Experience:</label>
    <input type="range" id="experience" name="user_exp" min="0" max="10" value="1">
    
    <label for="role">Desired Role:</label>
    <select id="role" name="user_role">
      <optgroup label="Engineering">
        <option value="frontend">Front-End</option>
        <option value="backend">Back-End</option>
      </optgroup>
      <optgroup label="Design">
        <option value="ui">UI Designer</option>
      </optgroup>
    </select>
    
    <label for="bio">Bio:</label>
    <textarea id="bio" name="user_bio" rows="5"></textarea>
    
    <p>T-Shirt Size:</p>
    <input type="radio" id="size-s" name="shirt_size" value="s">
    <label for="size-s">Small</label>
    <input type="radio" id="size-m" name="shirt_size" value="m">
    <label for="size-m">Medium</label>
  </fieldset>
  
  <button type="submit">Submit</button>
</form>

Conceptual Explanations:

  • fieldset & legend: This is a crucial accessibility feature. It visually and programmatically groups related fields. A screen reader will announce, “Entering group: Your Details,” which gives context to the user.
  • label for="id": We’ve covered this, but it’s the #1 rule. It links the text to the input, which is vital for screen readers and also increases the clickable area for all users.
  • type="date", type="color", type="range": By changing the type, you are asking the browser to provide its native UI. On a phone, type="date" will pop up a calendar, type="color" will show a color wheel, and type="range" gives you a slider. This is much better than making the user type a hex code.
  • pattern: This attribute brings Regular Expressions (regex) into your HTML. It’s a way to enforce complex validation rules (like password strength) in the browser before the data is even sent to the server.
  • name attribute: On radio buttons, the name attribute is what creates the group. Giving them all the same name is what tells the browser, “Only one of these can be selected at a time.”

3. Semantic Media: figure and picture

  • <figure> & <figcaption>: You could just put a <p> tag under an <img>, but that doesn’t “connect” them. These tags semantically link an image (or chart, or code block) to its caption. A screen reader will announce, “Figure 1: Mr. Whiskers napping in a sunbeam.” 
    <figure>
  <img src="mr-whiskers.jpg" alt="Mr. Whiskers napping in a sunbeam.">
  <figcaption>
    Figure 1: Mr. Whiskers demonstrating advanced napping techniques.
  </figcaption>
</figure>
  • <picture>: This tag solves two problems: performance and art direction. It lets you provide multiple image sources and tells the browser which one to pick based on media queries. This way, you can send a small, cropped image to a phone and a huge, wide image to a desktop. 
    <picture>
  <source media="(min-width: 800px)" srcset="mr-whiskers-wide.jpg">
  <img src="mr-whiskers-square.jpg" alt="A photo of Mr. Whiskers">
</picture>

Part 2: Intermediate CSS (Layout, Polish & Systems)

1. The Positioning Stack

This is the key to breaking elements out of the normal “top-to-bottom” flow.

  • position: relative: The “Anchor.” By itself, it does almost nothing. But it gives the element two superpowers: 1) You can “nudge” it with top, left, etc. 2) It becomes the positioning “anchor” for any absolute children inside it.
  • position: absolute: The “Ghost.” This element is ripped out of the document flow. It no longer takes up space. It “floats” and looks for its nearest positioned ancestor (one with relative, absolute, or fixed) and positions itself relative to that ancestor’s corners.
  • position: fixed: The “Sticker.” Ripped out of the flow, but it always positions itself relative to the browser window (the viewport). It does not move when you scroll.
  • position: sticky: The “Hybrid.” It acts like relative until you scroll past a certain point (e.img., top: 0), at which point it “sticks” and behaves like fixed.
  • z-index: The “Layer.” This only works on positioned elements. A higher z-index (e.g., z-index: 999;) will be “on top” of a lower one (e.g., z-index: 1;).

Code Snippet (The Classic Badge):

<div class="notification-icon">
  <img src="bell.png" alt="Notifications">
  <span class="badge">3</span>
</div>
.notification-icon {
  position: relative; /* 1. This is the ANCHOR */
  display: inline-block;
}
.badge {
  position: absolute; /* 2. This is the GHOST */
  
  /* 3. Position it relative to the icon's corners */
  top: -5px;
  right: -5px;
  
  background: red;
  border-radius: 50%; /* Makes it a circle */
  z-index: 10; /* Make sure it's on top of the icon */
}

2. Flexbox: The 1-Dimension Specialist

Flexbox is for aligning items on a single axis (either a row OR a column). It’s for bookshelves, not checkerboards.

Code Snippet (The Responsive Navbar):

<nav class="navbar">
  <a href="/" class="logo">MySite</a>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
.navbar {
  display: flex;
  justify-content: space-between; /* Main Axis: Pushes logo and links apart */
  align-items: center;          /* Cross Axis: Vertically centers them */
  padding: 1rem;
  background: #333;
}
.nav-links {
  display: flex;
  list-style: none;
  gap: 1rem; /* The new, easy way to add space between items */
}
  • display: flex: Turns on “flex mode” for the parent (.navbar).
  • justify-content: Aligns children along the Main Axis (horizontally, in this case). space-between pushes the first and last children to the edges.
  • align-items: Aligns children along the Cross Axis (vertically). center is most common.
  • gap: The modern replacement for using margin on flex children. It simply adds space between items.

3. CSS Grid: The 2-Dimension Master

Grid is for layouts in two dimensions (rows AND columns) at the same time. This is your tool for the entire page structure.

Code Snippet (The “Holy Grail” Layout):

<div class="page-container">
  <header>Header</header>
  <nav>Nav</nav>
  <main>Main Content</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</div>
.page-container {
  display: grid;
  min-height: 100vh;
  
  /* "Draw" your layout with names */
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  
  /* Define the column and row sizes */
  grid-template-columns: 200px 1fr 200px; /* 1fr = 1 "fractional" (flexible) unit */
  grid-template-rows: auto 1fr auto;   /* auto, flexible, auto */
}

/* Assign each element to its named area */
header { grid-area: header; }
nav    { grid-area: nav;    }
main   { grid-area: main;   }
aside  { grid-area: aside;  }
footer { grid-area: footer; }
  • grid-template-areas: This is the most intuitive part of Grid. You literally “draw” your layout with names.
  • grid-template-columns & grid-template-rows: You define the tracks. 200px is a fixed width. 1fr means “1 fractional unit,” or “1 share of the remaining flexible space.” This is the magic unit for responsive design.
  • grid-area: This property assigns an HTML element to one of the names you defined in grid-template-areas.

4. Polish: Variables, Transitions & Transforms

This is what makes a site feel “alive” and professional.

Code Snippet (The Animated, Themed Button):

/* 1. Define your "system" variables at the top */
:root {
  --primary-color: #3498db;
  --primary-color-dark: #2980b9;
  --base-transition: all 0.3s ease-out;
}

.my-button {
  background-color: var(--primary-color); /* 2. Use the variable */
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  
  /* 3. Tell the browser to animate any changes */
  transition: var(--base-transition);
}

.my-button:hover {
  background-color: var(--primary-color-dark); /* 4. Change a property */
  
  /* 5. Transform it without affecting layout */
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

Conceptual Explanations:

  • CSS Variables (:root): This is the key to maintainable CSS. You define your brand’s color palette (--primary-color) in one place. If you use var(--primary-color) 50 times in your stylesheet and the client wants to change the color, you only have to edit one line of code.
  • transition: This tells the browser, “When a property is about to change (like on :hover), don’t snap to the new value. Smoothly animate that change over 0.3 seconds.”
  • transform: This property (scale, rotate, translate) is for visual changes that should not affect the layout. When you transform: scale(1.05), the button gets bigger, but it doesn’t push other elements away. This is very efficient for the browser to animate.