دوره آموزش HTML و CSS
دوره آموزش HTML و CSS به صورت ویدیویی و پروژه محور : این دوره قدم اول طراحی وب‌سایت است. یعنی برای ورود به دنیای طراحی وب باید به این دو مبحث مسلط باشید.
در این دوره سعی کرده‌ایم تمامی نکات کاربردی HTML5 و CSS3 (به روز‌ترین‌ها) را به زبانی بسیار ساده و در قالب پروژه از صفر (مباحث ابتدایی وب) تا مباحث پیشرفته و حرفه‌ای بیان کنیم. واقعیت این است که هرچقدر هم به مباحث مختلف وب و زبان‌های برنامه‌نویسی آشنایی داشته باشید، باز هم در طراحی وب عدم تسلط شما در HTML و CSS گریبان‌گیرتان خواهد بود.
پس بهتر است همین ابتدا این مباحث را برای یکبار به صورت اصولی و کامل بیاموزید تا در طی سالهای فعالیت خود از آنها استفاده کنید. اگر قصد ورود به بازار داغ طراحی وب‌سایت را دارید اینجا قدم اول است! قدم اول را محکم بردارید.
چرا باید طراحی وب‌سایت را بیاموزیم؟
مزیت‌های این شغل بیشتر از آن چیزی است که فکر می‌کنید. هرچه که زمان می‌گذرد و وابستگی به تکنولوژی بیشتر میشود این کارهم رونق بیشتری می‌یابد. در ادامه چند مورد از مزیت‌های این کار را بررسی می‌کنیم:
۱- استقلال: در این شغل کاملا استقلال دارید. اگر دوست ندارید برای دیگران کار کنید یا در شرکتی استخدام شوید به راحتی به صورت آزادکاری (فریلنسری) کار کنید.
۲- در حال توسعه: بازار کار این شغل واقعا داغ داغ است. محال است به مباحث مسلط باشید و بیکار بمانید! در ایران هم اهمیت داشتن وب‌سایت برای اکثر کسب‌وکارها روشن شده و باعث افزایش تقاضاها در این زمینه شده است.
۳- درآمد مناسب: حتی در دوران رکود هم شاهد درآمدهای بالای طراحان وب هستیم. از آنجا که بازارکار این رشته مناسب است فقط باید تلاش کنید تا به این بازار وارد شوید. درآمد مبلغی این شغل در اکثر کشورهای دنیا و البته در ایران مناسب است.
۴- انعطاف بالا در نحوه کار کردن: در این کار بایدی وجود ندارد. شما می‌توانید در قالب یک تیم فعالیت کنید یا به صورت تک‌نفره به کار مشغول شوید. تعیین کنید در خانه کار می‌کنید یا در یک دفتر و ساعات کاری دلخواه خود را داشته باشید.
و از همه مهمتر این کار واقعا هیجان انگیز است! اینکه به کسب‌وکارهای مختلف کمک می‌کنید تا درآمد اینترنتی داشته باشند و پیشرفت کنند، خود به تنهایی حس رضایت و دلگرمی شیرینی برای شما ایجاد می‌کند.
طراحی وب‌سایت را از کجا شروع کنیم؟
برای شروع طراحی وب‌سایت قبلاً در نقشه راه طراحی وب، بیان کرده بودیم که باید از آموزش HTML و CSS و مبانی وب، کار را شروع کنید. بعد از آن به سراغ سایر مباحث فرانت‌اند مثل java script بروید. در اینجا هم می‌توانید مسیر اصلی خود را انتخاب کنید که اگر قصد دارید یک برنامه‌نویس وب شوید به سراغ یادگیری زبان برنامه‌نویسی بروید و اگر می‌خواهید طراح وب باشید به تکمیل مباحث طراحی بپردازید.
پس در هر صورت شروع کار شما با آموزش HTML و CSS خواهد بود و بعد از آن java script یا jquery در تکمیل مباحث وب به شما کمک خواهد کرد. البته در دوره آموزش HTML و CSS که پیش روی شماست ما مسیر یادگیری را برای شما به خوبی توضیح داده‌ایم تا ابهامی در این زمینه باقی نماند.
معرفی دوره آموزش HTML و CSS
در دوره آموزش ویدیویی HTML و CSS ادمین‌سایت، آموزش با تکمیل مفاهیم ابتدایی و مبانی وب آغاز میشود و با مباحث پیشرفته و پوشش کامل مباحث حرفه‌ای اتمام می‌یابد. نکته‌ای که سعی کرده‌ایم در طول دوره به آن توجه کنیم، خارج کردن آموزش از حالت تئوریات است. در این پکیج آموزشی ما مباحث گوناگون را با چندین مینی پروژه پیش خواهیم برد و در انتهای دوره یک صفحه وب‌سایت کامل را کدنویسی می‌کنیم.
اگر از کاربران ثابت ادمین‌سایت باشید حتماً از کیفیت محتوای وب‌سایت اطلاع دارید، به طور حتم این کیفیت در دوره‌های ویدیویی تا چندین برابر بیشتر رعایت شده است. سادگی در گفتار، کیفیت بالای محتوای آموزشی، کیفیت صدا و تصویر ویدیو‌های ضبط شده، از مهمترین ویژگی‌های این دوره است.
پیش‌نیاز دوره
این دوره به هیچ پیش‌نیازی احتیاج ندارد و تمامی مطالب به زبان ساده و از صفر آموزش داده می‌شوند.
روش دریافت آموزش‌ها
بعد از کلیک روی دکمه‌ی پرداخت و دانلود محصول، به صفحه سبد خرید منتقل می‌شوید. کافیست اطلاعات خود را تکمیل کنید و پرداخت آنلاین هزینه را انجام دهید. بعد از انجام این مرحله لینک‌های دانلود در سوابق خرید حساب کاربری شما قرار می‌گیرد. همچنین لینک‌های دانلود ویدیو ها برای شما ایمیل خواهد شد.
بعد از تماشای این دوره آموزشی:
- با مبانی وب آشنا هستید.
- مسیر یادگیری طراحی وب را به خوبی می‌شناسید.
- می‌توانید حتی صفحات وب‌سایت‌های بزرگ مثل دیجی‌کالا، شیپور و… را به خوبی طراحی کنید.
- دیگر به هیچ آموزشی در این زمینه نیاز نخواهید داشت.
پروژهای انجام شده در این آموزش
در این آموزش ما دو پروژه در دو سطح نیمه‌حرفه‌ای و حرفه‌ای درنظر گرفته‌ایم که در ادامه با کلیک روی لینک‌های زیر می‌توانید دمو این پروژه هارا مشاهده کنید:
مشاهده دمو پروژه اول (نیمه حرفه‌ای)
مشاهده دمو پروژه دوم (حرفه‌ای)
چرا ادمین‌سایت را برای آموزش طراحی وب‌سایت انتخاب کنم؟
- کیفیت مناسب آموزش‌ها
- تسلط و مهارت بالای مدرس
- تعرفه‌های مناسب و مقرون به صرفه
- داشتن نماد اعتماد الکترونیک (اینماد) و پرداخت امن
- تضمین بازگشت وجه در صورت عدم رضایت
- دریافت آپدیت‌های بعدی دوره به صورت رایگان
دمو پکیج آموزش ویدیویی HTML و CSS
سرفصل دوره
جلسه اول: معرفی HTML و CSS
- HTML چیست؟
- تگ (Tag) چیست؟
- آشنایی با Web Browser ها و نحوه کارکردن آنها
- ساختار صفحات HTML
- CSS چیست؟
- چرا باید از CSS استفاده کنیم؟
جلسه دوم: پایه HTML
- نحوه ذخیره‌سازی و اجرای کدهای HTML
- معرفی ادیتور notepad++ و sublime text
- ساختار کدهای HTML
- عناصر HTML
- عناصر تودرتو
- عناصر تهی
- معرفی خصیصه‌ها (attributes)
- حساس به متن بودن در HTML
جلسه سوم: معرفی تگ‌های HTML (بخش اول)
- مجموعه تگ‌های Heading + نکات
- تگ hr (ایجاد خطوط افقی)
- تگ پاراگراف + نکات
- تگ br (شکستن خط)
- تگ pre
- قالب‌بندی متن (b, strong, i, em, del, sub, sup, abbr)
- تگ نقل قول (q و blockquote)
- تگ address
- نحوه درج کامنت در کدهای HTML
- کار با inspect element مرورگر
جلسه چهارم: پایه CSS
- Syntax کدهای CSS
- روش‌های اضافه کردن CSS به صفحه وب (Inline – Internal - External)
- انتخابگر‌های پایه CSS
- تفاوت بین id و class + نکات
- اولویت اعمال استایل در انواع روش‌ها
- ایجاد comment در CSS
جلسه پنجم: معرفی ویژگی‌های CSS (بخش اول)
- ویژگی color
- ویژگی width/height
- ویژگی padding + مشتقات آن
- ویژگی margin + مشتقات آن
- ویژگی border + مشتقات آن
- انواع واحدهای اندازه گیری
- واحدهای اندازه گیری نسبی و مطلق
- انواع سیستم‌های رنگ (hex, rgb, rgba, hsl, hsla)
جلسه ششم: معرفی تگ‌های HTML (بخش دوم)
- تگ a (ایجاد لینک در صفحات وب) + نکات
- تگ img
- انواع مسیردهی (نسبی و مطلق)
- تگ table + نکات
- انواع لیست (ol و ul) + نکات
جلسه هفتم: بلاک‌ها
- عناصر block-level و inline-level
- معرفی تگ div و span
- ویژگی display در CSS
- ساختار کلی باکس‌ها (Margin – Border – Padding - Content)
- ویژگی box-sizing
- ویژگی outline + مشتقات آن
جلسه هشتم: معرفی ویژگی‌های CSS (بخش دوم)
- ویژگی Background + مشتقات آن
- کار با max-width و max-height
- کار با float و چیدمان عناصر + نکات
- ویژگی overflow
- کار با متون در CSS
جلسه نهم: معرفی تگ‌های HTML (بخش سوم)
- کار با تگ Iframe
- فراخوانی کدهای جاوااسکریپت با تگ script
- تگ meta + نکات
- تگ code
جلسه دهم: عناصر layout در HTML
- معرفی تگ section
- معرفی تگ article
- معرفی تگ header
- معرفی تگ footer
- معرفی تگ nav
- معرفی تگ aside
- معرفی تگ figure و figcaption
جلسه یازدهم: ایجاد فرم‌ها در HTML
- معرفی تگ فرم و خصیصه‌های آن
- کار با متد GET و POST
- کار با تگ input
- معرفی انواع input type
- خصیصه‌های مهم input
- کار با تگ select
- کار با تگ textarea
- معرفی تگ‌های fieldset و legend
جلسه دوازدهم: انتخابگر‌های پیشرفته CSS
- انتخابگر پدر و فرزندی
- انتخابگر خواهر و برادری
- انتخاب بر اساس وضعیت ماوس
- انتخاب بر اساس جایگاه عنصر
- انتخاب بر اساس وضعیت لینک‌ها
- انتخاب بر اساس وضعیت فیلدهای فرم
- انتخاب عنصر بر اساس attrtibute های آن
- شبه عنصر
جلسه سیزدهم: معرفی ویژگی‌های CSS (بخش سوم)
- ویژگی opacity + مقایسه آن با background شفاف
- ویژگی border-radius + مشتقات آن
- ویژگی‌های box-shadow و text-shadow
- ویژگی object-fit
جلسه چهاردهم: معرفی عناصر مدیا در HTML
- کار با تگ video
- کار با تگ audio
- معرفی تگ source
- تگ object و embed
جلسه پانزدهم: مباحث پیشرفته
- Gradient background
- ویژگی‌های text-overflow و word-wrap و word-break
- ویژگی transition + مشتقات آن
- ویژگی transform + توابع آن
- کار با keyframes و ویژگی animation
- کار با سیستم چند ستونه و ویژگی column
- کار با Flexbox ها و ویژگی‌های مربوط به آن
- کار با کوئری @media
جلسه شانزدهم: پروژه
- کار با @font-face در CSS
- کار با فونت آیکون‌ها
- طراحی ریسپانسیو
- تعریف متغیر در CSS
- کار با تگ button
سلام وقت بخیر
این دوره مباحث html و CSS رو به طور کامل پوشش داده طوری که من خواستم برم سراغ جاوا اسکریپت دچار مشکل نشم ؟
سلام بله سرفصل‌ها کامل هستش
سلام
من دوره رو تهیه کردم واقعا دوره عالی هستش از آقای سلطانی بابت تدریس عالیشون ممنونم ⚘
فقط من از جلسه ۸ پارت ۳ به بعد هر جلسه ای که دانلود میکنم فایل زیپ رو که باز میکنم متاسفانه داخل فایل هیچ کلیپی نیست و ارور میده 😭🙁
سلام لطفا اگر مشکلی در باز کردن فایلها دارید به پشتیبانی تلگرام پیام بدید
با سلام و عرض احترام،
لطفا بفرمائید که حدودا تا چه زمانی کل جلسات این دوره آموزشی تکمیل و آپلود میشه؟
ضمنا منتظر دوره های جدید مثل جاوا اسکریپت ، بوت استرپ، Sass و PHP با تدریس خوب استاد سلطانی هستیم.
با تشکر
سلام. وقت بخیر
تا چند روز دیگه بصورت کامل تمام جلسات درج خواهند شد.
ممنونم از لطف شما. انشالله بزودی آموزش جاوا اسکریپت هم منتشر خواهد شد.
سلام من این دوره آموزشی ویدیو ای رو خریداری کردم ولی هنوز لینک دانلود فیلم برام نیومده چقدر زمان میبره تا به ایمیلم بفرستین
سلام لینک‌ها به صورت آنی ارسال میشن اگر لینک رو دریافت نکردید به پشتیبانی تلگرام پیام بدید
سلام وقت بخیر
میشه بفرمایین تفاوت بین این دوره که 145 هزار تومن هست رو با دوره رایگان . فقط بحث یادگیری دیداری و نوشتاری ایست؟
سلام خیر، ما در دوره‌های رایگان صرفا جهت آشنایی فقط چند مبحث پایه رو تدریس کردیم ولی دوره ویدیویی میشه گفت صفر تا صد مباحث با جزییات هستش. برای افرادی که می‌خوان طراح وب بشن ساخته شده و کامل هستش
سلام از سایت خیلی خوبتون ممنون،میخواستم بدونم الان ضبط برنامه تمام شده ولی پشتیبانیش ادامه داره بگیرم
از نقشه راه شروع کردم الان اول دوره ی اموزش html رو که رایگان گذاشتید اول شروع کنم بعد این دوره رو یا فرقی نمیکنه اول اینو شروع کنم نیازی به اون نیست
سلام وقت بخیر
بله برای کسانی که آموزش رو تهیه کردن پشتیبانی دوره همیشه وجود داره.
اگر می‌خواید آموزش ویدیویی تهیه کنید نیازی به مشاهده دوره رایگان ندارید.
موفق باشید.
سلام پروژه چند روز دیگه آپلود میشه؟؟
سلام وقت بخیر
۲ پروژه در دو سطح نیمه حرفه‌ای و حرفه‌ای در نظر گرفته شده که هفته آینده منتشر خواهد شد
سلام . وقت به خیر من یک سوال دارم . من شخصا سایتی طراحی کردم با html/css ولی در بخش ارتباط باما نمیدونم چطور درگاه ایمیل رو فعال بسازم یعنی دقیقا نمیدونم باید اون کار رو با php انجام داد یا javascript میشود لطفا راهنماییم کنید ؟ این هم وبسایتم هست
سلام به شما
برای فرم تماس ظاهر رو که با html css می‌زنید اوکیه، برای اینکه اطلاعات فرم جمع آوری بشه و برای شما ایمیل بشه به زبان برنامه‌نویسی مثل php نیاز هستش
از کدوم ادیتور استفاده می کنین؟
سلام دوست عزیز
در این آموزش از sublime text استفاده میشه
اگه با vs code کار کنم مشکلی پیدا نمیکنم؟
خیر مشکلی نداره. از هر ادیتوری که خواستید می‌تونید استفاده کنید.
سلام
امکانش هست دموی پروژه نهایی که صفر تا صد کد میزنیم رو بزارید
ممنونم
سلام وقت بخیر
بله حتما. طی ۲۴ ساعت آینده درج میشه
سلام من این فایل آموزشی را تهیه نمودم ولی از درس شش به بعد خطا می دهد و امکان extract نمی باشد
سلام جناب مشهدی فایلها بررسی شدن و مشکلی ندارن. احتمالا فایلهای شما ناقص دانلود شدن. مجدد بررسی کنید و اگر همچنان این مشکل رو داشتید نام کاربری و رمز ورودتون رو برای پشتیبانی تلگرام ارسال کنید بررسی کنیم.
سلام روز بخیر. بنده دوره رو تهیه کردم و به اخر رسیدم اما گاهی برای مرور نیاز دارم از روی متن ها مواردی رو برای خودم یادآوری کنم و مثلا برای یاداوری یک تگ به فیلم ها مراجعه نکنم. امکانش هست که متن دوره رو که داخل سایت هم بصورت رایگان و فصل به فصل قرار گرفته است رو بصورت پی دی اف داشته باشیم؟
سلام وقت بخیر
ما فرضمون بر این بود که دانشجو خودش طبق نیاز و سلیقه خودش از روی فیلم نوت برداری میکنه.
اما بازم درخواست هایی مثل شما وجود داره که بعضی از دانشجو ها دوست دارن جزوه pdf هم همراه این آموزش باشه.
به همین خاطر تصمیم گرفتیم که اینکارو انجام بدیم و جزوه pdf هم برای دروس بزاریم. البته اینکار یکم زمانبر هستش ولی حتما در یکی از آپدیت های بعدی اینکارو انجام میدیم
موفق باشید