HTML and Web Development Study Guide
1. HTML Basics
HTML (Hypertext Markup Language) is the standard language for creating webpages. An HTML document starts with
the declaration <!DOCTYPE html> to specify the HTML version.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Semantic elements like <header>, <footer>, <section>, and <article> help in defining the structure of the webpage,
improving readability and SEO.
2. CSS Essentials
CSS (Cascading Style Sheets) is used to style HTML elements. Key properties include layout (display, positioning) and
spacing (margin, padding).
Positioning values:
position: static; /* Default, follows the document flow */
position: relative; /* Positioned relative to itself */
position: absolute; /* Positioned relative to the nearest positioned ancestor */
HTML and Web Development Study Guide
position: fixed; /* Stays in place while scrolling */
position: sticky; /* Combines relative and fixed based on scroll position */
The box model includes content, padding, border, and margin, with display properties like block, inline, and inline-block.
3. JavaScript Fundamentals
JavaScript (JS) is a programming language for adding interactivity to webpages. It includes variables, functions, and
DOM manipulation.
let name = "Alice"; // Block-scoped variable
const PI = 3.14; // Constant variable
function greet() {
console.log("Hello " + name);
document.getElementById("myButton").addEventListener("click", greet);
4. Advanced JavaScript Concepts
JavaScript includes powerful concepts like closures, promises, and async/await.
function makeCounter() {
let count = 0;
return function() {
count += 1;
return count;
};
}
HTML and Web Development Study Guide
const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2
Promises help manage asynchronous tasks:
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
5. Form Handling in HTML
HTML forms collect user input and use the 'method' attribute to define how data is sent.
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<input type="submit" value="Submit">
</form>
Use 'POST' for sensitive data and 'GET' for retrieval operations.
6. SQL Concepts
SQL (Structured Query Language) is used to manage data in relational databases. Important concepts include keys and
joins.
Types of joins:
HTML and Web Development Study Guide
SELECT employees.name, departments.name
FROM employees
INNER JOIN departments ON employees.dept_id = departments.id;
7. Git Basics
Git is a version control system. Key commands include:
git init # Initialize a new repository
git add . # Stage changes
git commit -m "Message" # Commit changes
git push origin main # Push changes to main branch
