آموزش و مشاوره خصوصی

دوره مقدماتی تا پیشرفته طراحی وب

این دوره به صورت کاملاً خصوصی برگزار میشه و از صفر تا سطح مقدماتی برنامه‌نویسی وب رو پوشش میده. شما یاد می‌گیرید چطور با HTML5 ساختار صفحات وب رو بسازید، با CSS3 ظاهر حرفه‌ای به اون‌ها بدید و با JavaScript صفحات رو پویا و تعاملی کنید.
مزیت اصلی این دوره خصوصی بودنشه؛ یعنی آموزش‌ها متناسب با سرعت یادگیری شما پیش میره، اشکال‌هاتون در لحظه رفع میشه و در پایان می‌تونید اولین پروژه‌های واقعی خودتون رو بسازید.

4.9/5
112 خریدار
1404-05-25
1307 بازدید

دوره مقدماتی تا پیشرفته طراحی وب باکامنت‌گذاری و بهترین شیوه‌ها

HTML CSS, JavaScript

اگه همیشه دوست داشتی خودت وب‌سایت طراحی کنی، ظاهر صفحات اینترنتی رو بسازی یا حتی وارد مسیر برنامه‌نویسی فرانت‌اند بشی، این دوره مخصوص توئه. این دوره به صورت خصوصی و یک‌به‌یک برگزار میشه، یعنی کل تمرکز مدرس روی یادگیری تو خواهد بود و آموزش‌ها بر اساس سطح و سرعت خودت تنظیم میشن.

در طول این دوره با سه مهارت اصلی طراحی وب آشنا می‌شی:

HTML5 → ساختار و اسکلت اصلی صفحات وب رو یاد می‌گیری و می‌فهمی چطور متن، تصویر، لینک، جدول و فرم رو داخل وب‌سایت قرار بدی.
CSS3 → یاد می‌گیری ظاهر و استایل صفحات رو بسازی؛ از رنگ‌ها و فونت‌ها گرفته تا طراحی ریسپانسیو با Flexbox و Grid.
JavaScript مقدماتی → صفحاتت رو پویا و تعاملی می‌کنی؛ مثل دکمه‌های هوشمند، منوهای بازشونده، فرم‌های اعتبارسنجی و حتی پروژه‌های کوچیک مثل To-Do List یا ماشین‌حساب.

چرا این دوره با بقیه فرق داره؟

کاملاً خصوصی: کل آموزش متناسب با نیاز، سطح و سرعت یادگیری تو طراحی میشه.
رفع اشکال مستقیم: هرجا به مشکل بخوری، همون لحظه با توضیح و مثال رفع میشه.
تمرین و پروژه واقعی: صرفاً تئوری نیست؛ بعد از هر بخش تمرین عملی داری و در نهایت یک یا چند پروژه کامل می‌سازی.
مسیر ورود به بازار کار برنامه نویسی : بعد از پایان دوره می‌تونی اولین وب‌سایت‌هاتو بسازی و آماده‌ی یادگیری فریم‌ورک‌هایی مثل React یا Vue بشی.

این دوره برای چه کسایی مناسبه؟

کسایی که می‌خوان از صفر وارد برنامه‌نویسی وب بشن.
دانشجوها یا علاقه‌مندانی که دنبال درآمدزایی از طراحی سایت هستن.
افرادی که می‌خوان با یک مدرس به‌صورت مستقیم و شخصی‌سازی‌شده یاد بگیرن.

خروجی دوره

در پایان این دوره، تو قادر خواهی بود:

یک صفحه وب شخصی یا تجاری کامل طراحی کنی.
صفحاتت رو واکنش‌گرا (Responsive) بسازی.
المان‌های مختلف سایت رو با جاوااسکریپت پویا کنی.
مسیر حرفه‌ای شدن در فرانت‌اند رو شروع کنی.

HTML چیست و چه کاربردی دارد

ساختار کلی یک فایل HTML

معرفی مرورگر و ادیتورهای کدنویسی

تگ < html >,,

تفاوت المان‌های بلاک (block) و اینلاین (inline)

تگ‌های < h1> تا < h6>

پاراگراف < p>

لیست مرتب < ol>

لیست نامرتب < ul>

لیست توضیحی < dl>

تگ < a> و ویژگی href

لینک داخلی و خارجی

لینک به ایمیل و شماره تلفن

تگ و ویژگی‌های src, alt, width, height

اضافه کردن ویدئو با < video>

اضافه کردن صدا با < audio>

ساخت جدول با < table>

ردیف‌ها و ستون‌ها: < tr >,,

ادغام سلول‌ها با colspan و rowspan

تگ فرم و متدهای GET و POST

انواع اینپوت‌ها: text, password, email, number, checkbox, radio, file

تگ کاربری فرم

اعتبارسنجی (Validation) اولیه HTML5

معرفی تگ‌های جدید: < header>,

اهمیت در سئو و دسترس‌پذیری

نوشتن کامنت با < !-- -->

رعایت اصول کدنویسی تمیز

ساخت یک صفحه وب شخصی (رزومه یا پروفایل ساده) با ترکیب تمام مباحث

CSS چیست و چرا استفاده می‌شود؟

Inline CSS

Internal CSS

External CSS

ساختار دستور CSS (selector, property, value)

انتخاب‌گر تگ، کلاس و آی‌دی

انتخاب‌گرهای ترکیبی (div p, div > p, div + p, div ~ p)

انتخاب‌گرهای Attribute (input[type="text"])

شبه‌کلاس‌ها (Pseudo-classes) مثل :hover, :first-child, :nth-child()

شبه‌عناصر (Pseudo-elements) مثل ::before, ::after

رنگ‌ها: نام رنگ، HEX، RGB، RGBA، HSL، HSLA

واحدها: px, em, rem, %, vw, vh

تغییر فونت با font-family

اندازه، وزن و استایل فونت

ترازبندی متن (text-align)

تزئینات (text-decoration, text-transform, letter-spacing, line-height)

استفاده از فونت‌های وب (Google Fonts)

مفهوم Content, Padding, Border, Margin

تفاوت box-sizing: content-box و border-box

سایه‌ها (box-shadow)

رنگ پس‌زمینه

تصویر پس‌زمینه (background-image)

تکرار، موقعیت و سایز (background-repeat, background-position, background-size)

گرادیانت‌ها (linear-gradient, radial-gradient)

شخصی‌سازی bullet ها در لیست

استایل‌دهی به جدول: border, spacing, zebra striping

تغییر رنگ لینک‌ها در حالت‌های مختلف (hover, active, visited)

طراحی دکمه‌های زیبا با رنگ، سایه و گرد کردن گوشه‌ها

Display: inline, block, inline-block, none

Position: static, relative, absolute, fixed, sticky

Z-index و ترتیب نمایش

ساختار Flex Container و Flex Items

خواص مهم: justify-content, align-items, flex-wrap, flex-grow, flex-shrink

ساخت منو و گرید ساده با Flexbox

تعریف سطر و ستون‌ها (grid-template-rows, grid-template-columns)

جایگذاری آیتم‌ها (grid-row, grid-column)

Alignment در گرید

طراحی لایه‌های پیشرفته

Transition: تغییر نرم ویژگی‌ها (transition-property, transition-duration)

Transform: چرخش، بزرگ‌نمایی، جابجایی (rotate, scale, translate, skew)

Animation: استفاده از @keyframes

Media Queries و طراحی ریسپانسیو

مفهوم ریسپانسیو و Mobile First

ساخت استایل برای موبایل، تبلت و دسکتاپ

Breakpoints متداول

تعریف متغیر با --name

استفاده در بخش‌های مختلف (var(--name))

تغییر متغیرها در تم‌های مختلف (مثلاً دارک/لایت مود)

طراحی یک صفحه Landing Page یا وب‌سایت شخصی ریسپانسیو

استفاده ترکیبی از Flexbox + Grid + Animation

جاوااسکریپت چیست و چه کاربردهایی دارد

جایگاه JS در فرانت‌اند و بک‌اند

نحوه اضافه کردن JS به HTML (inline, internal, external)

کنسول مرورگر و ابزارهای DevTools

معرفی var, let, const

انواع داده: string, number, boolean, null, undefined, object, array

Typeof و تبدیل نوع داده (type conversion)

عملگرهای ریاضی (+, -, *, /, %)

عملگرهای مقایسه‌ای (==, ===, !=, !==, >, <, >=, <=)

عملگرهای منطقی (&&, ||, !)

عملگرهای انتساب (=, +=, -=)

شرط‌ها: if, else if, else, switch

حلقه‌ها: for, while, do...while, for...of, for...in

تعریف تابع با function declaration و function expression

پارامترها و مقادیر بازگشتی

توابع پیکان (Arrow Functions)

مفهوم Scope و Hoisting

تعریف آرایه و دسترسی به المان‌ها

متدهای مهم: push, pop, shift, unshift, slice, splice

پیمایش آرایه‌ها: forEach, map, filter, find, reduce

تعریف شیء و ویژگی‌ها (properties)

دسترسی به مقادیر (dot notation و bracket notation)

متدها در اشیاء (object methods)

حلقه روی اشیاء (for...in, Object.keys, Object.values)

مفهوم DOM و ساختار درختی

انتخاب المان‌ها: getElementById, querySelector, querySelectorAll

تغییر متن و استایل: innerText, innerHTML, style

تغییر Attribute ها: setAttribute, getAttribute

اضافه و حذف المان‌ها: appendChild, removeChild, createElement

Event Listener (addEventListener)

رویدادهای متداول: click, change, keyup, submit

مفهوم Event Object و جلوگیری از رفتار پیش‌فرض (preventDefault)

شیء Date و متدهای مهم

فرمت کردن تاریخ و زمان

اشتباهات و دیباگ کردن

خطاهای متداول و روش رفع آنها

استفاده از console.log, console.error, console.table

دیباگ با DevTools

ماشین‌حساب مقدماتی

To-Do List ساده

فرم ثبت‌نام با اعتبارسنجی اولیه

پرسش و پاسخ

4.9

امتیاز کاربران برای محصول

دیدگاهها

هیچ دیدگاهی برای این محصول نوشته نشده است.

اولین نفری باشید که دیدگاهی را ارسال می کنید برای “دوره مقدماتی تا پیشرفته طراحی وب”

برای ثبت نقد و بررسی وارد حساب کاربری خود شوید.

۱۵.۰۰۰.۰۰۰ تومان

افزودن به علاقه مندی

پیش نمایش

برچسب محصولات

محصولات مرتبط

آموزش و مشاوره خصوصی

دوره مقدماتی تا پیشرفته طراحی وب

دوره مقدماتی تا پیشرفته طراحی وب باکامنت‌گذاری و بهترین شیوه‌ها

HTML CSS, JavaScript

CSS3 → یاد می‌گیری ظاهر و استایل صفحات رو بسازی؛ از رنگ‌ها و فونت‌ها گرفته تا طراحی ریسپانسیو با Flexbox و Grid.

چرا این دوره با بقیه فرق داره؟