دریافت مشاوره فروش ، ارسال کلمه » سایت « به شماره : 834-82-83-0919

تماس بگیرید

آموزش خصوصی طراحی وبسایت از مقدماتی تا پیشرفته
آموزشی ، دوره های خصوصی

دوره مقدماتی تا پیشرفته طراحی وب (HTML5, CSS, JS)

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

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

دوره مقدماتی تا پیشرفته طراحی وب باکامنت‌گذاری و بهترین شیوه‌ها 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

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

  • (0)
  • (0)
  • (0)
  • (0)
  • (0)

دیدگاهها

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

اولین نفری باشید که دیدگاهی را ارسال می کنید برای “دوره مقدماتی تا پیشرفته طراحی وب (HTML5, CSS, JS)”

قیمت اصلی: هزار ریال۱۲.۰۰۰.۰۰۰ بود.قیمت فعلی: هزار ریال۹.۵۰۰.۰۰۰.

%21 تخفیف
پیش نمایش
مصطفی علاالدین: فروش دوره‌های برنامه‌نویسی وب، آموزش‌های عملی و نکات حرفه‌ای برای توسعه مهارت‌های وبسایت. با تجربه 10 ساله در برنامه نویسی
محصولات مرتبط
آموزش اچ تی ام ال ، سی اس اس ، جاوااسکریپت

دوره مقدماتی تا پیشرفته طراحی وب باکامنت‌گذاری و بهترین شیوه‌ها HTML, CSS, JavaScript اگه همیشه دوست داشتی خودت وب‌سایت طراحی کنی، ظاهر صفحات اینترنتی ...

4.9

112

آموزش خصوصی وردپرس

🎯 چرا این دوره با بقیه فرق داره؟ آموزش یک‌به‌یک و کاملاً عملی پروژه واقعی در طول دوره یادگیری اصول طراحی، سئو و امنیت ...

4.9

180

پشتیبانی و طراحی سایت مصطفی علاالدین

خدمات طراحی و پشتیبانی سایت ، آموزش برنامه نویسی به صورت خصوصی و گروهی ، مشاوره جهت شروع کسب و کار آنلاین و طراحی CRM و CMS 

تمامی حقوق این وب‌سایت برای آکادمی برنامه نویس مصطفی علاالدین محفوظ است.

قدرت گرفته شده در آکادمی برنامه نویسی و طراحی سایت مصطفی علاءالدین

ورود | ثبت نام
شماره موبایل یا پست الکترونیک خود را وارد کنید
برگشت
کد تایید را وارد کنید
کد تایید برای شماره موبایل شما ارسال گردید
ارسال مجدد کد تا دیگر
برگشت
رمز عبور را وارد کنید
رمز عبور حساب کاربری خود را وارد کنید
برگشت
رمز عبور را وارد کنید
رمز عبور حساب کاربری خود را وارد کنید
برگشت
درخواست بازیابی رمز عبور
لطفاً پست الکترونیک یا موبایل خود را وارد نمایید
برگشت
کد تایید را وارد کنید
کد تایید برای شماره موبایل شما ارسال گردید
ارسال مجدد کد تا دیگر
ایمیل بازیابی ارسال شد!
لطفاً به صندوق الکترونیکی خود مراجعه کرده و بر روی لینک ارسال شده کلیک نمایید.
تغییر رمز عبور
یک رمز عبور برای اکانت خود تنظیم کنید
تغییر رمز با موفقیت انجام شد

جشنواره طراحی و پشتیبانی سایت

تخفیف ویژه برای شما عزیزان به مناسبت فرارسیدن یلدا

مشتری گرامی، به دلیل حجم بالای درخواست‌ها در جشنواره طراحی و پشتیبانی سایت، لطفاً از ارسال مجدد خودداری فرمایید.

از اعتماد شما سپاسگزاریم.
تیم پشتیبانی و طراحی سایت مصطفی علاءالدین