دوره آموزشی یادگیری جامع CSS آپدیت (2023)
5 ساعت 30 دقیقهمبتدی2023-08-09
مدرسین

Christina Truong
Educator, Front-End Developer
جزئیات دوره
CSS یا همون Cascading Style Sheets، یه زبان استایلدهی هست که به شما این امکان رو میده تا ظاهر صفحات وبسایتتون رو کنترل کنید. توی این دوره عملی، مربی این دوره، کریستینا ترونگ، مفاهیمی رو توضیح میده که پایهگذار CSS هستن و به شما میگه که چطور میتونید CSSهای موجود رو تغییر بدید و به راحتی خودتون شروع به نوشتن CSS کنید. کریستینا توضیح میده که چطور میتونید رنگها و سایر عناصر طراحی رو به صفحات وبسایت اضافه کنید تا صفحات شما فراتر از فقط متن سیاه روی پسزمینه سفید باشه. اون به شما نشون میده که چطور از انتخابگرها استفاده کنید، چطور مدل باکس (box model) فاصلهها و اندازههای عناصر صفحه رو تعریف میکنه، چطور متن رو استایل بدید و چطور چیدمانهای پایه رو با Flexbox و Grid مدیریت کنید. همچنین با اصول تایپوگرافی، ایجاد چیدمانهای واکنشگرا (responsive) و این که کی باید از خصوصیات float و position استفاده کنید آشنا میشید. در این مسیر، با پروژههای واقعی میتونید دانش خودتون رو تست کنید و تمرین کنید تا مهارتهای جدید رو به کار ببرید.
مهارت ها
CSSWeb StandardsWeb DesignFront-End Web DevelopmentEssential TrainingWeb DevelopmentOpen Source
سرفصل ها
مقدمه
- شروع کار با CSS
- آنچه باید بدانید
- نحوه تکمیل تمرینات
شروع به کار
- HTML و CSS
- کار با فایلهای وب سایت
- کدنویسی با ویرایشگر متن
- ویرایشگر متن خود را سفارشی کنید
- پروژه - بررسی اجمالی و راه اندازی
- از کجا میتوان تصاویر را پیدا کرد
- بهینهسازی تصاویر برای وب
- صراط نسبی و مطلق
- پروژه - افزودن تصاویر و آیکون ها
- ارجاع به CSS
- پروژه - ساخت فایل CSS
مفاهیم اصلی CSS
- مشخصات CSS و W3C
- نحو و اصطلاحات CSS
- مقادیر و واحدهای CSS
- خاصیت رنگ و مقادیر
- ایجاد یک پالت رنگ
- انتخابگرهای نوع و جهانی
- انتخابگرهای شناسه
- انتخاب کنندگان کلاس
- ترکیب کنندهها و لیستهای انتخاب کننده نسل
- خاصیت پس زمینه
- پروژه - آماده سازی فایل CSS
- پروژه - اضافه کردن سبکهای پس زمینه
- شبه طبقات و شبه عناصر
- ارث و آبشار
- خاص بودن
- پروژه - پیوندهای استایل
مدل جعبه CSS
- معرفی مدل جعبه CSS
- خواص مدل جعبه
- سایز بندی جعبه و مدل جعبه تعمیر میشود
- درون خطی، مسدود کردن، و نمایش
- پروژه - سبکها و نمادهای پاورقی
- اشکال زدایی با ابزارهای توسعه دهنده
- مدیریت عجیب و غریب مدل جعبه
- پروژه - به روز رسانی تصویر پس زمینه
- استفاده از مقادیر حاشیه منفی
- تراز وسط با حاشیه
- پروژه - افزودن بستههای محتوا
- پروژه - افزودن تصویر هدر
طرح بندی - شناور و موقعیت
- مقدمه ای بر CSS Layout
- Layouts با خاصیت float
- پاکسازی شناورها
- پروژه - شناور تصاویر و متن
- ملک موقعیت
- موقعیت و z-index
- پروژه - موقعیت یابی ثابت
Layouts - Flexbox و Grid
- معرفی گرید و فلکس باکس
- معرفی فلکس باکس
- فلکس باکس - جهت گیری و سفارش
- سایزبندی با خواص انعطاف پذیر
- تمرین فلکس باکس
- پروژه - فوتر چسبنده با فلکس باکس
- تراز کردن اقلام فلکس
- پروژه - تراز کردن عناصر با Flexbox
- معرفی CSS Grid
- شبکه صریح
- شبکه ضمنی
- افزودن ناودان با خاصیت شکاف
- پروژه - اضافه کردن ستون با Grid
تایپوگرافی
- تایپوگرافی برای وب
- تغییر فونت با font-family
- وزن و سبک قلم
- فونتهای وب با @font-face
- فونتهای وب با فونتهای گوگل
- پروژه - فونتهای گوگل
- ویژگی font-size
- اندازه قلم و قابلیت دسترسی
- تراز کردن متن و تبدیل متن
- ارتفاع خطوط و فاصله حروف
- پروژه - سبکهای تایپوگرافی
- پروژه - دکمهها و فاصله
طرح بندی - روان و پاسخگو
- مقدمه ای بر طراحی واکنش گرا
- مقدمه ای بر پرسشهای رسانه ای
- نقاط انفصال و پرسشهای رسانه ای
- چیدمانهای سیال
- متا تگ viewport
- تست طرحبندیهای واکنشگرا
- پروژه - نقاط شکست
- پروژه - پرسشهای رسانهای - قسمت 1
- پروژه - پرسشهای رسانهای - قسمت 2
- پروژه - پرسشهای رسانهای - قسمت 3
نتیجه
- فراتر از موارد ضروری با CSS ادامه دهید
دوره های مرتبط
- دوره آموزشی جعبه ابزار CSS: نکات و روشهای طراحی و چینش صفحه
- دوره آموزشی CSS: طرحبندیهای پیشرفته با Grid
- دوره آموزشی CSS برای توسعهدهندگان
- دوره آموزشی HTML، CSS و جاوااسکریپت: ساخت وب
- دوره آموزشی طرح بندی قابل دسترسی برای وب
- دوره آموزشی فرم های HTML: قابلیت دسترسی
- دوره آموزشی مقدمه ای بر طراحی و توسعه وب
- دوره آموزشی آن را تمرین کن: طرح بندی CSS