HTML and CSS Concepts Quiz

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)

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?

Margins in the order of Top, Right, Bottom, Left. Signup and view all the answers

Which statement about the class names in HTML is true?

Class names are case sensitive. Signup and view all the answers

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

display: none; Signup and view all the answers

What does a marquee in HTML do?

It allows for animated scrolling text or images. Signup and view all the answers

Which option correctly represents the CSS display properties?

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

What is the correct syntax for a CSS media query?

@media screen and (max-width: 800px) {} Signup and view all the answers

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

== compares value only, === compares value and type. Signup and view all the answers

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

It passes control to the next middleware function. Signup and view all the answers

What is the primary role of components in Angular?

To encapsulate UI logic and rendering. Signup and view all the answers

What does Scope determine in JavaScript?

Scope determines where a variable is accessible. Signup and view all the answers

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

@Injectable Signup and view all the answers

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

Functions executed during the lifecycle of an HTTP request. Signup and view all the answers

How can you implement lazy loading in an Angular application?

By loading modules asynchronously on demand. Signup and view all the answers

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

body.html() Signup and view all the answers

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

ng new projectName --style=scss Signup and view all the answers

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

P { border: 4px dotted red; } Signup and view all the answers

What is the purpose of Angular Guards?

To prevent access to certain components or routes. Signup and view all the answers

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

http.createServer() Signup and view all the answers

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

*ngIf Signup and view all the answers

What are async and await used for in JavaScript?

async declares a function returning a promise. Signup and view all the answers

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

The variable is out of scope. Signup and view all the answers

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

58 Signup and view all the answers

What does DOM stand for in JavaScript?

A model representing HTML elements as objects. Signup and view all the answers

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

It allows operations to continue while waiting for an operation. 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);'

20, 10 Signup and view all the answers

What type of values are returned from callbacks in JavaScript?

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

In Angular, which feature allows communication between components?

Using services and decorators. Signup and view all the answers

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

It defines project metadata, dependencies, and scripts. Signup and view all the answers

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

Throws a ReferenceError Signup and view all the answers

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

-firstname Signup and view all the answers

What does the @Component decorator do in Angular?

Marks a class as an Angular component Signup and view all the answers

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

Number Signup and view all the answers

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

3, 3, 3 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);`

3 Signup and view all the answers

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

<code>{ …object1, …object2 }</code> 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();`

undefined 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);`

1, then 2 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());`

1, 2, 2, 1 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); }`

3, 3, 3 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);`

Promise {: "I made it!"} Signup and view all the answers

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

const greet = function() { console.log("Hello!"); }; Signup and view all the answers

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

(function() { console.log("I am executed!"); })(); Signup and view all the answers

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

It logs "World" then "Hello". Signup and view all the answers

Study Notes

HTML

Changing text color: Use the color attribute within the  or similar HTML element. Example: This text is red..
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.

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!