Download Web Development Key Concepts: HTML, CSS, and JavaScript and more Exams Information and Computer Technology in PDF only on Docsity!
What is an absolute path in HTML? The full address (URL) to a resource, starting with the protocol and domain name. Example: Google "https://google.com" is an absolute path. This works no matter where your site is hosted, because it points to a specific location on the web. When would you use a relative path? When linking to internal pages or files within your project's folder structure. Works as long as your project structure stays consistent Starts from the current files location - > Points to files in your own project folder Same folder: About Us Inside a subfolder: What is the purpose of a tag in HTML? To group elements together for styling with CSS or controlling with JavaScript. It sa container What is the HTML boilerplate? The basic starting structure of an HTML page
My Page
Hello!
Wraps everything in your page. Has a lang attribute (e.g., lang="en") What does the section of an HTML document contain? Information about the page, such as the title, metadata, and links to CSS or JavaScript. Remember: Users don't see what's in directly.
Appears in the browser tab... Important for SEO (search engine optimization): Should contain keywords that match the page content.
Contains the visible content of the page (headings, paragraphs, images, links, divs, etc.). Whatever you put here shows up in the browser window. TAGS
This is a paragraph.
This is a heading
is the opening tag.
is the closing tag. Together they define an element. Attributes Give extra information about an element, they always go inside the opening tag. Syntax: attribute="value" Example lookup What is the function of the element in HTML? The element in HTML is used to collect user input and submit that data to a server or handler for processing. The element creates an HTML form. The element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc. What are the two main HTTP methods (attributes) used in forms? POST (sends data as the request body) and GET (appends data to the action URL).
Pseudo classes A pseudo-class is a special keyword added to a selector that lets you target an element in a particular state. Common pseudo-classes: :hover โ when mouse pointer is over the element :active โ while the element is being clicked :focus โ when an element (like input) is focused (clicked or tabbed to) What is the CSS box model? Every HTML element is rendered as a box. The box model defines how these boxes are structured and how spacing works. Components of the box model (from inside out): Content โ the actual content (text, image, etc.) Padding โ space between content and border Border โ border line around the padding/content Margin โ space outside the border, separating this box from others What is Flexbox used for in CSS? A one-dimensional layout model used to align items along a single axis (row or column). display: flex; flex-direction: row; / (^) or column / justify-content: space-between; / (^) horizontal alignment / align-items: center; / (^) vertical alignment / Grid layout Two-dimensional layout (rows and columns) Use when you want to place items in a grid-like structure display: grid; grid-template-columns: repeat(3, 1fr); / three equal columns / grid-template-rows: auto; gap: 10px; / (^) space between grid cells / What is a media query in CSS? Media queries let you apply styles based on viewport or device characteristics (width, height, orientation, etc.) Syntax @media (max-width: 768px) { .container {
flex-direction: column; } } What is a callback function in JavaScript? A function passed into another function to be invoked later. Anonymous javascript function a function without a name const square = function(x) { return x * x; }; Arrow function const multiply = (x, y) => x * y; // or with block body: const doSomething = (a, b) => { const c = a + b; return c * 2; }; Higher order function a function that takes another function as an argument or returns a function. Example: map, filter, reduce are higher-order array methods. Callback: passing a function into another to be invoked later: function greet(name, callback) { callback(Hello, ${name}); } What is the difference between var, let, and const in JavaScript? var โ function-scoped (older), can be redeclared. let โ block-scoped, cannot be redeclared in same block. const โ block-scoped, must be initialized, cannot be reassigned (though objects/arrays can mutate). What are the primitive types in JavaScript? They represent one value String, number, boolean, null, undefined, and symbol. for...in iterates over enumerable property names (keys) of an object: let obj = { a:1, b:2 }; for (let key in obj) { console.log(key, obj[key]); } for...of
It allows you to wait for a promise to resolve before proceeding. What is the initial state of a Promise when created? Pending. What is the output of a rejected Promise? The error is passed to the .catch() method. What is the primary purpose of callbacks in JavaScript? To ensure functions execute in order, especially with asynchronous operations. What does the forEach method do in JavaScript? It executes a provided function once for each array element. What does the map method return? A new array with the results of calling a provided function on every element. What is the output of the following code snippet: let promise1 = new Promise((resolve) => { resolve(20); }); promise1.then(result => console.log(result)); 20 What does flex-grow do in CSS? Allows flexbox elements to expand to occupy available space. What is a React component? A JavaScript function that returns JSX. What is the purpose of the HTML element? It contains the main content of the document. What does the repeat() function do in a grid layout? It allows you to repeat a specified number of columns or rows in a grid. How do you select an element with the ID 'example' in CSS? #example. What is the purpose of media queries in CSS? To modify styles based on screen width or device type. What does the for...of loop iterate over? The values of an array. What does the for...in loop iterate over? The property names (keys) of an object. What is the output of the following code snippet: let promise = new Promise((resolve) => { resolve(5); }); promise.then(result => { return new Promise((resolve) => { resolve(result + 5); }); }).then(result => { return new Promise((resolve, reject) => { reject('An error occurred!'); }); }).then(result => console.log(result)).catch(error => console.log(error)); 'An error occurred!'.
