DEV Community

Karthick (k)
Karthick (k)

Posted on

Technical Interview Prep: Core HTML & CSS Concepts Explained Simply

#ai #html #git #gitlab

23-05-2026
Second Mock Interview

title: "Technical Interview Prep: Core HTML & CSS Concepts"
published: false
description: "Quick breakdown of essential web development concepts covering units, semantics, selectors, and Flexbox layout from my second mock interview."

tags: webdev, beginners, css, html

Sharing my notes from my second mock interview! Here is a quick breakdown of essential web development concepts.

1. Units: px vs vh

The main difference lies in whether the unit is fixed or fluid.

  • px (Pixel): An absolute, fixed unit representing the smallest digital image point.
  • vh (Viewport Height): A relative unit based on the browser window height.

Quick Reference

  • 200px stays exactly 200 pixels wide on mobile, laptop, or 4K monitors.
  • 1vh = 1% of the current viewport height.
  • 100vh = 100% of the viewport height (fills the full screen vertically).

2. Structure: <footer> vs <div>

The core difference here is Semantics (meaning).

  • <div> (Division): A generic, non-semantic block element. It holds no meaning and is used purely for styling or grouping elements together.
  • <footer>: A semantic element. It explicitly tells the browser and search engines that the content inside represents the bottom section of a page or component.

3. CSS Selectors: Connecting HTML to Styles

A CSS selector targets specific HTML elements to apply styles. Here are the five fundamental types:

  1. Element Selector: Targets all elements of a specific tag type (e.g., p, h1).
  2. ID Selector: Targets a single, unique element using the # symbol.
  3. Class Selector: Targets multiple reusable elements using the . symbol.
  4. Universal Selector: Targets every single element on the page using *.
  5. Grouping Selector: Combines multiple selectors separated by a comma to share identical styles (e.g., h1, p).

4. Identity: id vs class

The primary difference is uniqueness and reusability.

  • ID Selector: Must be unique. Used once per page. Uses the # symbol in CSS. Best for unique structural sections.
  • Class Selector: Reusable. Applied to multiple elements. Uses the . symbol in CSS. Best for repeating styles.

5. SEO & Metadata: The <meta> Tag

The <meta> tag provides structural data about the HTML document that users cannot see on the page.

  • Location: Always placed inside the <head> section.
  • Purpose: Communicates directly with browsers, search engines (SEO), and web services.
  • Common Uses: Defining character sets (e.g., UTF-8), configuring mobile viewports for responsiveness, and adding SEO page descriptions.

6. Layout: justify-content vs align-items

Both properties control alignment in CSS Flexbox, but they operate on different axes.

  • justify-content: Aligns items along the Main Axis (default: horizontal). It handles horizontal distribution like centering, pushing items to edges, or spacing them evenly.
  • align-items: Aligns items along the Cross Axis (default: vertical). It handles vertical positioning like top alignment, bottom alignment, or vertical centering.

Top comments (0)