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
-
200pxstays 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:
- Element Selector: Targets all elements of a specific tag type (e.g., p, h1).
-
ID Selector: Targets a single, unique element using the
#symbol. -
Class Selector: Targets multiple reusable elements using the
.symbol. -
Universal Selector: Targets every single element on the page using
*. - 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.
