آموزش ساخت وب سایت های دنیای واقعی واکنش گرا با CSS3 v2.0

Build Responsive Real World Websites with CSS3 v2.0

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: CSS3 Flexbox، CSS3 Animations، Transitions، Transformations و طراحی وب پاسخگو را بیاموزید. وب سایت های زیبا بسازید! مهارت های دنیای واقعی برای ساخت وب سایت های دنیای واقعی. از جمله چندین پروژه کوچک! اصول اولیه را بیاموزید، سپس Advanced Selectors، Gradients، Transformations، Transitions، انیمیشن ها، Flexbox و طراحی وب واکنش گرا را یاد بگیرید! کتاب الکترونیکی من "CSS Masterclass" را به صورت رایگان دریافت کنید. این یک کتاب الکترونیکی 180 صفحه‌ای CSS3 با نمونه‌های کدهای تعاملی است که همه در CodePen موجود است. در دوره پرسش و پاسخ پشتیبانی مفید دریافت کنید سخنرانی‌ها، کدها و دارایی‌های طراحی قابل دانلود برای کل پروژه نیازها: بدون نیاز به برنامه‌نویسی یا تجربه طراحی هر کامپیوتری انجام می‌دهد — ویندوز، OSX یا لینوکس شما نیازی به خرید نرم افزار ندارید — ما از بهترین ویرایشگر رایگان توسعه وب در جهان استفاده خواهیم کرد

شما می توانید به سادگی با یادگیری HTML و CSS یک حرفه جدید در توسعه وب راه اندازی کنید. شما نیازی به مدرک دانشگاهی یا نرم افزار پولی ندارید، همه چیز را می توان به صورت رایگان با نرم افزار رایگان و چند ساعت از وقت خود یاد گرفت. این دوره همچنین همراه با کتاب الکترونیکی کامل CSS Masterclass من، به عنوان یک امتیاز اضافی است!

کل این دوره به گونه ای طراحی شده است که شما را از یک مبتدی به یک متخصص CSS برساند تا شما را برای شغلی به عنوان توسعه دهنده وب آماده کند.

خود را با آن ابزارهای وحشتناک سازنده سایت محدود نکنید. آنها ابزارهای جالبی هستند، اما در نهایت خلاقیت شما را محدود می کنند. با یادگیری CSS می توانید خلاقیت خود را آزاد کنید!

این دوره همراه با:

است
  • بیش از 170 درس

  • بیش از 140 کار (در پایان هر درس یافت می شود)

  • کتاب الکترونیکی CSS Masterclass من که نمونه کدهای تعاملی دارد

  • بیش از 25 ماژول خود شامل، بنابراین شما می توانید در صورت تمایل

    از آن رد شوید
  • دسترسی مستقیم به من از طریق بخش Q A

  • دسترسی نامحدود 24/7 از طریق وب سایت، برنامه، تلفن یا حتی تلویزیون شما

  • گواهی پایان کار

  • به گروه پشتیبانی برنامه‌نویس من دسترسی داشته باشید، جایی که می‌توانید مستقیماً از من سؤال بپرسید

  • آزمونها در پایان هر ماژول

این دوره هیچ دانش قبلی در CSS را در نظر نمی گیرد، اما همچنین به بخش های کوچکی تقسیم می شود که به شما امکان می دهد از آن رد شوید (بنابراین لازم نیست همه چیزهایی را که قبلاً در مورد آن می دانید تماشا کنید).

من به بیش از 225000 دانش آموز در Udemy آموزش داده ام، بنابراین می دانید که می توانید به من و آنچه که قرار است به شما یاد بدهم اعتماد کنید. در اینجا چیزی است که برخی از افراد در مورد دوره های دیگر من گفته اند:

  1. "این دوره ارزش انجام آن را دارد، مانند آنچه که من به آن مراحل کودکی می گویم... من دوباره دوره را انجام دادم و تمرین زیادی کردم، اگر تلاش خوبی انجام دادم، گاهی به ویدیویی مراجعه می کنم"

  2. "توضیح بسیار واضحی که چگونه چیزها با مثال های زیادی مثال می زنند. بسیار خوب!"

  3. "این دوره را کاملا دوست دارم! عالی است! با این Udemy Instructor نمی توانید اشتباه کنید."

  4. "اطلاعات عالی. من فکر می کنم که بسیاری از افسانه های آنچه باید و نیاز به دانستن برای به دست آوردن شغلی در زمینه توسعه front end را داشته باشید. A++"

  5. "تجربه خوبی بود. این دوره برای من به عنوان مبتدی عالی بود. اکنون، من به دنبال ایجاد اولین وب سایت خود هستم. با تشکر از شما آقای Kalob Taulien."

آیا به دنبال بهترین راه برای یادگیری نحوه ساخت وب سایت های زیبا با CSS3 هستید؟ در مورد وب‌سایت‌هایی که حتی در تلفن شما ظاهر بهتری دارند چطور؟

آیا می خواهید همه چیز را در یک دوره یاد بگیرید؟ (بدون ارتقا، بدون افزایش فروش .. فقط من و شما، یک سری کد و چند پروژه عالی)

آیا دوره های CSS دیگری را گذرانده اید اما در واقع یاد نگرفته اید که چگونه وب سایت های زیبا و واکنش گرا بسازید؟ یا چیزهایی به شما یاد دادند که نمی توانید در زندگی واقعی از آنها استفاده کنید؟

اگر پاسخ شما یک بله بزرگ است... پس این دقیقا همان دوره ای است که شما به دنبال آن هستید! این یک راه حل برای تمام نیازهای یادگیری CSS شما است!

این دوره بسیار کاربردی است. بیش از 140 درس در پایان آنها وظایفی دارند، بنابراین می توانید با هر چیز جدیدی که یاد گرفته اید، بلافاصله تجربه کسب کنید.

شما قرار است CSS3 پیشرفته شگفت انگیزی را یاد بگیرید مانند:

  • انتقالات

  • شیب ها

  • تحولات

  • انیمیشن ها

  • Flexbox

  • طراحی وب واکنشگرا

CSS Transitions:
شما یاد خواهید گرفت که چگونه به آرامی اجزای وب سایت را با استفاده از انتقال متحرک کنید. مانند زمانی که ماوس خود را روی یک پیوند قرار می دهید و به آرامی رنگ آن تغییر می کند (به جای اینکه فوری باشد.. شبیه یک افکت محو می شود!)

گرادیان:
به فتوشاپ نیازی نیست! ما یاد خواهیم گرفت که چگونه از ابتدا بر شیب ها مسلط شویم. این بسیار ساده تر از آن چیزی است که فکر می کنید و یک جنبه بصری زیبا به وب سایت شما اضافه می کند!

تبدیل‌ها:
درباره تبدیل‌های دو بعدی و سه بعدی خواهید آموخت. مانند بزرگتر کردن یک عنصر اما متناسب نگه داشتن ارتفاع و عرض آن. چرخش عناصر هرگز آسان تر نبوده است! تغییر زاویه دید یک عنصر، زاویه خوبی به عناصر شما اضافه می کند و می تواند متن شما را شبیه مقدمه جنگ ستارگان کند.

انیمیشن‌ها:
انیمیشن‌های CSS3 به شما امکان می‌دهند انیمیشن‌های کامل فقط با CSS ایجاد کنید (بدون نیاز به جاوا اسکریپت). شما می توانید بیش از تغییر اندازه یا رنگ انجام دهید... می توانید وب سایت خود را با انیمیشن های جالب به یک وب سایت برنامه مانند تبدیل کنید. و ما هر یک از ویژگی های انیمیشن را یک به یک با تمرین زیاد در این بین مرور خواهیم کرد. در پایان ماژول انیمیشن ها، شما یک حرفه ای انیمیشن خواهید بود!

Flexbox:
Flexbox احتمالاً مهمترین ویژگی CSS3 است. این به شما امکان می دهد اندازه پایه یک عنصر را تنظیم کنید و به آن اجازه دهید بسته به محتوای دیگر بزرگ یا کوچک شود. می‌توانید بدون جداول یا «هک‌های CSS» محتوا را به صورت عمودی تراز کنید. این طراحی وب ریسپانسیو را بسیار آسان می کند. شما می توانید عناصر HTML خود را بدون نوشتن هیچ HTML (css خالص!) دوباره مرتب کنید. با انتقال، می توانید یک وب سایت بسیار زیبا بسازید. شما تمرین واقعی را با flexbox دریافت خواهید کرد و چگونه می توانید یک وب سایت را واکنش گرا کنید (پروژه ای بر اساس ایجاد یک طرح بندی Flexbox وجود دارد!)

طراحی وب ریسپانسیو (RWD):
دقیقاً بیاموزید که چگونه یک وب سایت را "ریسپانسیو" می کنیم، که در واقع فقط به معنای "زمانی که آن را در تلفن یا لپ تاپ مشاهده می کنید، وب سایت تغییر می کند". ما به طراحی وب واکنش‌گرا، پرسش‌های رسانه‌ای می‌پردازیم و ایجاد وب‌سایت واکنش‌گرای خود را تمرین می‌کنیم!


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

معرفی CSS CSS Introduction

  • معرفی CSS CSS Introduction

  • معرفی CSS CSS Introduction

  • چگونه از این دوره بیشترین بهره را ببرید How To Get The Most From This Course

  • گروه پشتیبانی Support Group

  • گروه پشتیبانی Support Group

  • مقدمه نحو Syntax Introduction

  • مقدمه نحو Syntax Introduction

  • خیلی مهم Very Important

  • خیلی مهم Very Important

  • ویراستاران Editors

  • چگونه سوالات بزرگ بپرسیم How to Ask Great Questions

  • کتاب الکترونیکی CSS Masterclass (رایگان) CSS Masterclass e-book (free)

  • Inline CSS چیست؟ What is Inline CSS?

  • Inline CSS چیست؟ What is Inline CSS?

  • CSS داخلی چیست؟ What is Internal CSS?

  • CSS خارجی چیست؟ What is External CSS?

  • CSS خارجی چیست؟ What is External CSS?

  • امتحان مقدماتی CSS CSS Introduction Quiz

  • امتحان مقدماتی CSS CSS Introduction Quiz

معرفی CSS CSS Introduction

  • چگونه از این دوره بیشترین بهره را ببرید How To Get The Most From This Course

  • ویراستاران Editors

  • چگونه سوالات بزرگ بپرسیم How to Ask Great Questions

  • کتاب الکترونیکی CSS Masterclass (رایگان) CSS Masterclass e-book (free)

  • CSS داخلی چیست؟ What is Internal CSS?

شروع شدن Getting Started

  • انواع رنگ Color Types

  • رنگ های پس زمینه Background Colors

  • رنگ های پس زمینه Background Colors

  • تصاویر پس زمینه Background Images

  • تصاویر پس زمینه Background Images

  • تکرار تصاویر پس زمینه Repeating Background Images

  • مرز ها Borders

  • مدل جعبه (بسیار مهم!) The Box Model (Extremely Important!)

  • لایه گذاری Padding

  • لایه گذاری Padding

  • لبه Margin

  • مرکز کردن یک عنصر Centering an Element

  • طرح کلی Outline

  • مکان نما Cursor

  • یک چکاپ سریع A Quick Checkup

  • یک چکاپ سریع A Quick Checkup

  • شروع مسابقه Getting Started Quiz

  • شروع مسابقه Getting Started Quiz

  • مینی پروژه Mini Project

  • مینی پروژه: راه حل Mini Project: Solution

شروع شدن Getting Started

  • انواع رنگ Color Types

  • تکرار تصاویر پس زمینه Repeating Background Images

  • مرز ها Borders

  • مدل جعبه (بسیار مهم!) The Box Model (Extremely Important!)

  • لبه Margin

  • مرکز کردن یک عنصر Centering an Element

  • طرح کلی Outline

  • مکان نما Cursor

  • مینی پروژه: راه حل Mini Project: Solution

قالب بندی متن Text Formatting

  • رنگ متن Text Color

  • تراز متن Text Alignment

  • تراز متن Text Alignment

  • تزیین متن Text Decoration

  • تزیین متن Text Decoration

  • تبدیل متن Text Transform

  • تورفتگی متن Text Indent

  • تورفتگی متن Text Indent

  • فاصله بین حروف Letter Spacing

  • ارتفاع خط Line Height

  • جهت Direction

  • فاصله کلمات Word Spacing

  • آزمون قالب بندی متن Text Formatting Quiz

قالب بندی متن Text Formatting

  • رنگ متن Text Color

  • تبدیل متن Text Transform

  • فاصله بین حروف Letter Spacing

  • ارتفاع خط Line Height

  • جهت Direction

  • فاصله کلمات Word Spacing

  • آزمون قالب بندی متن Text Formatting Quiz

فونت ها و سبک فونت Fonts and Font Styling

  • سریف مقابل سانس سریف Serif vs. Sans Serif

  • خانواده فونت Font Family

  • تعداد زیادی فونت رایگان Lots of Free Fonts

  • تعداد زیادی فونت رایگان Lots of Free Fonts

  • نوع قلم Font Style

  • نوع قلم Font Style

  • اندازه فونت Font Size

  • اندازه فونت Font Size

  • وزن قلم Font Weight

  • نوع فونت Font Variant

  • نوع فونت Font Variant

  • نمادهای عالی فونت Font Awesome Icons

  • آزمون سبک فونت و فونت Font and Font Styling Quiz

  • آزمون سبک فونت و فونت Font and Font Styling Quiz

فونت ها و سبک فونت Fonts and Font Styling

  • سریف مقابل سانس سریف Serif vs. Sans Serif

  • خانواده فونت Font Family

  • وزن قلم Font Weight

  • نمادهای عالی فونت Font Awesome Icons

پیوندها و "ایالت" آنها Links and their "States"

  • لینک ها معرفی Links Introduction

  • ماوس را روی پیوندها نگه دارید Hover Over Links

  • لینک های بازدید شده Visited Links

  • لینک های بازدید شده Visited Links

  • لینک های فعال Active Links

  • لینک های فعال Active Links

  • مسابقه پیوندها Links Quiz

  • مسابقه پیوندها Links Quiz

پیوندها و "ایالت" آنها Links and their "States"

  • لینک ها معرفی Links Introduction

  • ماوس را روی پیوندها نگه دارید Hover Over Links

انتخابگرهای بهتر Better Selectors

  • انتخابگرهای گروه بندی Grouping Selectors

  • انتخاب کنندگان نسل و ویژگی Descendant Selectors and Specificity

  • انتخاب کنندگان نسل و ویژگی Descendant Selectors and Specificity

  • انتخابگرهای کودک Child Selectors

  • انتخابگرهای مجاور Adjacent Selectors

  • آزمون انتخاب کنندگان بهتر Better Selectors Quiz

  • آزمون انتخاب کنندگان بهتر Better Selectors Quiz

انتخابگرهای بهتر Better Selectors

  • انتخابگرهای گروه بندی Grouping Selectors

  • انتخابگرهای کودک Child Selectors

  • انتخابگرهای مجاور Adjacent Selectors

لیست ها Lists

  • نوع سبک لیست List Style Type

  • نوع سبک لیست List Style Type

  • موقعیت سبک فهرست List Style Position

  • موقعیت سبک فهرست List Style Position

  • تصویر سبک فهرست List Style Image

  • آزمون لیست ها Lists Quiz

  • آزمون لیست ها Lists Quiz

لیست ها Lists

  • تصویر سبک فهرست List Style Image

جداول Tables

  • جداول Tables

  • جداول Tables

  • حاشیه جدول Table Borders

  • حاشیه جدول Table Borders

  • تراز عمودی سلول جدول Table Cell Vertical Align

  • جلوه شناور ردیف جدول Table Row Hover Effect

  • مینی پروژه Mini Project

  • مینی پروژه Mini Project

  • مینی پروژه: راه حل Mini Project: Solution

  • آزمون جداول Tables Quiz

  • آزمون جداول Tables Quiz

جداول Tables

  • تراز عمودی سلول جدول Table Cell Vertical Align

  • جلوه شناور ردیف جدول Table Row Hover Effect

  • مینی پروژه Mini Project

  • مینی پروژه: راه حل Mini Project: Solution

نمایش دادن Display

  • نمایش معرفی Display Introduction

  • نمایش معرفی Display Introduction

  • نمایش بلوک Display Block

  • نمایش درون خطی Display Inline

  • نمایش درون خطی Display Inline

  • نمایش Inline-Block Display Inline-Block

  • نمایش هیچکدام Display None

  • نمایش هیچکدام Display None

  • نمایش مسابقه Display Quiz

  • نمایش مسابقه Display Quiz

نمایش دادن Display

  • نمایش بلوک Display Block

  • نمایش Inline-Block Display Inline-Block

عناصر اندازه گیری Sizing Elements

  • عرض Width

  • ارتفاع Height

  • ارتفاع Height

  • آزمون اندازه گیری عناصر Sizing Elements Quiz

  • آزمون اندازه گیری عناصر Sizing Elements Quiz

عناصر اندازه گیری Sizing Elements

  • عرض Width

موقعیت ها Positions

  • معرفی موقعیت Position Introduction

  • معرفی موقعیت Position Introduction

  • موقعیت نسبی Position Relative

  • موقعیت مطلق Position Absolute

  • موقعیت مطلق Position Absolute

  • موقعیت ثابت شد Position Fixed

  • عناصر همپوشانی با Z-Index Overlapping Elements with Z-Index

  • آزمون موقعیت ها Positions Quiz

موقعیت ها Positions

  • موقعیت نسبی Position Relative

  • موقعیت ثابت شد Position Fixed

  • عناصر همپوشانی با Z-Index Overlapping Elements with Z-Index

  • آزمون موقعیت ها Positions Quiz

سرریز Overflow

  • مقدمه سرریز Overflow Introduction

  • مقدمه سرریز Overflow Introduction

  • اسکرول سرریز Overflow Scroll

  • اسکرول سرریز Overflow Scroll

  • سرریز خودکار Overflow Auto

  • سرریز پنهان Overflow Hidden

  • سرریز پنهان Overflow Hidden

  • امتحان سرریز Overflow Quiz

سرریز Overflow

  • سرریز خودکار Overflow Auto

  • امتحان سرریز Overflow Quiz

شناور و شفاف Float & Clear

  • معرفی شناور Float Introduction

  • معرفی شناور Float Introduction

  • شناور چپ و راست Float Left & Right

  • پاک کردن Clear

  • پاک کردن Clear

  • هک Clearfix Clearfix Hack

  • هک Clearfix Clearfix Hack

  • کدورت Opacity

  • مسابقه شناور و پاک کردن Float & Clear Quiz

شناور و شفاف Float & Clear

  • شناور چپ و راست Float Left & Right

  • کدورت Opacity

  • مسابقه شناور و پاک کردن Float & Clear Quiz

انتخابگرهای پیشرفته Advanced Selectors

  • مقدمه انتخابگرهای پیشرفته Advanced Selectors Introduction

  • انتخابگر ویژگی Attribute Selector

  • انتخابگر دقیق مقدار Exact Value Selector

  • دارای انتخابگر ارزش است Contains Value Selector

  • دارای انتخابگر ارزش است Contains Value Selector

  • با انتخابگر شروع می شود Starts With Selector

  • با انتخابگر شروع می شود Starts With Selector

  • با انتخابگر به پایان می رسد Ends With Selector

  • با انتخابگر به پایان می رسد Ends With Selector

  • آزمون انتخابگرهای پیشرفته Advanced Selectors Quiz

  • آزمون انتخابگرهای پیشرفته Advanced Selectors Quiz

انتخابگرهای پیشرفته Advanced Selectors

  • مقدمه انتخابگرهای پیشرفته Advanced Selectors Introduction

  • انتخابگر ویژگی Attribute Selector

  • انتخابگر دقیق مقدار Exact Value Selector

انتخابگرهای شبه Pseudo Selectors

  • معرفی شبه انتخابگر Pseudo Selector Introduction

  • انتخابگر شناور Hover Selector

  • انتخابگر فرزند اول First Child Selector

  • انتخابگر آخرین فرزند Last Child Selector

  • انتخابگر آخرین فرزند Last Child Selector

  • انتخابگر فوکوس Focus Selector

  • انتخابگر علامت زده شد Checked Selector

  • انتخابگر علامت زده شد Checked Selector

  • انتخابگر غیرفعال Disabled Selector

  • انتخابگر غیرفعال Disabled Selector

  • انتخابگر فعال شد Enabled Selector

  • انتخابگر نیست Not Selector

  • انتخابگر نیست Not Selector

  • آزمون انتخابگرهای شبه Pseudo Selectors Quiz

  • آزمون انتخابگرهای شبه Pseudo Selectors Quiz

انتخابگرهای شبه Pseudo Selectors

  • معرفی شبه انتخابگر Pseudo Selector Introduction

  • انتخابگر شناور Hover Selector

  • انتخابگر فرزند اول First Child Selector

  • انتخابگر فوکوس Focus Selector

  • انتخابگر فعال شد Enabled Selector

عناصر شبه Pseudo Elements

  • قبل از انتخابگر Before Selector

  • قبل از انتخابگر Before Selector

  • بعد از انتخابگر After Selector

  • بعد از انتخابگر After Selector

  • آزمون عناصر شبه Pseudo Elements Quiz

عناصر شبه Pseudo Elements

  • آزمون عناصر شبه Pseudo Elements Quiz

پروژه: از آنچه تاکنون آموخته اید استفاده کنید Project: Use What You Have Learned So Far

  • پروژه The Project

  • پروژه The Project

  • راه حل قسمت 1 The Solution Part 1

  • راه حل قسمت 2 The Solution Part 2

  • راه حل قسمت 3 The Solution Part 3

  • خلاصه CSS1 و CSS2 CSS1 and CSS2 Summary

پروژه: از آنچه تاکنون آموخته اید استفاده کنید Project: Use What You Have Learned So Far

  • راه حل قسمت 1 The Solution Part 1

  • راه حل قسمت 2 The Solution Part 2

  • راه حل قسمت 3 The Solution Part 3

  • خلاصه CSS1 و CSS2 CSS1 and CSS2 Summary

CSS3 مقدمه CSS3 Introduction

  • CSS3 مقدمه CSS3 Introduction

  • CSS3 مقدمه CSS3 Introduction

CSS3 مقدمه CSS3 Introduction

گوشه های گرد CSS3 CSS3 Rounding Corners

  • شعاع مرزی Border Radius

  • تصاویر گرد Round Images

  • تصاویر گرد Round Images

  • گوشه های گرد به صورت جداگانه Individually Rounded Corners

  • مسابقه گوشه های گرد Rounding Corners Quiz

گوشه های گرد CSS3 CSS3 Rounding Corners

  • شعاع مرزی Border Radius

  • گوشه های گرد به صورت جداگانه Individually Rounded Corners

  • مسابقه گوشه های گرد Rounding Corners Quiz

تصاویر پس زمینه CSS3 CSS3 Background Images

  • اندازه های پس زمینه Background Sizes

  • اندازه های پس زمینه Background Sizes

  • چندین تصویر پس زمینه به طور همزمان Multiple Background Images at the Same Time

  • مسابقه تصاویر پس زمینه Background Images Quiz

تصاویر پس زمینه CSS3 CSS3 Background Images

  • چندین تصویر پس زمینه به طور همزمان Multiple Background Images at the Same Time

  • مسابقه تصاویر پس زمینه Background Images Quiz

ویژگی های رنگ جدید CSS3 CSS3 New Color Properties

  • RGBA RGBA

  • RGBA RGBA

  • HSL و HSLA HSL and HSLA

  • Opacity در مقابل آلفا Opacity vs. Alpha

  • Opacity در مقابل آلفا Opacity vs. Alpha

  • مسابقه رنگ های جدید New Colors Quiz

  • مسابقه رنگ های جدید New Colors Quiz

ویژگی های رنگ جدید CSS3 CSS3 New Color Properties

  • HSL و HSLA HSL and HSLA

گرادیان های CSS3 CSS3 Gradients

  • گرادیان های خطی Linear Gradients

  • رنگ های گرادیان خطی و شفافیت Linear Gradient Colors and Transparency

  • تکرار گرادیان های خطی Repeating Linear Gradients

  • گرادیان های شعاعی Radial Gradients

  • گرادیان های شعاعی Radial Gradients

  • تکرار گرادیان های شعاعی Repeating Radial Gradients

  • تکرار گرادیان های شعاعی Repeating Radial Gradients

  • ابزارهای گرادیان شگفت انگیز Amazing Gradient Tools

  • ابزارهای گرادیان شگفت انگیز Amazing Gradient Tools

  • دو ابزار گرادیان مورد علاقه Two Favorite Gradient Tools

  • دو ابزار گرادیان مورد علاقه Two Favorite Gradient Tools

  • آزمون گرادیان Gradients Quiz

  • آزمون گرادیان Gradients Quiz

گرادیان های CSS3 CSS3 Gradients

  • گرادیان های خطی Linear Gradients

  • رنگ های گرادیان خطی و شفافیت Linear Gradient Colors and Transparency

  • تکرار گرادیان های خطی Repeating Linear Gradients

سایه های CSS3 CSS3 Shadows

  • مقدمه سایه Shadow Introduction

  • مقدمه سایه Shadow Introduction

  • سایه های متن Text Shadows

  • سایه های متن Text Shadows

  • سایه های جعبه Box Shadows

  • مینی پروژه: ایجاد یک کارت CSS Mini Project: Creating a CSS Card

  • مینی پروژه: ایجاد یک کارت CSS Mini Project: Creating a CSS Card

  • آزمون سایه ها Shadows Quiz

  • آزمون سایه ها Shadows Quiz

سایه های CSS3 CSS3 Shadows

  • سایه های جعبه Box Shadows

قالب بندی متن CSS3 CSS3 Text Formatting

  • معرفی متن Text Introduction

  • معرفی متن Text Introduction

  • سرریز متن Text Overflow

  • سرریز متن Text Overflow

  • بسته بندی کلمات Word Wrap

  • شکستن کلمه Word Break

  • شکستن کلمه Word Break

  • Text Align Last Text Align Last

  • Text Align Last Text Align Last

  • فونت های سفارشی خود میزبانی شده Self-Hosted Custom Fonts

  • آزمون قالب بندی متن Text Formatting Quiz

  • آزمون قالب بندی متن Text Formatting Quiz

قالب بندی متن CSS3 CSS3 Text Formatting

  • بسته بندی کلمات Word Wrap

  • فونت های سفارشی خود میزبانی شده Self-Hosted Custom Fonts

انتقال CSS3 CSS3 Transitions

  • مقدمه انتقال Transition Introduction

  • اندازه های انتقالی Transitioning Sizes

  • اندازه های انتقالی Transitioning Sizes

  • رنگ های انتقالی Transitioning Colors

  • رنگ های انتقالی Transitioning Colors

  • توابع زمان‌بندی انتقال (منحنی‌های سرعت) Transition Timing Functions (Speed Curves)

  • تاخیر انتقال Transition Delay

  • آزمون انتقال Transitions Quiz

انتقال CSS3 CSS3 Transitions

  • مقدمه انتقال Transition Introduction

  • توابع زمان‌بندی انتقال (منحنی‌های سرعت) Transition Timing Functions (Speed Curves)

  • تاخیر انتقال Transition Delay

  • آزمون انتقال Transitions Quiz

CSS3 تبدیل CSS3 Transformations

  • تبدیل مقدمه Transform Introduction

  • تبدیل مقدمه Transform Introduction

  • ترجمه کردن Translate

  • ترجمه کردن Translate

  • چرخش Rotate

  • مقیاس Scale

  • مقیاس Scale

  • کج شدن Skew

  • تحولات چندگانه Multiple Transformations

  • تحولات سه بعدی 3D Transformations

  • آزمون تحولات Transformations Quiz

CSS3 تبدیل CSS3 Transformations

  • چرخش Rotate

  • کج شدن Skew

  • تحولات چندگانه Multiple Transformations

  • تحولات سه بعدی 3D Transformations

  • آزمون تحولات Transformations Quiz

انیمیشن های CSS3 CSS3 Animations

  • معرفی انیمیشن Animation Introduction

  • معرفی انیمیشن Animation Introduction

  • فریم های کلیدی انیمیشن Animation Keyframes

  • اولین انیمیشن شما Your First Animation

  • اولین انیمیشن شما Your First Animation

  • حالت پر کردن انیمیشن Animation Fill Mode

  • یک انیمیشن چشمک زن ایجاد کنید Create a Blinking Animation

  • یک انیمیشن چشمک زن ایجاد کنید Create a Blinking Animation

  • تعداد تکرار انیمیشن Animation Iteration Count

  • تاخیر انیمیشن Animation Delay

  • تاخیر انیمیشن Animation Delay

  • کارگردانی انیمیشن Animation Direction

  • کارگردانی انیمیشن Animation Direction

  • توابع زمان بندی انیمیشن (منحنی های سرعت) Animation Timing Functions (Speed Curves)

  • انیمیشن مینی پروژه Animation Mini Project

  • انیمیشن مینی پروژه: راه حل Animation Mini Project: Solution

  • مسابقه انیمیشن ها Animations Quiz

انیمیشن های CSS3 CSS3 Animations

  • فریم های کلیدی انیمیشن Animation Keyframes

  • حالت پر کردن انیمیشن Animation Fill Mode

  • تعداد تکرار انیمیشن Animation Iteration Count

  • توابع زمان بندی انیمیشن (منحنی های سرعت) Animation Timing Functions (Speed Curves)

  • انیمیشن مینی پروژه Animation Mini Project

  • انیمیشن مینی پروژه: راه حل Animation Mini Project: Solution

  • مسابقه انیمیشن ها Animations Quiz

CSS3 متفرقه درس ها CSS3 Misc. Lessons

  • ستون ها Columns

  • ستون ها Columns

  • تغییر اندازه Resize

  • اندازه جعبه (بسیار مهم!) Box Sizing (Extremely Important!)

  • متفرقه آزمون دروس Misc. Lessons Quiz

CSS3 متفرقه درس ها CSS3 Misc. Lessons

  • تغییر اندازه Resize

  • اندازه جعبه (بسیار مهم!) Box Sizing (Extremely Important!)

  • متفرقه آزمون دروس Misc. Lessons Quiz

CSS3 Flexbox CSS3 Flexbox

  • معرفی فلکس باکس Flexbox Introduction

  • معرفی فلکس باکس Flexbox Introduction

  • ستون های با اندازه مساوی Equal Sized Columns

  • سفارش فلکس باکس Flexbox Order

  • سفارش فلکس باکس Flexbox Order

  • ردیف ها و ستون های Flexbox Flexbox Rows and Columns

  • Flexbox سطرها و ستون ها را معکوس کرد Flexbox Reversed Rows and Columns

  • Flexbox سطرها و ستون ها را معکوس کرد Flexbox Reversed Rows and Columns

  • پایه فلکس باکس Flexbox Basis

  • بسته بندی فلکس باکس Flexbox Wrap

  • تراز عمودی Flexbox Flexbox Vertical Alignment

  • Flexbox تراز کردن آیتم ها Flexbox Align Items

  • Flexbox محتوا را توجیه می کند Flexbox Justify Content

  • Flexbox محتوا را توجیه می کند Flexbox Justify Content

  • Flexbox Align Self Flexbox Align Self

  • تراز کردن محتوای Flexbox Flexbox Align Content

  • پروژه طرح بندی Flexbox پاسخگو قسمت 1 Responsive Flexbox Layout Project Part 1

  • پروژه طرح بندی Flexbox پاسخگو قسمت 1 Responsive Flexbox Layout Project Part 1

  • پروژه طرح بندی Flexbox Responsive قسمت 2 Responsive Flexbox Layout Project Part 2

  • پروژه طرح بندی Flexbox Responsive قسمت 2 Responsive Flexbox Layout Project Part 2

  • پروژه طرح بندی Flexbox پاسخگو قسمت 3 Responsive Flexbox Layout Project Part 3

  • پروژه طرح بندی Flexbox پاسخگو قسمت 3 Responsive Flexbox Layout Project Part 3

  • آزمون Flexbox Flexbox Quiz

  • آزمون Flexbox Flexbox Quiz

CSS3 Flexbox CSS3 Flexbox

  • ستون های با اندازه مساوی Equal Sized Columns

  • ردیف ها و ستون های Flexbox Flexbox Rows and Columns

  • پایه فلکس باکس Flexbox Basis

  • بسته بندی فلکس باکس Flexbox Wrap

  • تراز عمودی Flexbox Flexbox Vertical Alignment

  • Flexbox تراز کردن آیتم ها Flexbox Align Items

  • Flexbox Align Self Flexbox Align Self

  • تراز کردن محتوای Flexbox Flexbox Align Content

طراحی وب سایت ریسپانسیو Responsive Web Design

  • معرفی طراحی وب پاسخگو (RWD). Responsive Web Design (RWD) Introduction

  • متا تگ طراحی وب ریسپانسیو (RWD). Responsive Web Design (RWD) Meta Tag

  • نسخه ی نمایشی سریع A Quick Demo

  • نسخه ی نمایشی سریع A Quick Demo

  • چیدمان پاسخگو با Flexbox Responsive Layout with Flexbox

  • چیدمان پاسخگو با Flexbox قسمت 2 Responsive Layout with Flexbox Part 2

  • چیدمان پاسخگو با Flexbox قسمت 2 Responsive Layout with Flexbox Part 2

  • حالت چاپ طراحی وب پاسخگو (RWD). Responsive Web Design (RWD) Print Mode

  • حالت چاپ طراحی وب پاسخگو (RWD). Responsive Web Design (RWD) Print Mode

  • پرس و جوهای چند رسانه ای Multiple Media Queries

  • تصاویر واکنش گرا Responsive Images

  • آی فریم های پاسخگو Responsive iFrames

  • آی فریم های پاسخگو Responsive iFrames

  • آزمون طراحی وب سایت واکنش گرا Responsive Web Design Quiz

  • آزمون طراحی وب سایت واکنش گرا Responsive Web Design Quiz

  • خلاصه طراحی وب پاسخگو (RWD). Responsive Web Design (RWD) Summary

طراحی وب سایت ریسپانسیو Responsive Web Design

  • معرفی طراحی وب پاسخگو (RWD). Responsive Web Design (RWD) Introduction

  • متا تگ طراحی وب ریسپانسیو (RWD). Responsive Web Design (RWD) Meta Tag

  • چیدمان پاسخگو با Flexbox Responsive Layout with Flexbox

  • پرس و جوهای چند رسانه ای Multiple Media Queries

  • تصاویر واکنش گرا Responsive Images

  • خلاصه طراحی وب پاسخگو (RWD). Responsive Web Design (RWD) Summary

خلاصه Summary

  • خلاصه و آنچه در ادامه باید یاد گرفت Summary & What To Learn Next

  • خلاصه دوره Course Summary

  • خلاصه دوره Course Summary

خلاصه Summary

  • خلاصه و آنچه در ادامه باید یاد گرفت Summary & What To Learn Next

نمایش نظرات

آموزش ساخت وب سایت های دنیای واقعی واکنش گرا با CSS3 v2.0
جزییات دوره
13 hours
181
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
38,452
4.6 از 5
دارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Kalob Taulien Kalob Taulien

معلم توسعه وب

سلام به همه! من Kalob Taulien هستم.

در اینجا نسخه TL;DR (کوتاه) درباره من است:

  • من از سال 1999 کدنویسی می کنم و از سال 2013 به مردم یاد می دهم که چگونه کدنویسی کنند
  • من بیش از 350000 دانشجوی توسعه وب در سراسر جهان دارم
  • من در تیم توسعه هسته Wagtail CMS هستم (Wagtail شماره 1 محبوب ترین سیستم ساخت وب سایت پایتون است)
  • من تمام تلاشم را می کنم که به هر سوالی که دانش آموزانم دارند پاسخ دهم
  • من عاشق تدریس هستم - این قطعاً یکی از استعدادهای طبیعی من است
  • همچنین من عاشق بز هستم! (اگر ملاقات حضوری داشته باشیم شروع کننده گفتگو با من عالی است)

در زیر می‌توانید تمام دوره‌های Skillshare من را پیدا کنید. دسته بندی ها از ساده ترین به سخت ترین، به جز موارد متفرقه، قرار می گیرند. دوره های کدنویسی در پایان.

اگر در زمینه کدنویسی کاملاً تازه کار هستید، با BEGINNERS WEB DEV شروع کنید. و سپس به سراغ HTML بروید.

اگر یک توسعه دهنده وب با تجربه هستید، می توانید از هر یک از بخش های زیر رد شوید.

اگر می‌خواهید یاد بگیرید که چگونه وب‌سایت‌ها را واقعاً زیبا جلوه دهید و خوب عمل کنید، می‌خواهید به HTML، CSS و جاوا اسکریپت نگاه کنید.

اگر می‌خواهید وب‌سایت‌هایی ایجاد کنید که کاربران بتوانند در آن وارد شوند، حساب کاربری داشته باشند و اطلاعات را ذخیره کنند، می‌خواهید به PHP، Python، Django یا Wagtail نگاه کنید.

آخرین اما نه کم اهمیت، همه باید Git و نحوه استفاده از GitHub را بدانند. این کاملاً حیاتی است که 100٪ همه توسعه دهندگان Git و GitHub را درک کنند. این زبان مخفی است که هر کارفرما به دنبال آن است. من نیز یک بخش کامل در مورد آن دارم.

فراموش نکنید که من را در Skillshare برای دوره های هفتگی جدید دنبال کنید!

کد نویسی مبارک!

Kalob.io — Learn web development from scratch Kalob.io — Learn web development from scratch

توسعه وب را از یک توسعه دهنده دنیای واقعی بیاموزیدKalob [dot] io وب سایتی است که می توانید توسعه وب را از ابتدا یاد بگیرید. ما HTML ، CSS ، JavaScript ، Full Stack Dev و یک دوره PHP را ارائه می دهیم ، و تعداد بیشتری از آنها ارائه می شود! قطعاً بیایید آن را بررسی کنید. و در صورت تمایل به گروه فیس بوک توسعه وب ما با نام آموزش کدنویسی بپیوندید (روی نماد فیس بوک در این صفحه کلیک کنید). ما هزاران توسعه دهنده داریم که همه در حال یادگیری کدنویسی هستند. ما یک گروه پشتیبانی هستیم که در آن پروژه ها ، نکات ، ایده ها ، س questionsالات و موارد دیگر را به اشتراک می گذاریم. اوه ، و عضویت رایگان است!