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

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
Photo by Ferenc Almasi on Unsplash

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hanwen Zhang

Full-Stack Software Engineer at a Healthcare Tech Company | Document My Coding Journey | Improve My Knowledge | Share Coding Concepts in a Simple Way