ساخت نوار ناوبری، آیتم های لیست HTML را به یک نوار ناوبری تبدیل کنید

تنظیم ارزش ورق های سبک Cascading (CSS) دارایی های سبک Cascading Cascading (CSS) Z-index (CSS) و نحوه تنظیم آن در CSS است؟ دست زدن به سرریز از عنصر ContentSideBar وب سایت NAV وب سایت پروژکتورهای سبک Cascading (CSS) خواص شناور یک وب سایت با استفاده از ورق های سبک آبشار (CSS) Float Property - Coding GallingCreateing یک گالری عکس وب سایت با استفاده از ورق های سبک Cascading (CSS) Float Property - کدگذاری چالش اشاره گر نشانگر ماوس با ورق های سبک Cascading (CSS) با استفاده از صفحات سبک Cascading (CSS) CSS) انتخابات پیشرفته و درک گزینه های بیشتر انتخاب گزینه ها را با استفاده از پرس و جو رسانه ای با استفاده از صفحات سبک Cascading (CSS) که از ویژگی های انتخابی سبک Cascading (CSS)

عنوان اصلی : Making a Navigation Bar Turn the HTML List Items into a Navbar - Coding Challenge

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

کاوش بیشتر با Cascading Style Sheet (CSS3) و ایجاد آسان صفحات وب:
کاوش بیشتر به سبک Cascading Style Sheet (CSS) و CSS3 برای طراحی وب سایت خود با یک استایل
ایجاد شیب خطی برگه سبک آبشاری (CSS).
ایجاد شیب های شعاعی صفحه سبک آبشاری (CSS).
ایجاد تبدیل‌های دوبعدی صفحه سبک آبشاری (CSS).
آموزش در مورد تبدیل های سه بعدی Cascading Style Sheet (CSS) و استفاده از تبدیل های سه بعدی CSS
ساخت انیمیشن با آبشار Style Sheet (CSS)

طرح‌بندی برگه سبک آبشاری (CSS) FlexBox و CSS Grid:
ایجاد چیدمان های وب سایت مدرن با استفاده از طراحی وب واکنش گرا CSS3
CSS FlexBox Layout و ایجاد یک Layout با Flexbox
ایجاد نوار ناوبری با استفاده از Flexbox - چالش کدگذاری
اعمال اندازه عنصر با Flexbox
استفاده از Flexbox برای اندازه دادن موارد در صفحه
ایجاد وب سایت گالری تصاویر - چالش کدنویسی
ایجاد وب سایت با طرح بندی شبکه ای
استفاده از گرید Cascading Style Sheets (CSS) برای ایجاد سطر و ستون
ساخت ردیف‌ها و ستون‌های گرید شیت‌های سبک آبشاری (CSS) و تنظیم عرض
موارد گرید چیست؟
تنظیم نام‌های ناحیه شبکه‌ای برگه‌های سبک آبشاری (CSS).
ایجاد وب سایت و راه اندازی و طراحی صفحات وب با استفاده از شبکه CSS - چالش کدنویسی

پرسش‌ها و پاسخ‌های معمولی برگه‌های سبک آبشاری (CSS) برای آماده‌سازی مصاحبه:
مقدمه - سوالات متداول
کاوش بیشتر در مورد سؤالات شیوه نامه آبشاری (CSS).
مدل جعبه و عملکرد آن
برگ‌های سبک آبشاری (CSS) z-index و استفاده از آن
عناصر شبه در برگه های سبک آبشاری (CSS) با مثال
کلاس های شبه در برگه های سبک آبشاری (CSS) با مثال
مدل جعبه اندازه‌بندی جعبه و برگه‌های سبک آبشاری (CSS).
اندازه فونت برگه های سبک آبشاری (CSS).

چالش‌های برگه‌های سبک آبشاری (CSS):
چالش های Cascading Style Sheets (CSS) - مقدمه
افزودن فونت گوگل
تغییر حرف اول در کلاس های شبه
طراحی 2 ستون با استفاده از شیوه نامه آبشاری (CSS)
محتوا را با استفاده از حاشیه متمرکز کنید
عناصر شناور در کلاس شبه
استفاده از Hover Anchor در کلاس شبه
ایجاد اندازه رسانه پاسخگو
مدل جعبه - تمرین
تصاویر شناور در سمت چپ متن

معرفی جاوا اسکریپت:
معرفی جاوا اسکریپت برای طراحی وب برای تعاملی کردن صفحات
نوشتن کد با جاوا اسکریپت
اجرای جاوا اسکریپت در مرورگر
جاوا اسکریپت و HTML
افزودن نظرات در جاوا اسکریپت
گزینه های خروجی در جاوا اسکریپت
چالش کد جاوا اسکریپت - چالش اقدام خروجی
مقدمه ای بر متغیرهای جاوا اسکریپت
جاوا اسکریپت - متغیرهای Let و Const
کاوش انواع مختلف داده ها
ایجاد ورودی کاربر با کد اعلان در جاوا اسکریپت - چالش کدگذاری
Template Literals در جاوا اسکریپت با استفاده از Backticks
چالش کد جاوا اسکریپت - چالش سریع
کاوش در تبدیل و اجبار نوع جاوا اسکریپت
دریافت نوع داده با استفاده از کد جاوا اسکریپت - چالش کدگذاری
اپراتورهای جاوا اسکریپت چیست و چگونه از آنها استفاده کنیم؟
اپراتورهای واگذاری جاوا اسکریپت
عملگرهای مقایسه جاوا اسکریپت
درست و غلط جاوا اسکریپت - توضیح داده شد
دستورات شرطی If-Else و Else-If جاوا اسکریپت
یادگیری و کاوش کد - چالش کدگذاری
عملگر شرطی جاوا اسکریپت (سه تایی).
عملگرهای منطقی جاوا اسکریپت - مثال
بیانیه سوئیچ جاوا اسکریپت
ایجاد یک بازی ساده "تعویض دوستان" با جاوا اسکریپت - چالش کدنویسی
توابع جاوا اسکریپت
پارامترهای عملکرد جاوا اسکریپت
بازگشت تابع جاوا اسکریپت
تابع جاوا اسکریپت - بیان در مقابل اعلان تابع با مثال
Function Scope در جاوا اسکریپت
عملکرد جاوا اسکریپت با مثال بسته می شود
بازگشت تابع جاوا اسکریپت با مثال های بازگشتی
استفاده از کد جاوا اسکریپت برای ایجاد یک بازی سرگرم کننده - چالش کدنویسی
عنوان تابع جاوا اسکریپت فوری فراخوانی شده (IIFE)
توابع جدید پیکان در جاوا اسکریپت
ایجاد اشیا با جاوا اسکریپت
یادگیری بیشتر درباره اشیاء جاوا اسکریپت - قسمت 1
ایجاد چالش آبجکت ماشین - چالش کدنویسی
آموزش بیشتر در مورد اشیاء جاوا اسکریپت - قسمت 2
ایجاد اشیاء جاوا اسکریپت
ایجاد آرایه هایی برای نگهداری داده ها با جاوا اسکریپت
افزودن مقادیر در آرایه جاوا اسکریپت
استفاده از روش های آرایه در جاوا اسکریپت - قسمت 1
استفاده از روش های آرایه در جاوا اسکریپت - قسمت 2
روش های آرایه جاوا اسکریپت - پیشرفته
ایجاد تکرارهای حلقه جاوا اسکریپت با کد جاوا اسکریپت
دریافت محتویات یک آرایه با یک حلقه
دریافت خواص و مقادیر شیء با جاوا اسکریپت برای حلقه محتویات شیء
روش نقشه آرایه جاوا اسکریپت - کد مثال
ایجاد مقادیر تصادفی با استفاده از شی ریاضی جاوا اسکریپت
دریافت شیء تاریخ فعلی

مدل شیء سند جاوا اسکریپت (DOM):
سند جاوا اسکریپتمدل شیء (DOM) مقدمه
مقدمه ای بر محتوای صفحه وب پویا و تعاملی
انتخاب عناصر مدل شی سند جاوا اسکریپت (DOM)
انتخاب عناصر صفحه وب با استفاده از انتخابگرهای عنصر جاوا اسکریپت
روشهای انتخاب عنصر مدل شیء سند جاوا اسکریپت (DOM) - با استفاده از عنصر QuerySelectorAll
درباره InnerContent دستکاری جاوا اسکریپت بیاموزید
به روز رسانی ویژگی های عنصر با استفاده از جاوا اسکریپت DOM
تنظیم به‌روزرسانی‌های ویژگی عنصر با استفاده از کد جاوا اسکریپت
دستکاری عناصر صفحه - جاوا اسکریپت و کلاس ها
Element Children و عبور از عناصر صفحه وب با استفاده از جاوا اسکریپت
مدل شی سند جاوا اسکریپت (DOM0 - پیمایش بیشتر عناصر از صفحه وب
به روز رسانی و اعمال سبک های دستکاری عنصر با استفاده از جاوا اسکریپت
ایجاد عناصر صفحه با استفاده از کد جاوا اسکریپت
عنصر صفحه Append-Prepend با استفاده از کد جاوا اسکریپت - چالش کدگذاری
حذف یک عنصر از صفحه وب با استفاده از کد جاوا اسکریپت
تکثیر عناصر صفحه با استفاده از کد جاوا اسکریپت
افزودن شنوندگان رویداد
رویدادهای عنصر جاوا اسکریپت حباب و جذب شنوندگان رویداد
انجام حتی بیشتر با شنوندگان رویداد جاوا اسکریپت
شنوندگان رویداد جاوا اسکریپت برای رویدادهای صفحه کلید
ایجاد لیست خرید پویا با استفاده از رویدادهای چالش لیست جاوا اسکریپت - چالش کدنویسی

کدنویسی پیشرفته در جاوا اسکریپت:
کاوش در گزینه های پیشرفته تر با جاوا اسکریپت و تمرکز بر وب سایت های پویا و تعاملی
یادگیری در مورد روش های شماره جاوا اسکریپت
آموزش رشته جاوا اسکریپت - قسمت 1
آموزش روشهای رشته جاوا اسکریپت - قسمت 2.
شی ریاضی جاوا اسکریپت چیست؟
دریافت موارد تصادفی از آرایه ها
ایجاد پس‌زمینه صفحه تصادفی - چالش کدنویسی
بارگیری جاوا اسکریپت پس از بارگیری صفحه
جابجایی عناصر صفحه وب با جاوا اسکریپت - چالش کدنویسی
نوشتن تاریخ در جاوا اسکریپت و به روز رسانی شی تاریخ
تبدیل اشیا به رشته و رشته ها به اشیا با استفاده از JSON.parse و JSON.stringify.
پروتکل فایل در مقابل پروتکل HTTP
Local Storage چیست و چگونه با جاوا اسکریپت مقادیر را در مرورگر ذخیره کنیم؟
تنظیم کد برای اجرا پس از یک بازه زمانی و فاصله زمانی در جاوا اسکریپت
ایجاد نمونه های اولیه جاوا اسکریپت
ایجاد یک درخواست AJAX با جاوا اسکریپت و استفاده از متد () Fetch JavaScript

پرسش‌ها و پاسخ‌های رایج جاوا اسکریپت برای آماده‌سازی و تمرین مصاحبه:
شناخت روش window.cancelAnimationFrame() و window.requestAnimationFrame() Method
parseInt در مقابل روش‌های عددی
بیانیه سوئیچ جاوا اسکریپت
استفاده از Continue و Break-in for loop و while
شنوندگان رویدادهای صفحه کلید
ایجاد عناصر صفحه و افزودن آنها به صورت پویا در صفحه
ایجاد عناصر و ساخت HTML برای بازی تاس
ایجاد مدال پاپ آپ جاوا اسکریپت
استفاده از متد requestAnimationFrame() برای شمارنده ساده
حذف گره Child از جاوا اسکریپت
حالت عجیب و غریب در جاوا اسکریپت
قبل و بعد از درج تریگرها متدهای
append() و prepend().

کاوش در طراحی سریع وب با Bootstrap 4 Frontend Framework:
مقدمه ای بر بوت استرپ
آشنایی با بوت استرپ
راه اندازی صفحه وب با استفاده از برگه های سبک آبشاری (CSS) و فایل های JS
اطلاع از نسخه های بوت استرپ
Grid Bootstrap 4 چیست؟
افزودن کلاس های بوت استرپ و استایلینگ به صفحه وب شما
تنظیم تصاویر در بوت استرپ.
ایجاد هشدار در بوت استرپ
کشف نشان های مؤلفه در بوت استرپ.
راه اندازی Breadcrumbs با استفاده از مؤلفه های بوت استرپ
دکمه های رنگارنگ با بوت استرپ
استفاده از کارت ها در بوت استرپ
ایجاد نمایش اسلاید با Bootstrap Carousel
افزودن و جمع کردن عناصر با استفاده از بوت استرپ
افزودن یک Fluxionality کشویی در Bootstrap
تنظیم فرم ها در بوت استرپ و فیلد استایل
متمایز شدن با اجزای بوت استرپ JumboTron
استایل دادن به لیست های HTML با بوت استرپ
ایجاد یک پاپ آپ مدال با استفاده از بوت استرپ
ایجاد یک کد ناو بوت استرپ پاسخگو
ایجاد نوار ناوبری پاسخگو برای موبایل با استفاده از بوت استرپ
ایجاد پیمایش تک صفحه با استفاده از Bootstrap Scrollspy
افزودن صفحه بندی در بوت استرپ
افزودن ToolTips و Pop-over در Bootstrap
افزودن اسپینرها و نوارهای پیشرفت با استایل های Bootstrap 4
کاوش در مؤلفه های بوت استرپ
راه اندازی یک وب سایت تک صفحه ای از ابتدا
افزودن یک نوار ناوبری پاسخگو Bootstrap
دریافت نمادهای اجتماعی با FontAwesome برای وب سایت
سبک‌های Cascading Style Sheets (CSS) برای بخش‌ها وب‌سایت پاسخگو با استایل بوت استرپ
ایجاد یک وب سایت واکنش گرا با استفاده از کارت های بوت استرپ
ایجاد ستون و ردیف صفحات وب با استفاده از شبکه بوت استرپ
افزودن یک نمایش اسلاید با مؤلفه چرخ فلک بوت استرپ
ایجاد فرم تماس سفارشی بوت استرپ با استفاده از کلاس های استایل فرم بوت استرپ
ایجاد وب سایت ریسپانسیو با استفاده از بوت استرپ
ایجاد Sوب سایت تک صفحه ای با Scrollspy
مروری کامل بر وب سایت واکنش گرا از ابتدا

استفاده از jQuery در صفحات وب شما:
جی کوئری چیست و چگونه کد جی کوئری بنویسیم؟
چرا از jQuery استفاده کنیم؟
جاوا اسکریپت در مقابل jQuery و چگونه از jQuery برای نوشتن کد استفاده کنیم؟
Document Ready چیست و چه زمانی باید از آن استفاده کرد؟
روش های رایج جی کوئری و نحوه کدنویسی در جی کوئری؟
روش های پیکان جی کوئری
ایجاد عناصر جدید برای صفحه با متدهای jQuery Prepend() و Append()
درج عناصر در jQuery
به روز رسانی و افزودن ویژگی های jQuery
ایجاد عنصر jQuery
بازگرداندن مقادیر فیلد
حذف عناصر از صفحه با متدهای jQuery Remove() و Empty()
ایجاد لیست پویا جی کوئری - چالش کدنویسی
درباره کد در jQuery بیشتر بدانید.
تنظیم ویژگی های تصاویر با جی کوئری
چک باکس - چالش کدنویسی
تنظیم رویدادهای ماوس با jQuery
تنظیم رویدادهای صفحه کلید با jQuery و افزودن شنوندگان رویداد با jQuery
افزودن شنوندگان رویداد در jQuery
تنظیم جلوه های جی کوئری - مخفی کردن، نمایش دادن و محو شدن
تنظیم افکت اسلاید جی کوئری
استفاده از متد jQuery Animate برای جابجایی عناصر
ایجاد انیمیشن - چالش کدنویسی
jQuery AJAX چیست و ایجاد درخواست AJAX با استفاده از متدهای jQuery Load() و Get()
آزمایش AJAX با جی کوئری - چالش کدنویسی
حلقه زدن از طریق اشیاء jQuery
عبور از درخت مدل شی سند (DOM) با jQuery
استفاده از فیلترها برای یافتن عناصر با jQuery
بیشتر در مورد jQuery با قطعات کد و نمونه ها بیاموزید

ایجاد یک وب سایت ساده از ابتدا:
ایجاد یک وب سایت ساده از ابتدا
ابزارها و منابع
ایجاد یک وب سایت ساده آبشاری Style Sheets (CSS).
ایجاد یک وب سایت سه ستونی
ایجاد یک وب سایت سه ستونی با استفاده از Flexbox
ایجاد یک وب‌سایت سه ستونی با استفاده از شبکه آبشاری Style Sheets (CSS)
ایجاد یک فرم HTML با استفاده از شبکه آبشاری Style Sheets (CSS)
بررسی وب سایت و نتیجه گیری

ایجاد یک وب سایت سه ستونی از ابتدا:
ایجاد یک وب سایت طراحی سه ستونی از ابتدا
برنامه ریزی وب سایت
تنظیم ساختار HTML
استفاده از شیوه نامه آبشاری (CSS) در HTML
تنظیم ستون های محتوای صفحه
ایجاد پاورقی صفحه با استفاده از شیوه نامه آبشاری (CSS)
ایجاد ستون های پاسخگو با استفاده از شیوه نامه آبشاری (CSS)
ایجاد Navbar Maker با استفاده از Cascading Style Sheets (CSS)
ایجاد یک نوار ناوبری پاسخگو با استفاده از شیوه نامه آبشاری (CSS)
به‌روزرسانی‌های بررسی کد نهایی.

ایجاد وب سایت از ابتدا با طراحی Fat Footer با استفاده از ویژگی Flex:
طراحی وب سایت Fat Footer
تنظیم کد HTML
وب سایت Wireframe
افزودن صفحات HTML از Wireframe.
تنظیم برگه‌های سبک آبشاری (CSS) برای یک صفحه
تنظیم سبک سرصفحه و پاورقی
تنظیم نشان‌واره و ناو در هدر
ایجاد استایل پاورقی با استفاده از برگه های سبک آبشاری (CSS)
افزودن نمادهای اجتماعی FontAwesome
افزودن حق چاپ به پاورقی
نتیجه گیری - وب سایت Fat Footer با ویژگی Flex

ایجاد یک وب‌سایت شبکه‌ای Cascading Style Sheets (CSS) با Flex Navbar:
طراحی وب سایت مدرن با سایت گرید شیت های آبشاری (CSS)
برنامه ریزی وب سایت و Wireframe
ایجاد ساختار صفحه HTML
افزودن محتوای ساختگی با استفاده از HTML
افزودن یک شبکه سبک آبشاری (CSS).
طراحی پاسخگو اولین موبایل
ایجاد یک نوار ناوبری پاسخگو
استفاده از استایل با استفاده از شیوه نامه آبشاری (CSS)
ایجاد سربرگ و پاورقی با استفاده از شیوه نامه آبشاری (CSS)
افزودن رنگ و سبک قلم
نتیجه گیری - گرید برگه های سبک آبشاری (CSS).

ایجاد یک وب سایت تک صفحه ای با نوار ناوبری پایین چسبنده:
سایت تک صفحه ای با نوار ناوبری چسبنده
تنظیم HTML برای صفحه وب
ساختار صفحه HTML
ایجاد سرصفحه صفحه با استفاده از شیوه نامه آبشاری (CSS)
ایجاد بخش خانه با استفاده از شیوه نامه آبشاری (CSS)
بخش‌های سبک با استفاده از برگه‌های سبک آبشاری (CSS)
ایجاد فرم وب
تنظیم پاورقی صفحه
ایجاد نوار ناوبری چسبنده
پاسخگو کردن وب سایت با استفاده از شیوه نامه آبشاری (CSS)