توسعه دهنده حرفه ای فرانت اند شوید : HTML, CSS3, JavaScript

بیاموزید که چگونه وب سایت های پاسخگو را در مضامین HTML و CSS و وردپرس با استفاده از HTML5 ، CSS3 ، JS و BOOSTRAP
بسازید

عنوان اصلی : Become the Perfect Front End Developer with HTML5/CSS3/JS

سرفصل های دوره :

مقدمه:
مقدمه
دستورالعمل - ساختار هر سخنرانی در این دوره
دستورالعمل ها - نحوه دسترسی به منابع یک سخنرانی و نحوه استفاده از آنها
چرا HTML
W3C و توصیه های آن
ابزارهایی برای استفاده
مبانی HTML:
مقدمه
نمای کلی یک فایل پایه HTML
XHTML
برچسب های HTML
HEAD: چگونه یک مرجع به یک فایل جاوا اسکریپت خارجی اضافه کنیم
HEAD: چگونه یک مرجع به یک شیوه نامه خارجی اضافه کنیم
HEAD: متا تگ ها را شامل شود
HEAD: چگونه یک نماد به صفحه وب خود اضافه کنید
HEAD: سایر عناصر متا
BODY: جایی که محتوای شما قرار دارد
HEADER
عناوین و مقالات
FOOTER
تجربه خود را آزمایش کنید
تمرین: با یک مقاله یک سند HTML ایجاد کنید
عناصر HTML :
مقدمه
آماده سازی چیدمان
عنصر جدول
متن یک جدول را قالب بندی کنید و آن را در یک بلوک DIV وسط قرار دهید
قالب کردن متن در HTML
سلول ها را در یک جدول HTML ادغام کنید
عنصر BR: یک شکست خط به متن اضافه کنید
عنصر HR: یک خط به بخش های جداگانه اضافه کنید
عنصر IFRAME
نمادهای HTML
سرفصل ها و پاراگراف ها
عنصر DIV
بخش ها
عنصر NAV
عناصر Menu و MenuItem
عنصر IMG
لیست در اسناد HTML
پیوندها در HTML
راههای تغییر مسیر با پیوندهای HTML
پیوند با تصاویر
از پیوندها برای تغییر مسیر به محتوای همان صفحه استفاده کنید
تجربه خود را آزمایش کنید
فرم‌های HTML:
مقدمه
فرم ها: نمای کلی
فرم ها: اولین فرم خود را ایجاد کنید
Forms: نوع ورودی Text
Forms: درج و توزیع کادرهای ورودی بیشتر از نوع متن
Forms: شامل مقادیر پیش‌فرض یا متن‌های راهنما در جعبه‌های ورودی از نوع Text باشد
Forms: شی Select
Forms: شی انتخاب شده: با کاربر تعامل دارد
فرم ها: موارد ساختگی و پیش فرض در یک عنصر انتخابی
فرم ها: دکمه های رادیویی
فرم ها: چک باکس ها
فرم ها: ناحیه متن
فرم ها: دکمه ها
فرم ها: دکمه های ارسال
تجربه خود را آزمایش کنید
عناصر رسانه ای:
مقدمه
رسانه و صدا در HTML5
اشیاء ویدیویی در HTML5
Helpers/Plugins: عنصر Object
Helpers/Plugins: عنصر Embed
یک عنصر Flash را جاسازی کنید
یک ویدیوی یوتیوب را جاسازی کنید
فایل های پی دی اف و اس وی جی را جاسازی کنید
بوم
عناصر SVG
CSS و CSS3:
مقدمه
نمای کلی CSS
محل تعیین CSS برای یک فایل HTML
تعریف سبک‌ها را لغو کنید
سبک در مقابل کلاس
کلاس ها را با سبک های درون خطی گسترش دهید
سبک پیش فرض عناصر HTML را تغییر دهید
استایل را برای تمام عناصر یک فایل HTML تعریف کنید
سبک عناصر HTML که توسط یک شناسه شناسایی می شوند را تعریف کنید
کلاس های بیشتری را به یک عنصر HTML اختصاص دهید
از تابع @font-face برای افزودن فونت به صفحه وب خود استفاده کنید
مدل جعبه
تجربه خود را آزمایش کنید
ویژگی های CSS:
مقدمه
ویژگی Border
ویژگی Border radius
خاصیت Box Shadow
ویژگی Border Image
ویژگی های Border Collapse و Border Spacing
ویژگی Border Style
رنگ پس زمینه عناصر HTML را تنظیم کنید
یک تصویر را به عنوان پس زمینه یک عنصر HTML تنظیم کنید
پس زمینه تصویر یک عنصر HTML را سفارشی کنید
شفافیت را روی پس‌زمینه‌ها و حاشیه‌ها تنظیم کنید
شفافیت را با ویژگی opacity تنظیم کنید
حاشیه های یک عنصر HTML را تنظیم کنید
خاصیت Padding
ویژگی Outline
ویژگی Clip
تجربه خود را آزمایش کنید
تمرین: یک صفحه HTML با جدول ایجاد کنید
قالب‌بندی اشیا:
متن را با CSS قالب بندی کنید
پاراگراف ها را قالب بندی کنید
متن طولانی را در یک ظرف قالب بندی کنید
افزودن سایه به متن
پیوندهای HTML را قالب بندی کنید
پیوندهای HTML را با استفاده از کلاس های CSS قالب بندی کنید
پیوندهای HTML را به دکمه تبدیل می کند
لیست‌ها را قالب‌بندی کنید
سبک لیست را سفارشی کنید
کاربردهای لیست های HTML و کلاس ها برای لیست ها
کلاس های سفارشی و سلسله مراتب
سبک های پیش فرض را برای جداول HTML و فرزندان آنها سفارشی کنید (tr، td، ..)
سبک‌های عناصر فرزند بومی والدین با کلاس‌های CSS
زیر کلاس ها و وراثت سبک ها
سبک عناصر درون یا بعد از یک عنصر والد
تجربه خود را آزمایش کنید
تمرین: یک سند HTML با لیستی از پیوندها ایجاد کنید
موضع عناصر HTML با CSS:
مقدمه
عناصر HTML را در مرکز قرار دهید
عناصر HTML را به صورت افقی توزیع کنید
عناصر HTML را به صورت عمودی در وسط قرار دهید
عناصر را ثابت کنید
موقعیت نسبی عناصر HTML
موقعیت مطلق عناصر HTML
عناصر HTML همپوشانی دارند
خاصیت Overflow
عناصر نمایش: درون خطی، بلوک درون خطی، بلوک
از ویژگی display برای تبدیل یک DIV به جدول استفاده کنید
نمای اجمالی مقادیر دیگر برای ویژگی نمایش
پنهان کردن و نمایش عناصر
یک تصویر پس‌زمینه برای بدنه ویژگی پیوست تنظیم کنید
تغییر عناصر
ارتفاع عناصر: 100% و خودکار
سیمحدودیت های ze: حداکثر عرض، حداکثر ارتفاع، حداقل عرض، حداقل ارتفاع
خاصیت اندازه جعبه
تجربه خود را آزمایش کنید
تمرین: یک صفحه HTML با عناصر DIV ایجاد کنید
تمرین: یک فرم optin روی همپوشانی ایجاد کنید
ایجاد جلوه های ویژه با CSS:
مقدمه
پس زمینه عناصر HTML را با گرادیان های خطی تنظیم کنید
نمای کلی شیب های CSS3
انیمیشن با CSS3
با CSS نوارهای مورب رسم کنید
متن راهنمای ابزار را با CSS ایجاد کنید
از عنصر Abbreviation برای ایجاد افکت های Tooltip با CSS استفاده کنید
فیلترهایی برای تصاویر در CSS
مثلث و فلش با CSS ایجاد کنید
برنامه با مثلث های CSS: نکات ابزار و بالن ایجاد کنید
تمرین: یک صفحه HTML با عناصر DIV ایجاد کنید
فرمت عناصر فرم در CSS :
مقدمه
عناصر ورودی را با CSS قالب بندی کنید
وقتی یک عنصر ورودی تمرکز می‌کند، سبک را سفارشی کنید
سبک را به عناصر ورودی با کلاس CSS یا با شناسه اختصاص دهید
اشیاء انتخاب شده را قالب بندی کنید
کادرهای چک و دکمه‌های رادیویی را قالب‌بندی کنید
کشش های ویژه
تمرین: یک سند HTML با فرم سفارشی ایجاد کنید
انتخاب کنندگان CSS:
مقدمه
انتخابگرهای قبل و بعد
انتخابگر شناور
انتخابگرها برای جداول و DIV
انتخابگر فعال
انتخابگر ویژگی
طراحی واکنشگرا:
مقدمه
طراحی وب سایت واکنش گرا
Viewport و تنظیمات HTML
توصیه ها
تابع CSS @media را درک کنید
سبک‌های متن و بلوک‌ها را برای وضوح‌های مختلف سفارشی کنید
جدول HTML پاسخگو
تصاویر پاسخگو
ویدیوهای واکنشگرا
چارچوب های پاسخگو
تمرین: یک صفحه HTML پاسخگو با جدول و رسانه ایجاد کنید
باید بدانید:
مقدمه
واحدهای CSS
خواص با پیشوند فروشنده
از نظرات شرطی برای نسخه های مرورگر اینترنت اکسپلورر استفاده کنید
URL ها و موجودیت های HTML را رمزگذاری کنید
Charsets
نمادهای UTF-8
پیام های HTTP
روش های HTTP
برنامه های کاربردی:
مقدمه
اولین صفحه وب خود را با استفاده از چارچوب بوت استرپ ایجاد کنید
برنامه های کاربردی با پوشش
یک فرم Optiin ایجاد کنید
نمایش ویدیوها روی همپوشانی
دکمه هایی را برای سفارشی سازی عناصر DIV ایجاد کنید
دکمه هایی را برای سفارشی کردن عناصر LINK ایجاد کنید
با استفاده از دکمه های تعریف شده بوت استرپ و سفارشی کردن آنها
یک منوی افقی ایجاد کنید
منوهای عمودی خوبی ایجاد کنید
همه را کنار هم بگذارید
ورزش: خودتان این کار را انجام دهید
برنامه کاربردی با وردپرس: اولین تم وردپرس خود را ایجاد کنید:
مقدمه
وردپرس را نصب کنید
تم وردپرس را انتخاب و تنظیم کنید
بدنه تم موجود را سفارشی کنید
سرصفحه یک تم موجود را سفارشی کنید
سبک یک تم را سفارشی کنید و سبک خود را ایجاد کنید
دانش اساسی جاوا اسکریپت:
مقدمه
جاوا اسکریپت چیست
جاوا اسکریپت در فایل های JS و در کد HTML به عنوان اسکریپت
متغیرها
توابع
از جاوا اسکریپت برای نمایش و پنهان کردن عناصر HTML استفاده کنید
از جاوا اسکریپت برای بدست آوردن مقادیر ویژگی های عناصر HTML استفاده کنید
از جاوا اسکریپت برای تعامل با یک فرم استفاده کنید
نمونه ای از اسکریپت اعتبار سنجی فرم
رویدادها را در عناصر ورودی در یک فرم با جاوا اسکریپت مدیریت کنید
از جاوا اسکریپت برای تغییر سبک CSS عناصر HTML استفاده کنید
تمرین: کد جاوا اسکریپت را به یک سند HTML موجود اضافه کنید
نتیجه گیری
آخرین کلمات
جوایز ویژه:
FireBug: ابزاری برای اشکال زدایی اسکریپت های شما
Filezilla - فایل های خود را آپلود کنید
اعتبارسنجی XHTML
از کجا می توان فونت های وب خوب را پیدا کرد