00:00 / 00:00
1.8x
1.4x
1.0x
0.7x
HD SD
HD
SD
ثبت‌نام رایگان
  • دسترسی به کل جلسات ویدیویی از دوره
  • دسترسی به کل جلسات ویدیویی از دوره
  • اضافه شدن دوره به پروفایل
00:00 / 00:00
1.8x
1.4x
1.0x
0.7x
HD SD
HD
SD

آموزش رایگان Flexbox

دوره‌های رایگان
11 جلسه
100٪ (11 رای)

کاربرد دوره آموزش Flexbox در css چیست؟

Flexbox یک روش طرح‌بندی تک‌بعدی برای چیدمان آیتم‌ها در سطرها و ستون‌های مشخص است. فلکس باکس در واقع کلاسی است که در CSS3 آورده شده و می‌تواند مشکلات رایج در استفاده از کدهای float را رفع کند.

درواقع در گذشته از جدول‌ها (table) برای طرح‌بندی استفاده می‌شد که به هیچ‌وجه ابزار مناسبی برای این کار نبودند. سپس float و positioning به وجود آمدند که نسبت به جدول‌ها ابزارهای سازگارتری بودند، اما بازهم محدودیت‌ها و مشکلات خاص خودشان را داشتند. سرانجام flexbox توانست بر تمام این مشکلات غلبه کرده و طراحی سایت را به کاری لذت‌بخش تبدیل کند.

در دوره آموزش Flexbox ابزارها و کدهایی به شما آموزش داده می‌شود که می‌توانید با کمک آن‌ها به‌راحتی سایت‌های زیبا، رسپانسیو و جذاب طراحی کنید.

با استفاده از فلکس باکس می‌توانید کارهای زیر را به‌راحتی و بدون دردسر انجام دهید:

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

 

در دوره آموزش Flexbox در css به‌جای آموزش پراپرتی‌های فلکس باکس، موارد کاربردی آن را در قالب پروژه و به‌صورت عملی به شما آموزش می‌دهیم؛ بنابراین این دوره یک دوره کاملاً کاربردی است که تمام نکات مربوط به فلکس باکس را در حین انجام پروژه به شما عزیزان آموزش می‌دهد. 

 

دوره آموزش Flexbox در css مناسب چه کسانی است؟

  • کسانی که به HTML & CSS مسلط‌اند و می‌خواهند مهارت‌های خود را ارتقا دهند.
  • کسانی که به ساخت وب‌سایت‌های واکنش‌گرا و جذاب علاقه‌مندند.
  • کسانی که قصد دارند تجربه کاربری سایت خود را بهبود بخشند.
  • برنامه‌نویسانی که در اوایل مسیر طولانی طراحی سایت قرار دارند.

 

 منابع مکمل برای فراگیری دوره آموزش Flexbox در css چیست؟

آموزش HTML & CSS و همچنین فلکس باکس مهارت‌های ابتدایی طراحی سایت است. اگر قصد دارید در این زمینه به پیشرفت‌های چشمگیری دست پیدا کنید و مهارت‌های طراحی سایت خود را افزایش دهید، از دوره‌های آموزشی زیر می‌توانید به‌عنوان منابع مکمل بهره ببرید:

  • آموزش Grid Layout پروژه محور
  • آموزش طراحی سایت با CSS پیشرفته و Sass
  • آموزش  Bootstrap 4
  • آموزش جاوا اسکریپت (Javascript)

 

بعد از فراگیری دوره آموزش Flexbox در css چه مهارت‌هایی کسب خواهید کرد؟

  • طراحی یک سایت رسپانسیو
  • طراحی بخش‌های مختلف یک سایت از جمله هدر، فوتر، navbar، ارتباط با ما و غیره.
  • قراردادن background image و ویو پورت
  • هم‌ترازسازی عناصر
  • تنظیم فونت، سایز و رنگ متن‌ها
  • کار با مدیا کوئری‌ها 
  • آشنایی با انواع کلاس‌های فلکس باکس

 

سرفصل‌های دوره آموزش رایگان Flexbox

فصل اول: آشنایی با FlexBox
00:33 ساعت
00:33
Combined Shape Created with Sketch. 5 جلسه
نمایش جلسات فصل  

در این فصل ابتدا به معرفی فلکس باکس و توضیح چرایی استفاده از آن می‌پردازیم. سپس به سراغ پراپرتی‌ها یا ویژگی‌هایی که این ابزار جذاب در اختیار ما قرار داده است، می‌رویم. از جمله ویژگی‌های کاربردی فلکس باکس عبارت‌اند از: Flex Direction، Flex Wrap، Flex Flow، justify Content، Align & Order.

 

FlexBox چیست؟
"03:48
Flex و Flex Direction
"08:26
Flex Wrap و Flex Flow
"04:14
Justify Content
"05:32
Align و Order
"11:14
فصل دوم: پروژه FlexBox
01:19 ساعت
01:19
Combined Shape Created with Sketch. 6 جلسه
نمایش جلسات فصل  

در این فصل از آموزش flex در css قصد داریم بر اساس مطالب آموخته شده در فصل اول و همچنین نکات اضافه‌تر یک پروژه ایجاد کنیم. ابتدا کلیت پروژه به شما معرفی می‌شود و با ایجاد بخش‌های ابتدایی مانند Navbar آشنا می‌شوید. سپس به طراحی بخش‌های دیگر مانند هدر، فوتر، ارتباط با ما و بخش‌های مختلف می‌پردازیم.

معرفی و آماده سازی پروژه
"17:33
ایجاد Header
"11:49
ایجاد Section ها
"14:32
ایجاد Contact و Footer
"13:04
Responsive پروژه برای دیوایس ها WideScreen
"06:43
پروژه Responsive برای موبایل
"15:53
استاد دوره
علی شیخ

علی شیخ در سال ۱۳۹۴ در رشته مهندسی کامپیوتر فارغ‌التحصیل شد و به عنوان برنامه‌نویس وب در شرکت معدنی و صنعتی چادرملو شروع به کار کرد. تخصص اصلی ایشان در زبان‌های جاوا اسکریپت و php است. وی به دلیل این که به آموزش علاقه زیادی داشت، تصمیم به راه‌اندازی وب‌سایتی در این زمینه به نام وب پروگ گرفت و اکنون پس از ۲ سال توانسته است سهم کوچکی در آموزش به افراد علاقه‌مند به برنامه‌نویسی را داشته باشد .

پیش‌نیاز‌های دوره آموزش رایگان Flexbox

فلکس باکس کلاسی است که توسط css3 برای رفع مشکلات و محدودیت‌هایی در زمینه طراحی و چیدمان آیتم‌ها آورده شده است؛ بنابراین واضح است که برای فراگیری آموزش flexbox باید به کدنویسی به زبان‌های CSS و HTML مسلط باشید. همچنین از آنجایی که پروژه‌ای که قرار است در این دوره انجام دهیم، ایجاد یک سایت رسپانسیو با امکانات متنوع است، توصیه می‌کنیم قبل از شروع آموزش flex در css دوره‌های زیر را بگذرانید:

آموزش HTML و CSS
اطلاعات بیشتر
آموزش رایگان Responsive Layout پروژه محور
اطلاعات بیشتر

نظرات 

تا کنون نظری برای این دوره ثبت نشده است. برای ثبت نظر باید ابتدا در دوره ثبت نام کرده و دانشجوی دوره باشید.

سوالات پرتکرار

آیا ممکن است که درسی ناقص ضبط شده باشد؟
ما همواره تلاش کرده­‌ایم که دروس را به طور کامل ضبط نماییم و در اختیار شما دوستان قرار دهیم. اما گاهی برخی ناهماهنگی ها سبب می شود که یک یا تعدادی از جلسات یک درس ضبط نشود. توضیح این گونه نواقص در توضیح درس­ ها آمده است.
اگر لینک دانلود یا پخش ویدئو مشکل داشت چه باید کرد؟
در صورتی که با هر گونه مشکلی رو به رو شدید می توانید از طریق صفحه ارتباط با ما به ما اطلاع دهید تا ما سریعا مشکل را پیگیری و برطرف نماییم.
آیا امکان دریافت فیلم های یک درس به صورت سی دی یا دی وی دی وجود دارد؟
در حال حاضر امکان ارسال دروس به صورت سی دی یا دی وی دی وجود ندارد.

اطلاعات بیشتر

سرفصل‌های دوره آموزش Flexbox در css چیست؟

در دوره آموزش flex در css با انجام یک پروژه واقعی تمام مباحث مهم و کاربردی فلکس باکس را به شما آموزش می‌دهیم. همان‌طور که می‌دانید یک سایت بخش‌های متنوعی دارد. در این دوره ضمن توضیح و تدریس پراپرتی‌های کاربردی فلکس باکس از این ابزار برای ساخت تمام بخش‌های سایت خود از آن‌ها استفاده می‌کنیم.

ایجاد navbar، تصویر زمینه، ویو پورت، ارتباط با ما، فوتر و غیره از جمله کارهایی است که در این دوره به تدریس آن‌ها می‌پردازیم. همچنین با کمک فلکس باکس می‌توانیم یک سایت رسپانسیو طراحی کنیم که با مرورگرهایی در اندازه‌های ویندوز، تبلت و تلفن همراه سازگار باشد.

 

هدف از یادگیری دوره آموزش flexbox در css چیست؟
هدف از یادگیری دوره آموزش flex در css این است که شما بتوانید این روش را به‌صورت عملی و با انجام یک پروژه واقعی به طور کامل یاد بگیرید. ازآنجایی‌که این دوره یک دوره پروژه محور است، در طول آن به توضیح تمام پراپرتی‌های فلکس باکس نمی‌پردازیم. بلکه تنها پراپرتی‌هایی را آموزش می‌دهیم که بتوانید از کاربردهای آن برای ایجاد یک وب‌سایت جذاب و رسپانسیو استفاده کنید.

×

ثبت نظر

به این دوره از ۱ تا ۵ چه امتیازی می‌دهید؟

فصل اول: آشنایی با FlexBox
00:33 ساعت
00:33
Combined Shape Created with Sketch. 5 جلسه
نمایش جلسات فصل  

در این فصل ابتدا به معرفی فلکس باکس و توضیح چرایی استفاده از آن می‌پردازیم. سپس به سراغ پراپرتی‌ها یا ویژگی‌هایی که این ابزار جذاب در اختیار ما قرار داده است، می‌رویم. از جمله ویژگی‌های کاربردی فلکس باکس عبارت‌اند از: Flex Direction، Flex Wrap، Flex Flow، justify Content، Align & Order.

 

FlexBox چیست؟
"03:48
Flex و Flex Direction
"08:26
Flex Wrap و Flex Flow
"04:14
Justify Content
"05:32
Align و Order
"11:14
فصل دوم: پروژه FlexBox
01:19 ساعت
01:19
Combined Shape Created with Sketch. 6 جلسه
نمایش جلسات فصل  

در این فصل از آموزش flex در css قصد داریم بر اساس مطالب آموخته شده در فصل اول و همچنین نکات اضافه‌تر یک پروژه ایجاد کنیم. ابتدا کلیت پروژه به شما معرفی می‌شود و با ایجاد بخش‌های ابتدایی مانند Navbar آشنا می‌شوید. سپس به طراحی بخش‌های دیگر مانند هدر، فوتر، ارتباط با ما و بخش‌های مختلف می‌پردازیم.

معرفی و آماده سازی پروژه
"17:33
ایجاد Header
"11:49
ایجاد Section ها
"14:32
ایجاد Contact و Footer
"13:04
Responsive پروژه برای دیوایس ها WideScreen
"06:43
پروژه Responsive برای موبایل
"15:53