About this course

Who it's for

Beginners who want to start programming and web development.

Prerequisites

Only basic computer and internet use, and a willingness to learn.

How you learn

Each concept: simple explanation → diagram → example → exercise. Type the code yourself.

By the end you can

Explain how the web works (client, server, HTTP, DNS)

Analyse a problem with algorithms and flowcharts

Write a semantic, accessible HTML page

Style and make pages responsive with CSS (Flexbox and Grid)

Make a page interactive with core JavaScript and the DOM

Fetch data from an API with the Fetch API and display it

Slides

Read all 123 slides right here. Use the arrow keys, swipe on a phone, or jump straight to a topic from the syllabus below. The slide text is in Persian.

1 / 123

Class plan

A suggested 10-session plan. Each session lists its exercise and the slides it covers.

1

Programming, algorithms and flowcharts

Exercise: 5 algorithm problems

Slides 8–14

2

Internet, DNS, HTTP and the browser

Exercise: Parse URLs and inspect the Network tab

Slides 15–32

3

HTML 1: structure, text, links, images, lists, tables

Exercise: Résumé page

Slides 34–43

4

HTML 2: semantics, forms, accessibility and SEO

Exercise: Sign-up form

Slides 44–54

5

CSS 1: selectors, colour, typography and the box model

Exercise: Style the résumé

Slides 56–64

6

CSS 2: display, position and Flexbox

Exercise: Navigation bar

Slides 65–69

7

CSS 3: Grid, responsive design and animation

Exercise: Landing page

Slides 70–84

8

JS 1: variables, conditions, loops and functions

Exercise: Part 1 algorithms

Slides 86–95 Slides 99–101

9

JS 2: arrays, objects, the DOM and events

Exercise: Counter and to-do list

Slides 96–98 Slides 102–109

10

JS 3: Fetch API and the final project

Exercise: Final project

Slides 110–119 Slides 122

Each session is about 2 hours — roughly 20 hours in total. Short on time? Merge sessions 1 and 2, and only skim CSS animation and Fetch.

Syllabus

Every slide, grouped by part. Click any row to open that slide.

00 Start here 4 slides

3این دوره برای چه کسی است؟4توسعه‌دهنده‌ی فرانت‌اند کیست؟5مهارت‌های فرانت‌اند و جای این دوره 6نقشه‌ی راه این دوره

01 Foundations & the Internet 25 slides

برنامه‌نویسی و الگوریتماینترنت چگونه کار می‌کندHTTP و URLمرورگرها و DevToolsDNS، دامنه و هاست

8برنامه‌نویسی چیست؟9ورودی، پردازش، خروجی 10الگوریتم و ساختارهای فکری آن 11شبه‌کد: فکر کردن پیش از کدنویسی 12فلوچارت: نمایش مسیر اجرا 13فلوچارت با حلقه: بزرگ‌ترین عدد لیست 14تمرین: الگوریتم و فلوچارتExercise 15اینترنت: شبکه‌ای از شبکه‌ها 16وب (WWW) و تفاوت آن با اینترنت 17Client، Server و معماری Client–Server 18آدرس IP و Port 19Domain، Subdomain، Path و Hosting 20DNS: تبدیل نام دامنه به آدرس IP 21اجزای یک URL 22تمرین: URLها را تجزیه کنیدExercise 23پروتکل، HTTP و HTTPS 24ساختار Request و Response 25متدهای HTTP 26کدهای وضعیت HTTP 27وقتی یک وب‌سایت باز می‌شود 28مرورگر چگونه صفحه را نمایش می‌دهد؟29از HTML تا DOM و Render Tree 30Developer Tools: بررسی صفحه از داخل 31تب Network: درخواست‌ها و پاسخ‌ها 32مرور و تمرین بخش اولExercise

02 HTML 21 slides

مبانی و ساختار سندHTML معناییفرم‌ها و اعتبارسنجیدسترس‌پذیریمبانی SEO

34HTML چیست؟ تگ، ویژگی و عنصر 35ساختار یک سند HTML 36ساختار درختی و تو در تو بودن تگ‌ها 37ویژگی‌ها (Attributes) و ویژگی‌های عمومی 38متن: عنوان‌ها، پاراگراف و تأکید 39لینک‌ها (Anchor)40تصاویر و ویژگی alt 41لیست‌ها: نامرتب، مرتب و توضیحی 42جدول‌ها (Table)43عناصر بلوکی و درون‌خطی 44عناصر معنایی: ساختار یک صفحه 45معنایی در برابر divهای بی‌معنا 46فرم‌ها ۱: ساختار و label 47فرم‌ها ۲: انواع کنترل‌ها 48اعتبارسنجی فرم در HTML 49دسترس‌پذیری (Accessibility) در HTML 50مبانی SEO در HTML 51پروژه‌ی کوچک ۱: صفحه‌ی رزومهProject 52تمرین‌های HTMLExercise 53اشتباهات رایج در HTMLReview 54خلاصه‌ی HTML (Cheat Sheet)Review

03 CSS 29 slides

مبانی و انتخابگرهاBox Modelچیدمان: Flexbox و GridPositionطراحی واکنش‌گرا

56CSS چیست و چگونه اضافه می‌شود؟57انتخابگرها ۱: پایه 58انتخابگرها ۲: حالت‌ها و ترکیب‌ها 59اولویت قاعده‌ها (Specificity) و وراثت 60رنگ‌ها و پس‌زمینه 61تایپوگرافی: فونت و متن 62واحدهای اندازه‌گیری در CSS 63Box Model: هر عنصر یک جعبه است 64margin، padding و border 65ویژگی display و رفتار عناصر 66Position: جای‌گذاری دقیق 67Flexbox ۱: مفهوم محور اصلی و متقاطع 68Flexbox ۲: justify-content و align-items 69Flexbox ۳: مثال عملی، نوار ناوبری 70CSS Grid ۱: سطر و ستون 71CSS Grid ۲: چیدمان صفحه با areas 72CSS Grid ۳: گالری واکنش‌گرا 73Flexbox یا Grid؟74وسط‌چین کردن؛ مسئله‌ی کلاسیک 75طراحی واکنش‌گرا (Responsive)76Viewport، Mobile-First و Media Query 77Media Query عملی: منو در موبایل 78Transition، Transform و Animation 79پروژه‌ی کوچک ۲: کارت پروفایلProject 80پروژه‌ی کوچک ۳: صفحه‌ی فرود ریسپانسیوProject 81چرا استایل من اعمال نمی‌شود؟82تمرین‌های CSSExercise 83اشتباهات رایج در CSSReview 84خلاصه‌ی CSS (Cheat Sheet)Review

04 JavaScript 34 slides

مبانی زبانتابع، آرایه و شیءدستکاری DOMرویدادهاFetch API

86JavaScript چیست و کجا اجرا می‌شود؟87اولین برنامه: خروجی، ورودی و کامنت 88متغیرها: جعبه‌هایی برای نگه‌داشتن داده 89انواع داده (Data Types)90عملگرها: محاسبه و مقایسه 91شرط‌ها: if، else if و else 92switch، عملگر سه‌تایی و Truthy/Falsy 93حلقه‌ها: for و while 94تابع‌ها: بلوک‌های قابل‌استفاده‌ی مجدد 95دامنه‌ی متغیر (Scope)96آرایه‌ها: فهرست مرتب از مقدارها 97متدهای آرایه: forEach، map، filter، find 98اشیا (Objects) و JSON 99الگوریتم عملی ۱: میانگین نمرات 100پیاده‌سازی الگوریتم‌های بخش اول 101تمرین‌های مبانی JavaScriptExercise 102DOM: صفحه به‌عنوان یک درخت از اشیا 103انتخاب عناصر در DOM 104تغییر محتوا، استایل و کلاس 105ساخت و حذف عناصر 106رویدادها (Events)107پروژه‌ی کوچک ۱: شمارندهProject 108پروژه‌ی کوچک ۲: لیست کارها، الگوریتمProject 109پروژه‌ی کوچک ۲: لیست کارها، کدProject 110اعتبارسنجی فرم با JavaScript 111Fetch API: گرفتن داده از سرور 112نمایش داده‌ی API در صفحه 113Promise و async/await 114سه نوع خطا در برنامه‌نویسی 115اشکال‌زدایی مرحله‌به‌مرحله 116ویژگی‌های مدرن JavaScript (ES6+)117تمرین‌ها: DOM، رویدادها و FetchExercise 118اشتباهات رایج در JavaScriptReview 119خلاصه‌ی JavaScript (Cheat Sheet)Review

★ Next steps & final project 3 slides

120بعد از این دوره: ادامه‌ی نقشه‌ی راه 121برنامه‌ی پیشنهادی ده‌جلسه‌ای 122پروژه‌ی پایانی: وب‌سایت شخصی تعاملیProject

Exercises & projects

Exercises

14تمرین: الگوریتم و فلوچارت 22تمرین: URLها را تجزیه کنید 32مرور و تمرین بخش اول 52تمرین‌های HTML 82تمرین‌های CSS 101تمرین‌های مبانی JavaScript 117تمرین‌ها: DOM، رویدادها و Fetch

Mini projects

51پروژه‌ی کوچک ۱: صفحه‌ی رزومه 79پروژه‌ی کوچک ۲: کارت پروفایل 80پروژه‌ی کوچک ۳: صفحه‌ی فرود ریسپانسیو 107پروژه‌ی کوچک ۱: شمارنده 108پروژه‌ی کوچک ۲: لیست کارها، الگوریتم 109پروژه‌ی کوچک ۲: لیست کارها، کد

Final project

Final project: an interactive personal website

HTML

Semantic structure: header, nav, main, footer
About, skills (a list) and contact (a form) sections
alt text for images and a label for every field

CSS

Layout with Flexbox and Grid
Responsive on mobile and desktop
Hover states and a colour theme

JavaScript

A dark/light theme toggle button
Contact form validation
Display data from an API

Quality & delivery

No errors in the Console
Tested at three screen sizes
A tidy folder with proper naming: index.html, css, js and assets

Open the project slide

What to learn next

01

Git & GitHubVersion history, teamwork and publishing your portfolio on the web.

02

Web securityHTTPS, CORS, CSP and an introduction to OWASP.

03

Package managersnpm, pnpm and yarn for installing libraries.

04

Sass & TailwindPreprocessors and CSS architecture.

05

FrameworksReact, Angular or Vue for larger applications.

06

TypeScriptTyping for JavaScript — more reliable code.

07

Testing & debuggingAutomated tests and systematic bug fixing.

08

Web performanceLoad speed and experience optimisation.

Download

Keep the whole deck offline as a PDF.

PDF 15.6 MB

Course material is shared for personal learning. If you share or reuse it, please credit the source.

HTML, CSS & JavaScript