Web Development Basics Quiz
39 Questions
0 Views

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to Lesson

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>
  • <section>
  • <table> (correct)
  • <div>

What does a marquee do in HTML?

<p>Creates a scrolling text or image (C)</p> Signup and view all the answers

Which of the following are standard CSS display properties?

<p>block, inline, flex, grid, none (A)</p> Signup and view all the answers

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

<p>Alpha (A)</p> Signup and view all the answers

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

<p>Top, Right, Bottom, Left margins (B)</p> Signup and view all the answers

Which properties are typically used to format text in CSS?

<p>font-family, font-size, color, text-align (C)</p> Signup and view all the answers

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

<p>Contains metadata about the project, including dependencies. (C)</p> Signup and view all the answers

What defines child processes in Node.js?

<p>Processes created by the Node.js runtime to manage multiple tasks. (D)</p> Signup and view all the answers

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

<p>The master process distributes tasks to worker processes. (A)</p> Signup and view all the answers

Which of the following is a key feature of Angular?

<p>Dependency Injection. (D)</p> Signup and view all the answers

What is an Angular component primarily used for?

<p>As the basic UI building block which includes HTML template and logic. (B)</p> Signup and view all the answers

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

<p>Routing and navigation between views or components. (A)</p> Signup and view all the answers

How can data be passed between components in Angular?

<p>Utilizing services and decorators like @Input and @Output. (C)</p> Signup and view all the answers

What does lazy loading in Angular optimize for applications?

<p>It loads modules only when needed to reduce initial load time. (D)</p> Signup and view all the answers

What do Angular lifecycle hooks allow developers to do?

<p>Execute code at specific points in a component’s lifecycle. (A)</p> Signup and view all the answers

What are Angular Guards primarily used for?

<p>To control access to routes based on specific conditions. (B)</p> 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);

<p>6 (A)</p> Signup and view all the answers

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

<p>Even (D)</p> 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);

<p>20, 10 (D)</p> 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); }

<p>3, 3, 3 (A)</p> 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'));

<p>Hello, Guest!, Hello, Alice! (D)</p> Signup and view all the answers

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

<p>Throws a ReferenceError (A)</p> Signup and view all the answers

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

<p>The element is removed from the document flow entirely. (A)</p> Signup and view all the answers

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

<p>scroll (A), auto (C)</p> Signup and view all the answers

What are the eight data types in JavaScript?

<p>Number, String, Boolean, Undefined, Null, Symbol, BigInt, Object (B)</p> Signup and view all the answers

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

<p>'==' performs type conversion if types differ, while '===' does not. (D)</p> Signup and view all the answers

What does Scope refer to in JavaScript?

<p>Where a variable is accessible within code. (B)</p> Signup and view all the answers

What are callbacks in JavaScript?

<p>Functions passed as arguments to other functions. (D)</p> Signup and view all the answers

What does the Document Object Model (DOM) represent?

<p>HTML elements represented as objects in a structured format. (C)</p> Signup and view all the answers

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

<p>They enable asynchronous programming with easier syntax. (D)</p> Signup and view all the answers

How are arrow functions characterized in JavaScript?

<p>They automatically bind 'this' to the enclosing context. (C)</p> Signup and view all the answers

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

<p>'let' and 'const' are limited to block scope, while 'var' does not have this restriction. (A)</p> Signup and view all the answers

Is Node.js single-threaded?

<p>Yes, but it employs multiple threads for handling I/O. (B)</p> Signup and view all the answers

What is npm and its purpose?

<p>npm serves as a package manager for sharing and managing libraries. (D)</p> Signup and view all the answers

What is middleware in the context of Node.js?

<p>Functions that execute during the HTTP request lifecycle. (D)</p> Signup and view all the answers

What does the event loop in Node.js signify?

<p>A single-threaded loop that processes asynchronous tasks. (B)</p> Signup and view all the answers

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

<p>A configuration file defining project settings and dependencies. (A)</p> Signup and view all the answers

Flashcards

Changing Text Color in HTML

The color property is used to change the text color in HTML. It can be applied inline or via CSS.

HTML class Attribute

The class attribute groups elements together for styling. Multiple elements with the same class can share the same style.

HTML Table Display

The <table> tag is used to create a table structure and display tabular data on an HTML page.

HTML marquee Tag

The marquee tag created scrolling text or images, but is deprecated and no longer recommended for modern websites.

Signup and view all the flashcards

CSS Display Properties

CSS display properties control how elements are rendered (positioned, sized, etc.). Examples include block, inline, flex, grid, and none.

Signup and view all the flashcards

Alpha in rgba(R, G, B, A)

The A in rgba(R, G, B, A) represents the Alpha channel, which controls the opacity of the color. It ranges from 0 (fully transparent) to 1 (fully opaque).

Signup and view all the flashcards

CSS Margin Shorthand Order

In the CSS shorthand margin property, the values correspond to top, right, bottom, and left margins in that order (clockwise).

Signup and view all the flashcards

Text Formatting in CSS

CSS properties like font-family, font-size, color, text-align, etc., control the appearance of text on a webpage.

Signup and view all the flashcards

package.json

A configuration file that stores metadata about a Node.js project, such as dependencies, scripts, and versioning information.

Signup and view all the flashcards

Child Processes in Node.js

Processes created by the Node.js runtime using the child_process module to execute tasks in parallel, like running scripts or commands.

Signup and view all the flashcards

Master and Slave Clusters in Node.js

A technique for scaling Node.js applications by distributing tasks to multiple worker processes, managed by a central master process.

Signup and view all the flashcards

Angular

A popular JavaScript framework built on TypeScript, focused on creating dynamic web applications with features like MVC architecture, two-way data binding, and dependency injection.

Signup and view all the flashcards

Angular Component

The smallest building block of a UI in Angular, consisting of a HTML template and related logic (TypeScript) to control its behavior.

Signup and view all the flashcards

Angular Router

A feature in Angular that manages navigation between different views or components in a single-page application.

Signup and view all the flashcards

Data Passing Between Angular Components

Data can be exchanged between components using mechanisms like @Input and @Output decorators, services for shared data, and passing data through routing.

Signup and view all the flashcards

Angular Lazy Loading

A performance optimization technique where components or modules are loaded only when needed, improving initial loading times.

Signup and view all the flashcards

Angular Lifecycle Hooks

Methods that execute at specific moments in a component's lifecycle, allowing you to respond to events like component creation, rendering, or destruction.

Signup and view all the flashcards

Angular Guards

Functions that control access to routes in an Angular application, preventing unauthorized navigation based on conditions.

Signup and view all the flashcards

ReferenceError in JavaScript

An error that occurs when a variable or object is accessed but does not exist in the current scope.

Signup and view all the flashcards

Scope in JavaScript

The area in which variables and functions are accessible. Different scopes can exist within functions (local) or outside (global).

Signup and view all the flashcards

setTimeout() in JavaScript

A built-in function that delays the execution of a callback function for a specified time.

Signup and view all the flashcards

Ternary Operators in JavaScript

A shorthand for writing conditional statements in a single line, often used to assign values based on a condition.

Signup and view all the flashcards

Global vs. Local Variables in JavaScript

Global variables are accessible from anywhere in the script, while local variables are only accessible within the scope of their function.

Signup and view all the flashcards

display: none;

A CSS property that completely hides an element from the page, removing it from the layout flow. This means the element takes up no space and does not affect the layout of other elements.

Signup and view all the flashcards

visibility: hidden;

A CSS property that hides an element but maintains its space in the layout. The element is visually hidden but still takes up space, affecting the positioning of other elements.

Signup and view all the flashcards

CSS Overflow Property

This CSS property controls what happens to content that extends beyond the boundaries of its containing element. It determines whether content is clipped, scrolled, or handled in other ways.

Signup and view all the flashcards

JavaScript Data Types

JavaScript has eight primitive data types: Number, String, Boolean, Undefined, Null, Symbol, BigInt, and Object. These types define the kind of data a variable can hold.

Signup and view all the flashcards

JavaScript == vs. ===

In JavaScript, '==' compares values loosely, performing type coercion if necessary. '===' compares values strictly, requiring both value and type to be the same.

Signup and view all the flashcards

JavaScript Scope

Scope in JavaScript determines the accessibility of variables within a program. Variables defined within a function are accessible only within that function (function scope), while variables declared within blocks (e.g., inside a loop) have block scope.

Signup and view all the flashcards

JavaScript Scope Chain

The Scope Chain in JavaScript allows variables from outer scopes to be accessed by inner scopes. It's a hierarchical path used to look up variables during execution.

Signup and view all the flashcards

JavaScript Callbacks

A callback in JavaScript is a function passed as an argument to another function. It's invoked later when the original function is completed.

Signup and view all the flashcards

JavaScript DOM

The Document Object Model (DOM) in JavaScript is a programming interface for HTML and XML documents. It represents web pages as a tree structure of objects, where each object corresponds to an HTML element.

Signup and view all the flashcards

JavaScript Async/Await

Async/await in JavaScript are keywords used for asynchronous programming. Async declares a function that always returns a promise. Await is used within an async function to pause execution until a promise resolves.

Signup and view all the flashcards

JavaScript Arrow Functions

Arrow functions in JavaScript are a concise way to define functions using => syntax. They don't have their own 'this' binding or arguments object.

Signup and view all the flashcards

JavaScript var, let, and const

These keywords define variables in JavaScript. var has function scope, while let and const have block scope. let allows reassignment, while const does not. Variables declared with var are hoisted but initialized as undefined.

Signup and view all the flashcards

Node.js Single-Threaded

Node.js is fundamentally single-threaded in its JavaScript execution. It handles I/O operations using a non-blocking, event-driven approach, allowing it to efficiently handle multiple concurrent requests.

Signup and view all the flashcards

Node.js npm

npm (Node Package Manager) is a package manager used for installing, managing, and sharing JavaScript libraries and packages within Node.js projects.

Signup and view all the flashcards

Node.js Middleware

Middleware in Node.js are functions that execute during the lifecycle of an HTTP request. They intercept requests and responses, modifying or adding functionality.

Signup and view all the flashcards

Node.js Event Loop

The event loop in Node.js is a single-threaded process that handles asynchronous operations. It continuously checks for pending events and executes them when ready.

Signup and view all the flashcards

Node.js package.json

A configuration file in Node.js projects, package.json stores project metadata, dependencies, and scripts. It describes the project and its components.

Signup and view all the flashcards

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.

Quiz Team

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.

More Like This

HTML/CSS Basics Study Quiz
8 questions

HTML/CSS Basics Study Quiz

BrotherlyJasper8297 avatar
BrotherlyJasper8297
Web Development Basics
9 questions

Web Development Basics

WellMadeBaritoneSaxophone avatar
WellMadeBaritoneSaxophone
Web Development Fundamentals Quiz
21 questions
Use Quizgecko on...
Browser
Browser