- آپدیت رایگان و همیشگی
- پشتیبانی دائمی و رایگان
- گارانتی بازگشت وجه
- دانلود بلافاصله پس از پرداخت
با روزی ۱ ساعت یادگیری در کمتر از یک ماه هر قالب که خواستید طراحی کنید و به عنوان طراح قالب سایت کسب درآمد کنید
آموزش فوق العاده جامع HTML و CSS از صفر تا صد و پروژه محور (قالب فروشگاه)
در این دوره, طراحی سایت را بطور کامل و کاربردی و از مفاهیم اساسی و پایه ای تا به انجام رساندن یک وبسایت فروشگاهی را به شما آموزش دادیم.
مهم نیست قبلا طراحی سایت انجام دادید و یا حتی چندین پروژه را به اتمام رساندید و یا تازه اولین بار قصد ورود به این حوزه را دارید, به هر حال در دوره حرفه ای آموزش طراحی سایت نت پارادیس هدف ما این است که بطور اصولی و از ابتدا تمام مفاهیم را به شما برای حرفه ای شدن و پیشرفت در طراحی وب را آموزش بدیم.
در ابتدای دوره آمدیم 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 :
- علاقه مندان به طراحی سایت
- گرافیست هایی که می خواهند وارد حوزه طراحی صفحات وب شوند و طرح گرافیکی خود یا دیگران را به کد تبدیل کنند
- افرادی که میخواهند یک مهارت پولساز را یاد بگیرند
- افرادی که به طور جدی میخواهند از طراحی‌سایت پول در بیاورند
- وبمستر و مدیران سایت که میخواهند تغییرات ظاهری قالب ها را به تنهایی انجام دهند
دانلود قسمت هایی برای ارزیابی دوره
- جلسه ۴ – رنگ ها و واحدهای اندازه گیری
- جلسه ۲۳ – مینی پروژه منوی چهارسطحی (dropdown)
- جلسه ۳۶ – کدنویسی منوی سایت (PSD به HTML)
بعد از گذراندن این دوره
- قادر خواهید بود طرح دلخواهتان را به کدهای HTML و CSS تبدیل کنید
- می توانید صفحات وب حرفه ای و استانداردتری ایجاد کنید
- مهارت طراحی صفحه وب واکنشگرا و تبدیل طرح های قبلی به ریسپانسیو را خواهید داشت
- صفحات وب شما بهینه و مدرن تر خواهد بود
- به راحتی وارد بازار کار می شوید
قالب طراحی شده در این دوره
منوهای مخصوص موبایل – کاملا ریسپانسیو
مزایای دوره آموزش طراحی سایت
- آموزش از سطح کاملا مقدماتی شروع می شود
- آموزش کاملا پروژه محور و متناسب با نیاز و تغییرات روز است
- آموزش را تا سطح پیشرفته ادامه می دیم تا کاملا حرفه بشید
- ۵۱ جلسه آموزشی تصویری با کیفیت ۷۲۰p و MP4
- بیش از ۱۵۰۰ دقیقه آموزش
- ارتباط مستقیم با مدرس
- پشتیبانی مادام‌العمر در تلگرام/پنل کاربری/واتساپ/ایمیل
- دسترسی همیشگی به همه فایل‌ها
- ارتباط از راه دور جهت رفع اشکالات و
- ابهامات شما در طراحی سایت
- بروزرسانی دائمی و رایگان
- سورس کد کامل پروژه ها
- قابلیت دانلود کل دوره بصورت یکجا
- تمام سوالات شما در کمتر از ۲۴ ساعت در طول روز پاسخ داده می شود
پیش نیاز های دوره
دوره حرفه ای آموزش طراحی سایت هیچ پیش نیازی ندارد، از سطح پایه و با زبانی ساده تدریس شده است.
مروری بر سرفصل های کلی
- آموزش کامل HTML و HTML5
- آموزش کامل CSS و CSS3
- آموزش کامل و کاربردی FlexBox
- استفاده از جاوااسکریپت در صفحات وب
- طراحی قالب در فتوشاپ و تبدیل طرح PSD به کدهای HTML و CSS
- استفاده از فریمورک ها
- طراحی وب واکنشگرا (Responsive)
- تبدیل طرح استاتیک به قالب وردپرس
- استفاده از کتابخانه های معروف جاوااسکریپت و جی کویری برای ساخت مودال, اسلایدر و..
- نکات کاربردی برای کدنویسی بهینه (SEO)
- مینی پروژه های مختلف
- پروژه طراحی قالب وبسایت فروشگاهی
- نکاتی برای ادامه کار و کسب درآمد از طراحی وب
من به HTML و CSS مسلط هستم میشه فقط بخش پروژه رو تهیه کنم؟
این بخش فقط بیست درصد دوره رو شامل میشه و اگر قصد دارید با تهیه نکردن ایین بخش ها در پرداخت صرفه جویی کنید باید گفت که به دلیل پیوستگی مطالب, فقط صرفا نکات ساده این زبان آموزش داده نشده و در این فصل نکات مهمی که در ساخت قالب و انجام پروژه ها بهش برمیخوریم آموزش داده شده که برای تسلط بیشتر از این چند ساعت آموزش استفاده کنید.
اگر خوشمان نیومد چطور؟ چه تضمینی داره؟
ما به کیفیت و اثربخشی این دوره ایمان ۱۰۰% داریم. از همین جهت، اگر بعد تهیه و استفاده از این دوره احساس کردید که مطالب برای شما مفید نیست، کافیه از بخش تماس با ما درخواست بدید تا کمتر از یک روز کاری مبلغ پرداختی دوره، بدون هیچ سوال خاصی به حساب شما بازگردانده شود. پس تهیه این دوره برای شما هیچ ریسکی نخواهد داشت
پشتیبانی دوره چطوره؟
پشتیبانی این دوره بصورت همیشگی از طریق اکانت تلگرام با آیدی و همچنین ایمیل و تیکت پنل کاربری در دسترس هست و میتونید سوالات و چالش هایی که در طول یادگیری یا حتی انجام پروژه بهش برمیخورید رو بپرسید و تکمیل کنید.
با مدرس دوره (حسن شفعی ) بیشتر آشنا شوید
- مدیریت وبسایت نت پارادیس
- طراح قالب مشابه دیجی کالا و قالب نت پارادیس
- ۴ سال مدیریت بخش آشیانه
- ساخت بیش از ۶۰ ربات تلگرام در دو سال اخیر
- ۵ سال سابقه برنامه نویسی PHP
امروزه با توجه به افزایش کاربران اینترنت و محبوبیت آن بساری از کسب و کارها مشغول بازاریابی از طریق سایت هستند. تا بتوانند محصولات و خدمات خود را به دیگران معرفی کنند و به دنبال افرادی هستند که در ساخت قالب ها و انجام تغییرات دلخواه بصورت پروژه ای و برون سپاری مهارت لازم را داشته باشند . تا در این زمینه بتوانند به آنها کمک کنند. که منبع کسب درامدی برای شما خواهد بود.
عضویت در دوره آموزش طراحی سایت بصورت جامع کاربردی و پروژه محور
مخاطبین دوره
دوره جامع طراحی سایت با HTML و CSS هیچ پیش نیازی ندارد .ولی قبل از ثبت نام می بایست به موارد زیر توجه کنید تا در ادامه آموزش به مشکل نخورید.
این دوره برای چه کسانی توصیه می شود؟
- افرادی که می خواهند متخصص طراحی سایت شوند
- برای تمام کسانی که به فکر راه اندازی کسب و کار طراحی سایت خود هستند.
- افرادی که قصد شروع برنامه نویسی وب را دارند اما نقطه شروع را نمی‌دانند.
- افرادی که میخواهند تبدیل طرح دستی یا PSD به کد را یاد بگیرند.
- طراحان سایتی که می خواهند دانش طراحی سایت خود را بروز کنند و یا ریسپانسیو را اصولی یاد بگیرند.
- مدیران سایت یا وبمسترهایی که میخواهند وابستگی به طراح قالب را کم کنند و هزینه های تغییرات جزئی را کاهش بدند.
- افرادی که میخواهد در خانه بنشینند و کسب درآمد آنلاین داشته باشند.
- افرادی که میخواهند وارد دنیای درآمدزایی از طریق پروژه های ساخت سایت شوند.
این دوره برای چه کسانی توصیه نمی شود؟
- کسانی که از درآمد کنونی خود رضایت کامل دارند.
- کسانی که هیچ اعتقادی به درآمد آنلاین ندارند.
- کسانی که علاقه دارند تا با روش های قدیمی، فعالیت نمایند.
- کسانی که تصمیم جدی برای یادگیری یک مهارت جدید ندارند.
سوالات متداول
بصورت غیر حصوری است. در واقع دانلودی می باشد و پس از عضویت فیلم های آموزشی و تمام جلسات به ایمیل شما ارسال خواهد شد. و هم چنین می توانید از طریق حساب کاربری خود به تمام جلسات و بروزرسانی های دوره بطور دائمی دسترسی داشته باشید.
اشکالی ندارد زیرا در هر کجا که باشید می تونید در این دوره شرکت کنید و متخصص طراحی سایت شوید. زیرا این دوره همانطور که در سوال بالا ذکر شده ، دانلودی می باشد. و پس از تکمیل ثبت نام خود فیلم های آموزشی در اختیار شما قرار داده خواهد شد.
بله این دوره آموزشی طراحی سایت با HTML و CSS تکمیل شده و تاکنون بیشتر از ۵۰ فیلم آموزشی تولید شده و می توانید دانلود کنید.
دوره شامل ۳ بخش اصلی است. که مجموعا شامل ۵۱ جلسه جامع کاربردی و پروژه محور می باشد.
۲۷ ساعت آموزش کاربردی و پروژه محور.
بله قطعا اپدیت می شود. و با توجه به پیشنهادات و تغییرات جدید دنیای وب، جلسات آموزشی جدید منتشر خواهد شد و بصورت رایگان از پنل کاربری می توانید دانلود کنید.
میتنی پروژه های آموزشی HTML و CSS
- منوی چندسطحی (dropdown)
- گالری عکس سه بعدی ۳d
- tooltip
- مکعب سه بعدی ۳d
- دکمه برو بالا
- منوی چسبان sticky
+ پروژه طراحی قالب فروشگاه
و موارد مهم دیگری که در این دوره آموزش داده می شود.
بله البته که دارد. کیفیت دوره به گونه ای بالا است که امکان فکر کردن به بازگشت وجه نخواهید بود.
ولی با این حالا جهت اطمینان خاطر شما گارانتی بازگشت وجه را در اختیارتان قرار دادیم.
که درصورتی که رضایت نداشتین می توانید وجه پرداختی خود را دریافت نمائید.
پشتیبانی این دوره بصورت همیشگی از طریق تلگرام و سیستم تیکت در دسترس شما است و هر زمان و در هرکجای آموزش یا ساخت پروژه شخصی به مشکل برخوردید تا رفع آن راهنمایی و به شما کمک میشه.
در اولین جلسه دوره حرفه ای آموزش طراحی سایت در مورد بعضی مفاهیم پایه صحبت می کنیم. همچنین با ویرایشگر انتخابی ما و سرفصل های کلی دوره آشنا خواهید.
مباحث مطرح شده در این جلسه
- آیا این دوره نیاز به پیش نیاز خاصی دارد؟
- معرفی اولیه زبان 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 صبحت می کنیم.
همچنین منابع لازم برای ادامه کار و مینی پروژه هایی را که می توانید برای تمرین استفاده کنید را معرفی می کنیم.
درنهایت نیز در مورد نحوه درآمدزایی و کسب و کار از طریق این مهارت و تخصص هایی که یادگرفتید را به شما می گم. سعی کردم تمام پلن ها و راهکارهایی را که از طریق این مهارت می توانید شروع به کسب درآمد کنید را به شما منتقل کنم.
با سلام
لطفا یه نمونه ویدیو از اموزش برام ارسال نمایید.
میخوام خرید کنم با تشکر
سلام. در همین صفحه بخش دانلود قسمت هایی برای ارزیابی دوره میتونید نمونه رو دانلود کنید
با سلام
مگامنو رو با استفاده از menu walker خود وردپرس کدنویسی کردید، ؟
یعنی در بخش فهرست، برای هر لینک منو، یک چک باکس قرار دادید که با فعال کردن چک باکس، زیرمنوها بصورت مگامنو نمایش داده میشه. مانند تصویر زیر:
https://d33v4339jhl8k0.cloudfront.net/docs/assets/56d89d3a9033600eafd436e0/images/581374cdc697915f88a39dd5/file-ROQz7fci7k.png
——
یا اینکه صرفا کلاس css برای مگامنو ساختید و اون رو در متاباکس css در بخش مربوط به فهرست لینک های منو قرار دادید؟
متنند تصویر زیر:
https://themesharbor.com/wp-content/uploads/2018/12/th_custom_menu_class.jpg
———-
نکته دوم اینکه قالب از منوی آبشاری هم پشتیبانی میکنه ؟
من میخوام این اموزش رو بخرم.
اما پاسخ این دو سوال برام مهمه
سلام بله
با سلام خسته نباشید
میخواستم بدونم در این دوره آموزش کدنویس هوک هی وردپرس هم کامل آموزش میدید
سلام. ممنون
نه در مورد هوک های وردپرس داخل دوره آموزشی داده نمیشه
سلام میخواستم در دوره شرکت کنم لطفا چند نمونه از کلیپهای این دوره را برای من ایمیل کنید
سلام. خدمت شما ایمیل شد
سلام چرا سایت شما کیف پول نداره تا ما کیف پولمونو شارژ کنیم تا از سایتتون خرید کنیم باتشکر.
سلام.
نیازی به کیف پول نیست هر محصولی که نیاز دارید رو به سبد خرید اضافه و مستقیما از درگاه پرداخت خرید کنید
سلام من دوره کامل خریداری کردم اما تو دانلود از بخش ۱ و در بخش بعدی ۱۰ هستش یعنی۹ بخش وجود نداره
سلام. ممنون از خریدتان.
کل دوره در ۸ فایل زیپ است که همین الان در پنل کاربری خود میتوانید هر ۸تا را دانلود و به تمام ویدیوها دسترسی داشته باشید
ببخشید من دوره html css هم میخواستم و اشتباه ۷۹ تومن پرداخت کردم بجای ۸۴ چطور میتونم اونا هم ازتون بخرم؟شماره کارت دارین؟
سلام.
بله امکانش هست. اطلاعات حساب برای پرداخت مابه التفاوت و دریافت کامل دوره ارسال شد.
موفق باشید.
سلام من خریداری کردم دوره رو فقط لینک های دانلود کار نمیده چیکار کنم الان؟
سلام. لینک های اصلاح شده خدمت شما ارسال شد.
سلام ایدی تلگرامتونو لطفه به ایمیلم ارسال کنید کارتون دارم
سلام. بفرمایید از صفحه تماس با ما ارسال کنید
سلام. میتونم باهاتون در ارتباط باشم بزرگوار.
سوالاتی داشتم؟
در ایتا
سلام. بله میتونید از بخش تماس با مای سایت و یکی از راه های ارتباطی دلخواه سوالاتتون رو مطرح کنید.و
موفق باشید.
mishe ye code takhfif bezarin khaheshan
سلام. خود محصول تخفیف دار است و امکان تخفیف نیست
سلام میخواستم دوره طراحی وب رو بخرم
امکانش هست ؟
سلام.
بله امکانش هست
سلام این دوره تکمیل شده عزیز ؟
سلام. بله دوره تکمیل شده است و میتونید همه ویدیوها را یکجا دریافت کنید
سلام خسته نباشید لطفا ایدی تلگرام یا شماره ای که بتونم تو تلگرام با شما در ارتباط باشم رو به ایمیلم بفرسید یک صبحتی داشته باشیم ببنیم میتونیم باهم همکاری داشته باشیم مهندس ممنون میشم
سلام ممنون.
بفرمایید از یکی از روش های صفحه تماس با ما در ارتباط باشید.