دوره آموزش 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
جلسه هفدهم: پروژه دوم (وبسایت شیپور)
- طراحی یک فریم‌ورک ساده رسپانسیو
- نوشتن کد به سبک حرفه‌ای ها
- و...
سلام. وقت بخیر. من در حال دیدن دوره ویدیویی هستم و همه چیز عالی هستش. یک سوال دارم.
من با نرم‌افزار ویژوال استودیو دارم آموزش‌ها رو انجام میدم همه‌چیز درسته ولی اتریبیوت‌های class و id رو وقتی Internal می‌نویسم کار می‌کنند اما وقتی External می‌نویسم کار نمی‌کنند. میشه راهنمایی کنید؟ ممنونم
سلام وقت بخیر
احتمالا مشکل از لینک کردن فایل css خارجی هستش. کدهاتون رو چک کنید و مطمعن بشید که فایل css خارجی به درستی به فایل html شما لینک شده
سلام. چرا پروژه دوم رو قرار نمیدید؟ واقعا زمان خیلی زیادی گذشته از اپلود اخرین قسمت از پروژه اول
سلام به شما دوست عزیز، مراحل ضبط پروژه به صورت کامل انجام شده و آموزش‌ها همراه با پروژه نهایی در سایت قرار گرفته که برای یادگیری html و css کافی و بسیار جامع هستند. جهت تسلط بیشتر دانشجویان تصمیم گرفتیم یک پروژه دیگر را به اموزش‌ها کنیم منتها برای آپدیت های بعدی دوره در ماه های آینده. به همین علت در سرفصل‌ها و توضیحات دوره هم نامی از دو پروژه برده نشده.
با سلام و احترام
پیرو اعلام قبلی شما مبنی بر انجام دو پروژه در پایان آموزش html و css و اضافه شدن پروژه ی دوم تا پایان آبان ماه در انتظار بودیم که این دوره ی آموزشی رو خریداری کنیم،اما نه تنها اضافه نشده که دموی پروژه ی دوم هم حذف شده که مربوط به طراحی سایتی مشابه با سایت شیپور بود.
روشن بفرمایید که بالاخره این پروژه به آموزش اضافه خواهد شد یا خیر
سپاسگزار
سلام و عرض ادب خدمت شما دوست عزیز، موضوع از این قرار هستش که این آموزش با یک پروژه نهایی طراحی شده بود منتها به درخواست شرکت‌کنندگان و صلاح‌دید مدرس قرار شد پروژه‌ی دومی هم ایجاد بشه اما نه به عنوان بخشی از آموزش بلکه به عنوان آپدیتی برای آموزش. دلیل اینکه عنوان پروژه دوم از محتوا حذف شده این هستش که شرکت‌کنندگان با این دیدگاه که دو پروژه در دوره وجود داره دوره تهیه نکنن.
لازم به ذکر هستش که این آموزش با توضیحات جامع و یک پروژه نهایی کامل هستش اما جهت تمرین بیشتر عزیزان، پروژه دوم هم ارائه خواهد شد.
از اینکه زمانی برای ارائه گفته شده و انجام نشده از شما عذرخواهی می‌کنیم. پروژه دوم هم درحال ضبط هستش و تمام تلاشمون رو می‌کنیم هر چه سریعتر ارائه بدیم این بخش رو.
سلام وقتتون بخیر
من اطلاعاتم در مورد طراحی سایتو و … تقریبا صفره که با خوندن مقاله شما تقریبا به یک جاهایی رسیدم
حالا می خواستم ببینم که این پکیج شما ب درد منم می خوره که هیچی بلد نیستم؟
ینی از نقطه صفر این پکیج‌ب من اموزش میده یا ن ؟
سلام به شما دوست عزیز، بله برای مشاهده این دوره هیچ پیشنیازی لازم نیست و ما فرض را بر این گذاشتیم که مخاطبان دوره هیچ اطلاعاتی از وب و طراحی ندارند.
سلام وقتتون بخیر
من طراحی سایت با وردپرس رو کاملا بلدم و میخواستم برم دنبال htmlوcssفقط میخواستم بدونم شما تو دورتون کاملا کد هارو معرفی میکنید؟
سلام وقت بخیر، بله دوره کامل هستش و میتونید به html css مسلط بشید
ی سوال دیگه خدمتتون داشتم
سیستم مورد نیاز برای این کار یک دونه لبتاپ کافیه؟
بله یک سیستم معمولی کافیه
سلام خسته نباشید. ایا این پروژه دومی که قرار است انجام شود به صورت رایگان برای مایی که قبلا این پکیج را خریداری کرده ایم قرار میگیرد یا نه باید هزینه ای جدا بپردازیم؟
سلام. بله قطعا همینطوره.
تمام آپدیت های بعدی برای افرادی که این دوره رو تهیه کردن رایگانه
سلام
ببخشید آخرین بروزرسانی برا 18 شهریور بعد اون جلسه ای نیست یا فعلا بروز رسانی نکردین ؟
سلام دوست عزیز از اون تاریخ به بعد دو بار بروزرسانی شده میتونید از طریق پنل کاربریتون فایلهای جدید رو دانلود کنید.
سلام وقتتون بخیر
جسارتا من هیچ اطلاعاتی در مورد طراحی سایت ندارم
میخواستم بدونم این اموزش شامل افرادی شامل بنده هم میشه یا باید پیش زمینه قبلی داشته باشیم؟
سلام وقت بخیر
بله دوره از صفر طراحی شده و پیش نیازی نداره
سلام.
وقت بخیر.
بنده همین الان آموزش این دوره را به پایان رساندم با رضایت کامل.
خیلی خیلی تشکر می کنم از استاد عزیز که با کمال میل و مو به مو آموزش دادن و هیچ فوتی نگه نداشتند و تیم قدرتمندشون.
دوست دارم تا انتها با همین سایت بک اند و فرانت را آموزش ببینم.
سلام محمد جان
خیلی خوشحالم که از آموزش راضی بودید. ممنونم از اعتماد شما
سلام میشه دقیقا بگید این آموزش چند ساعت هس ؟ در بخش مشخصات دوره زدین بیش از 41 ساعت در نمونه ویدیویی که گذاشتید زدین 22 ساعت آموزش ویدیویی ؟
سلام وقت بخیر
دوره با آخرین آپدیت های انجام شده در مجموع ۴۱ ساعت هستش.
کاور ویدیو در ابتدای انتشار دوره ساخته شده و آپدیت‌های دوره درنظر گرفته نشده. ممنون از اطلاع رسانیتون
سلام وقت بخیر ببخشید دوره بوت استرپ هم میذارید؟
سلام وقت بخیر
بله به زودی منتشر خواهد شد