آموزش فرانت اند (Front-End)
1.32K subscribers
156 photos
65 videos
1.71K links
تعرفه تبلیغات :
https://t.me/+w-o6dHW5O31jMWNk
Download Telegram
🔵 کوییز #HTML

🟣 موضوع : ‏پیاده‌سازی lazy loading در HTML

🟢 سوال :

‏آیا استفاده از lazy loading می‌تواند تأثیری بر سئوی وب‌سایت داشته باشد؟

گزینه ۱:
‏بله، ممکن است باعث دیرتر ایندکس شدن تصاویر شود

گزینه ۲:
‏خیر، هیچ تأثیری بر سئو ندارد

گزینه ۳:
‏بله، می‌تواند سرعت بارگذاری صفحه را بهبود بخشد که یک عامل مثبت در سئو است

گزینه ۴:
‏فقط بر سئوی تصاویر تأثیر دارد، نه کل صفحه



🔵 گزینه صحیح: 3

🟢 توضیح :

‏Lazy loading با بهبود سرعت بارگذاری اولیه صفحه می‌تواند به طور غیرمستقیم بر سئو تأثیر مثبت بگذارد، زیرا سرعت بارگذاری یکی از عوامل مهم در رتبه‌بندی موتورهای جستجو است. با این حال، باید اطمینان حاصل شود که موتورهای جستجو می‌توانند محتوای lazy load شده را نیز به درستی ایندکس کنند (که معمولاً با پیاده‌سازی صحیح مشکلی ایجاد نمی‌شود).

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir
This media is not supported in your browser
VIEW IN TELEGRAM
🔵 Eclipse - Workspace

🟢 کیفیت : متوسط

🔴 توجه کنید این ویدیو با کیفیت متوسط می باشد. طی روزهای آینده نسخه های متفاوت با کیفیت بالاتر یا کم حجم تر از این نسخه در کانال قرار داده خواهد شد.

🟣 Eclipse

🟢 زبان آموزش: انگلیسی

🟣 دوره آموزش Eclipse


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir
This media is not supported in your browser
VIEW IN TELEGRAM
🔵 Eclipse - Rearrange Views and Editors

🟢 کیفیت : متوسط

🔴 توجه کنید این ویدیو با کیفیت متوسط می باشد. طی روزهای آینده نسخه های متفاوت با کیفیت بالاتر یا کم حجم تر از این نسخه در کانال قرار داده خواهد شد.

🟣 Eclipse

🟢 زبان آموزش: انگلیسی

🟣 دوره آموزش Eclipse


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir
This media is not supported in your browser
VIEW IN TELEGRAM
🔵 آموزش گیت (Git) - conflict

🟢 کیفیت : متوسط

🔴 توجه کنید این ویدیو با کیفیت متوسط می باشد. طی روزهای آینده نسخه های متفاوت با کیفیت بالاتر یا کم حجم تر از این نسخه در کانال قرار داده خواهد شد.

🟣 آموزش گیت (Git)

🟢 زبان آموزش: فارسی


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir
🌱🌱 نکته روز #HTML

🌿🌿 ‏تنظیم مقدار فعلی با ویژگی value: در هر دو تگ <progress> و <meter>، ویژگی value مقدار فعلی را نشان می‌دهد. برای <progress>، این مقدار میزان پیشرفت را تعیین می‌کند، و برای <meter>، مقدار نشان داده شده در محدوده را مشخص می‌کند.

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir
🔵 کوییز #مفاهیم_کلی_برنامه_نویسی

🟣 موضوع : ‏مفاهیم پایه در برنامه‌نویسی: عناصر اصلی و اجزای یک برنامه

🟢 سوال :

‏کدام یک از موارد زیر یک تکنیک برای سازماندهی کد در یک برنامه است؟

گزینه ۱:
‏استفاده از متغیرهای سراسری

گزینه ۲:
‏استفاده از توابع و کلاس‌ها

گزینه ۳:
‏استفاده از حلقه‌های بی‌نهایت

گزینه ۴:
‏نادیده گرفتن ساختار کد



🔵 گزینه صحیح: 2

🟢 توضیح :

‏استفاده از توابع و کلاس‌ها یک تکنیک برای سازماندهی کد در یک برنامه است.

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir
🔵 کوییز #HTML

🟣 موضوع : ‏ساختار کلی یک سند HTML

🟢 سوال :

‏اولین خط در یک سند HTML5 معمولاً چیست؟

گزینه ۱:
<html lang="en">

گزینه ۲:
<!DOCTYPE HTML>

گزینه ۳:
<head>

گزینه ۴:
<body>



🔵 گزینه صحیح: 2

🟢 توضیح :

‏اولین خط در یک سند HTML5 باید <!DOCTYPE HTML> باشد. این اعلان به مرورگر اطلاع می‌دهد که سند از نوع HTML5 است و باید بر اساس استانداردهای HTML5 رندر شود.

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir
This media is not supported in your browser
VIEW IN TELEGRAM
🔵 آموزش گیت (Git) - آشنایی با ساختار گیت

🟢 کیفیت : متوسط

🔴 توجه کنید این ویدیو با کیفیت متوسط می باشد. طی روزهای آینده نسخه های متفاوت با کیفیت بالاتر یا کم حجم تر از این نسخه در کانال قرار داده خواهد شد.

🟣 آموزش گیت (Git)

🟢 زبان آموزش: فارسی


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir
🔵 کوییز #HTML

🟣 موضوع : ‏استفاده از HTML در بهبود تجربه کاربری

🟢 سوال :

‏استفاده صحیح از کدام تگ‌های HTML برای ایجاد ساختار منطقی و سلسله مراتبی محتوا، به کاربران در درک سازماندهی اطلاعات کمک می‌کند؟

گزینه ۱:
‏`<br>` و `<hr>`

گزینه ۲:
‏`<p>` و `<span>`

گزینه ۳:
‏`<h1>` تا `<h6>`

گزینه ۴:
‏`<a>` و `<img>`



🔵 گزینه صحیح: 3

🟢 توضیح :

‏تگ‌های عنوان (`<h1>` تا `<h6>`) با نشان دادن سطوح مختلف اهمیت محتوا، یک ساختار منطقی و سلسله مراتبی برای صفحه ایجاد می‌کنند و به کاربران کمک می‌کنند تا به سرعت اطلاعات مورد نظر خود را پیدا کنند.

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir
💡 نکته #React

🟣 موضوع : ‏استفاده از useState برای تعریف و مدیریت وضعیت

✨ نکته :

‏اگه مقدار جدیدت به مقدار قبلی بستگی داره، از یه تابع داخل setState استفاده کن: setState(prev => prev + 1). اینطوری مطمئنی مقدار قبلی درسته.💡


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir
🌱🌱 نکته روز HTML

🌿🌿 ‏بررسی و اعتبارسنجی کد HTML: پس از نوشتن کد HTML، آن را با استفاده از ابزارهای اعتبارسنجی HTML (مانند W3C Markup Validation Service) بررسی کنید تا از عدم وجود خطا و رعایت استانداردهای HTML اطمینان حاصل کنید. کد HTML معتبر به نمایش صحیح صفحه در مرورگرهای مختلف و بهبود سئو کمک می‌کند.

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :


آدرس وبسایت:
https://Tutorial24.ir
🔵 کوییز #React_js

🟣 موضوع : ‏مدیریت آیکن‌ها با React‑Icons

🟢 سوال :

‏React Icons چیست؟

گزینه 1:
‏یک کتابخانه UI
گزینه 2:
‏یک کتابخانه مدیریت state
گزینه 3:
‏یک کتابخانه آیکون
گزینه 4:
‏یک فریم‌ورک CSS

🔵 گزینه صحیح: 3

🟢 توضیح :

‏React Icons مجموعه‌ای از کامپوننت‌های React است که آیکون‌های محبوب را در دسترس قرار می‌دهد.


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir
🔵 کوییز #HTML

🟣 موضوع : ‏استفاده از تگ noscript

🟢 سوال :

‏آیا می‌توان اسکریپت‌ها را درون تگ <noscript> قرار داد؟

گزینه ۱:
‏بله، اسکریپت‌های جایگزین برای زمانی که جاوااسکریپت فعال نیست

گزینه ۲:
‏خیر، تگ <noscript> برای نمایش محتوای جایگزین *بدون* استفاده از جاوااسکریپت طراحی شده است

گزینه ۳:
‏فقط اسکریپت‌های بسیار ساده مجاز هستند

گزینه ۴:
‏بستگی به نوع مرورگر دارد



🔵 گزینه صحیح: 2

🟢 توضیح :

‏خیر، قرار دادن اسکریپت‌ها درون تگ <noscript> منطقی نیست، زیرا هدف این تگ ارائه محتوای جایگزین در شرایطی است که جاوااسکریپت کار نمی‌کند.

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir
🔵 کوییز #React_js

🟣 موضوع : ‏معماری Single Page Application (SPA)

🟢 سوال :

‏برای مدیریت وضعیت سراسری در SPA React معمولاً از چه کتابخانه‌ای استفاده می‌شود؟

گزینه 1:
Redux
گزینه 2:
React Router
گزینه 3:
Lodash
گزینه 4:
Tailwind CSS

🔵 گزینه صحیح: 1

🟢 توضیح :

‏Redux یک کتابخانه‌ی محبوب برای مدیریت وضعیت (State) در سطح برنامه است.


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir
💡 نکته #React_js

🟣 موضوع : ‏به‌روزرسانی به نسخه‌ی بعدی React: ملاحظات و تغییرات

✨ نکته :

‏بعد از آپگرید، اپلیکیشن رو اجرا کن و کنسول مرورگر رو با دقت چک کن. خود ری‌اکت معمولاً در مورد API-های منسوخ شده بهت هشدار می‌ده. 🕵️‍♂️⚠️


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir
‏پایتون فقط برای دیتا و هوش مصنوعی نیست! 🐍

‏با Django و Flask می‌تونی وب‌سایت‌های حرفه‌ای و اپلیکیشن‌های تحت وب بسازی.

‏Django یه فریم‌ورک فول استک و Flask یه میکرو فریم‌ورک سبکه. انتخاب با توئه! 😉

‏می‌خوای وب دولوپر بشی؟ پایتون یه انتخاب عالیه! 🚀
‏#پایتون #وب #Django #Flask

https://t.me/python7ir
🔵 کوییز #HTML

🟣 موضوع : ‏پیاده‌سازی lazy loading در HTML

🟢 سوال :

‏آیا می‌توان از ویژگی `loading="lazy"` برای تگ‌های دیگری به جز `<img>` نیز استفاده کرد؟

گزینه ۱:
‏فقط برای تگ‌های `<video>`

گزینه ۲:
‏فقط برای تگ‌های `<iframe>`

گزینه ۳:
‏بله، برای تگ‌های `<img>` و `<iframe>`

گزینه ۴:
‏خیر، فقط برای تگ `<img>` قابل استفاده است



🔵 گزینه صحیح: 3

🟢 توضیح :

‏در حال حاضر، ویژگی `loading="lazy"` به طور گسترده برای تگ‌های `<img>` (تصاویر) و `<iframe>` (محتوای جاسازی شده) پشتیبانی می‌شود.

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir
🔵 کوییز #React_js

🟣 موضوع : ‏ویژگی Suspense for Data Fetching (آزمایشی)

🟢 سوال :

‏برای استفاده از Suspense نیاز داریم از چه هوک جدیدی برای تعویق رندر استفاده کنیم؟

گزینه 1:
useState
گزینه 2:
useTransition
گزینه 3:
useCallback
گزینه 4:
useEffect

🔵 گزینه صحیح: 2

🟢 توضیح :

‏useTransition در Concurrent Mode برای کنترل تعویق رندر در Suspense به کار می‌رود.


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir
🔵 کوییز #HTML

🟣 موضوع : ‏اصول دسترسی‌پذیری در HTML (ARIA)

🟢 سوال :

‏کدام ویژگی ARIA نشان می‌دهد که یک عنصر فرم برای تکمیل شدن توسط کاربر الزامی است؟

گزینه ۱:
‏required (ویژگی HTML5)

گزینه ۲:
aria-required="true"

گزینه ۳:
‏aria-invalid="true" (نشان دهنده خطا)

گزینه ۴:
‏aria-describedby (ارائه توضیحات)



🔵 گزینه صحیح: 2

🟢 توضیح :

‏ویژگی aria-required="true" برای عناصری که باید توسط کاربر پر شوند، استفاده می‌شود و به ابزارهای کمکی اطلاع می‌دهد که این فیلد اجباری است. ویژگی required در HTML5 نیز همین کار را انجام می‌دهد و استفاده از هر دو توصیه می‌شود.

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir
🔵 کوییز #HTML

🟣 موضوع : ‏اصول دسترسی‌پذیری در HTML (ARIA)

🟢 سوال :

‏کدام ویژگی ARIA یک برچسب متنی برای یک عنصر ارائه می‌دهد، به ویژه زمانی که برچسب بصری وجود ندارد یا برای ابزارهای کمکی قابل دسترسی نیست؟

گزینه ۱:
aria-describedby

گزینه ۲:
aria-controls

گزینه ۳:
aria-label

گزینه ۴:
aria-owns



🔵 گزینه صحیح: 3

🟢 توضیح :

‏ویژگی aria-label یک متن جایگزین برای برچسب یک عنصر ارائه می‌دهد. این برای عناصری مانند دکمه‌های آیکون‌دار یا تصاویر بدون متن جایگزین مناسب است.

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir
‏🐍 آموزش پایتون: رشته‌ها و ایندکسینگ 🔤

‏رشته‌ها تو پایتون مثل یه صف از کاراکترها هستن. "Hello" یه رشته‌ست!

‏برای دسترسی به هر حرف، از ایندکس استفاده کن. ایندکس از 0 شروع میشه!

```python
name = "Python"
‏print(name[0]) # خروجی: P
‏print(name[1]) # خروجی: y
```

‏حواست باشه ایندکس بیرون از محدوده رشته خطا میده! 😉

https://t.me/python7ir