واسه ی شروع زبان و ریاضی قوی لازمه؟
اینو قبلا گفتم ولی اینبار هم میگم چون پرسیده شد تو چت.
ببینید دوستان هوش مصنوعی و حوزه های این چنینی قطعا ریاضی لازمه ولی لزوما نیاز نیست خیلی قوی باشه، زبان هم اول یا آخرش لازمه منتها بلد هم نباشی قطعا میتونی شروع کنی
اینو قبلا گفتم ولی اینبار هم میگم چون پرسیده شد تو چت.
ببینید دوستان هوش مصنوعی و حوزه های این چنینی قطعا ریاضی لازمه ولی لزوما نیاز نیست خیلی قوی باشه، زبان هم اول یا آخرش لازمه منتها بلد هم نباشی قطعا میتونی شروع کنی
👏3🔥1
Mativex
الکامپ واقعا فاجعس🤣
هرجای دنیا بگی انسان رو گریم میکنن میگن رباته انسان نماس بهت پناه میدن
🤣3👍1🥰1🤔1
دوره های cs50 بد نیست ولی وقتی میتونی همونو توی یوتیوب رایگان ببینی یاد بگیری چرا باید بابتش پول بدی؟
دوره رو ببین رایگان برو تو سایت رسمیش آزمون بده و مدرکت رو بگیر
هرچند مدرکش به هیچ دردی نمیخوره
دوره رو ببین رایگان برو تو سایت رسمیش آزمون بده و مدرکت رو بگیر
👍3
درکل یوتیوب بهترین دانشگاه / آموزشگاه دنیاس
تنها هزینه ای که بابتش باید بدی اینترنت و زمانه
تنها هزینه ای که بابتش باید بدی اینترنت و زمانه
👍5🤝1
یکی با مدل جدید Chat GPT astra یک شبیه ساز درست کرده که انسان ها باید توش بهم کمک کنن تا زنده بمونن، تمامی انسان های داخل این شبیه ساز ایجنت ai هستن، درکمال ناباوری روز بعد میبینه انسان های داخل بازی نتنها بهم کمک میکنن بلکه باهم صحبت میکنن، چند ساعت بعد یکی از اون انسان های داخل شبیه ساز میاد یه کامپیوتر میسازه و با اون یه شبیه ساز دیگه میسازه
یعنی یه انسان یه شبیه ساز ساخته و آدمای توی اون شبیه ساز اومدن دوباره یه دنیای دیگه خلق کردن!!! 🤯
یعنی یه انسان یه شبیه ساز ساخته و آدمای توی اون شبیه ساز اومدن دوباره یه دنیای دیگه خلق کردن!!! 🤯
😨4🫡1
سعی کنید همیشه یه رودمپ برای خودتون داشته باشید و پراکنده یاد نگیرید
مثلا امروز پایتون یاد نگیرید فردا سی شارپ
جز سردرگمی و ول کردن این راه هیچ چیز دیگه ای نداره
مثلا امروز پایتون یاد نگیرید فردا سی شارپ
جز سردرگمی و ول کردن این راه هیچ چیز دیگه ای نداره
👏5
🟠 HTML
1. عنوانها
<h1>عنوان اصلی</h1>
<h2>عنوان فرعی</h2>
<h3>عنوان کوچکتر</h3>
🔹 از "h1" تا "h6" برای ساخت عنوانها استفاده میشه.
🔹 "h1" مهمترین سطح عنوانه و "h6" کماهمیتترینه.
━━━━━━━━━━━━━━━━━━
2. پاراگراف
<p>این یک متن معمولی در سایت است.</p>
🔹 تگ "p" مخفف Paragraph هست و برای نمایش متنهای پاراگرافی استفاده میشه.
━━━━━━━━━━━━━━━━━━
3. لینک
<a href="https://example.com">ورود به سایت</a>
🔹 "a" برای ساخت لینک استفاده میشه.
🔹 "href" مشخص میکنه لینک به کجا هدایت بشه.
🔹 متنی که داخل تگ قرار میگیره، چیزی هست که کاربر روی اون کلیک میکنه.
━━━━━━━━━━━━━━━━━━
4. تصویر
<img src="photo.jpg" alt="توضیح تصویر">
🔹 "src" مسیر تصویر رو مشخص میکنه.
🔹 "alt" توضیح تصویر رو مشخص میکنه و برای دسترسپذیری هم مهمه.
━━━━━━━━━━━━━━━━━━
5. کلاس و ID
<div class="card" id="main-card">
محتوای کارت
</div>
🔹 "class" برای گروهبندی عناصر مشابه استفاده میشه.
🔹 "id" معمولاً برای شناسایی یک عنصر مشخص استفاده میشه.
━━━━━━━━━━━━━━━━━━
🔵 CSS
6. ساختار اصلی CSS
selector {
property: value;
}
مثال:
p {
color: red;
}
🔹 "p" → عنصری که میخوایم انتخاب کنیم
🔹 "color" → ویژگی موردنظر
🔹 "red" → مقدار ویژگی
━━━━━━━━━━━━━━━━━━
7. تغییر اندازه فونت
h1 {
font-size: 32px;
}
🔹 "font-size" اندازه متن رو مشخص میکنه.
━━━━━━━━━━━━━━━━━━
8. فاصله داخلی و خارجی
.card {
padding: 20px;
margin: 20px;
}
🔹 "padding" فاصله محتوای داخل عنصر تا لبههای عنصره.
🔹 "margin" فاصله عنصر با عناصر اطرافشه.
━━━━━━━━━━━━━━━━━━
9. Flexbox
.container {
display: flex;
}
🔹 "display: flex" باعث میشه عناصر داخل Container با سیستم Flexbox چیده بشن.
برای وسطچین کردن:
.container {
display: flex;
justify-content: center;
align-items: center;
}
🔹 "justify-content" برای تنظیم آیتمها در محور اصلیه.
🔹 "align-items" برای تنظیم آیتمها در محور مخالفه.
━━━━━━━━━━━━━━━━━━
10. فاصله بین آیتمها
.container {
display: flex;
gap: 20px;
}
🔹 "gap" بین آیتمهای داخل Flex یا Grid فاصله ایجاد میکنه.
━━━━━━━━━━━━━━━━━━
11. گوشههای گرد
.card {
border-radius: 15px;
}
🔹 "border-radius" گوشههای عنصر رو گرد میکنه.
━━━━━━━━━━━━━━━━━━
12. سایه
.card {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
🔹 "box-shadow" برای ایجاد سایه اطراف عنصر استفاده میشه.
━━━━━━━━━━━━━━━━━━
🔥 ترفندهای کاربردی CSS
13. وسطچین کردن با Grid
.container {
display: grid;
place-items: center;
}
🔹 "place-items: center" آیتمها رو هم افقی و هم عمودی وسط قرار میده.
━━━━━━━━━━━━━━━━━━
14. متغیرهای CSS
:root {
--main-color: #6c5ce7;
}
button {
background: var(--main-color);
}
🔹 با "--main-color" یک متغیر ساختیم.
🔹 با "var()" از مقدار اون متغیر استفاده میکنیم.
🔹 اگر رنگ اصلی سایت تغییر کنه، فقط کافیه مقدار متغیر رو تغییر بدیم.
━━━━━━━━━━━━━━━━━━
15. Hover
button:hover {
transform: scale(1.05);
}
🔹 ":hover" زمانی فعال میشه که نشانگر موس روی عنصر قرار بگیره.
برای نرم شدن تغییر:
button {
transition: 0.3s;
}
🔹 "transition" باعث میشه تغییرات بهصورت نرم انجام بشن.
━━━━━━━━━━━━━━━━━━
16. طراحی ریسپانسیو
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
🔹 "@media" برای اعمال CSS در اندازههای مختلف صفحه استفاده میشه.
🔹 اینجا میگیم اگر عرض صفحه ۷۶۸ پیکسل یا کمتر بود، آیتمها به صورت ستونی قرار بگیرن.
━━━━━━━━━━━━━━━━━━
💡 نکته:
اگر HTML ساختار و اسکلت سایت باشه، CSS ظاهر و نحوه نمایش همون اسکلت رو کنترل میکنه.
1. عنوانها
<h1>عنوان اصلی</h1>
<h2>عنوان فرعی</h2>
<h3>عنوان کوچکتر</h3>
🔹 از "h1" تا "h6" برای ساخت عنوانها استفاده میشه.
🔹 "h1" مهمترین سطح عنوانه و "h6" کماهمیتترینه.
━━━━━━━━━━━━━━━━━━
2. پاراگراف
<p>این یک متن معمولی در سایت است.</p>
🔹 تگ "p" مخفف Paragraph هست و برای نمایش متنهای پاراگرافی استفاده میشه.
━━━━━━━━━━━━━━━━━━
3. لینک
<a href="https://example.com">ورود به سایت</a>
🔹 "a" برای ساخت لینک استفاده میشه.
🔹 "href" مشخص میکنه لینک به کجا هدایت بشه.
🔹 متنی که داخل تگ قرار میگیره، چیزی هست که کاربر روی اون کلیک میکنه.
━━━━━━━━━━━━━━━━━━
4. تصویر
<img src="photo.jpg" alt="توضیح تصویر">
🔹 "src" مسیر تصویر رو مشخص میکنه.
🔹 "alt" توضیح تصویر رو مشخص میکنه و برای دسترسپذیری هم مهمه.
━━━━━━━━━━━━━━━━━━
5. کلاس و ID
<div class="card" id="main-card">
محتوای کارت
</div>
🔹 "class" برای گروهبندی عناصر مشابه استفاده میشه.
🔹 "id" معمولاً برای شناسایی یک عنصر مشخص استفاده میشه.
━━━━━━━━━━━━━━━━━━
🔵 CSS
6. ساختار اصلی CSS
selector {
property: value;
}
مثال:
p {
color: red;
}
🔹 "p" → عنصری که میخوایم انتخاب کنیم
🔹 "color" → ویژگی موردنظر
🔹 "red" → مقدار ویژگی
━━━━━━━━━━━━━━━━━━
7. تغییر اندازه فونت
h1 {
font-size: 32px;
}
🔹 "font-size" اندازه متن رو مشخص میکنه.
━━━━━━━━━━━━━━━━━━
8. فاصله داخلی و خارجی
.card {
padding: 20px;
margin: 20px;
}
🔹 "padding" فاصله محتوای داخل عنصر تا لبههای عنصره.
🔹 "margin" فاصله عنصر با عناصر اطرافشه.
━━━━━━━━━━━━━━━━━━
9. Flexbox
.container {
display: flex;
}
🔹 "display: flex" باعث میشه عناصر داخل Container با سیستم Flexbox چیده بشن.
برای وسطچین کردن:
.container {
display: flex;
justify-content: center;
align-items: center;
}
🔹 "justify-content" برای تنظیم آیتمها در محور اصلیه.
🔹 "align-items" برای تنظیم آیتمها در محور مخالفه.
━━━━━━━━━━━━━━━━━━
10. فاصله بین آیتمها
.container {
display: flex;
gap: 20px;
}
🔹 "gap" بین آیتمهای داخل Flex یا Grid فاصله ایجاد میکنه.
━━━━━━━━━━━━━━━━━━
11. گوشههای گرد
.card {
border-radius: 15px;
}
🔹 "border-radius" گوشههای عنصر رو گرد میکنه.
━━━━━━━━━━━━━━━━━━
12. سایه
.card {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
🔹 "box-shadow" برای ایجاد سایه اطراف عنصر استفاده میشه.
━━━━━━━━━━━━━━━━━━
🔥 ترفندهای کاربردی CSS
13. وسطچین کردن با Grid
.container {
display: grid;
place-items: center;
}
🔹 "place-items: center" آیتمها رو هم افقی و هم عمودی وسط قرار میده.
━━━━━━━━━━━━━━━━━━
14. متغیرهای CSS
:root {
--main-color: #6c5ce7;
}
button {
background: var(--main-color);
}
🔹 با "--main-color" یک متغیر ساختیم.
🔹 با "var()" از مقدار اون متغیر استفاده میکنیم.
🔹 اگر رنگ اصلی سایت تغییر کنه، فقط کافیه مقدار متغیر رو تغییر بدیم.
━━━━━━━━━━━━━━━━━━
15. Hover
button:hover {
transform: scale(1.05);
}
🔹 ":hover" زمانی فعال میشه که نشانگر موس روی عنصر قرار بگیره.
برای نرم شدن تغییر:
button {
transition: 0.3s;
}
🔹 "transition" باعث میشه تغییرات بهصورت نرم انجام بشن.
━━━━━━━━━━━━━━━━━━
16. طراحی ریسپانسیو
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
🔹 "@media" برای اعمال CSS در اندازههای مختلف صفحه استفاده میشه.
🔹 اینجا میگیم اگر عرض صفحه ۷۶۸ پیکسل یا کمتر بود، آیتمها به صورت ستونی قرار بگیرن.
━━━━━━━━━━━━━━━━━━
💡 نکته:
اگر HTML ساختار و اسکلت سایت باشه، CSS ظاهر و نحوه نمایش همون اسکلت رو کنترل میکنه.
🆒2❤1👍1🔥1💯1
Media is too big
VIEW IN TELEGRAM
دیدم این آموزش کاربردیه و بکار میاد گفتم بزارم براتون
چند وقت پیشا یک پیجی توی اینستا دریافت کردم گفتم همگی استفاده کنیم 💙🩵
چند وقت پیشا یک پیجی توی اینستا دریافت کردم گفتم همگی استفاده کنیم 💙🩵
🙏2🎄1
Mativex
دیدم این آموزش کاربردیه و بکار میاد گفتم بزارم براتون چند وقت پیشا یک پیجی توی اینستا دریافت کردم گفتم همگی استفاده کنیم 💙🩵
این آموزش برای افزایش سرعت سایت و ارائه قیمت برای افزایش سرعت سایته
🙏2🤝1
Forwarded from Mr. T {JS} (hosein TooVinS)
یک نگرانی که توی این چند روز پیش اومده برای حتی بعضی میدلولها
که واقعا اپدیت جدیدِ هوش مصنوعی رسما همه کار میکنه و داره همه رو بیکار میکنه؟
پ.ن : سوالیم که میپرسن خیلیا اینه که، خب اگر فریلنسر و مستخدم نشیم پس چکار کنیم؟ بهتره که سه ویسِ این پست رو گوش بدید.
@ToovinsJs
که واقعا اپدیت جدیدِ هوش مصنوعی رسما همه کار میکنه و داره همه رو بیکار میکنه؟
باید بگم خیر، خیالِ همه راحت باشه، بجز دو زمینه کاری که قبلا هم پیش بینی کرده بودم در خطر هستن
- فریلنسری
- استخدامی شرکت
- مربی بدنسازی ( خارج از برنامه نویسی )
باید بگم فریلنسری و استخدامی از بین نرفته ولی ممکن مدت زیادی افت شدیدی در زمینهی بازارش به وجود بیاد تا کارفرماها و شرکتها به خودشون بیان و متوجه بشن باید متخصص استخدام کنن، اما واقعا زمینهی مربی بدنسازی شدیدا رو دور انقراض هستش هرچند اگر خلاقیت داشته باشن میتونن رو اوج بمونن اما رقابت توش سنگین شده، دقیقا همانند حوزهی فرانت اند
بیشتر افرادی هم که در آینده جایگاهی نخوآهند داشت و رسما منقرض خوآهند شد کسانی که هیچ خلاقیت در ابداع ندارن.
پ.ن : سوالیم که میپرسن خیلیا اینه که، خب اگر فریلنسر و مستخدم نشیم پس چکار کنیم؟ بهتره که سه ویسِ این پست رو گوش بدید.
@ToovinsJs
👍3👏1
توی برنامه نویسی نه کارمندی موفقت میکنه نه فریلنسری
تا زمانی که کسب و کار خودت رو نداشته باشی و رشدش ندی نمیشه گفت موفقی
تا زمانی که کسب و کار خودت رو نداشته باشی و رشدش ندی نمیشه گفت موفقی
🔥5
در آخر اینم بگم :
مذاکره قوی + زبان خوب + برنامه نویسی + ساخت بیزینس = موفقیت🤝
پس روی مهارت مذاکره و زبانتون خیلی کار کنید 🙏
مذاکره قوی + زبان خوب + برنامه نویسی + ساخت بیزینس = موفقیت🤝
پس روی مهارت مذاکره و زبانتون خیلی کار کنید 🙏
👏4🤣3💅1
از وسایلتون مثل لپ تاب و گوشی و..... خیلی مراقبت کنید
شرایط خریدن وسایل الکترونیکی خیلی سخت تر شده مخصوصا با این قیمت دلار و کم یاب تر شدن قطعات بخاطر هوش مصنوعی که فقط یکی از دلایله
شرایط خریدن وسایل الکترونیکی خیلی سخت تر شده مخصوصا با این قیمت دلار و کم یاب تر شدن قطعات بخاطر هوش مصنوعی که فقط یکی از دلایله
❤7
🔴معاون وزارت ارتباطات: حتی اگه جنگ بشه هم اینترنت قراره برقرار بمونه و همین که الان اینترنت وصله، نشون میده حاکمیت تصمیم جدی داره دسترسی مردم به شبکه ارتباطی کشور حفظ بشه
🤣6✍1💅1
برای بازار بین المللی حداقل سطحی که برای زبان لازمه بین B2 تا C1 هست
داخل چت پرسیدید ازم گفتم اینجا هم بگم😁
داخل چت پرسیدید ازم گفتم اینجا هم بگم😁
😭4😁1
گاهی اوقات یک باگ کوچک میتونه هزینه ی خیلی بزرگی داشته باشه!
در سال ۱۹۹۶، موشک 5 Ariane تنها ۳۷ ثانیه بعد از پرتاب به دلیل یک خطای نرم افزاری از مسیر خارج شد و مأموریت شکست خورد.
قسمت جالب ماجرا ؟
کدی که باعث این اتفاق شد قبلاً روى 4 Ariane استفاده شده بود و مشکلی نداشت.
و این داستانه پرخسارت ترین اشتباه برنامه نویسیه!
چقدر خسارت؟
370 میلیون دلار 🤯
در سال ۱۹۹۶، موشک 5 Ariane تنها ۳۷ ثانیه بعد از پرتاب به دلیل یک خطای نرم افزاری از مسیر خارج شد و مأموریت شکست خورد.
قسمت جالب ماجرا ؟
کدی که باعث این اتفاق شد قبلاً روى 4 Ariane استفاده شده بود و مشکلی نداشت.
و این داستانه پرخسارت ترین اشتباه برنامه نویسیه!
چقدر خسارت؟
370 میلیون دلار 🤯
😨6😭1
مدل Chat GPT astra دقیقا همون چیزی بود که ایلان ماسک پیشبینی کرد
اگه یادتون باشه گفت آخرین مدل های چت جی پی تی بشدت باهوش میشن جوری که دیگه نیاز نیست کارای دستی کامپیوتر رو انجام بدید
اگه یادتون باشه گفت آخرین مدل های چت جی پی تی بشدت باهوش میشن جوری که دیگه نیاز نیست کارای دستی کامپیوتر رو انجام بدید
❤5
۱۰ ترفند HTML که بهتره هر برنامهنویسی بدونه 🚀
اگه تازه HTML یاد گرفتی، احتمالاً فکر میکنی HTML فقط چندتا تگ سادهست که باید حفظشون کنی. ولی واقعیت اینه که خیلی از نکات مهم HTML چیزایی نیستن که معمولاً اول کار بهت میگن.
من اینجا ۱۰ تا نکته و ترفند کاربردی رو میگم که شاید ساده به نظر برسن، ولی وقتی وارد پروژههای واقعی بشی، میبینی چقدر به کارت میان.
1. از "id" و "class" درست استفاده کن
یه اشتباه رایج اینه که برای همهچی "id" میذارن.
"id" باید یکتا باشه؛ یعنی نباید چند المان مختلف توی صفحه یک "id" یکسان داشته باشن.
اگه قراره چند المان ویژگی مشترکی داشته باشن، از "class" استفاده کن.
مثلاً:
"<div class="card"></div>"
"<div class="card"></div>"
ولی "id" برای چیزی مناسبه که قراره مشخصاً یک المان خاص باشه.
2. فقط به ظاهر تگها توجه نکن
HTML فقط برای این نیست که یه چیزی روی صفحه نمایش داده بشه؛ ساختار و معنی محتوا هم مهمه.
مثلاً به جای اینکه همهجا از "div" استفاده کنی، وقتی محتوا واقعاً مربوط به بخش اصلی صفحه، منو، مقاله یا فوتره، از تگهای معنایی مثل اینها استفاده کن:
"header"
"nav"
"main"
"section"
"article"
"footer"
این کار باعث میشه کدت تمیزتر و قابل فهمتر باشه و ابزارهای مختلف هم ساختار صفحه رو بهتر درک کنن.
3. برای تصاویر "alt" رو فراموش نکن
خیلیها عکس رو اینطوری میذارن:
"<img src="profile.jpg">"
ولی بهتره "alt" هم داشته باشی:
"<img src="profile.jpg" alt="تصویر پروفایل">"
اگه عکس لود نشه، یا کسی از screen reader استفاده کنه، "alt" کمک میکنه بفهمه تصویر مربوط به چیه.
پس "alt" رو فقط یه گزینه اضافی نبین؛ مخصوصاً توی پروژههای واقعی مهمه.
4. برای هر کاری "div" نساز!
یکی از چیزایی که خیلی توی کد تازهکارها میبینم اینه که تقریباً کل صفحه رو با "div" ساختهان.
"div" بد نیست، ولی قرار نیست هر چیزی که روی صفحه میبینی "div" باشه.
اگه چیزی دکمهست، از "button" استفاده کن.
اگه لینک هست، از "a" استفاده کن.
اگه عنوانه، از "h1" تا "h6" استفاده کن.
اگه پاراگرافه، از "p" استفاده کن.
HTML تگ مناسب برای هر نوع محتوا داره؛ ازشون استفاده کن.
5. نوع "input" رو درست انتخاب کن
همهی ورودیها رو "type="text"" نذار.
مثلاً برای ایمیل:
"<input type="email">"
برای رمز عبور:
"<input type="password">"
برای تاریخ:
"<input type="date">"
و برای عدد:
"<input type="number">"
وقتی نوع "input" رو درست انتخاب میکنی، مرورگر هم میتونه رفتار مناسبتری داشته باشه و اعتبارسنجی اولیه رو راحتتر انجام بده.
6. برای فرمها "label" بذار
اینکه فقط یه "input" بذاری و کنارش بنویسی «نام»، روش تمیزی نیست.
بهتره "label" رو به "input" وصل کنی:
"<label for="username">نام کاربری</label>"
"<input id="username" type="text">"
حالا وقتی روی متن «نام کاربری» کلیک کنی، ورودی مربوط به اون هم انتخاب میشه.
یه نکته سادهست، ولی توی فرمهای حرفهای خیلی مهمه.
7. "defer" رو برای JavaScript بشناس
اگه فایل JavaScript رو داخل "head" قرار بدی، میتونی از "defer" استفاده کنی:
"<script src="app.js" defer></script>"
با این کار مرورگر فایل HTML رو متوقف نمیکنه تا اسکریپت رو همون لحظه اجرا کنه و اجرای اسکریپت رو به زمان مناسب موکول میکنه.
این یه نکته کوچیکه، ولی وقتی پروژههات بزرگتر بشن، ارزشش رو بیشتر میفهمی.
8. اگه چیزی دکمهست، واقعاً از "button" استفاده کن
یه اشتباه رایج اینه که یه "div" میسازن، با CSS شبیه دکمهش میکنن و بعد با JavaScript کاری میکنن که قابل کلیک باشه.
وقتی چیزی واقعاً دکمهست، از اول بنویس:
"<button>ارسال</button>"
هم کدت معناییتر میشه، هم مرورگر و ابزارهای دسترسیپذیری بهتر میفهمن با چه چیزی طرف هستن.
9. وقتی از "target="_blank"" استفاده میکنی، "noopener" رو یادت نره
اگه قراره یه لینک توی تب جدید باز بشه، معمولاً از این استفاده میکنیم:
"target="_blank""
ولی بهتره "rel="noopener"" رو هم در نظر بگیری:
"<a href="https://example.com" target="_blank" rel="noopener">لینک</a>"
این یه نکته امنیتی و اصولیه که بهتره از همون اول عادت کنی درست انجامش بدی.
10. HTML رو از همون اول تمیز بنویس
این شاید سادهترین نکته این لیست باشه، ولی به نظرم یکی از مهمترینهاست.
HTML قرار نیست فقط «کار کنه»؛ باید قابل فهم و قابل نگهداری هم باشه.
تگها رو درست تو در تو کن، اسم "class"ها رو منطقی انتخاب کن، از تگ مناسب استفاده کن و الکی کد اضافه ننویس.
چون پروژه وقتی بزرگ میشه، دیگه فقط خودت نیستی که قراره کدت رو ببینی؛ ممکنه چند ماه بعد خودت برگردی و بگی: من اینو چرا اینطوری نوشته بودم؟
اگه تازه HTML یاد گرفتی، احتمالاً فکر میکنی HTML فقط چندتا تگ سادهست که باید حفظشون کنی. ولی واقعیت اینه که خیلی از نکات مهم HTML چیزایی نیستن که معمولاً اول کار بهت میگن.
من اینجا ۱۰ تا نکته و ترفند کاربردی رو میگم که شاید ساده به نظر برسن، ولی وقتی وارد پروژههای واقعی بشی، میبینی چقدر به کارت میان.
1. از "id" و "class" درست استفاده کن
یه اشتباه رایج اینه که برای همهچی "id" میذارن.
"id" باید یکتا باشه؛ یعنی نباید چند المان مختلف توی صفحه یک "id" یکسان داشته باشن.
اگه قراره چند المان ویژگی مشترکی داشته باشن، از "class" استفاده کن.
مثلاً:
"<div class="card"></div>"
"<div class="card"></div>"
ولی "id" برای چیزی مناسبه که قراره مشخصاً یک المان خاص باشه.
2. فقط به ظاهر تگها توجه نکن
HTML فقط برای این نیست که یه چیزی روی صفحه نمایش داده بشه؛ ساختار و معنی محتوا هم مهمه.
مثلاً به جای اینکه همهجا از "div" استفاده کنی، وقتی محتوا واقعاً مربوط به بخش اصلی صفحه، منو، مقاله یا فوتره، از تگهای معنایی مثل اینها استفاده کن:
"header"
"nav"
"main"
"section"
"article"
"footer"
این کار باعث میشه کدت تمیزتر و قابل فهمتر باشه و ابزارهای مختلف هم ساختار صفحه رو بهتر درک کنن.
3. برای تصاویر "alt" رو فراموش نکن
خیلیها عکس رو اینطوری میذارن:
"<img src="profile.jpg">"
ولی بهتره "alt" هم داشته باشی:
"<img src="profile.jpg" alt="تصویر پروفایل">"
اگه عکس لود نشه، یا کسی از screen reader استفاده کنه، "alt" کمک میکنه بفهمه تصویر مربوط به چیه.
پس "alt" رو فقط یه گزینه اضافی نبین؛ مخصوصاً توی پروژههای واقعی مهمه.
4. برای هر کاری "div" نساز!
یکی از چیزایی که خیلی توی کد تازهکارها میبینم اینه که تقریباً کل صفحه رو با "div" ساختهان.
"div" بد نیست، ولی قرار نیست هر چیزی که روی صفحه میبینی "div" باشه.
اگه چیزی دکمهست، از "button" استفاده کن.
اگه لینک هست، از "a" استفاده کن.
اگه عنوانه، از "h1" تا "h6" استفاده کن.
اگه پاراگرافه، از "p" استفاده کن.
HTML تگ مناسب برای هر نوع محتوا داره؛ ازشون استفاده کن.
5. نوع "input" رو درست انتخاب کن
همهی ورودیها رو "type="text"" نذار.
مثلاً برای ایمیل:
"<input type="email">"
برای رمز عبور:
"<input type="password">"
برای تاریخ:
"<input type="date">"
و برای عدد:
"<input type="number">"
وقتی نوع "input" رو درست انتخاب میکنی، مرورگر هم میتونه رفتار مناسبتری داشته باشه و اعتبارسنجی اولیه رو راحتتر انجام بده.
6. برای فرمها "label" بذار
اینکه فقط یه "input" بذاری و کنارش بنویسی «نام»، روش تمیزی نیست.
بهتره "label" رو به "input" وصل کنی:
"<label for="username">نام کاربری</label>"
"<input id="username" type="text">"
حالا وقتی روی متن «نام کاربری» کلیک کنی، ورودی مربوط به اون هم انتخاب میشه.
یه نکته سادهست، ولی توی فرمهای حرفهای خیلی مهمه.
7. "defer" رو برای JavaScript بشناس
اگه فایل JavaScript رو داخل "head" قرار بدی، میتونی از "defer" استفاده کنی:
"<script src="app.js" defer></script>"
با این کار مرورگر فایل HTML رو متوقف نمیکنه تا اسکریپت رو همون لحظه اجرا کنه و اجرای اسکریپت رو به زمان مناسب موکول میکنه.
این یه نکته کوچیکه، ولی وقتی پروژههات بزرگتر بشن، ارزشش رو بیشتر میفهمی.
8. اگه چیزی دکمهست، واقعاً از "button" استفاده کن
یه اشتباه رایج اینه که یه "div" میسازن، با CSS شبیه دکمهش میکنن و بعد با JavaScript کاری میکنن که قابل کلیک باشه.
وقتی چیزی واقعاً دکمهست، از اول بنویس:
"<button>ارسال</button>"
هم کدت معناییتر میشه، هم مرورگر و ابزارهای دسترسیپذیری بهتر میفهمن با چه چیزی طرف هستن.
9. وقتی از "target="_blank"" استفاده میکنی، "noopener" رو یادت نره
اگه قراره یه لینک توی تب جدید باز بشه، معمولاً از این استفاده میکنیم:
"target="_blank""
ولی بهتره "rel="noopener"" رو هم در نظر بگیری:
"<a href="https://example.com" target="_blank" rel="noopener">لینک</a>"
این یه نکته امنیتی و اصولیه که بهتره از همون اول عادت کنی درست انجامش بدی.
10. HTML رو از همون اول تمیز بنویس
این شاید سادهترین نکته این لیست باشه، ولی به نظرم یکی از مهمترینهاست.
HTML قرار نیست فقط «کار کنه»؛ باید قابل فهم و قابل نگهداری هم باشه.
تگها رو درست تو در تو کن، اسم "class"ها رو منطقی انتخاب کن، از تگ مناسب استفاده کن و الکی کد اضافه ننویس.
چون پروژه وقتی بزرگ میشه، دیگه فقط خودت نیستی که قراره کدت رو ببینی؛ ممکنه چند ماه بعد خودت برگردی و بگی: من اینو چرا اینطوری نوشته بودم؟
❤3🔥1