1

معرفی مفاهیم پایه طراح وب

5

0

مقدماتی

– بررسي مفهم UI

– بررسي مفهوم UX

– بررسي مفهوم Front-End

– بررسي مفهوم Back-End

– معرفي HTML

– معرفي CSS

– معرفي Javascript

– بررسي مفهوم SEO

– بررسي مفهوم Progressive Enhancement

2

Responsive Web Design و مفاهیم پایه اینترنت

–

–

مقدماتی

– بررسي مفهوم Internet, Protocol, WEB, HTTP, Server, IP, Domain, DNS, Intranet, Extranet

– بررسي موتور های رندرگیری مرورگر ها

– بررسي URL, HTTPS

– بررسي تفاوت سایت های dynamic و static

– بررسي response و request

– بررسي نحوه رندرگیری کد ها توسط مرورگر

3

معرفی HTML (قسمت اول)

10

0

مقدماتی

– کامنت ها در HTML

– معرفی tag ها و انواع آن (single & pairs)

– بررسی ساختار تگ ها

– معرفی VS Code و پلاگین ها (material icons, material themes, open in browser, prettier, …)

– بررسی ساختار یک سند HTML

– معرفی DOM و BOM

– نمایش درخت HTML

– بررسی مفهوم semantic

– معرفی تگ p و display آن

– معرفی تگ های Heading و display آنها

– معرفی تگ hr و display آن

– معرفی لیست های ترتیبی و غیر ترتیبی و display آنها

– آموزش Emmet

– معرفی attribute های تگ های HTML

– آموزش لیست های Nested

– معرفی پلاگین live-server در VS Code

– معرفی تگ blockqoute و display آن

– معرفی تگ pre و display آن

– معرفی Webstorm و نحوه نصب و کرک آن

– معرفی پلاگین های Webstorm

– برسي تفاوت های HTML4 و HTML5

– معرفي Doctype

– معرفي تگ های sematic: main, header, footer, section, article, aside, nav, address و display آنها

4

معرفی HTML (قسمت دوم – تگ‌های فرمت‌بندی و فرم)

–

–

مقدماتی

– معرفی تگ های em, strong, b, i, s, u, small, q, abbr, sub, sup, mark, ins, del, br, div, span

– معرفی id و class و بررسی تفاوت آنها

– معرفی global attributes

– معرفی character escapes

– آموزش دستورات پایه CMD

– معرفی node و npm

– معرفی live-server و دستورات آن

– معرفی تگ a و attribute های آن (HREF, Target)

– معرفی URL های Relative و Absolute

– لینک کردن به بخشی از سایت (scroll-behavior)

– بررسي mail links و tel links

– معرفي تصاوير (vector & raster)، فرمت ها و color mode

– معرفي mimetype

– معرفي تگ img

– بررسي تفاوت display های block, inline, inline-block

– معرفي تگ table و تگ های tr, th, td, caption, thead, tbody, tfoot

– معرفي Attribute های colspan & rowspan

– بررسي چگونگي عملکرد form ها

– معرفي تگ form و attribute های action, method, enctype

– بررسي method های get و post

– معرفي تگ input و انواع type های آن

– معرفي attribute های value, name, placeholder, minlength, maxlength, required, disabled, readonly

– معرفي تگ textarea

– معرفي تگ select, option, optgroup

– معرفي تگ label و آموزش اتصال به input

– معرفي تگ fieldset و legend

– معرفي تگ iframe

– معرفي تگ video و audio

5

CSS (پایه و پیشرفته)

–

–

متوسط تا پیشرفته

– معرفی CSS, declaration, selector, property, value

– انواع selector (element, id, class, universal, group, attribute, pseudo-class, pseudo-element)

– تفاوت style های inline, internal, external و اولویت آنها (!important)

– معرفی CSS Units

– Propertyهای متن: font-family, size, weight, style, variant, color, line-height, text-align, decoration

– Propertyهای پس‌زمینه: background-color, image, repeat, position, size, gradient

– مدل های رنگ: HEX, RGB, RGBa

– Box Model: width, height, padding, border, margin, box-sizing, overflow

– Border-radius, outline

– Display, Flexbox

– Position (static, relative, absolute, fixed, sticky)

– Transform, Transition, Animation

– Filter effects (blur, brightness, etc.)

– CSS Variables (:root), تابع calc()

– Media Queries (Responsive Design)

6

CSS Grid Layout

5

0

متوسط

– معرفی مفاهیم: grid column, row, cell, area, line

– Propertyهای grid: template-columns/rows, gap, column/row-start/end, template-areas, area

– تراز کردن: justify-content/items/self, align-content/items/self

7

پیش‌پردازنده SASS

8

0

متوسط

– معرفی، نصب و کانفیگ (با npm scripts یا نرم افزارهایی like Koala)

– Variables, Nesting

– Partials و @import

– Mixins, Functions, Extend/Inheritance

– Control directives (if, for, each, while)

– انجام یک پروژه ساده

8

فریمورک Bootstrap 5

–

–

متوسط

– نحوه دانلود، نصب و کانفیگ

– Breakpoints, Container, Grid system

– Components (Accordion, Alert, Badge, Breadcrumb, Buttons, Card, Carousel, Dropdowns, Modal, Navbar, …)

– Utility classes (margin, padding, color, background, display, position, …)

– ساخت پروژه

9

فریمورک Tailwind CSS 3

9

0

متوسط تا پیشرفته

– نحوه نصب (NPM, NPX, CDN, PostCSS)

– Directives, Optimizing for production

– Responsive Breakpoints

– Utility-First Classes (margin, padding, color, background, etc.)

– State variants (hover, focus, active, group-hover)

– Dark mode

– ساخت پروژه

10

زبان برنامه‌نویسی JavaScript

–

–

مقدماتی تا پیشرفته

– معرفی، کاربردها، فریمورک ها و کتابخانه ها

– تگ script و attribute های defer و async

– مبانی پایه: متغیرها (var, let, const)، انواع داده، عملگرها، توابع، شرط (if, switch)، حلقه (for, while)

– آرایه ها و متدهای آن

– اشیاء (Objects)

– DOM Manipulation و Events

– BOM (Browser Object Model)

– JSON, AJAX, Fetch API

– مفاهیم مدرن: ES6+ (Arrow functions, Destructuring, Modules, …)، Async/Await

11

کتابخانه jQuery

–

–

متوسط

– نحوه دانلود و نصب

– Selectors, Events, Effects

– DOM Manipulation

– AJAX در jQuery

12

پروژه نهایی و ادغام مفاهیم

–

–

پیشرفته

– نحوه خرید دامنه و هاست

– تبدیل UI به صفحات وب

– طراحی یک وبسایت کامل و Responsive