W3schols
سایتی که تقریبا میشه گفت همه برنامه نویس ها عاشقشن، به شخصه خودم وقتایی که صرف یادگیری میکنم یه بخشیش به این سایت مربوطه، اگر هم میخواید شروع کنید باید حتما یه سر بهش بزنید، توش از داکیومنت ها تا آزمون میتونید پیداکنید درضمن اکثر زبان هارو هم داره

اینم داخل پرانتز بگم که اگر زبانتون خوب نیست میتونید از ترنسلیت خود گوگل استفاده کنید با یه اکستنشن راست چین(rtl) بکنید و بخونید

البته یه سایت ایرانی دقیقا شبیه همین معرفی میکنم 😁

بابت یک روز تاخیر معذرت میخوام عزیزان 🌹🩵

درگیر یک کاره خیلی مهم بودم و متأسفه وقت نشد بیام و ادامه مطالب رو بزارم، برای جبران دو برابرش میکنم 🤝🔥

اگه ۱۰ تا پروژه نصفه داری، پروژه یازدهم رو شروع نکن.

یکی از بدترین عادت‌ها بین برنامه‌نویس‌ها اینه:

یه پروژه شروع می‌کنن.

چند روز بعد یه ایده جذاب‌تر به ذهنشون می‌رسه.

پروژه قبلی رو ول می‌کنن و میرن سراغ اون.

بعد یه تکنولوژی جدید می‌بینن.

پروژه سوم.

بعد یه آموزش جدید.

پروژه چهارم.

آخرش GitHub پر شده از Repositoryهایی که هیچ‌کدوم کامل نیستن.

مشکل اینجاست که شروع کردن پروژه خیلی راحت‌تر از تموم کردنشه.
شروع پروژه هیجان داره.
ولی وقتی می‌رسی به تست کردن، رفع باگ، تمیز کردن کد، نوشتن Documentation و Deploy کردن، دیگه اون هیجان اولیه وجود نداره.

اتفاقاً همون قسمت‌ها چیزیه که تجربه واقعی بهت میده.
پس برای مدتی تعداد پروژه‌هات رو کم کن و تعداد پروژه‌های تمام‌شده رو زیاد کن.

لازم نیست پروژه‌ات عجیب و خفن باشه.

یه پروژه ساده بساز، ولی تا آخر ببرش:

ایده → طراحی → کدنویسی → تست → رفع باگ → Git → Deploy → Documentation

وقتی یه پروژه رو کامل می‌کنی، فقط یه سری کد ننوشتی
با یه بخش واقعی از چرخه توسعه نرم‌افزار درگیر شدی.

پروژه نصفه بهت حس پیشرفت میده؛ پروژه کامل بهت تجربه میده.

edX
یک سایتی که جزو برترین منابع برای یادگیری برنامه نویسی و مهارت های غیره

همه جور دوره با بهترین کیفیت رو ارائه میدن ولی یه نکته خیلی مهم داره اونم اینه که زبان قوی میخواد

از دوره مدیریت تا برنامه نویسی و هوش مصنوعی رو دارن

از من به شما نصیحت
آکادمیک جلو نرید😂

قدرتی که داکیومنت داره هیچ دوره ای نداره

واسه ی شروع زبان و ریاضی قوی لازمه؟

اینو قبلا گفتم ولی اینبار هم میگم چون پرسیده شد تو چت.

ببینید دوستان هوش مصنوعی و حوزه های این چنینی قطعا ریاضی لازمه ولی لزوما نیاز نیست خیلی قوی باشه، زبان هم اول یا آخرش لازمه منتها بلد هم نباشی قطعا میتونی شروع کنی

الکامپ واقعا فاجعس🤣

هرجای دنیا بگی انسان رو گریم میکنن میگن رباته انسان نماس بهت پناه میدن

دوره های cs50 بد نیست ولی وقتی میتونی همونو توی یوتیوب رایگان ببینی یاد بگیری چرا باید بابتش پول بدی؟
دوره رو ببین رایگان برو تو سایت رسمیش آزمون بده و مدرکت رو بگیر

هرچند مدرکش به هیچ دردی نمیخوره

درکل یوتیوب بهترین دانشگاه / آموزشگاه دنیاس

تنها هزینه ای که بابتش باید بدی اینترنت و زمانه

یکی با مدل جدید Chat GPT astra یک شبیه ساز درست کرده که انسان ها باید توش بهم کمک کنن تا زنده بمونن، تمامی انسان های داخل این شبیه ساز ایجنت ai هستن، درکمال ناباوری روز بعد میبینه انسان های داخل بازی نتنها بهم کمک میکنن بلکه باهم صحبت میکنن، چند ساعت بعد یکی از اون انسان های داخل شبیه ساز میاد یه کامپیوتر می‌سازه و با اون یه شبیه ساز دیگه میسازه
یعنی یه انسان یه شبیه ساز ساخته و آدمای توی اون شبیه ساز اومدن دوباره یه دنیای دیگه خلق کردن!!! 🤯

زیادی داره ترسناک میشه😂

سعی کنید همیشه یه رودمپ برای خودتون داشته باشید و پراکنده یاد نگیرید
مثلا امروز پایتون یاد نگیرید فردا سی شارپ

جز سردرگمی و ول کردن این راه هیچ چیز دیگه ای نداره

بریم یخورده سینتکس بخونیم😁👌

🟠 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 ظاهر و نحوه نمایش همون اسکلت رو کنترل می‌کنه.

دیدم این آموزش کاربردیه و بکار میاد گفتم بزارم براتون

چند وقت پیشا یک پیجی توی اینستا دریافت کردم گفتم همگی استفاده کنیم 💙🩵

این آموزش برای افزایش سرعت سایت و ارائه قیمت برای افزایش سرعت سایته

یک نگرانی که توی این چند روز پیش اومده برای حتی بعضی میدلول‌ها

که واقعا اپدیت جدیدِ هوش مصنوعی رسما همه کار می‌کنه و داره همه رو بیکار میکنه؟

باید بگم خیر، خیالِ همه راحت باشه، بجز دو زمینه کاری که قبلا هم پیش بینی کرده بودم در خطر هستن

- فریلنسری
- استخدامی شرکت

- مربی بدنسازی ( خارج از برنامه نویسی )

باید بگم فریلنسری و استخدامی از بین نرفته ولی ممکن مدت زیادی افت شدیدی در زمینه‌ی بازارش به وجود بیاد تا کارفرماها و شرکت‌ها به خودشون بیان و متوجه بشن باید متخصص استخدام کنن، اما واقعا زمینه‌ی مربی بدنسازی شدیدا رو دور انقراض هستش هرچند اگر خلاقیت داشته باشن می‌تونن رو اوج بمونن اما رقابت توش سنگین شده، دقیقا همانند حوزه‌ی فرانت اند

بیشتر افرادی هم که در آینده جایگاهی نخوآهند داشت و رسما منقرض خوآهند شد کسانی که هیچ خلاقیت در ابداع ندارن.


پ.ن : سوالیم که میپرسن خیلیا اینه که، خب اگر فریلنسر و مستخدم نشیم پس چکار کنیم؟ بهتره که سه ویسِ این پست رو گوش بدید.

@ToovinsJs