HTML and CSS Concepts Quiz
46 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 is the purpose of the ‘class' attribute in HTML?

  • To define the type of an element.
  • To group elements for styling purposes. (correct)
  • To specify the order of elements on the page.
  • To uniquely identify an element.

Which of the following correctly defines the structure of an HTML document?

  • <header>, <body>, <footer> (correct)
  • <title>, <body>, <footer>
  • <head>, <body>, <html>
  • <html>, <script>, <footer>

How does the ‘rgba(R, G, B, A)’ function work in CSS?

  • It defines text alignment.
  • It determines the size of text.
  • It sets the background color of an element.
  • It specifies the transparency level of a color. (correct)

What does the CSS declaration 'margin: 40px 100px 120px 80px;' specify?

<p>Margins in the order of Top, Right, Bottom, Left. (A)</p> Signup and view all the answers

Which statement about the class names in HTML is true?

<p>Class names are case sensitive. (A)</p> Signup and view all the answers

Which property is used to prevent an element from being visible in CSS?

<p>display: none; (A)</p> Signup and view all the answers

What does a marquee in HTML do?

<p>It allows for animated scrolling text or images. (A)</p> Signup and view all the answers

Which option correctly represents the CSS display properties?

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

What is the correct syntax for a CSS media query?

<p>@media screen and (max-width: 800px) {} (D)</p> Signup and view all the answers

Which statement accurately describes the difference between == and === in JavaScript?

<p>== compares value only, === compares value and type. (B)</p> Signup and view all the answers

What is the purpose of the 'next()' function in Express middleware?

<p>It passes control to the next middleware function. (C)</p> Signup and view all the answers

What is the primary role of components in Angular?

<p>To encapsulate UI logic and rendering. (C)</p> Signup and view all the answers

What does Scope determine in JavaScript?

<p>Scope determines where a variable is accessible. (C)</p> Signup and view all the answers

Which Angular decorator is used to define a service that can be injected into components?

<p>@Injectable (D)</p> Signup and view all the answers

Which of the following best defines middleware in Node.js?

<p>Functions executed during the lifecycle of an HTTP request. (A)</p> Signup and view all the answers

How can you implement lazy loading in an Angular application?

<p>By loading modules asynchronously on demand. (A)</p> Signup and view all the answers

Which of the following is not correct syntax for writing output in JavaScript?

<p>body.html() (C)</p> Signup and view all the answers

Which command is used to create a new Angular project with SCSS as the stylesheet format?

<p>ng new projectName --style=scss (B)</p> Signup and view all the answers

What is the correct shorthand for setting a border to 4px, dotted, and red for the element?

<p>P { border: 4px dotted red; } (B)</p> Signup and view all the answers

What is the purpose of Angular Guards?

<p>To prevent access to certain components or routes. (C)</p> Signup and view all the answers

Which method is used to create a server in Node.js?

<p>http.createServer() (B)</p> Signup and view all the answers

Which directive in Angular allows conditionally rendering a template based on a boolean expression?

<p>*ngIf (B)</p> Signup and view all the answers

What are async and await used for in JavaScript?

<p>async declares a function returning a promise. (D)</p> Signup and view all the answers

What does the error 'Cannot read property 'x' of undefined' typically indicate?

<p>The variable is out of scope. (B)</p> Signup and view all the answers

In JavaScript, what will the result be when adding a number and a string, such as $5 + '8'$?

<p>58 (B)</p> Signup and view all the answers

What does DOM stand for in JavaScript?

<p>A model representing HTML elements as objects. (D)</p> Signup and view all the answers

Which of the following statements about asynchronous programming in Node.js is true?

<p>It allows operations to continue while waiting for an operation. (A)</p> Signup and view all the answers

What will be the output of the following JavaScript code? 'let x = 10; function test() { let x = 20; console.log(x); } test(); console.log(x);'

<p>20, 10 (D)</p> Signup and view all the answers

What type of values are returned from callbacks in JavaScript?

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

In Angular, which feature allows communication between components?

<p>Using services and decorators. (B)</p> Signup and view all the answers

Which statement accurately describes the use of package.json in Node.js?

<p>It defines project metadata, dependencies, and scripts. (C)</p> Signup and view all the answers

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

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

Which of the following is NOT a legal variable name in JavaScript?

<p>-firstname (D)</p> Signup and view all the answers

What does the @Component decorator do in Angular?

<p>Marks a class as an Angular component (C)</p> Signup and view all the answers

In JavaScript, which of the following describes the data type of 'let x = 7.5'?

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

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

<p>3, 3, 3 (B)</p> Signup and view all the answers

What will be the output of the following code? let array = [ 2, 7, 8]; array = ; console.log(array.length);

<p>3 (D)</p> Signup and view all the answers

What is the correct way to merge two objects in JavaScript?

<p><code>{ …object1, …object2 }</code> (B)</p> Signup and view all the answers

What will be the output of the function when it is called? function test(){ console.log(x); var x = 10; } test();

<p>undefined (B)</p> Signup and view all the answers

What will be the output of the following code? let x = 1; if(true){ let x = 2; console.log(x); } console.log(x);

<p>1, then 2 (D)</p> Signup and view all the answers

What will be the output of the following code, and how does the makeCounter() function work? function makeCounter() { let count = 0; return { increment: function() { count++; return count; }, decrement: function() { count--; return count; }, getCount: function() { return count; } }; } const counter = makeCounter(); console.log(counter.increment()); console.log(counter.increment()); console.log(counter.getCount()); console.log(counter.decrement());

<p>1, 2, 2, 1 (B)</p> Signup and view all the answers

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

<p>3, 3, 3 (D)</p> Signup and view all the answers

What will the following code output? async function getData() { return await Promise.resolve('I made it!'); } const data = getData(); console.log(data);

<p>Promise {: &quot;I made it!&quot;} (A)</p> Signup and view all the answers

Which of the following is a valid way to define an anonymous function?

<p>const greet = function() { console.log(&quot;Hello!&quot;); }; (C), const greet = () =&gt; { console.log(&quot;Hello!&quot;); }; (D)</p> Signup and view all the answers

How can you create an Immediately Invoked Function Expression (IIFE)?

<p>(function() { console.log(&quot;I am executed!&quot;); })(); (C), (() =&gt; { console.log(&quot;I am executed!&quot;); })(); (D)</p> Signup and view all the answers

What does the following code do? setTimeout(() => { console.log("Hello"); }, 0); console.log("World");

<p>It logs &quot;World&quot; then &quot;Hello&quot;. (A)</p> Signup and view all the answers

Flashcards

Change Text Color in HTML

The color attribute is used to change the text color within an HTML element. You can use hexadecimal color codes (#FF0000 for red), color names (red), or RGB values (rgb(255, 0, 0)) to specify the desired color.

HTML Class Attribute

The class attribute is used to group HTML elements together for styling purposes using CSS. Multiple elements can share the same class name, making it easier to apply styles to specific groups of elements.

Displaying a Table in HTML

The <table> tag is used to display data in a tabular format within an HTML document. Inside the table tag, you use <tr> for rows, <th> for table headers, and <td> for table cells to structure the data.

HTML Marquee

A marquee is a scrolling text or image created using the <marquee> tag. It allows for text or an image to move across the screen. However, this tag is considered outdated and may not be implemented in all modern browsers.

Signup and view all the flashcards

Essential HTML Document Parts

The three essential parts of an HTML document are: <!DOCTYPE html>: Declares the document type, <html>: The root element that encloses the entire document, and <head>: Contains meta-information about the document, and <body>: Contains the visible content of the document.

Signup and view all the flashcards

HTML Attribute Syntax

The correct syntax for using an HTML attribute is to place the attribute name followed by an equal sign (=) and the attribute value enclosed in double quotes ("). For example, <img src="image.jpg" alt="Description"/>.

Signup and view all the flashcards

CSS Display Properties

CSS display properties control how elements are rendered and positioned on the page. Common values include block (takes up the entire width of the container), inline (renders in line with other content), flex (allows for flexible layout using the Flexbox model), grid (allows for flexible layout using the Grid layout model), and none (hides the element).

Signup and view all the flashcards

Alpha Value in rgba()

The A in rgba(R, G, B, A) stands for Alpha, representing the opacity of the color. It ranges from 0 (completely transparent) to 1 (completely opaque). rgba allows you to specify color with both RGB values and an opacity.

Signup and view all the flashcards

CSS Media Query Syntax

A way to apply different styles to a web page depending on the device or screen size. The syntax starts with '@media' followed by a condition, and then enclosed in curly braces are the styles you want to apply.

Signup and view all the flashcards

Background Color on Mouseover

This CSS rule changes the background color of an element when the mouse hovers over it. It uses the ':hover' pseudo-class for mouse interaction.

Signup and view all the flashcards

JavaScript Data Types

The different kinds of values JavaScript can work with, like numbers, text strings, booleans (true or false), objects, arrays, and more.

Signup and view all the flashcards

== vs. === in JavaScript

The equality operators in JavaScript. '==' only checks for value equality, while '===' checks for both value and data type.

Signup and view all the flashcards

Scope in JavaScript

Determines where a variable is accessible within your code. Variables can have global scope (accessible everywhere), local scope (accessible within a specific function), or block scope (like within 'let' or 'const').

Signup and view all the flashcards

Callback Functions in JavaScript

Functions that are passed as arguments to other functions and are executed later, usually when a certain event happens.

Signup and view all the flashcards

DOM in JavaScript

A structured representation of an HTML document, allowing JavaScript to interact with the page's elements like a tree of objects.

Signup and view all the flashcards

Async & Await in JavaScript

Keywords used for easier asynchronous programming with promises. 'async' makes a function return a promise, and 'await' pauses execution until the promise resolves.

Signup and view all the flashcards

Arrow Functions in JavaScript

A concise way to define functions that have no own 'this' or 'arguments' binding. They are often used with functional programming.

Signup and view all the flashcards

'var', 'let', and 'const' in JavaScript

Keywords for declaring variables with different scoping and mutability. 'var' has function scope, 'let' and 'const' have block scope. 'const' cannot be reassigned, while 'var' and 'let' can.

Signup and view all the flashcards

Node.js Single-Threaded & Event Loop

While Node.js is single-threaded at its core, it uses an event loop and non-blocking I/O to efficiently handle multiple tasks without blocking the main thread, making it highly performant.

Signup and view all the flashcards

npm (Node Package Manager)

A powerful tool for managing JavaScript packages, allowing you to install, update, and share libraries for your Node.js projects.

Signup and view all the flashcards

Middleware in Node.js

Functions that sit between the incoming request and the final response handling in your Node.js application, often used for tasks like logging, authentication, or formatting.

Signup and view all the flashcards

'package.json' in Node.js

A configuration file that defines project metadata, dependencies (other packages needed), and scripts for tasks in your Node.js project.

Signup and view all the flashcards

Child Processes in Node.js

New processes spawned by the Node.js runtime to handle tasks independently and in parallel, useful for offloading work and increasing application performance.

Signup and view all the flashcards

Master/Slave Clusters in Node.js

A way to scale Node.js applications by distributing tasks across multiple processes (slaves) managed by a master process, enabling parallel execution and improving performance. This is a common approach for web applications.

Signup and view all the flashcards

Array Length

The length property of an array indicates the total number of elements it contains. It's a useful way to know the size of your array.

Signup and view all the flashcards

Merging Objects

Combining two objects into a single new object can be done using the spread syntax (...). Each object's properties are spread out and combined.

Signup and view all the flashcards

Variable Hoisting

In JavaScript, var variables are hoisted to the top of their scope, meaning you can use them before they are declared. However, their value will be undefined until the declaration line.

Signup and view all the flashcards

Block Scoping with let

Variables declared using let are scoped to the block they are declared in. They are not accessible outside that block.

Signup and view all the flashcards

Closure in JavaScript

A closure is a function that remembers and can access variables from its outer scope, even after the outer function has finished executing. This creates a persistent connection between the function and its surrounding environment.

Signup and view all the flashcards

Asynchronous Behavior of setTimeout

The setTimeout function delays the execution of a callback function by the specified time. However, the callback function is executed later on the event loop, not immediately.

Signup and view all the flashcards

async/await for Promises

The async/await syntax provides a cleaner way to work with asynchronous operations like Promises. async before a function turns it into a Promise-returning function, and await pauses execution until the Promise resolves.

Signup and view all the flashcards

Anonymous Functions in JavaScript

An anonymous function is a function without a name. It is commonly assigned to a variable or used as an argument to other functions.

Signup and view all the flashcards

Immediately Invoked Function Expression (IIFE)

An IIFE is an anonymous function that is executed immediately after it is defined. It uses parentheses to wrap the function definition, followed by another set of parentheses to invoke it.

Signup and view all the flashcards

Event Loop and setTimeout

When you use setTimeout, the callback function is added to the event loop, which manages asynchronous tasks. The event loop waits for the timer to expire before executing the callback function.

Signup and view all the flashcards

What is a component in Angular?

A component is the smallest building block of a user interface in an Angular application. It encapsulates both its own template (HTML) and logic (TypeScript) to create a reusable and self-contained UI element.

Signup and view all the flashcards

What is an Angular router?

An Angular router is a powerful tool for managing navigation between different views or components within a single-page application. It allows users to move seamlessly between parts of the application without reloading the entire webpage.

Signup and view all the flashcards

How can you pass data between components in Angular?

You can pass data between components in Angular using services, @Input and @Output decorators. Services act as intermediaries, sharing data between components. @Input decorators allow data transfer from parent to child components, while @Output decorators allow data transfer from child to parent.

Signup and view all the flashcards

What is lazy loading in Angular?

Lazy loading is a performance optimization technique in Angular. It allows you to load components, modules, or features only when they're actually needed by the user, instead of loading everything at once. This reduces initial load times and improves application responsiveness.

Signup and view all the flashcards

What are Angular lifecycle hooks?

Lifecycle hooks are methods that get executed at specific points during a component's lifecycle. These methods allow you to perform actions at different stages of the component's existence, such as initialization, updates, and destruction.

Signup and view all the flashcards

What are Angular Guards?

Angular Guards are functions that control access to specific routes in your application. They can be used to prevent unauthorized users from accessing certain pages or features, or to enforce specific conditions before allowing navigation.

Signup and view all the flashcards

What is the purpose of the @Component decorator in Angular?

The @Component decorator in Angular is used to declare a class as a component. It provides metadata that defines the component's template, styles, and other properties.

Signup and view all the flashcards

How do you apply a CSS class conditionally to an element in Angular?

You can apply a CSS class conditionally to an element in Angular using the [class] binding. This allows you to dynamically add or remove classes based on the value of an expression or variable.

Signup and view all the flashcards

You encounter an error stating 'Cannot read property 'x' of undefined'. What is likely causing this issue?

This error usually occurs when you try to access a property of a variable that hasn't been declared or hasn't been initialized with a value. It could also occur if the variable is out of scope, meaning it's not accessible in the current context.

Signup and view all the flashcards

When debugging an Angular application, which tool can you use to inspect HTTP requests made by your application?

You can use the Chrome DevTools Network Tab to inspect HTTP requests made by your Angular application. This tool provides detailed information about each request, including its URL, status code, request headers, response headers, and response body.

Signup and view all the flashcards

What does the error '404 Not Found' indicate when trying to access an API endpoint in your Angular application?

A '404 Not Found' error indicates that the server could not find the requested API endpoint URL. This could be due to a typo in the URL, an incorrect path configuration on the server, or the endpoint not existing.

Signup and view all the flashcards

In Angular, how do you bind a property of a DOM element to a component property?

You can bind a property of a DOM element to a component property in Angular using square brackets: [property]='value'. This establishes a two-way connection, allowing changes in either the component property or the DOM element property to update the other.

Signup and view all the flashcards

Which command would you use to create a new Angular project with SCSS as the stylesheet format?

The command ng new my-app --style=scss is used to create a new Angular project with SCSS as the stylesheet format. SCSS (Sassy CSS) provides advanced features like variable declaration, nesting, and mixins for CSS.

Signup and view all the flashcards

What does the @Injectable() decorator do in Angular?

The @Injectable() decorator marks a class as available for dependency injection. This means that Angular can create instances of the class and provide them to other parts of the application that need them.

Signup and view all the flashcards

Which directive is used to conditionally include a template based on the value of an expression?

The *ngIf directive is used to conditionally include a template based on the value of an expression. If the expression evaluates to true, the template is included. If the expression evaluates to false, the template is not included.

Signup and view all the flashcards

Study Notes

HTML

  • Changing text color: Use the color attribute within the <span> or similar HTML element. Example: <span style="color:red;">This text is red.</span>.
  • Class attribute: Groups elements for styling. It's useful for applying the same style to multiple elements.
  • Displaying tables: Use the <table> tag. Inside, use <tr> (table row) and <td> (table data) for individual entries.
  • Marquee: A <marquee> tag creates scrolling text or images.
  • Required HTML parts: <html>, <head>, <body>.
  • HTML attribute syntax: Use the form attribute="value" within an HTML element tag. Example: <img src="image.jpg" alt="description">

CSS

  • CSS display properties: block, inline, flex, grid, none.
  • rgba alpha: The alpha (A) value in rgba(R, G, B, A) sets the transparency of the color.
  • Margin shorthand property: margin: top right bottom left; sets top, right, bottom, and left margins respectively (in that order)
  • Text formatting: font-family, font-size, color, text-align.
  • Hiding elements: Use display: none; or visibility: hidden; (they have different visual effects).
  • CSS overflow: Controls content clipping or scrolling.
  • Media query syntax: @media screen and (max-width: 800px) {} (Note the @).
  • Form submission link: Set target="_blank" on the link to open it in a new tab.
  • Border shorthand: border: 4px dotted red; sets border width, style, and color.
  • Hover effect on links: a:hover { background-color: red; }

JavaScript

  • Data types: Number, String, Object, Array, Undefined, Boolean, Null, Symbol, BigInt.
  • == vs. ===: == compares values only, === compares both value and type.
  • Scope and scope chain: Scope defines variable accessibility, scope chain connects scopes.
  • Callbacks: Functions passed as arguments to other functions.
  • DOM (Document Object Model): A tree-like representation of HTML elements in JavaScript.
  • async/await: async function returns a promise, await suspends execution until the promise resolves.
  • Arrow functions: Functions defined using =>
  • var, let, const: var has function scope, let and const have block scope. let and const are hoisted but have a different declaration order.
  • Output methods in JavaScript: window.alert(), console.log(), document.write(), and body.html() (using document.body.innerHTML)
  • Examples of invalid variable names: those starting with a hyphen or underscore (other than $ are valid)

Node.js

  • Node.js threading: Node.js is single-threaded; it uses multiple threads internally for I/O operations.
  • npm: The Node Package Manager (npm) manages JavaScript libraries in Node.js.
  • Middleware (Node.js): Functions that run during HTTP requests lifecycle.
  • Event loop: The core of Node.js which handles non-blocking operations.
  • package.json: Configuration file for project metadata, dependencies, and scripts.
  • Child processes: Independent processes for handling tasks.
  • Master/Slave clusters: A cluster setup where a master process distributes tasks.
  • Server creation: Use http.createServer().
  • Asynchronous programming: allows other operations to continue while waiting.
  • Request body parsing middleware: body-parser
  • Express next() function: Passes control to next middleware function.
  • JWT parts: JWT has Header, Payload, and Signature.
  • JWT storage: Secure in cookies (with HttpOnly and Secure flags).
  • JWT library: jsonwebtoken.

Angular

  • Angular features: MVC (Model-View-Controller) architecture, two-way data binding, dependency injection.
  • Component: Smallest UI building block in Angular, with a template and logic.
  • Angular router: Manages navigation.
  • Data passing between components: Angular uses services, @Input, and @Output decorators.
  • Lazy loading: Loads modules or components when necessary for performance.
  • Angular lifecycle hooks: Methods executed at specific points in a component's lifecycle.
  • Angular guards: Protect routes from unauthorized access.
  • @Component decorator: Marks a class as an Angular component.
  • Conditional CSS classes: Use [class].
  • Error "Cannot read property 'x' of undefined": Variable may be undeclared, uninitialized, or out of scope.
  • HTTP requests inspection: Chrome DevTools Network tab.
  • 404 error: Indicates incorrect API endpoint URL.
  • Binding properties: Use square brackets: [property]="value".
  • SCSS Angular creation: use ng new my-app --style=scss
  • @Injectable() decorator: Marks a class for dependency injection (used for services)
  • Conditional template inclusion: *ngIf, *ngSwitch

General JavaScript concepts (from the questions)

  • Syntax errors: Check for correct function calls, variable naming, and data types (e.g., using 'string' instead of "string" for string literals)
  • Variable hoisting: var declarations are moved to the top of their scope, let and const are not.
  • try...catch blocks: The catch block needs an error variable (err) for safe error handling, and console.log(error) is incorrect; use console.log(err)
  • Function scope vs block scope: Use let and const inside blocks for localized variables.
  • Incorrect if structure: Review boolean expressions in your conditionals.
  • Immutability (general): Reassignment of variables, for example, let arr = [1, 2, 3]; arr = 42 will create issues.

Studying That Suits You

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

Quiz Team

Description

Test your knowledge on essential HTML and CSS concepts with this quiz! From understanding the 'class' attribute to manipulating display properties, this quiz covers key topics that every web developer should know. Challenge yourself and see how well you can demonstrate your skills!

More Like This

Master HTML: Tags, Attributes, and CSS Styling
10 questions

Master HTML: Tags, Attributes, and CSS Styling

RationalMaroon avatar
RationalMaroon
CSS Syntax and HTML Basics
6 questions

CSS Syntax and HTML Basics

BrainySimile avatar
BrainySimile
HTML CSS Styles Overview
16 questions

HTML CSS Styles Overview

DauntlessUnity avatar
DauntlessUnity
HTML Tables: Tags, Attributes, and CSS Styling
15 questions

HTML Tables: Tags, Attributes, and CSS Styling

SimplifiedSocialRealism avatar
SimplifiedSocialRealism
Use Quizgecko on...
Browser
Open
Browser
Browser