[go: up one dir, main page]
Scribd
Upload
6 views10 pages

Front End Fundamentals

This document serves as a comprehensive guide to front-end development, covering essential topics such as HTML, CSS, and JavaScript, along with advanced interview preparation materials. It includes sections on key concepts, mini projects, and flashcards for quick revision. The document aims to equip readers with the foundational knowledge needed before exploring modern frameworks like React, Vue, or Angular.

Uploaded by

makar samer
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
6 views10 pages

Front End Fundamentals

This document serves as a comprehensive guide to front-end development, covering essential topics such as HTML, CSS, and JavaScript, along with advanced interview preparation materials. It includes sections on key concepts, mini projects, and flashcards for quick revision. The document aims to equip readers with the foundational knowledge needed before exploring modern frameworks like React, Vue, or Angular.

Uploaded by

makar samer
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/ 10

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

You might also like