CSS Layout Techniques
CSS offers different techniques to structure and position elements on a web page effectively.
1. Floats
o The float property is used to position elements to the left or right, allowing
text or inline elements to wrap around it.
Syntax:
element {
float: left; /* or right */
}
Example:
<div style="float: left; width: 50%; background-color: lightblue;">
This div is floated to the left.
</div>
<div style="float: right; width: 50%; background-color: lightgreen;">
This div is floated to the right.
</div>
Limitations: Floats can be tricky when dealing with complex layouts as they may
lead to unexpected overlapping of elements.
2. Display Types
o The display property defines how elements are displayed on the page.
Types:
o Block: Elements take up the full width of their container.
o Inline: Elements only take up as much width as necessary.
o Inline-block: Combines features of both block and inline.
Example:
<div style="display: block; background-color: lightblue;">Block
Element</div>
<span style="display: inline; background-color: lightgreen;">Inline
Element</span>
<div style="display: inline-block; background-color:
lightpink;">Inline-block Element</div>
3. Flexbox
o Flexbox is a modern layout model designed for aligning items within a
container, especially when the size of the items is unknown.
Syntax:
.container {
display: flex;
}
Example:
<div style="display: flex; justify-content: space-between;">
<div style="background-color: lightblue; width: 30%;">Flex Item
1</div>
<div style="background-color: lightgreen; width: 30%;">Flex Item
2</div>
<div style="background-color: lightpink; width: 30%;">Flex Item
3</div>
</div>
Key Properties:
o justify-content: Align items horizontally.
o align-items: Align items vertically.
o flex-direction: Define the direction of the layout (row or column).
CSS Positioning
CSS positioning allows you to place elements in precise locations on the web page.
1. Static (Default Position)
o Elements are positioned as per the normal document flow.
o No special positioning applied.
Example:
<div style="position: static;">This is static.</div>
2. Relative
o Positions the element relative to its normal position.
o You can use top, left, right, or bottom to "move" the element.
Example:
<div style="position: relative; top: 10px; left: 20px;">
This is relative positioning.
</div>
3. Absolute
o Positions the element relative to the nearest positioned ancestor (not static).
o If no such ancestor exists, it’s positioned relative to the <html>.
Example:
<div style="position: relative;">
<div style="position: absolute; top: 10px; left: 20px;
background-color: lightblue;">
This is absolute positioning.
</div>
</div>
4. Fixed
o Positions the element relative to the viewport.
o The element does not move even when the page is scrolled.
Example:
<div style="position: fixed; top: 0; left: 0; background-color:
lightpink;">
This is fixed positioning.
</div>
Responsive Web Design
Responsive design ensures web pages adapt to different screen sizes, improving user
experience on various devices.
1. Media Queries
o Allow applying CSS rules based on screen size or other conditions like
orientation.
Syntax:
@media (max-width: 768px) {
body {
background-color: lightblue;
}
}
Example:
<style>
@media (max-width: 600px) {
div {
background-color: lightblue;
}
}
</style>
<div>This div changes color on small screens.</div>
2. Mobile-First Design
o Start with a design optimized for smaller screens and build up for larger
screens using media queries.
Example:
div {
font-size: 14px; /* Mobile default */
}
@media (min-width: 768px) {
div {
font-size: 18px; /* Adjust for larger screens */
}
}
By mastering these CSS techniques, you can build visually appealing, well-structured, and
responsive web designs!
To better explain these concepts of CSS Layouts, Positioning, and Responsive Web
Design, you can combine them into a single, cohesive example that demonstrates how they
interact in a practical layout. Here's a well-rounded example:
Example: Building a Simple Responsive Layout
We will create a webpage with:
A header, a content section with two columns, and a footer.
Use different CSS techniques like flexbox, positioning, and media queries to
make it responsive.
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Layout and Positioning</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="header">Header Section</header>
<div class="container">
<aside class="sidebar">Sidebar Content</aside>
<main class="main-content">Main Content</main>
</div>
<footer class="footer">Footer Section</footer>
</body>
</html>
CSS Code (styles.css):
Basic Styling:
body {
margin: 0;
font-family: Arial, sans-serif;
}
.header, .footer {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 1em 0;
}
.container {
display: flex;
flex-wrap: wrap; /* Makes it responsive for smaller screens */
margin: 10px;
}
.sidebar {
flex: 1 1 30%; /* 30% of width, but shrink if necessary */
background-color: #f4f4f4;
padding: 10px;
}
.main-content {
flex: 1 1 70%; /* 70% of width, but shrink if necessary */
background-color: #e8e8e8;
padding: 10px;
}
.footer {
position: fixed; /* Fixed at the bottom of the viewport */
bottom: 0;
width: 100%;
}
Responsive Design with Media Queries:
@media (max-width: 768px) {
.container {
flex-direction: column; /* Stack sidebar and main content
vertically */
}
.sidebar, .main-content {
flex: 1 1 100%; /* Full width for smaller screens */
}
.footer {
position: relative; /* Footer becomes normal flow on small screens
*/
}
}
Introduction to JavaScript
JavaScript is a dynamic programming language commonly used to create interactive features
on websites. It runs in the browser and works alongside HTML and CSS to build powerful
web applications.
1. Basics of JavaScript
1.1 Syntax
JavaScript syntax refers to the rules for writing JavaScript code.
Statements: Ends with a semicolon (;), though it's optional in many cases.
Comments:
o Single-line: // This is a comment
o Multi-line:
/* This is a
multi-line comment */
Example:
let message = "Hello, JavaScript!"; // Declare a variable
console.log(message); // Output to the console
1.2 Variables
Variables store data and can be declared using let, const, or var.
Example:
let name = "Alice"; // Variable that can change
const age = 25; // Constant value
console.log(name, age); // Outputs: Alice 25
1.3 Data Types
JavaScript has several data types:
Primitive: string, number, boolean, null, undefined, bigint, symbol
Non-Primitive: object (e.g., arrays and functions)
Example:
let greeting = "Hi"; // String
let isSunny = true; // Boolean
let temperature = 30; // Number
let nothingHere = null; // Null
let notDefined; // Undefined
2. Outputting in JavaScript
There are several ways to output data in JavaScript:
2.1 Using console.log()
Used for debugging purposes; outputs to the browser's console.
let message = "Hello, Console!";
console.log(message); // Outputs: Hello, Console!
2.2 Using alert()
Displays a popup alert box.
alert("Hello, Alert!");
2.3 Using document.write()
Writes directly to the webpage. It’s often used for testing or simple pages.
document.write("Hello, Document!");
2.4 Using innerHTML
Sets or updates the HTML content of an element.
document.getElementById("output").innerHTML = "Hello, InnerHTML!";
HTML:
<div id="output"></div>
2.5 Using window.prompt()
Displays a dialog box to get input from the user.
let userInput = prompt("Enter your name:");
console.log("Hello, " + userInput);
2.6 Using window.confirm()
Displays a dialog box with "OK" and "Cancel" options.
let confirmAction = confirm("Do you want to proceed?");
console.log(confirmAction ? "User confirmed." : "User canceled.");
3. Control Structures
3.1 Conditionals
Conditionals direct the flow of the program based on conditions.
if-else Statement:
let score = 85;
if (score >= 90) {
console.log("Grade: A");
} else if (score >= 80) {
console.log("Grade: B");
} else {
console.log("Grade: C");
}
Switch Case:
let day = 3;
switch (day) {
case 1:
console.log("Monday");
break;
case 2:
console.log("Tuesday");
break;
case 3:
console.log("Wednesday");
break;
default:
console.log("Invalid day");
}
3.2 Loops
Loops are used to repeat blocks of code.
For Loop:
for (let i = 1; i <= 5; i++) {
console.log("Count: " + i);
}
While Loop:
let count = 1;
while (count <= 5) {
console.log("Count: " + count);
count++;
}
Do-While Loop:
let count = 1;
do {
console.log("Count: " + count);
count++;
} while (count <= 5);
3.3 Functions
Functions are reusable blocks of code.
Function Declaration:
function greet(name) {
return "Hello, " + name + "!";
}
console.log(greet("Alice")); // Output: Hello, Alice!
Arrow Function:
const add = (a, b) => a + b;
console.log(add(5, 3)); // Output: 8
Interactive Example
Combining outputs, variables, and conditionals:
let userName = prompt("What is your name?");
let age = prompt("How old are you?");
age = parseInt(age);
if (age >= 18) {
alert("Hello, " + userName + ". You are an adult.");
} else {
alert("Hello, " + userName + ". You are a minor.");
}
console.log("User's name is " + userName + " and they are " + age + " years
old.");
document.write("Welcome to our website, " + userName + "!");
