Internet & Web History
HTML & JS
CSS
Figma & Wireframing
Miscellaneous
100

Who invented the World Wide Web?

Who is Tim Berners-Lee?

100

Which HTML tag is used to create a hyperlink?

What is <a>?

100

Which CSS property changes the background color of an element?

What is background-color?

100

What is Figma used for?

What is designing and wireframing websites and UI elements?

100

Which keyboard shortcut saves a file?

What is Ctrl + S?

200

What was the first graphical web browser?

What is Mosaic?

200

What is the difference between an internal and external link in HTML?

What is an internal link directs to another page on the same website, while an external link directs to a different website?

200

What does display: flex; do in CSS?

What is it enables the Flexbox layout system for better alignment of elements? 

200

What is the difference between a low-fidelity and a high-fidelity wireframe?

What is a low-fidelity wireframe is a simple sketch, while a high-fidelity wireframe is more detailed and digital?

200

Which shortcut reopens the last closed browser tab?

What is Ctrl + Shift + T?

300

What was ARPANET and why was it important?

What is the precursor to the Internet, originally developed for military and academic research?

300

Which JavaScript method is used to select an element by its ID?

What is document.getElementById()?

300

What is the difference between justify-content: center; and align-items: center; in Flexbox?

What is justify-content aligns items along the main axis, while align-items aligns items along the cross axis?

300

What are three key features in Figma that help with wireframing?

What are Frames, Grids & Guides, and Shapes & Text Tools?

300

Which keyboard shortcut allows you to quickly switch between open applications?

What is Alt + Tab?

400

In what year was the first website published?

What is 1991?

400

Write the JavaScript code to display an alert when a button with the ID 'clickMe' is clicked.

function greet() {

   alert("Hello!"); 

document.getElementById("clickMe").addEventListener("click", greet);

400

Write the CSS code to create a div with a border radius of 10px and a light blue background

div {

  border-radius: 10px;

  background-color: lightblue;

}


400

What should be included in a wireframe?

What are headers, navigation bars, buttons, images, text blocks, and footers?

400

What is the purpose of the <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag in HTML?

What is it makes the page responsive by adjusting the layout for different screen sizes?

500

What was the Dot-Com Boom, and how did it impact the Internet?

What is the rapid growth of websites and e-commerce businesses in the late 1990s and early 2000s?

500

What does console.log("message") do in JavaScript?

What is it prints a message to the browser's console for debugging purposes?

500

Explain the difference between px, vw, and vh units in CSS.

Answer:

  • px: Fixed pixel size, does not adjust with screen size.
  • vw: Relative to the viewport width (1vw = 1% of screen width).
  • vh: Relative to the viewport height (1vh = 1% of screen height).
500

Describe the steps to create a wireframe in Figma.

  • Create a New Frame
  • Sketch the Basic Layout
  • Label Each Section
  • Refine the Layout
500

Write the HTML and CSS code to create a centered div with a width of 300px, height of 150px, and a cyan background.

<div class="box">Hello!</div>


<style>

  .box {

    width: 300px;

    height: 150px;

    background-color: #00FFFF;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 12px;

  }

</style>