دوره آموزشی HTML و CSS: ساخت Navigation Bars

دوره آموزشی HTML و CSS: ساخت Navigation Bars

⏱️ 2 ساعت 18 دقیقه📈 متوسط📅 2021-08-13

مدرسین

Jen Kramer

Jen Kramer

Teaches web design and development

جزئیات دوره

حتی اگر محصول یا خدمات شما واقعاً اصلی باشد، برنامه یا سایتی که برای آن ایجاد می کنید عناصری را با هر برنامه یا سایت دیگری در این کره خاکی به اشتراک می گذارد. به عنوان مثال، نوار ناوبری متواضع را در نظر بگیرید، که کاربران شما برای یافتن راه خود در سایت شما به آن نیاز دارند. در این دوره، مربی Jen Kramer نحوه ایجاد نوارهای زیبا و قابل دسترسی با استفاده از تکنیک های HTML و CSS را نشان می دهد که در هر زمینه وب کار می کند. جن با جزئیات نشانه گذاری مناسب برای نوار nav و مدل جعبه مربوط به عناصر آن شروع می کند. او سپس نحوه چیدمان نوارهای ناوبری عمودی و افقی را توضیح می دهد - از جمله نحوه قرار دادن لوگو درست در وسط نوار ناوبری افقی. در نهایت، جن چند ترفند پیشرفته را به اشتراک می گذارد، از جمله نحوه ایجاد کشویی و طرح بندی موبایل با دکمه های همبرگر با CSS، بدون نیاز به جاوا اسکریپت.

مهارت ها

HTMLInteraction DesignCSSWeb StandardsWeb DesignFront-End Web DevelopmentUser ExperienceWeb DevelopmentOpen SourceDeep Dive (X:Y)

سرفصل ها

0. مقدمه

  • 01 - مرور وب با نوارهای ناوبری
  • 02 - کار با CodePen

1. مبانی نوار ناوبری

  • 03 - استفاده از HTML برای علامت گذاری نوار ناوبری
  • 04 - درک مدل جعبه یک نوار ناوبری
  • 05 - حذف یک ظاهر طراحی پیش فرض لیست
  • 06 - درک حالت‌های پیوند و سبک دادن به متن

2. میله‌های ناوبری عمودی

  • 07 - ایجاد فضا در نوار ناوبری شما
  • 08 - بزرگ کردن ناحیه قابل کلیک پیوند
  • 09 - نشان دهنده جایی که در مسیریابی هستید
  • 10 - افزودن آیکون به لینک به صورت قابل دسترس
  • 11 - استفاده از تصاویر پس زمینه در لینک‌ها برای استایل سازی
  • 12 - چالش - یک نوار ناوبری عمودی را سبک کنید
  • 13 - راه حل - یک نوار ناوبری عمودی را سبک کنید

3. نوارهای ناوبری افقی

  • 14 - افقی کردن مسیریابی با بلوک درون خطی
  • 15 - افقی کردن مسیریابی با Flexbox
  • 16 - در مرکز و یک ظاهر طراحی شده نوار ناوبری افقی
  • 17 - قرار دادن لوگو در مرکز نوار ناوبری افقی
  • 18 - چالش - یک نوار ناوبری افقی را سبک کنید
  • 19 - راه حل - یک نوار ناوبری افقی را سبک کنید

4. میله‌های ناوبری پاسخگو

  • 20 - برای دکمه همبرگر آیکون اضافه کنید
  • 21 - افزودن عملکرد دکمه همبرگر با CSS
  • 22 - شکل دادن به نوار نوار و دکمه همبرگر با کوئری‌های رسانه ای
  • 23 - چالش - نوار ناوبری خود را پاسخگو کنید
  • 24 - راه حل - نوار ناوبری خود را پاسخگو کنید

5. نوارهای ناوبری تو در تو

  • 25 - اضافه کردن و یک ظاهر طراحی سطح دوم ناوبری عمودی
  • 26 - افزودن لایه دوم جهت یابی افقی
  • 27 - ایجاد کرکره با CSS

نتیجه

  • 28 - دوره‌های دیگر HTML و CSS

مشاهده دوره کامل

رفتن به دوره