IT 314 Web Systems and Technology Reviewer

1. CSS Fonts: 3. Gradient Background:

● CSS allows for various ways to style ● CSS gradients allow you to create
fonts using font-family, font-size, smooth transitions between colors.
font-weight, and other properties. Common gradients are linear and
You can specify fonts like Arial, radial.
Helvetica, or use web fonts with ● Example for a linear gradient:
@font-face.
● Example: body {
background: linear-gradient(to
body { right, red, blue);
font-family: 'Arial', }
sans-serif;
}
4. Text Alignment:
● The text-align property controls the
2. Content Box: horizontal alignment of text inside a
● The CSS Box Model represents how block-level element. It can be set to
elements are displayed. The default left, right, center, or justify .
box-sizing: content-box means that ● Example:
the width and height of an element
apply only to the content, excluding p {
padding and border . text-align: center;
● Example: }

div { 5. HTML Hyperlink:

box-sizing: content-box; ● Hyperlinks in HTML are created
width: 300px; using the <a> tag. You can use
padding: 20px; attributes like href to define the link
} destination .
● Example:

<a
href="https://www.example.com">V
isit Example</a>

6. Comments:
● HTML comments are enclosed in
<!-- --> and are not displayed by the
browser. In CSS and JavaScript,
comments are written using /* */ and
//, respectively .
 IT 314 Web Systems and Technology Reviewer

● Examples: Variables

<!-- This is an HTML comment --> Data Types:

<p>This paragraph will be ● String: Text enclosed in single or
displayed.</p> double quotes ("hello").
● Number: Integers or floating-point
values (123, 3.14).
/* This is a CSS comment */ ● Boolean: Represents true or false.
body { ● Null: Represents no value.
background-color: #f0f0f0; ● Undefined: A declared variable with
} no value .
● Variable Declarations:
● var: Global or function-scoped, can
// This is a single-line
be redeclared.
JavaScript comment
● let: Block-scoped, can’t be
let x = 10; // Inline comment redeclared.
● const: Block-scoped, constant value
/* This is a (cannot be reassigned) .
multi-line JavaScript comment */
function greet() { Input and Output
alert('Hello, World!');
● Use prompt() to get user input.
}
● Use console.log() to display output
in the console .
JavaScript
Operators
● JavaScript is a dynamic scripting
language used to create interactive ● Arithmetic Operators: + (add), -
elements on web pages . (subtract), * (multiply), / (divide),
% (modulus), ++ (increment), --
Basic Syntax (decrement) .
● Comparison Operators: === (strict
● Statements: JavaScript programs equality), == (loose equality), !==
are composed of statements (e.g., (strict inequality), != (loose
var x = 5;). Statements end with a inequality), >, <, >=, <= .
semicolon. ● Logical Operators: && (AND), ||
● Reserved Keywords: Keywords like (OR), ! (NOT) .
var, let, const, if, else, and function
cannot be used as variable names .
 IT 314 Web Systems and Technology Reviewer

Conditionals Functions

● If Statement: Executes a block of ● Functions allow code reuse and can

code if a condition is true. accept parameters and return
values.
if (condition) {
// code block function greet(name) {
} return 'Hello ' + name;
● Switch Statement: Evaluates }
expressions against multiple cases .
Scope:
Loops ● Global Scope: Variables are
accessible anywhere.
● For Loop: Repeats a block of code ● Local Scope: Variables are
a certain number of times. accessible only within a function or
block .
for (let i = 0; i < 5; i++) {
// code block Hoisting
}
● While Loop: Repeats a block of ● Hoisting: JavaScript moves variable
code as long as a condition is true . declarations to the top of their
scope. Only the declarations are
Arrays hoisted, not the assignments.

● Array Initialization: Arrays can be console.log(x); // undefined

created using literal notation ([]) or var x = 10;
the new keyword.

let arr = [1, 2, 3];

let arr2 = new Array();

Array Methods:
● push(): Adds elements to the end.
● pop(): Removes the last element.
● shift(): Removes the first element.
● unshift(): Adds elements to the
beginning .