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 contentborder-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 breakinline— just for inline, you can set margin and padding left-right, but not top-bottom, no width and heightinline-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 wouldrelative- 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 ancestorfixed- fixed based on the doc and always stick to where it issticky- 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 flowposition: 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 UIvisibility:hidden- occupies space, but does not consumes clicks, hides an element but takes up the same space as beforeopacity:0- occupies space and consumes clicks, creating transparency or fade effect
center both vertically and horizontally using flexbox
display: flexjustify-content: center- horizontally or vertically depends on the main axisalign-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 itemdisplay: flex,flex: flex-grow, flex-shrink, flex-basiswith all default 1,orderto change item order,gapto 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-namewith 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-topwith 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.comor useCrossBrowserTestingfor 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
