آموزش جامع و پروژه محور Css – قسمت سوم

در فصل اول از این دوره آموزشی، در مورد روش های مختلف اضافه کردن Css به صفحه وبسایت، نحوه کار با انتخابگرهای ساده و پیچیده در Css، قوانین Css و ارث بری صحبت کردیم و در فصل دوم نیز در مورد ساخت navigation، مفهوم Stacking Context، استایل دهی، تغییر خصیصه ها با جاوا اسکریپت، مدیریت کردن رویداد (Event) و… صحبت کردیم.

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

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

سرفصل های دوره آموزش جامع و پروژه محور Css – قسمت دوم

فصل اول Responsive

• اضافه کردن تگ Meta و توضیحات اولیه
• Meta Tag Viewport
• توضیحات بیشتر درباره Meta Tag Viewport
• شروع کار با Media Query
• ادامه کار با Media Query
• انتخاب بهترین Break Point
• ریسپانسیو کردن صفحه اصلی
• ریسپانسیو کردن قسمت Plan ها در صفحه اصلی
• ریسپانسیو کردن قسمت Key Feature ها در صفحه اصلی
• کار کردن با عملگرهای منطقی در CSS
• ریسپانسیو کردن صفحه Customers
• ریسپانسیو کردن صفحه Packages
• ریسپانسیو کردن Navigation Bar
• ریسپانسیو کردن Footer و جمع بندی فصل

فصل دوم Styling Forms

• اضافه کردن فرم
• فیکس کردن Footer  در پایین صفحه
• شروع استایل دهی به فرم
• سلکتورهای پیشرفته در CSS
• سلکت کردن Input با تایپ Checkbox
• ادامه استایل دهی به فرم
• ادامه استایل دهی به Checkbox
• اضافه کردن اعتبارسنجی فرم
• استایل دهی به دکمه Signup با خصیصه Disabled

فصل سوم Text & Fonts

• تفاوت بین Generic Families و Font Families
• اضافه کردن فونت Custom با استفاده از @font-face
• استفاده از Google Fonts
• فرمت های مختلف فونت
• اضافه کردن Property های فونت
• اضافه کردن خصیصه line-height
• خصیصه font-display

فصل چهارم Transform

• چرخاندن المان با خصیصه Transform و Transform Origin
• اضافه کردن توابع Skew و Scale
• اضافه کردن خصیصه Perspective و Perspective Origin و فضای 3D
• اضافه کردن خصیصه TranslateZ و Transform Style

فصل پنجم Transition & Animation

• اضافه کردن خصیصه Transition  و کار با Timing Functions
• اضافه کردن خصیصه Animation  و Key Frames
• اضافه کردن انیمیشن به صفحه Customers و نتیجه گیری

حاصل دوره

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

قسمت های دیگر این دوره :

آموزش جامع و پروژه محور Css – قسمت اول

آموزش جامع و پروژه محور Css – قسمت دوم