Web Development Basics Quiz

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

What property is used to change the text color in HTML?

color (correct)

background-color:blue

text-color:green

font-style:red

What is the main purpose of the 'class' attribute in HTML?

To uniquely identify an element

To add metadata to an element

To group elements for styling purposes (correct)

To define the type of an element

Which tag is used to display a table on an HTML webpage?

<ul>

<table> (correct)

<div>

What does a marquee do in HTML?

Creates a scrolling text or image Signup and view all the answers

Which of the following are standard CSS display properties?

block, inline, flex, grid, none Signup and view all the answers

In the rgba(R, G, B, A) color model, what does 'A' represent?

Alpha Signup and view all the answers

What does the margin shorthand property 'margin: 40px 100px 120px 80px;' signify?

Top, Right, Bottom, Left margins Signup and view all the answers

Which properties are typically used to format text in CSS?

font-family, font-size, color, text-align Signup and view all the answers

What is the purpose of the package.json file in a Node.js project?

Contains metadata about the project, including dependencies. Signup and view all the answers

What defines child processes in Node.js?

Processes created by the Node.js runtime to manage multiple tasks. Signup and view all the answers

How do master and slave clusters function in Node.js?

The master process distributes tasks to worker processes. Signup and view all the answers

Which of the following is a key feature of Angular?

Dependency Injection. Signup and view all the answers

What is an Angular component primarily used for?

As the basic UI building block which includes HTML template and logic. Signup and view all the answers

What role does the Angular router serve in a single-page application?

Routing and navigation between views or components. Signup and view all the answers

How can data be passed between components in Angular?

Utilizing services and decorators like @Input and @Output. Signup and view all the answers

What does lazy loading in Angular optimize for applications?

It loads modules only when needed to reduce initial load time. Signup and view all the answers

What do Angular lifecycle hooks allow developers to do?

Execute code at specific points in a component’s lifecycle. Signup and view all the answers

What are Angular Guards primarily used for?

To control access to routes based on specific conditions. Signup and view all the answers

What will the output of the following code be? let arr = [1, 2, 3]; arr = 10; console.log(arr.length);

6 Signup and view all the answers

What does the function isEven incorrectly return for the input 4?

Even Signup and view all the answers

What does the following code output? let x = 10; function testScope() { let x = 20; console.log(x); } testScope(); console.log(x);

20, 10 Signup and view all the answers

What will the output of this code be? for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 1000); }

3, 3, 3 Signup and view all the answers

What is the result of executing the following function? function greet(name) { if (!name) { name = 'Guest'; } return `Hello, ${name}!`; } console.log(greet()); console.log(greet('Alice'));

Hello, Guest!, Hello, Alice! Signup and view all the answers

What error does the following code produce? try { throw 'An error occurred'; } catch (err) { console.log(error); }

Throws a ReferenceError Signup and view all the answers

What is the effect of using 'display: none;' in CSS?

The element is removed from the document flow entirely. Signup and view all the answers

Which CSS overflow setting allows for scrolling when content exceeds its container?

scroll Signup and view all the answers

What are the eight data types in JavaScript?

Number, String, Boolean, Undefined, Null, Symbol, BigInt, Object Signup and view all the answers

How does '==' differ from '===' in JavaScript?

'==' performs type conversion if types differ, while '===' does not. Signup and view all the answers

What does Scope refer to in JavaScript?

Where a variable is accessible within code. Signup and view all the answers

What are callbacks in JavaScript?

Functions passed as arguments to other functions. Signup and view all the answers

What does the Document Object Model (DOM) represent?

HTML elements represented as objects in a structured format. Signup and view all the answers

What do 'async' and 'await' keywords accomplish in JavaScript?

They enable asynchronous programming with easier syntax. Signup and view all the answers

How are arrow functions characterized in JavaScript?

They automatically bind 'this' to the enclosing context. Signup and view all the answers

What is the main difference between 'var', 'let', and 'const' in JavaScript?

'let' and 'const' are limited to block scope, while 'var' does not have this restriction. Signup and view all the answers

Is Node.js single-threaded?

Yes, but it employs multiple threads for handling I/O. Signup and view all the answers

What is npm and its purpose?

npm serves as a package manager for sharing and managing libraries. Signup and view all the answers

What is middleware in the context of Node.js?

Functions that execute during the HTTP request lifecycle. Signup and view all the answers

What does the event loop in Node.js signify?

A single-threaded loop that processes asynchronous tasks. Signup and view all the answers

What is the purpose of the package.json file in Node.js?

A configuration file defining project settings and dependencies. Signup and view all the answers

Study Notes

HTML

Text Color: Use the color property in inline styles or CSS.
Class Attribute: Groups elements for styling.
Table Display: Use the <table > tag.
Marquee Tag: Creates scrolling text/images (deprecated).

CSS

Display Properties: block, inline, flex, grid, none.
rgba Alpha: Represents opacity (0-1).
Margin Shorthand: margin: top right bottom left;.
Text Formatting: Use properties like font-family, font-size, color, and text-align.
Hiding Elements: display: none; hides and removes from layout, visibility: hidden; hides but retains space.
overflow Property: Controls how overflowing content is handled (e.g., clipping, scrolling).

JavaScript

Data Types: Number, String, Boolean, Undefined, Null, Symbol, BigInt, Object.
== vs. ===: == performs type coercion, === compares value and type.
Scope and Scope Chain: Scope determines accessibility, Scope Chain connects scopes.
Callbacks: Functions passed as arguments to other functions.
DOM: Represents HTML elements as a tree-like object model.
Async/Await: async declares functions that always return promises, await pauses execution until a promise resolves.
Arrow Functions: Functions written concisely using => , lack this and arguments.
var, let, const: var has function scope, let and const have block scope. let allows reassignment, const does not.

Node.js

Thread Model: Single-threaded JavaScript execution, but uses multiple threads internally (libuv) for I/O.
npm: Node Package Manager manages JavaScript packages.
Middleware: Functions executed during HTTP request lifecycle.
Event Loop: Single-threaded loop handling non-blocking I/O operations.
package.json: Configuration file for project metadata and dependencies.
Child Processes: Processes spawned by Node.js for executing tasks in parallel.
Master/Slave Clusters: Master distributes tasks to worker processes for parallel performance.

Angular

Key Features: MVC Architecture, Two-way Binding, Dependency Injection.
Component: The fundamental UI building block (template + logic).
Router: Manages navigation between components.
Data Transfer: Uses @Input, @Output, and services.
Lazy Loading: Loads modules as needed for improved performance.
Lifecycle Hooks: Methods executed at specific points during a component’s lifecycle (e.g., ngOnInit).
Guards: Used to control access to routes, like authentication.

Common Errors/Concepts (JavaScript)

Error Handling (try/catch):
- try block encloses the code that might throw an error.
- catch block handles potential exceptions. Correct way to catch error in the catch block: catch(err) -> console.log(err).
Hoisting:
- JavaScript Hoisting: Variables/functions declared with var are 'hoisted,' meaning they become available in the scope before their declaration. let and const are not hoisted.
i in setTimeout: Global var declarations will lead to all setTimeout calls referencing the final value of i (Example in Question 4).
if (!name): Checks if the parameter name is truthy/falsy. This function returns a default value ("Guest") if the input is missing.
Scope and Variables: Be aware of where variables are defined (local/global) and how they're accessed within a function. The x variable example is an example of a local scope, which is different from the global scope. Correct output includes both the local and global scope value.

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Description

Test your knowledge on HTML, CSS, and JavaScript fundamentals with this quiz. Covering topics such as text color, display properties, and data types, this quiz is perfect for beginners looking to strengthen their web development skills.