طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

دوره جامع آموزش طراحی وب (مقدماتی تا پیشرفته)

قیمت: 124 هزار تومان
زمان کل دوره: 27 ساعت
جمع کل دوره : 4.28 گیگابایت
دوره آموزش طراحی وب

در این دوره, طراحی وب را بطور کامل و کاربردی و از مفاهیم اساسی و پایه ای تا به انجام رساندن یک وبسایت فروشگاهی را به شما آموزش دادیم.

مهم نیست قبلا طراحی وب را انجام دادید و یا حتی چندین پروژه را به اتمام رساندید و یا تازه اولین بار قصد ورود به این حوزه را دارید, به هر حال در دوره حرفه ای آموزش طراحی وب نت پارادیس هدف ما این است که بطور اصولی و از ابتدا تمام مفاهیم را به شما برای حرفه ای شدن و پیشرفت در طراحی وب را آموزش بدیم.

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

همچنین در حین جلسات به شما نکات بسیار کاربردی از تگ های مشابه و اینکه کدام ها را به جای هم باید استفاده کرد, تگ ها و ویژگی (attribute) های منسوخ قبل از HTML5  و جایگزین آنها در CSS3 و نکات مربوط به سئو (SEO) را آموزش می دهیم.

بعد از آن میرسیم به آموزش FlexBox ها در CSS که بسیار مبحث مهم و داغی در طراحی وب است. با استفاده از flexbox در طراحی وب می توانید ساختار (layout) صفحات وب را بسیار سریع و آسان تر ایجاد کنید.

همانند آموزش های قدیمی که در وب سایت های مختلف وجود دارد, دیگر از متدهای قدیمی مثل float و غیره استفاده نمی کنیم. مزیت استفاده از flexbox هم راحتی و تا حدودی ریسپانسیو کردن صفحه وب ما است.

بعد از اینکه تمام مفاهیم لازم برای ساخت یک صفحه وب را فراگرفتیم, چهار مینی پروژه مختلف را پیاده سازی می کنیم تا با این تمارین به مباحث CSS و نحوه استفاده از تگ های HTML مسلط بشیم.

در یک جلسه مهم دیگر به شما نحوه استفاده از انواع کتابخانه های CSS , جاوااسکریپت (JavaScript) , جی کوئری را آموزش می دهیم . پلاگین هایی مثل owlCarousel برای ساخت اسلایدر, FancyBox و SweetAlert برای ساخت مودال های زیبا و ..

 

بعد از یادگیری مباحث بالا,  یک وبسایت فروشگاهی را با طرح اولیه در فتوشاپ طراحی و آن طرح PSD را به کد های HTML و CSS تبدیل می کنیم.

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

 

در آخرای دوره شما را با فریمورک محبوب و نحوه استفاده از آن (در این دوره Bootstrap 4 )  آشنا می کنیم و خواهید دید که با کد کمتر می توانید صفحات زیبا را در سریعترین زمان ایجاد کنید.

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

 

دانلود قسمت هایی برای ارزیابی دوره

 

بعد از گذراندن این دوره

قادر خواهید بود طرح دلخواهتان را به کدهای HTML و CSS تبدیل کنید

می توانید صفحات وب حرفه ای و استانداردتری ایجاد کنید

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

صفحات وب شما بهینه و مدرن تر خواهد بود

به راحتی وارد بازار کار می شوید

 

چرا در دوره آموزش طراحی وب نت پارادیس شرکت کنیم؟

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

و حالا بعد از گذشت سال ها و تمرین و انجام انواع پروژه ها و رسیدن به مهارت زیاد در حوزه طراحی وب, تصمیم گرفتنم در نهایت دوره آموزش طراحی وب را براساس تجربه و استاندارد, از پایه تا انجام یک پروژه واقعی به شما آموزش بدم تا شما بدون صرف زمان و هزینه زیاد و همچنین بدون یادگیری اضافات و مباحث پراکنده, طراحی وب را بصورت اصولی و کاربردی یاد بگیرید.

دوره های حضوری که در آموزشگاه های مختلف برگزار می شود با قیمت های ۸۰۰هزار تومان به بالا قابل ثبت نام است (تصویر را ببینید) و جدا از محدودیت های زمانی و مکانی, شما دسترسی به مدرس دوره ندارید, آپدیت و تغییرات جدید حوزه طراحی وب را دریافت نمی کنید, برای مرور و جلسه, معمولا ویدویی آموزشی آن را ندارید و خیلی از موارد مختلف دیگر که عملا نتیجه قابل قبول را برای شما ایجاد نمی کند.

چند نمونه از همین دوره های حضوری که حتی سرفصل های آنها با دوره طراحی وب نت پارادیس قابل مقایسه نیست چه برسد به قیمت ها بسیار بالا

شاید بگید خب این آموزشگاه ها مدارکی ارایه می دهند که معتبر است ولی همینجا خدمتتان عرض کنم دوران مدرک گرایی خیلی وقت است تمام شده و تنها اصل ضروری مهارت مهارت و مهارت است

در دوره آموزشی که تهیه کردیم تمام مباحث مورد نیاز برای حرفه ای شدن در حوزه طراحی وب را بطور کامل و با قیمت بسیار پایین تر از دوره های حضوری و حتی دوره های غیرحضوری دیگر به شما آموزش دادیم.

 

پروژه نهائی (وبسایت فروشگاهی) – کاملا ریسپانسیو

دوره آموزش طراحی وب

دوره آموزش طراحی وب

مزایای دوره حرفه ای آموزش طراحی وب

  • آموزش از سطح کاملا مقدماتی شروع می شود
  • آموزش کاملا پروژه محور و متناسب با نیاز و تغییرات روز است
  • آموزش را تا سطح پیشرفته ادامه می دیم تا کاملا حرفه بشید
  • تمام سوالات شما در کمتر از ۲۴ ساعت در طول روز پاسخ داده می شود

پیش نیاز های دوره

دوره حرفه ای آموزش طراحی وب هیچ پیش نیازی ندارد، از سطح پایه و با زبانی ساده تدریس شده است.

مروری بر سرفصل های کلی

  • آموزش کامل HTML و HTML5
  • آموزش کامل CSS و CSS3
  • آموزش کامل و کاربردی FlexBox
  • استفاده از جاوااسکریپت در صفحات وب
  • طراحی قالب در فتوشاپ و تبدیل طرح PSD به کدهای HTML و CSS
  • استفاده از فریمورک ها
  • طراحی وب واکنشگرا (Responsive)
  • تبدیل طرح استاتیک به قالب وردپرس
  • استفاده از کتابخانه های معروف جاوااسکریپت و جی کویری برای ساخت مودال, اسلایدر و..
  • نکات کاربردی برای کدنویسی بهینه (SEO)
  • مینی پروژه های مختلف
  • پروژه طراحی قالب وبسایت فروشگاهی
  • نکاتی برای ادامه کار و کسب درآمد از طراحی وب

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

مباحث مطرح شده در این جلسه

  • آیا این دوره نیاز به پیش نیاز خاصی دارد؟
  • معرفی اولیه زبان HTML و CSS ، نسخه های مختلف و تفاوت آن ها
  • تشریح رابطه زبان های تحت وب و مفهوم Backend و Frontend
  • چرا باید HTML و CSS را یاد بگیرم ؟
  • مرور کلی سرفصل های این دوره
  • مرورگرها و موتور های آنان
  • موتور های رندرینگ مرورگرها
  • ادیتور ها و ویژگی های آنها
  • نتیجه نهایی دوره

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

همچنین ابزارهای مهمی مثل Emmet (سریع تر نوشتن کدهای HTML) و LivePrev (اجرای زنده نتیجه کدها در مرورگر) را نصب می کنیم.

در این جلسه تگ ها و ویژگی های منسوخ شده HTML و جایگزین آن ها را بررسی می کنیم. همچنین نحوه استفاده از کامنت ها (Comment) در HTML را یاد می گیریم.

 

در این جلسه از دوره حرفه ای طراحی وب به مباحث پایه ای و بسیار مهم در طراحی صفحات وب می پردازیم. در این قسمت رنگ ها, انواع آنها و همچنین واحد های اندازه گیری و تفاوت آنها را مورد بحث قرار می دهیم.

مباحث مطرح شده در این قسمت

  • چهار روش استفاده از رنگ ها
  • معرفی سایت مرجع انتخاب رنگ مناسب
  • نام رنگ ها ، رنگ های hex, RGB, RGBA, HSL و HSLA
  • نحوه محاسبه کد رنگی HEX
  • واحدهای اندازه گیری

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

بعد از آن برخی تگ های مهم موجود برای فرمت دهی متن ها رو استفاده می کنیم. همچنین در حین آموزش هر تگ نکات، ویژگی ها و کاربردهای آن را توضیح می دهیم.

مباحث مطرح شده در این جلسه

  • چینش ساختار اصلی HTML
  • تگ <!DOCTYPE> و بهینه ترین حالت آن
  • تگ <html>
  • تگ <title>
  • تگ <body>
  • تگ های <h1> تا <h6>
  • تگ <hr> و کاربرد آن
  • تگ پاراگراف <p> و ویژگی های آن
  • تگ <pre> و کاربرد آن
  • تگ <br> و کاربرد آن
  • تگ <span> و کاربرد آن

در این جلسه ادامه ی تگ های فرمت بندی متن رو در زبان HTML مطرح می کنیم و به نکات و کاربردهای اون ها خواهیم پرداخت. بعضی از تگ های معرفی شده تگ هایی هستند که در HTML5 اضافه شدند و قطعا کاربرشون برای شما جالب خواهد بود.

همچنین طی آموزش به شما می گوییم کدام تگ ها منسوخ (Deprecated) شده و نباید استفاده کرد و جایگزین آنها را نیز معرفی می کنیم.

مباحث مطرح شده در این جلسه

  • تگ <b> و کاربرد آن
  • تگ <strong> و تفاوت آن با تگ <b>
  • تگ <big> و کاربرد آن
  • تگ <small> و کاربرد آن
  • تگ <i> و کاربرد آن
  • تگ <em> و تفاوت آن با تگ <i>
  • تگ <cite> و کاربرد آن
  • تگ <del> و کاربرد آن
  • تگ <strike> و کاربرد آن
  • تگ <s> و کاربرد آن
  • تگ <u> و کاربرد آن
  • تگ <ins> و کاربرد آن
  • تگ <acronym> و ویژگی آن
  • تگ <abbr> و تفاوت آن با تگ <acronym>
  • تگ <dfn> و کاربرد آن
  • تگ <kbd> و کاربرد آن
  • تگ <address> و کاربرد آن
  • تگ <a> و کاربرد آن
  • تگ <bdi> و کاربرد آن
  • ویژگی dir و کاربرد آن
  • تگ <blockqoute> و کاربرد آن
  • تگ <q> و تفاوت آن با تگ <blockqoute>

در این جلسه تگ های باقی مانده از بحث تگ های فرمت بندی متن در HTML را معرفی می کنیم. همچنین چندین تگ جدید HTML5 که بسیار جالب هستند را معرفی و مثالی از آن را می بینیم.

مباحث مطرح شده در این جلسه

  • تگ <mark> و کاربرد آن
  • تگ <sub> و کاربرد آن
  • تگ <sup> و کاربرد آن
  • تگ <samp> و کاربرد آن
  • تگ <code> و کاربرد آن
  • تگ <tt> و کاربرد آن
  • تگ <font> و ویژگی های آن
  • تگ <metter> و کاربرد آن
  • تگ <progress> و کاربرد آن
  • تگ <time> و کاربرد آن

در این جلسه مباحث مهمی مانند قرار دادن صدا , ویدیو , تصویر و لینک و لیست ها در صفحات وب را آموزش می دهیم.  جلسه طولانی و بسیار مهمی است که نیاز به دقت و تمرین دارد.

مباحث مطرح شده در این جلسه

  • معرفی تگ <a> و ویژگی های آن
  • اهمیت استفاده از لینک در صفحات وب
  • بررسی انواع ویژگی های لینک ها
  • ساخت لینک های داخلی و خارجی
  • تگ <wbr> و کاربرد آن
  •  آدرس های نسبی و کامل فایل ها
  • تگ <img> و کاربرد آن
  • بهینه سازی تصاویر برای وب
  • تگ <map> و لینک دهی بر اساس مختصات
  • تگ <area> و کاربرد آن
  • تگ <img> و کاربرد آن
  • تگ <figure> و کاربرد آن
  • تگ <figcaption> و کاربرد آن
  • تگ <ul> و کاربرد آن
  • تگ <li> و کاربرد آن
  • تگ <ol> و کاربرد آن
  • تگ <dl> و کاربرد آن
  • تگ <dt> و کاربرد آن
  • قرار دادن ویدیو در وب
  • قرار دادن صدا و نمایه های فلش در وب
  • تگ <object> و کاربرد آن
  • تگ <param> و کاربرد آن
  • تگ <embed> و کاربرد آن
  • تگ <video> و کاربرد آن
  • تگ <audio> و کاربرد آن
  • تگ <source> و کاربرد آن
  • تگ <track> و کاربرد آن

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

مباحث مطرح شده در این جلسه

  • کاربرد جداول در صفحه وب
  • تگ <table> و کاربرد آن
  • تگ <tr> و کاربرد آن
  • تگ <td> و کاربرد آن
  • تگ <th> و کاربرد آن
  • تگ <thead> و کاربرد آن
  • تگ <tfoot> و کاربرد آن
  • تگ <caption> و کاربرد آن
  • تگ <colgroup> و کاربرد آن
  • تگ <col> و کاربرد آن
  • معرفی Canvas برای رسم اشکال گرافیکی

در این جلسه در مورد  تگ های html ای که برای تقسیم بندی و بخش بندی صفحات وب هست، صحبت خواهیم کرد. همچنین روش هایی که برای بخش بندی و layout بندی المان های صفحه وب استفاده می شد و منسوخ شده هستند را در حد معرفی اشاره می کنیم

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

مباحث مطرح شده در این جلسه

  • بررسی موردی یک سایت
  • تگ <frameset> و کاربرد آن
  • تگ <frame> و کاربرد آن
  • تگ <noframe> و کاربرد آن
  • تگ <iframe> و کاربرد آن
  • تگ <div> و کاربرد آن
  • تگ <hgroup> و کاربرد آن
  • تگ <nav> و کاربرد آن
  • تگ <header> و کاربرد آن
  • تگ <footer> و کاربرد آن
  • HTML Entities ها و کاربرد آن
  • تگ <section> و کاربرد آن
  • تگ <article> و کاربرد آن
  • تگ <figure> و کاربرد آن
  • تگ <hgroup> و کاربرد آن
  • تگ <aside> و کاربرد آن
  • تگ <dialog> و کاربرد آن
  • تگ <details> و کاربرد آن
  • تگ <summary> و کاربرد آن

در این جلسه انواع متاتگ هایی که در صفحه وب می توان استفاده کرد را بررسی می کنیم. همچنین با تگ های <link > , <style> , <script> نیز آشنا خواهید شد.

فرم ها (forms) بحث بسیار مهمی در داینامیک سازی صفحات وب هستند. تقریبا در هرجایی که از کاربر اطلاعاتی را می گیریم یا آن را ترغیب به انجام کاری می کنیم (Call-To-Action) نیاز است که از فرمها به منظور تعامل (interaction) استفاده کنیم.

در بخش های مختلفی مثل تماس با ما, صفحات خرید, انجام تراکنش مالی در صفحه بانکی , مدیریت سایت و همه جا از فرم ها به منظور دریافت اطلاعات از کاربر بهره می بریم.

پس برای این جلسه برای یادگیری این مهم زمان و دفت کافی را بزارید.

مباحث مطرح شده در این جلسه

 

  • تگ <form> و کاربرد آن
  • توضیح کامل متد های GET و POST
  • بررسی ویژگی action
  • بررسی ویژگی enctype
  • تگ <input> و کاربرد آن
  • فیلد و ورودی date
  • فیلد و ورودی datetime
  • فیلد و ورودی datetime-local
  • فیلد و ورودی button
  • فیلد و ورودی checkbox
  • فیلد و ورودی color
  • فیلد و ورودی email
  • فیلد و ورودی reset
  • فیلد و ورودی search
  • فیلد و ورودی submit
  • فیلد و ورودی file
  • فیلد و ورودی hidden
  • فیلد و ورودی image
  • فیلد و ورودی radio
  • فیلد و ورودی range
  • فیلد و ورودی tel
  • فیلد و ورودی month
  • فیلد و ورودی number
  • فیلد و ورودی password
  • فیلد و ورودی text
  • فیلد و ورودی time
  • فیلد و ورودی url
  • فیلد و ورودی week
  • تگ <textarea> و کاربردهای آن
  • تگ <optgroup> و کاربردهای آن
  • تگ <keygen> و کاربردهای آن
  • تگ <output> و کاربردهای آن
  • تگ <option> و کاربردهای آن
  • تگ <label> و کاربردهای آن
  • تگ <button> و کاربردهای آن
  • تگ <select> و کاربردهای آن
  • تگ <fieldset> و کاربردهای آن
  • تگ <legend> و کاربردهای آن

در این قسمت ابتدا ویژگی های CSS و مزیت استفاده از آن را بررسی میکنیم. بعد از آن ساختار نوشتاری (syntax) در CSS را توضیح می دهیم.

همچنین به شما سه روش مختلف استفاده از کدهای CSS در صفحه وب و تفاوت های آن را بررسی می کنیم.

در بخش بعدی این جلسه نیز ابزار معروف Emmet و چندتا از سلکتورهای CSS را معرفی می کنیم.

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

مباحث مطرح شده در این جلسه

  • سینتکس کلی CSS
  • ابزار Emmet
  • روش های استفاده از CSS
  • سلکتور element
  • سلکتور *
  • سلکتور .class
  • سلکتور #id
  • سلکتور .class
  • سلکتور element,element
  • سلکتور element > element
  • سلکتور element + element
  • سلکتور element ~ element
  • معرفی At-Rule های CSS

در ادامه جلسه قبل باقی سلکتورهای CSS را معرفی می کنیم.

مباحث مطرح شده در این جلسه

  • سلکتور [attribute]
  • سلکتور [attribute=value]
  • سلکتور [attribute^=value]
  • سلکتور [attribute*=value]
  • سلکتور [attribute$=value]
  • سلکتور [attribute~=value]
  • سلکتور [attribute|=value]
  • سلکتور :link
  • سلکتور :active
  • سلکتور :hover
  • سلکتور :visited
  • سلکتور :focus
  • سلکتور :enabled
  • سلکتور :disabled
  • سلکتور :read-only
  • سلکتور :in-range
  • سلکتور :checked
  • سلکتور :required
  • سلکتور :optional
  • سلکتور :valid
  • سلکتور :invalid
  • سلکتور :empty
  • سلکتور :root
  • سلکتور :before
  • سلکتور :after
  • سلکتور :selection
  • سلکتور :placeholder
  • سلکتور :first-line
  • سلکتور :first-letter
  • سلکتور :first-child
  • سلکتور :nth-child(n)
  • سلکتور :last-child(n)
  • سلکتور :first-of-type
  • سلکتور :last-of-type
  • سلکتور :only-of-type
  • سلکتور :nth-of-type
  • سلکتور :first-of-type
  • سلکتور :target
  • سلکتور :not()
  • سلکتور :lang

در جلسات قبل, انواع سلکتورهای CSS را معرفی و کار کردیم. در این جلسه انواع ویژگی های CSS را بررسی می کنیم.البته قبل از شروع معرفی property ها چند نکته مهم را یادآور خواهیم بود.

مباحث مطرح شده در این جلسه

  • ویژگی های پیشونددار مرورگرهای خاص
  • پیشوند -moz- برای مرورگر موزیلا
  • پیشوند -ms- برای اینترنت اکسپلورر
  • پیشوند -o- برای مرورگر اپرا
  • پیشوند -webkit- برای کروم و سافاری
  • معایب و مزایای استفاده از ویژگی های پیشوند دار در کنار ویژگی های استاندارد CSS3
  • ارایه راهکار برای تمامی پیشوندها
  • مقدار initial و کاربرد آن
  • مقدار auto و کاربرد آن
  • مقدار none و کاربرد آن
  • مقدار inherit و کاربرد آن
  • ویژگی color و کاربرد آن
  • ویژگی direction و کاربرد آن
  • ویژگی text-align و کاربرد آن
  • ویژگی text-align-last و کاربرد آن
  • ویژگی text-decoration-color و کاربرد آن
  • ویژگی text-decoration-line و کاربرد آن
  • ویژگی text-transform و کاربرد آن
  • ویژگی text-indent و کاربرد آن
  • ویژگی word-spacing و کاربرد آن
  • ویژگی letter-spacing و کاربرد آن
  • ویژگی white-space و کاربرد آن
  • ویژگی line-height و کاربرد آن

در این جلسه در مورد یک مدل فرضی به نام Box-Model در HTML و CSS صحبت می کنیم که بسیار مهم و کاربردی است و در هر پروژه ای این مفهوم بسیار مورد استفاده قرار می گیرد.

مباحث مطرح شده در این جلسه

  • ویژگی border-width و کاربرد آن
  • ویژگی border-style و کاربرد آن
  • ویژگی border-color و کاربرد آن
  • ویژگی border و کاربرد آن
  • ویژگی border-radius و کاربرد آن
  • ویژگی border-left-width و کاربرد آن
  • ویژگی border-right-width و کاربرد آن
  • ویژگی border-bottom-width و کاربرد آن
  • ویژگی border-top-width و کاربرد آن
  • ویژگی border-left-color و کاربرد آن
  • ویژگی border-top-color و و کاربرد آن
  • ویژگی border-bottom-color و و کاربرد آن
  • ویژگی border-right-color و و کاربرد آن
  • ویژگی border-image و کاربرد آن
  • ویژگی outline و کاربرد آن
  • ویژگی width و کاربرد آن
  • ویژگی min-width و کاربرد آن
  • ویژگی max-width و کاربرد آن
  • ویژگی height و کاربرد آن
  • ویژگی min-height و کاربرد آن
  • ویژگی max-height و کاربرد آن
  • ویژگی padding و کاربرد آن
  • ویژگی margin و کاربرد آن
  • ویژگی padding-left و کاربرد آن
  • ویژگی padding-right و کاربرد آن
  • ویژگی padding-top و کاربرد آن
  • ویژگی padding-bottom و کاربرد آن
  • ویژگی margin-right و کاربرد آن
  • ویژگی margin-left و کاربرد آن
  • ویژگی margin-top و کاربرد آن
  • ویژگی margin-bottom و کاربرد آن
  • ویژگی box-sizing و کاربرد آن
  • ویژگی overflow و کاربرد آن
  • ویژگی text-overflow و کاربرد آن
  • ویژگی resize و کاربرد آن

این جلسه استفاده از فونت ها و پس زمینه ها (background) در CSS و صفحات وب را یاد می گیریم.

مباحث مطرح شده در این جلسه

  • ویژگی font-size و کاربرد آن
  • ویژگی font-weight و کاربرد آن
  • ویژگی font-varient و کاربرد آن
  • ویژگی font-family و کاربرد آن
  • معرفی انواع فرمت های فونت
  • افزودن یک فونت به صفحه وب
  • ویژگی @font-face و کاربرد آن
  • ویژگی background و کاربرد آن
  • ویژگی background-image و کاربرد آن
  • ویژگی background-repeat و کاربرد آن
  • ویژگی background-color و کاربرد آن
  • ویژگی background-attachment و کاربرد آن
  • ویژگی background-position و کاربرد آن
  • ویژگی background-size و کاربرد آن
  • ویژگی background-clip و کاربرد آن
  • ویژگی background-origin و کاربرد آن
  • استفاده از gradient در CSS
  • ترکیب تصاویر و ترکیب رنگ ها در CSS

در این جلسه در مورد تغییر Display یا همان نحوه نمایش المان ها در صفحه صحبت می کنیم. همچنین بحث مهم موقعیت دهی (postion) المان ها را بررسی می کنیم.

در آخر این ویدیو نیز ویژگی های vertical-align و visibility , float را معرفی می کنیم.

در این جلسه با مباحث مانند استایل دهی جداول و لیست ها , ستون بندی , استایل دهی علامت ماوس و تکنیک sprite آشنا می شویم.

مباحث مطرح شده در این جلسه

  • مقدار !important و کاربرد آن
  • ویژگی z-index و کاربرد آن
  • ویژگی list-style و کاربرد آن
  • ویژگی list-style-type و کاربرد آن
  • ویژگی list-style-position و کاربرد آن
  • ویژگی list-style-image و کاربرد آن
  • ویژگی cursor و کاربرد آن
  • ویژگی opacity و کاربرد آن
  • ویژگی column و کاربرد آن
  • ویژگی column-count و کاربرد آن
  • ویژگی column-width و کاربرد آن
  • ویژگی column-gap و کاربرد آن
  • ویژگی column-rule و کاربرد آن
  • ویژگی border-collapse و کاربرد آن
  • ویژگی border-spacing و کاربرد آن
  • ویژگی table-layout و کاربرد آن
  • ویژگی empty-cells و کاربرد آن
  • ویژگی caption-side و کاربرد آن
  • تابع counter و کاربرد آن
  • معرفی تکنیک sprite

در این جلسه به بحث پویا نمایی المان ها در صفحه وب با ویژگی های transition، transform و animation در css می پردازیم

مبابحث مطرح شده در این جلسه

 

  • ویژگی Box-shadow و کاربرد آن
  • ویژگی text-shadow و کاربرد آن
  • transition و ویژگی های آن
  • ویژگی transition-property و کاربرد آن
  • ویژگی transition-delay و کاربرد آن
  • ویژگی transition-duration و کاربرد آن
  • ویژگی transition-timing-function و کاربرد آن
  • ویژگی Box-shadow و کاربرد آن
  • transform و ویژگی های آن
  • animation و ویژگی های آن
  • ویژگی @keyframes برای ایجاد انیمیشن
  • ایجاد انیمیشن در CSS
  • معرفی timing-function ها برای کنترل سرعت اجرای انیمیشن

در این جلسه سیستم لایه بندی Flexbox یا فلکس باکس را بطور کامل آموزش می دهیم.

Flexbox یا همان Flexible Module Layout مجموعه ای از دستورات یا یک ماژول در CSS است که به به شما امکان ایحاد ساختار قابل انعطاف در صفحه وب را می دهد.

مباحث مطرح شده در این جلسه

  • معرفی flex در CSS
  • ویژگی flex-direction
  • ویژگی flex-wrap
  • ویژگی flex-flow
  • ویژگی justify-content
  • ویژگی align-items
  • ویژگی align-content
  • ویژگی align-self
  • ویژگی order
  • ویژگی flex-basis
  • ویژگی flex-grow
  • ویژگی flex-shrink
  • ویژگی flex

در این جلسه یک بازی آنلاین برای تمرین و آموزش Flexbox را با هم دیگر کار می کنیم . این بازی آنلاین دارای ۲۴ مرحله است که شما بایستی با استفاده از ویژگی های مربوط به flexbox را که یادگرفتید, مراحل را یکی پس از دیگری رد کنید.

کل ۲۴ مرحله را با توضیح کامل در این جلسه پاس می کنیم.

در این جلسه یک مینی پروژه برای تمرین مباحث تدریس شده داریم. مینی پروژه ما ایجاد یک منوی ۴ سطحی است.

در این جلسه قصد داریم کار را کمی حرفه ای تر پیش بریم و نحوه کار و استفاده از کتابخانه (library) و پلاگین های مختلفی مثل owlCarousel , SweetAlert و FontAwsome و… را به شما آموزش بدیم و خواهید دید به چه صورت می شود از آنها در پروژه طراحی وب خود استفاده کرد.

در این قسمت مفاهیم پایه ای و اصلی که قبل از شروع ساخت یک صفحه وب سایت باید بدانید را به شما آموزش میدیم .
همچنین از دلایل استفاده از طرح PSD در طراحی وب با شما صحبت می کنیم.
در ادامه طرح دستی سایت بررسی و یک وایرفریم (wireframe) را برای وبسایت فروشگاهی خود می سازیم

در این جلسه کار با فتوشاپ را آغاز می کنیم. در مورد بعضی از ابزارهایی که در طراحی PSD پروژه فروشگاهی استفاده خواهیم کرد و اندازه (width) استاندارد داکیومنت صحبت می کنیم .

در ادامه بخش هدر (header) پروژه را که در بصورت وایرفریم طراحی کردیم را در فتوشاپ پیاده سازی می کنیم.

همچنین نحوه استفاده از فونت آیکون ها در فتوشاپ را یاد می گیرید.

در این قسمت بخش منوی وبسایت و همچنین اسلایدر صفحه اصلی فروشگاه را در فتوشاپ تکمیل می کنیم.

همچنین نکات زیادی در مورد نحوه استفاده از خط کش و چیدمان دقیق در فتوشاپ را یاد می گیرید.

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

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

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

در این جلسه یک سری مفاهیم پایه ای برای آماده سازی پروژه قبل از شروع کدنویسی را خدمت شما تدریس می کنیم.

نکاتی را در مورد فولدر بندی استاندارد پروژه یاد می گیرید. کارهایی از جمله اضافه کردن فونت , کتابخانه های مورد نیاز, استایل های پایه و قبل از کدنویسی نیز انجام می دهیم.

این قسمت بخش هدر صفحه اصلی وبسایت همانند طراح PSD که طراحی کردیم, را به کدهای HTML و CSS تبدیل می کنیم.

در این جلسه با نکات زیادی برای چیدمان المان های اولیه صفحه آشنا می شوید.

در ادامه جلسه قبل بخش سبد خرید را تکمیل و بعد منوی اصلی سایت را کدنویسی می کنیم.

در این قسمت ما بخش اسلایدر اصلی را کدنویسی می کنیم و نکاتی را در مورد قرار دادن تصویر در صفحه وب یاد می گیرید.

قبل از ادامه ساخت پروژه فروشگاهی, در این جلسه در مورد طراحی واکنشگرا (responsive) صحبت می کنیم و کاملا نحوه انجام این کار را به شما آموزش می دهیم.

با متاتگ viewport و انواع آپشن های آن مثل initial-scale, width, maximum-scale, minimum-scale, user-scalable با همراه توضیحات کامل, آشنا می شوید.

در ادامه یک فریمورک معروف به نام بوت استرپ (Bootstrap 4) را معرفی و نحوه استفاده از آن را در صفحه وب به شما نشان می دهم.

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

در ادامه نیز تا حدودی بخش پیشنهاد شگفت انگیز را به کدهای HTML و CSS تبدیل می کنیم.

در ادامه جلسه قبل بخش پیشنهاد شگفت انگیز را تکمیل و بصورت یک اسلایدر به همراه دکمه های navigation تبدیل می کنی.

این طرح ما تا اینجا کاملا ریسپانسیو در هر صفحه نمایشی است.

در این قسمت تصاویر پیشنهاد شگفت انگیز را که در فتوشاپ طراحی کردیم را به صفحه وب خود اضافه می کنیم و آن را دقیقا همانند طرح PSD می چینیم.

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

تمام نکات لازم در مورد قرار دادن و چیدن تصاویر بصورت ریسپانسیو را یاد می گیرید.

در نهایت بخش پرفروش ترین ها را به کدهای HTML و CSS تبدیل می کنیم.

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

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

بعد از آن وارد مقدمات بخش فوتر سایت می شویم و آیکون ها را اضافه می کنیم که دارای ترفندهایی برای چیدمان همچین المان هایی در صفحه وب است.

آیکون های استفاده شده در این بخش بصورت SVG هستند که مزیت های زیادی نسبت به تصاویر پیکسلی دارد.

در این جلسه بخش اعضمی از فوتر سایت را که در فتوشاپ طراحی کردیم به کدهای HTML و CSS تبدیل می کنیم.

بخش هایی که کدنویسی کردیم شامل “راهنمای خرید از سایت” , “خدمات مشتریان” , “خبرنامه” , “شبکه های اجتماعی” و “مجوزهای فروشگاه” است.

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

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

در این قسمت بر می گردیم و بخش منوی سایت را تکمیل می کنیم و یک مگامنو که برازنده وبسایت های فروشگاهی است را کدنویسی می کنیم.

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

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

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

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

وردپرس (wordpress) یک سیستم مدیریت محتوای تحت وب است که با استفاده از آن می توانید در کمتر از ۵ دقیق یک سایت را ایجاد کنید. این سیستم ماژولار است و می توانید قالب های دلخواه را به آن اضافه کنید.

در این جلسه ابتدا این سیستم را روی لوکال هاست راه اندازی و نصب می کنیم و بعد قالب دمو خود را به یک قالب وردپرس تبدیل می کنیم و روی وردپرس نصب می کنیم.

در ادامه نیز بخش های مختلفی مثل منو اصلی , بخش پست های وبلاگ و فوتر را بصورت داینامیک تبدیل می کنیم.

محتوای این سایت کاملا پویا است به این معنی که برای تغییر منو یا متن های فوتر و حتی پست های وبلاگ دیگر نیاز به تغییر در کدها نخواهیم داشت و فقط از طریق پنل مدیریت وردپرس قادر به تغییر تمام این بخش ها را داریم.

در جلسه آخر این دوره جمع بندی کلی روی مباحثی که یادگرفتیم خواهیم داشت.

دو بخش باقی مانده SVG و Grid را بررسی می کنیم.

در مورد استانداردهای کدنویسی HTML و CSS صبحت می کنیم.

همچنین منابع لازم برای ادامه کار و مینی پروژه هایی را که می توانید برای تمرین استفاده کنید را معرفی می کنیم.

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

  • با وجود این همه اطلاعات مفید و رایگان سایت نت پارادیس، چه لزومی به شرکت در این دوره آموزشی است؟

    در این دوره آموزشی, مطالب از یک منطق و سناریوی آموزشی پیروی می کنند و با رعایت نظم و توالی مناسب سرفصل ها, شما را از فردی که هیچ پیش زمینه ای ندارید به یک حرفه ای تبدیل می کند.

    لذا از پراکندگویی و اضافه گویی پرهیز شده و با تولید ویدیوها, pdf و ارائه مثال‌های واقعی و کاربردی از بازار کار, مباحث به نحوی اثربخش و تاثیرگذار به فراگیران ارائه می شود.

    یکی از قسمت های مهم دوره, بهره مندی فراگیران از پشتیبانی آموزشی مدرس مجرب و خبره این حوزه است که نقش کلیدی و اساسی در فرایند یادگیری ایشان دارد.

  • آیا قیمت این دوره مناسب است؟

    مبلغی که شما بابت این آموزش پرداخت می‌نمایید کم ریسک ترین سرمایه گذاری است که انجام می‌دهید، یعنی سرمایه گذاری روی خودتان است

    این دوره با صرف زمان و هزینه‌های قابل توجه و تولید ویدیوهای اختصاصی تولید شده و برای افزایش اثربخشی آن، پشتیبانی آموزشی در نظر گرفته شده.

    با توجه به تغییر سریع حوزه های تخصصی وب، تلاش ما بر این بوده محصولی تولید کنیم تا دانش و مهارت شما را به شیوه‌ای مناسب به سطحی بالا برسانیم که مناسب بازار کار باشد.

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

  • برای استفاده بهینه از این دوره آموزشی، باید چه دانش و یا مهارتی داشته باشم؟

    برای شرکت در این دوره آموزشی، شما نیاز به هیچ پیش زمینه و دانشی ندارید. تمام آنچه نیاز دارید، توسط مدرس بصورت ویدیویی به شما آموزش داده‌ خواهد شد.

  • من فقط به بخش خاصی از این آموزش نیاز دارم آیا امکان خرید این بخش خاص هست

    در حال حاضر برنامه‌ای برای این کار نداریم.

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

  • اگر این دوره آپدیت و بروزرسانی شود، ما چطور می‌توانیم به اون‌ها دسترسی داشته باشیم؟

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

مشخصات دوره

124 هزار تومان
تعداد جلسات : 51 جلسه
زمان کل دوره: 27 ساعت
جمع کل دوره : 4.28 گیگابایت

دیدگاه کاربران

نقد و بررسی ها

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

اولین کسی باشید که دیدگاهی می نویسد “دوره جامع آموزش طراحی وب (مقدماتی تا پیشرفته)”

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مدرس دوره

حسن شفیعی


مدرس ، پنتستر ، توسعه دهنده اپلیکیشن های تحت وب ، عضو مرکز حامی نخبگان و از مدیران و اعضای رسمی تیم امنیتی آشیانه هستم . علاقه خاصی به زبان های تحت وب, امنیت شبکه و لینوکس دارم و هر روز تلاش می کنم به این حوزه ها مسلط تر شوم و اطلاعات و آموزش های ارزشمندی برای علاقه مندان تهیه و منتشر کنم.

تضمین اثربخشی دوره

من حسن شفیعی , مدیر وبسایت و مدرس دوره, متعهد می شوم اگر به هر دلیلی، زحماتی که ما برای تولید این دوره آموزشی کشیده‌ایم نتواند رضایت شما دوست و همراه گرامی را تامین نماید، بدون پرسیدن هیچ سوالی و بدون هیچ قید و شرطی، مبلغ پرداختی شما بابت دوره آموزشی را به حسابتان عودت می‌دهیم. پس هم‌اکنون می‌توانید با خیال راحت اقدام به ثبت‌نام در این دوره آموزشی بنمایید و از محتوای آموزشی آن لذت ببرید.

مشاوره‌ی خرید آموزش

اگر میخواهید بدانید که این آموزش‌برای اهداف یادگیری شما مناسب است
و یا اینکه سوالی در مورد هر کدام از بخش های آموزش داشتید, برای رفع ابهام , اطلاعات خود را در فرم زیر وارد نمائید تا شما را راهنمایی کنیم:

مجوزهای ما


logo-samandehi نماد اعتماد الکترونیک

خرید این محصول

124 هزار تومان

زمان کل دوره: 27 ساعت

تاریخ انتشار : ۳ آبان ۱۳۹۷

پشتیبانی دوره : نامحدود

جمع کل دوره : 4.28 گیگابایت

عضویت در خبرنامه