Scribd
Upload
18 views

HTML

This document provides a comprehensive overview of HTML, CSS, and JavaScript, essential technologies for web development. It covers the basic structure and common tags of HTML, CSS syntax and properties, and JavaScript syntax, functions, and event handling. Additionally, it includes common interview questions and tips for preparation in front-end development roles.

Uploaded by

nicor96237
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
18 views

HTML

This document provides a comprehensive overview of HTML, CSS, and JavaScript, essential technologies for web development. It covers the basic structure and common tags of HTML, CSS syntax and properties, and JavaScript syntax, functions, and event handling. Additionally, it includes common interview questions and tips for preparation in front-end development roles.

Uploaded by

nicor96237
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

Absolutely!

Let’s go through the basics of HTML, CSS, and JavaScript to prepare you for your
interview tomorrow. These are the core technologies for web development, and understanding
them well will help you in front-end development roles.

1. HTML (HyperText Markup Language)

HTML is the foundation of any webpage. It structures the content and elements of a webpage
using tags.

a. Basic Structure of an HTML Document

A basic HTML document looks like this:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>My Webpage</title>

</head>

<body>

<h1>Hello, World!</h1>

<p>This is a paragraph of text.</p>

</body>

</html>

Explanation:

●​ <!DOCTYPE html>: Declares the document type.​


●​ <html>: Root element of the HTML document.​

●​ <head>: Contains metadata like title, character set, and links to stylesheets or scripts.​

●​ <body>: Contains the visible content on the page.​

●​ <h1>: Header 1 element (most important).​

●​ <p>: Paragraph element.​

b. Common HTML Tags

<a>: Anchor tag (for links)​


​
<a href="https://www.example.com">Click Here</a>

●​

<img>: Image tag​


​
<img src="image.jpg" alt="Description of Image" width="500">

●​

<ul> / <ol> / <li>: Unordered and ordered lists​


​
<ul>

<li>Item 1</li>

<li>Item 2</li>

</ul>

●​

<table>, <tr>, <td>: Table structure​


​
<table>

<tr>

<td>Row 1, Column 1</td>


<td>Row 1, Column 2</td>

</tr>

</table>

●​

2. CSS (Cascading Style Sheets)

CSS is used for styling and laying out elements on a webpage.

a. CSS Syntax

selector {

property: value;

Example:

h1 {

color: blue;

font-size: 24px;

This will make all <h1> elements blue and set their font size to 24 pixels.

b. Common CSS Properties

Colors:​
​
p{

color: red;

}
●​

Background:​
​
body {

background-color: lightgrey;

●​

Margins & Padding:​


​
div {

margin: 20px;

padding: 10px;

●​

Borders:​
​
img {

border: 2px solid black;

●​

c. CSS Selectors

ID Selector (#idName):​
​
#header {

color: green;

●​
Class Selector (.className):​
​
.box {

width: 100px;

height: 100px;

background-color: red;

●​

Element Selector (e.g., div, p, h1):​


​
p{

font-size: 18px;

●​

d. Positioning

●​ Static: Default value, normal flow.​

●​ Relative: Positioned relative to its normal position.​

●​ Absolute: Positioned relative to its nearest positioned ancestor.​

●​ Fixed: Positioned relative to the viewport.​

●​ Sticky: Behaves like relative until a defined scroll position.​

.box {

position: absolute;

top: 20px;

left: 50px;

}
e. Flexbox (for layout)

Flexbox makes it easy to align and distribute space within a container.

.container {

display: flex;

justify-content: space-between;

align-items: center;

3. JavaScript (JS)

JavaScript is a scripting language used to make webpages interactive. It’s often used for DOM
manipulation, event handling, and much more.

a. Basic Syntax

Variables are declared using var, let, or const.

let name = "John";

const age = 25;

var isStudent = true;

b. Functions

Functions are defined using the function keyword:

function greet(name) {

console.log("Hello, " + name);

}
greet("John"); // Output: Hello, John

You can also use arrow functions for shorter syntax:

const greet = (name) => {

console.log("Hello, " + name);

c. Events

JavaScript is used to handle events, like button clicks, form submissions, etc.

<button onclick="alert('Hello World!')">Click Me</button>

Or using JavaScript:

document.getElementById("myButton").addEventListener("click", function() {

alert("Button clicked!");

});

d. DOM Manipulation

The DOM (Document Object Model) represents the page so you can modify it with JavaScript.

●​ Accessing an element:​

let heading = document.getElementById("header");

●​ Changing an element’s content:​

heading.innerHTML = "New Heading Text!";


●​ Changing styles:​

heading.style.color = "blue";

e. Loops

JavaScript uses loops to execute code multiple times.

// For Loop

for (let i = 0; i < 5; i++) {

console.log(i);

// While Loop

let i = 0;

while (i < 5) {

console.log(i);

i++;

f. Conditionals

JavaScript uses if-else statements to make decisions based on conditions.

let age = 18;

if (age >= 18) {

console.log("You are an adult.");

} else {
console.log("You are a minor.");

g. Objects and Arrays

Objects store key-value pairs:​


​
const person = {

name: "John",

age: 30,

greet: function() {

console.log("Hello " + this.name);

};

person.greet(); // Output: Hello John

●​

Arrays store ordered lists of values:​


​
let fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits[0]); // Output: Apple

●​

h. Promises (Asynchronous JS)

Promises represent the eventual completion (or failure) of an asynchronous operation.

let promise = new Promise((resolve, reject) => {

let success = true;

if(success) {

resolve("Operation was successful!");


} else {

reject("Operation failed.");

});

promise.then((message) => {

console.log(message);

}).catch((message) => {

console.log(message);

});

Common Interview Questions on HTML, CSS, and JavaScript

1.​ What is the difference between class and id in CSS?​

○​ id is unique and should only be used once per page, while class can be reused
multiple times.​

2.​ What are the advantages of Flexbox in CSS?​

○​ Flexbox allows for easier and more flexible layouts, especially for aligning items
and distributing space within a container.​

3.​ What is the DOM in JavaScript?​

○​ The Document Object Model (DOM) is an interface that allows JavaScript to


interact with and manipulate HTML and XML documents.​

4.​ What is the purpose of this in JavaScript?​

○​ this refers to the context in which a function is called. It typically points to the
object from which the method was called.​
5.​ What is event delegation in JavaScript?​

○​ Event delegation is a technique where you attach a single event listener to a


parent element to handle events for its child elements, improving performance.​

Final Tips for Your Interview:

1.​ Practice writing HTML and CSS code: Make sure you're comfortable building simple
websites and layouts.​

2.​ Understand basic JavaScript concepts: Be prepared to demonstrate how you can
interact with the DOM, use events, and handle simple logic.​

3.​ Know the differences between var, let, and const in JavaScript: let and const
are block-scoped, while var is function-scoped.​

Good luck with your interview! Let me know if you'd like to dive deeper into any specific topic or
need more examples!

You might also like