HTML & CSS Cheatsheet (Q&A — Concepts You Need to Know to Pass Tech Interview)

8 min readOct 29, 2022

Share some coding notes I took in the past which helped me understand the concepts, and these are questions you may be asked during interviews.

HTML

What does a DOCTYPE do?

when we have a doctype, it is “information” to the browser about what document type to expect.
not case-sensitive.

href & target in `<a>` tag.

_blank (new tab) and _self (current tab)
<a href=“https://www.youtube.com/” target="_blank"></a>

<div> and <span>

<div> - anything can be put within a div, it is a block element
<span> - like a div but only for an inline container, in which div is block level element

Why use semantic tags?

we want to know what it exactly means in the HTML, we can know it directly by its name
<div> is too broad, we do not know what it really means.
semantic elements carry accessibility by themselves, proper reading
<article><aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>

a11y 508 accessibility

computer accessibility, for people with disability using a screen reader
mac machine, window, 3rd party tool, it will read out the web contents for you
you want to have your website good with accessibility features

video and audio

the text between the tags only appears when video/audio is not working

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video><audio controls>
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

form elements

<form action="/action.php" method="post" id="form">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <input max="99" min="1" name="age" step="1" type="number" value="18" />
  <select name="gender">
	<option selected="selected" value="male">Male</option>
	<option value="female">Female</option>
  </select><br /> 
  <input checked="checked" name="newsletter" type="radio" value="daily" />
  <textarea cols="20" name="comments" rows="5">Comment</textarea>
  <input name="terms" type="checkbox" value="terms" />
  <input type="submit" value="submit" />
  <input type="reset">
</form>
<button form="form">Send</button>

What is the `<meta>` tag in the `<head>` tag?

<meta> - metadata about an HTML document, is data (information) about data.
<meta> tags always go inside the <head> element and are used to specify the character set, page description, keywords, author, and viewport settings.
<meta> is important for SEO (search engine optimization). we do not visually see any of the code in the browser, but the browser will analyze the information.

SEO (Search engine optimization)

The process of improving the quality and quantity of website traffic to a website or a web page from search engines.

Improving SEO

Publish relevant, authoritative content.
Update your content regularly.
Use Metadata.
Use alt tags to describe imagines.
Improve title tags.

Character Encoding

To display an HTML page correctly, a web browser must know which character set to use.
Charset a table of unique numbers assigned to different characters like letters, numbers, and other symbols like ASCII 128 different characters
HTML5 charset standard: <meta charset="UTF-8">

`<html><body>` and `<header><footer>`

An HTML should only one <html> and <body> tag in the document
You can use multiple <header> and <footer> elements in a webpage
they represent a header and footer of a section, like every <section> and <article> also can contain these two tags

`<canvas>` vs `<svg>`

both elements are used to draw two-dimensional graphics on a web page.
like a container for graphics, unlike imagines, there is no impact on enlarging the graphics.
use JavaScript to actually draw like setAttribute("fill", "green");

What is the `<iframe>` tag

an inline frame is used to embed/display a web page within a web page.
<iframe src="https://www.w3schools.com"></iframe>

Difference between `<script>`, `<script async>` and `<script defer>`.

<script>

HTML parsing is blocked when the script is read.
the script is fetched and executed immediately, and HTML parsing resumes after the script is executed.
If put the script tag in the end, the JS script is not able to be downloaded until the browser reads it

<script async>

in parallel to HTML parsing and executed as soon as it is available (potentially before HTML parsing completes)

<script defer>

ensures the entire body loads before running JavaScript
in parallel to HTML parsing and executed when the page has finished parsing, ensuring that the HTML is fully parsed before executing.
There’s not much difference in putting a normal <script> at the end of <body>.

CSS

specificity

!important — overrides any other declarations
id selector #
class selector .
Type selectors p
Universal selector *

px, em, and rem

specify sizes or lengths of elements using various units of measure

px: You get what you asked for. Pixels may be good at spacing and layout but are not a good fit for font size.
em: Relative to the parent element
rem: Relative to the root element (HTML tag), do not care about the parent

Three ways to insert CSS

external CSS (better choice, a separate CSS file)
internal CSS (putting CSS directly in the HTML page using style tag, higher priority)
inline CSS (not recommended, highest priority, overriding other ways, not reusable)

margin/padding

4 value order: top right bottom left
3 value order: top left&right bottom
2 value order: top&bottom left&right

The CSS Box Model

margin, border, padding, content
goes from outside to the inside

reset CSS

* { margin:0; padding:0; box-sizing: border-box }
reset — consistent baseline, more control over the styling of everything.
normalize — cross-browser consistency without completely losing the default styles with CSS standards.

box-sizing property

content-box: using content as the basis, default, only care about your content
border-box: using the border as the basis, like when we put a padding

what is margin collapse?

Top and bottom margins collapse into a single margin when it comes in contact with one another
Take the greater value. Only top and bottom margins!

display

block — full width, force a line break
inline — just for inline, you can set margin and padding left-right, but not top-bottom, no width and height
inline-block — allow elements to sit to left & right, top & bottom margins and padding, height, and width

position

static - default, follow the flow into the page as it normally would
relative - almost the same as static, but you can change the position relative to the docs (its normal position), and can even overflow (the ability to use z-index)
absolute - other elements render as this absolute element does not even exist, relative to the nearest positioned ancestor
fixed - fixed based on the doc and always stick to where it is
sticky - a combination of relative and relative stick to the position based on the user scroll position

relative vs absolute

position: relative - starts from where the element would be in the normal document flow
position: absolute - removed from the normal document flow, placed in an exact location where you tell it to go on the page, relative to the nearest positioned ancestor (focus on the parent).

z-index

set the order of a positioned overlapping element, a larger z-index covers a smaller one.

combinators

descendant selector (space) — all elements that are descendants of a specified element.
child selector (>) — all elements that are the children of a specified element
adjacent sibling selector (+) — immediate, an element that is directly after another specific element
general sibling selector (~) — all elements that are next siblings of a specific element

pseudo-class

a class like a specific state, this specific state will happen under what kind of condition
a:hover - mouse over; a:visited/:focus - visited, mouse focused
:nth-child() - pseudo-class, the value like odd, even, a specific number, etc

pseudo-element

referring specific location for that element
p::first-line/::last-letter ::after/::before
capitalize the first letter: p:first-letter { text-transform:capitalize; }

invisible from the page

display:none - does not occupy space or consume clicks, hide the whole element and remove that from layout, gone from the DOM tree, disappear from UI
visibility:hidden - occupies space, but does not consumes clicks, hides an element but takes up the same space as before
opacity:0 - occupies space and consumes clicks, creating transparency or fade effect

center both vertically and horizontally using flexbox

display: flex
justify-content: center - horizontally or vertically depends on the main axis
align-items: center - center in the middle

flexbox

With a parent element set to flex, all direct child elements in the container automatically become flexible items. (dimension layout)
initially all flex items in one row (flex-direction) with the same stretch height (align items: layout for all items on the main axis line)
justify-content: layout based on the main axis, align-content: for multiline, flex-wrap: wrap items instead of shrinking, align-self: for an individual item
display: flex, flex: flex-grow, flex-shrink, flex-basis with all default 1, order to change item order, gap to change gap

grid system

two dimensions layout with rows and columns, direct children of the grid container automatically become grid items
display: grid; grid-template-column: 2fr 1fr; grid-auto-rows: minmax(1, auto); grid-column/column: start/end(-1); row-start/end; grid-gap;

flex and grid

flex: for alignment -> small design to implement, align elements, content-first design
grid: for layout -> complex design to implement, a gap between block elements, overlap elements, layout-first design

what is an image sprite?

a collection of images put into a single image (by combining images in a single file) -> reduce the number of HTTP server requests for image resources
A web page with many images can take a long time to load and generates multiple server requests, using image sprites will reduce the number of server requests

SVG icon and icon font

icon fonts are treated as a piece of text by the browser
SVGs are treated as an image/graphic with built-in semantic elements that make it accessible to screen reader

BEM Naming Convention

Block: describes its purpose (“What is it?” — menu or button) — it doesn’t depend on other page components
Element: describes its purpose (“What is this?” — item, text, input) block-name__element-name with a double underscore (__) - can't be used separately without the parent entity (the block)
Modifier: describes its appearance (“What size?” or “Which theme?”), its state (“How is it different from the others?”), and its behavior (“How does it behave?”), like directions_left-top with a single underscore (_)

Responsive Web

<meta viewport name=”viewport” content=”width=device-width, initial-scale=1.0"> to give browser direction to scale
Use <img max-width=”100%”> and the image will not scale more than its size;
Use <picture> <source srcset=”” media=”” > to specify images for different screen sizes;
Responsive font sizes: em and rem ;
Use media queries;

media queries

for responsive design, change the styling once the size reaches a certain value
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
@media only screen and (max-width: 600px) {}

Cross Browser Compatibility

check browser support: caniuse.com or use CrossBrowserTesting for testing
The ability of a website, application, or script to support various web browsers identically.
For example, we can check if CSS animation features support equally under various web environments