دوره آموزشی Html+Css|آشنایی با تگ های Block & Inline

لیست دروس

به صفحه تمرینات بروید

دوره آموزشی Html+Css

بازگشت به صفحه دوره

مسیر یادگیری

سرفصل‌ها و جلسات

- مقدمه دوره Html+Css 02:53
- مهمترین نکاتی که قبل از شروع دوره باید بدانید؟
- نصب نرم افزار ها و ابزارهای مورد نیاز
- آشنایی با محیط نرم افزار VsCode
- آشنایی با Html و ساختار صفحات وب 13:15
- آشنایی با تگ ها در Html ( بخش اول ) 08:47
- آشنایی با تگ ها در Html ( بخش دوم ) 14:48
- آشنایی با Attribute ها در Html
- آشنایی با مقدمات و دستورات css 12:29
- آشنایی با دستورات css ( بخش دوم )
- آشنایی با استایل دهی به صورت اینترنال
- آشنایی با سلکتورها در css ( کلاس)
- آشنایی با سلکتورها در css ( آیدی)
- آشنایی با فایرباگ در مرورگر فایرفاکس 11:22
- تمرین (1) - مباحث گفته شده
- آشنایی با تگ های Block & Inline 18:08
- آشنایی با دستور display :flex در Css
- شروع پروژه سایت فیلیمو
- ساختاربندی سایت فیلیمو
- ساختار بندی بخش Header در سایت فیلیمو 16:51
- نحوه کار با آیکون ها در سایت
- اتمام ساخت Header سایت فیلیمو
- تمرین ساختار بندی هدر سایت
- آشنایی با سلکتور های تو در تور در css ( سلکتور های فرزند و مستقیم ) 20:13
- تمرین مباحث سلکتور های فرزند و مستقیم
- آشنایی با سلکتورهای عمومی ، and و or
- آشنایی با سلکتور های خویشاوند ( adjacent,sibling selectors)
- آشنایی با سلکتور های خصیصه ( Attribute Selectors )
- آشنایی با شبه کلاس ها ( pseudo Class )
- تمرین ( تمام سلکتورهایی که یاد گرفتیم)
- اولویت استایل دهی در css
- تمرین ( اولویت استایل دهی در css )
- آشنایی با انواع نام گذاری کلاس ها ( camelCase & PascalCase)
- آشنایی با روش BEM برای نام گذاری کلاس ها
- آشنایی با پوزیشن ها در css ( پوزیشن fixed)
- آشنایی با پوزیشن ها در css (پوزیشن sticky&relative)
- آشنایی با پوزیشن ها در css (پوزیشن absolute) 10:01
- استایل دهی به صورت اکسترنال در css
- آشنایی با نحوه الحاق فونت به پروژه
- آشنایی با fontawsome
- نصب و تنظیمات اکستنشن prettier در vscode
- بازنویسی کدهای پروژه بخش اول ( تغییر + کامنت نویسی استایل ها به روش اصولی )
- بازنویسی کدهای پروژه بخش دوم( تغییر کلاس ها به روش BEM )
- بازنویسی کدهای پروژه بخش سوم( تغییر آیکون ها)
- بازنویسی کدهای پروژه بخش چهارم ( تغییر فونت پروژه)
- ساخت اسلایدر پروژه + آشنایی با دستور overflow
- آشنایی با دستور flex-direction و نحوه تغییر چیدمان آیتم ها
- ایجاد آیتم های اسلایدر با استفاده از position و آشنایی با دستور gap
- اتمام ساختار بندی اسلایدر پروژه فیلیمو
- آشنایی با دستورات backgroundSize,image,repeat
- آشنایی با دستور background-position
- آشنایی با دستورات background-attachment & clip
- آشنایی با دستور background-origin
- آشنایی با دستور linergradient ( بخش اول - direction) 20:37
- آشنایی با دستور linergradient ( بخش دوم- color-stop)
- تمرین مباحث gradient
- نحوه استفاده از دستور background
- پشتیبانی مرورگر ها از دستورات css
- اعمال دستور liner-gradient روی پروژه اصلی
- آشنایی با دستور Transition 12:09
- آشنایی با دستور transition-timing-functions
- استفاده از دستور transition در پروژه
- آشنایی با انواع لیست ها در Html
- آشنایی با دستور border در css
- پیاده سازی border در پروژه سایت فیلیمو
- آشنایی با دستور opacity و ساختار بندی پروژه
- ساختار بندی بخش فیلم / سریال پروژه فیلیمو
- استفاده از چندین linear-gradient در یک دستور background
- نحوه ساختار بندی صفحه جزئیات فیلم / سریال در پروژه
- نحوه ساختار بندی صفحه جزئیات فیلم / سریال در پروژه (2)
- آشنایی با دستورات white-space و text-overflow
- نحوه ساختار بندی صفحه جزئیات فیلم / سریال در پروژه (3)
- کار با دستورات filter و backdrop-filter و تفاوت آن ها
- نحوه ساختار بندی صفحه جزئیات فیلم / سریال در پروژه (4)
- استفاده از دستور backdrop-filter در پروژه
- ساختار بندی بخش device و آشنایی با دستور line-height
- استایل دهی بخش device پروژه فیلیمو
- ساختار بندی بخش ویدیوهای آموزشی پروژه بخش 1
- ساختار بندی بخش ویدیوهای آموزشی پروژه بخش 2
- ساختار بندی بخش فیلم های رایگان پروژه
- مروری بر دستورات z-index و linear-gradient در پروژه
- مروری بر دستورات z-index و linear-gradient در پروژه بخش 2
- ساختار بندی بخش سینما آنلاین پروژه بخش 1
- ساختار بندی بخش سینما آنلاین پروژه بخش 2
- ساختار بندی بخش سینما آنلاین پروژه بخش 3
- آشنایی با دستورات overflow:auto و flex-wrap
- ساختار بندی بخش نظرات کاربران بخش اول
- ساختار بندی بخش نظرات کاربران بخش دوم
- آشنایی با دستورات text-shadow و box-shadow در پروژه
- آشنایی با شبه عناصر در سی اس اس
- استفاده از شبه عناصر after&before در پروژه
- ساختار بندی بخش سوالات متداول پروژه
- آشنایی با دستور radial-gradient
- کار کردن با دستور Radial-Gradient در پروژه
- ساختار بندی نهایی بخش پایانی پروژه
- پیاده سازی بخش footer سایت فیلیمو
- آشنایی با دستور Transform
- بخش پایانی گام اول - مباحث Html + Css
- بخش دوم - مقدمات Ui&Ux ، شناخت مفاهیم و بررسی تفاوت آن ها
- بررسی مهمترین گام های UI&UX ( گام اول - تحقیقات و آنالیز پروژه)
- بررسی مهمترین گام های UI&UX ( گام دوم - اسکچ پروژه)
- وایرفریم + پروتوتایپ در UI&UX
- آشنایی با برترین سایت ها و ابزارهای UI&Ux
- شروع پروژه Ui&Ux - تحقیق و ارزیابی یک وب سایت پزشکی
- شروع پروژه Ui&Ux - اسکچ پروژه
- نحوه نصب نرم افزار های فیگما + ادوبی ایکس دی
- آشنایی با محیط نرم افزارهای ادوبی ایکس دی و فیگما
- آشنایی با ابزارهای UI&Ux
- بخش پایانی مباحث Ui&Ux
- تمرین نهایی مباحث Ui&Ux
- آشنایی با فتوشاپ ( مباحث مورد نیاز یک برنامه نویس)

دانلود ویدیو دانلود پیوست

دسته بندی آموزش ها

آشنایی با تگ های Block & Inline

عضو خبرنامه ما شوید

مجوزها و نمادها