front end fundamentals
Last Edited Time @May 25, 2025 1:37 PM
Created By makar samer
Last Edited By makar samer
Frontend Development Fundamentals
This document is your all-in-one guide to mastering the core of front-end
development — HTML, CSS, and JavaScript — before diving into modern
frameworks like React, Vue, or Angular.
Frontend Fundamentals Interview Revision Sheet
This section helps you revise key concepts quickly before interviews.
Table of Contents
1. HTML
2. CSS
3. JavaScript
4. Advanced Topics for Technical Interviews
5. Mini Projects & Practice Ideas
6. Flashcards
7. Interview-Specific Essentials
HTML
What is HTML?
HTML (HyperText Markup Language) is the standard markup language for
creating web pages.
Basics
front end fundamentals 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
<!DOCTYPE html> — Document type declaration for HTML5
<html> , <head> , <body> — Root structure of any webpage
Common tags: <p> , <a> , <img> , <div> , <span> , <strong> , <em>
Headings: <h1> to <h6> — Structure content logically
Forms: <form> , <input> , <label> , <select> , <textarea>
Semantic Elements
<header>
<nav>Navigation</nav>
</header>
<main>
<section>
<article>Content</article>
</section>
</main>
<footer>Footer</footer>
Use elements like <article> , <section> , <nav> , <header> , <footer> to define
content structure
Helps with accessibility, SEO, and code clarity
Forms Deep Dive
front end fundamentals 2
<form>
<label for="email">Email:</label>
<input type="email" id="email" required />
<input type="submit" value="Submit" />
</form>
Input types: text , email , password , checkbox , radio , date , etc.
Attributes: required , pattern , min , max , step , placeholder
Built-in form validation and accessibility with labels
Accessibility (a11y)
Use semantic HTML tags
aria-* attributes for screen reader support
role , tabindex , keyboard navigation support
SEO Basics
Use of meta tags: description , viewport , robots
Proper use of headings and link structure
alt attribute on images
CSS
What is CSS?
CSS (Cascading Style Sheets) controls the appearance of HTML elements on
the screen.
Basics
body {
color: #333;
background: #fff;
padding: 20px;
front end fundamentals 3
font-family: sans-serif;
}
Selectors: , element , .class , #id
Units: px , % , em , rem , vh , vw
Color: Named, Hex #fff , RGB rgb(255, 255, 255)
Layout
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
Box Model: content + padding + border + margin
Flexbox: display: flex , justify-content , align-items , flex-direction
Grid:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
Positioning
.element {
position: absolute;
top: 10px;
left: 20px;
}
Values: static , relative , absolute , fixed , sticky
Understand stacking context with z-index
front end fundamentals 4
Responsive Design
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
Mobile-first approach
Use flexible units and media queries
Hide/show elements using display or visibility
Transitions and Animations
.box {
transition: all 0.3s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.box {
animation: fadeIn 1s ease-in;
}
BEM Naming Convention
<div class="card card--featured">
<div class="card__title">Hello</div>
</div>
Helps with scalability and readability
JavaScript
front end fundamentals 5
What is JavaScript?
JavaScript is a programming language that lets you implement complex
features on web pages — from updating content to interactive maps.
Basics
let name = "Ali";
const age = 22;
if (age > 18) {
console.log("Adult");
}
Variables: var (function-scoped), let and const (block-scoped)
Data Types: number , string , boolean , null , undefined , object , array , symbol , bigint
Operators: Arithmetic ( + , ), Logical ( && , || , ! ), Comparison ( === , !== )
Control Flow
for (let i = 0; i < 5; i++) console.log(i);
while (condition) { }
switch(expression) { case value: break; default: }
Functions
function greet(name) {
return `Hello ${name}`;
}
const arrow = (x) => x * 2;
Arrow functions have lexical this
Use default and rest parameters
Scope and Closures
function outer() {
let count = 0;
return function inner() {
front end fundamentals 6
count++;
return count;
};
}
const counter = outer();
counter(); // 1
counter(); // 2
DOM Manipulation
const el = document.querySelector('#myId');
el.textContent = "Hello!";
el.classList.add('active');
getElementById , querySelector , innerText , setAttribute
Events
document.querySelector('button').addEventListener('click', (e) => {
e.preventDefault();
alert('Clicked!');
});
Use addEventListener , e.preventDefault() , e.stopPropagation()
Arrays & Objects
const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2);
const user = { name: 'Ali', age: 22 };
console.log(user.name);
Array methods: map , filter , reduce , find , includes , forEach
ES6+ Features
const { name } = user;
const newUser = { ...user, city: 'Cairo' };
front end fundamentals 7
const greet = `Hello ${name}`;
const sum = (...nums) => nums.reduce((a, b) => a + b, 0);
Destructuring, Spread/Rest, Template Literals
Asynchronous JS
async function getData() {
try {
const res = await fetch('https://api.example.com');
const data = await res.json();
console.log(data);
} catch (e) {
console.error(e);
}
}
Promises and async/await
Event Loop
console.log("1");
setTimeout(() => console.log("2"), 0);
Promise.resolve().then(() => console.log("3"));
console.log("4");
// Output: 1, 4, 3, 2
Stack, Task Queue (macrotask), Microtask Queue (promises)
Storage
localStorage.setItem('token', 'abc123');
const token = localStorage.getItem('token');
localStorage , sessionStorage , cookies
Advanced Topics for Technical Interviews
front end fundamentals 8
JavaScript
Hoisting, Closures, this keyword
Event delegation and bubbling
Scope chains and lexical environment
Prototypes and prototypal inheritance
Call stack, task queue, and concurrency model
HTML/CSS
CSS specificity and inheritance
Responsive design principles
Accessibility best practices (WCAG)
Progressive enhancement
Performance optimization: lazy loading, critical CSS, asset minification
Mini Projects & Practice Ideas
Build a responsive landing page
Create a dynamic form with JS validation
Light/dark mode toggle
Todo app using localStorage
Fetch and display data from an API (e.g. weather app)
Flashcards
HTML
What is semantic HTML?
Purpose of alt attribute?
Difference between <section> and <div> ?
What’s the use of <label> ?
CSS
front end fundamentals 9
Difference between em and rem ?
How does Flexbox layout items?
Explain position: sticky
What is specificity in CSS?
JavaScript
Difference between let , var , and const ?
What is closure?
Explain the event loop
How does async/await work?
How to prevent default form submission?
Difference between == and === ?
Interview-Specific Essentials
Be able to whiteboard simple layout (HTML/CSS)
Explain event delegation, bubbling, and propagation
Understand the browser rendering engine: reflows & repaints
Know how to use DevTools effectively
Write clean, maintainable, accessible code
Explain how REST APIs work and how to fetch from them
front end fundamentals 10
