گیت دقیقاً چه کاری می‌کند؟#

گیت تاریخچهٔ تغییرهای پروژه را ثبت می‌کند. هر بار که کار مهمی تمام کردی، یک «کامیت» (commit) می‌سازی؛ مثل یک عکس از وضعیت پروژه در آن لحظه. بعداً می‌توانی تاریخچه را ببینی یا به هر نقطه برگردی.

دستورهای پایه#

اول گیت را روی رایانه نصب کن. بعد در پوشهٔ پروژه این دستورها را اجرا کن:

# ساخت مخزن جدید
git init

# دیدن وضعیت فایل‌ها
git status

# آماده کردن تغییرها برای ثبت
git add .

# ثبت تغییرها با یک پیام
git commit -m "ساخت صفحهٔ اصلی"

# دیدن تاریخچه
git log --oneline

پیام کامیت خوب#

پیام کامیت را طوری بنویس که ماه‌ها بعد هم بفهمی چه کار کرده‌ای:

• کوتاه و دقیق بنویس: «اضافه کردن فرم تماس» بهتر از «تغییرات» است.
• هر کامیت فقط یک کار مشخص انجام دهد.
• کامیت را زود و مرتب بزن، نه یک‌بار بعد از چند روز.

شاخه‌ها (Branch)#

شاخه یعنی یک مسیر جدا برای امتحان کردن ایده‌ها. مثلاً می‌خواهی ظاهر سایت را عوض کنی ولی نمی‌خواهی نسخهٔ سالم خراب شود:

git switch -c new-design
# ... تغییرها را انجام بده و کامیت کن ...
git switch main
git merge new-design

اگر ایده خوب از آب درنیامد، شاخه را رها می‌کنی و نسخهٔ اصلی دست‌نخورده می‌ماند.

فرستادن پروژه به گیت‌هاب#

بعد از ساختن یک مخزن در گیت‌هاب، پروژه را این‌طور بفرست:

git remote add origin https://github.com/USERNAME/my-project.git
git push -u origin main

اینجوری از کدهایت پشتیبان داری و پروژه‌هایت را می‌توانی در نمونه‌کارها نشان بدهی.

از کجا ادامه بدهم؟#

اگر تازه شروع برنامه‌نویسی را آغاز کرده‌ای، لازم نیست همهٔ دستورها را حفظ کنی. همین پنج دستور بالا برای ماه‌های اول کافی است.

سئو یعنی چه؟#

موتور جست‌وجو می‌خواهد به هر سؤال بهترین و قابل‌اعتمادترین جواب را نشان بدهد. سئو یعنی کمک به او برای اینکه صفحهٔ تو را پیدا کند، بفهمد دربارهٔ چیست و ببیند که ارزش نشان دادن دارد.

۱. جواب واقعی بنویس#

مهم‌ترین عامل، محتوایی است که دقیقاً به نیاز کاربر جواب بدهد. قبل از نوشتن بپرس: کسی که این عبارت را جست‌وجو می‌کند، چه می‌خواهد بداند؟ مقالهٔ عمیق و کامل که تجربهٔ خودت در آن باشد، از متن کوتاه و کپی‌شده بهتر است.

۲. عنوان و توضیح مناسب#

• عنوان صفحه باید کوتاه، گویا و یکتا باشد (حدود ۶۰ نویسه).
• توضیح متا (meta description) را برای هر صفحه جدا بنویس؛ اگر خلاصهٔ خوبی باشد، مردم بیشتر کلیک می‌کنند.
• در هر صفحه فقط یک عنوان اصلی (h1) داشته باش و بقیه را با h2 و h3 مرتب کن.

۳. لینک‌سازی داخلی#

لینک دادن بین صفحه‌های سایت خودت، به موتور جست‌وجو نشان می‌دهد مقاله‌ها با هم چه ارتباطی دارند و به خواننده کمک می‌کند مطالب بعدی را پیدا کند. چند اصل ساده:

• از متن لینک گویا استفاده کن؛ نه «اینجا کلیک کن».
• از هر مقاله به چند مقالهٔ مرتبط لینک بده.
• مقاله‌های قدیمی را هم به مقاله‌های تازه وصل کن.

۴. سرعت و موبایل#

بیشتر جست‌وجوها با گوشی انجام می‌شود، پس سایت باید روی موبایل سریع و راحت باشد. راهنمای هفت راه برای بهبود سرعت سایت را ببین.

۵. داده ساختاریافته#

با داده ساختاریافته (JSON-LD) به موتور جست‌وجو دقیق می‌گویی این صفحه یک مقاله است، نویسنده‌اش کیست و چه زمانی منتشر شده. این کار تضمینی برای رتبه نیست، اما کمک می‌کند صفحه بهتر فهمیده شود.

۶. نقشهٔ سایت و سرچ کنسول#

فایل sitemap.xml فهرست صفحه‌های سایت را به موتور جست‌وجو می‌دهد. سایتت را در Google Search Console ثبت کن، نقشهٔ سایت را بفرست و ببین کدام صفحه‌ها ایندکس شده‌اند.

جمع‌بندی#

محتوای مفید، عنوان‌های روشن، لینک‌سازی داخلی، سرعت خوب و ساختار تمیز؛ این‌ها پایهٔ سئو هستند. اگر تازه شروع کرده‌ای، مقالهٔ از کجا برنامه‌نویسی را شروع کنم؟ هم می‌تواند ایدهٔ موضوع‌های خوبی برای نوشتن بدهد.

معیارها را بشناس#

گوگل سه معیار اصلی را برای تجربهٔ کاربر بررسی می‌کند که به آن‌ها Core Web Vitals می‌گویند:

• LCP: سرعت نمایش مهم‌ترین بخش صفحه؛ مقدار خوب کمتر از ۲٫۵ ثانیه
• INP: سرعت واکنش صفحه به کلیک و لمس؛ مقدار خوب کمتر از ۲۰۰ میلی‌ثانیه
• CLS: میزان پریدن عناصر هنگام بارگذاری؛ مقدار خوب کمتر از ۰٫۱

این معیارها روی دادهٔ واقعی کاربران و بیشتر برای موبایل سنجیده می‌شوند. پس سایتت را با یک گوشی واقعی هم امتحان کن، نه فقط روی رایانه.

۱. اول اندازه بگیر#

با ابزارهایی مثل PageSpeed Insights یا بخش Lighthouse در مرورگر کروم، وضعیت فعلی سایت را ببین. بدون اندازه‌گیری، نمی‌فهمی کدام تغییر واقعاً مؤثر بوده است.

۲. تصویرها را بهینه کن#

تصویر معمولاً سنگین‌ترین بخش صفحه است. این کارها را بکن:

• فرمت WebP یا AVIF را به جای PNG و JPG سنگین انتخاب کن.
• تصویر را به اندازهٔ واقعی‌ای که نمایش داده می‌شود کوچک کن.
• همیشه width و height را بنویس تا صفحه هنگام بارگذاری نپرد.

۳. تنبل‌بارگذاری برای پایین صفحه#

تصویرهایی که پایین صفحه‌اند، لازم نیست زود بارگذاری شوند:

<img src="photo.webp" alt="توضیح تصویر" width="800" height="450" loading="lazy" decoding="async">

اما تصویر اصلی بالای صفحه را تنبل نکن؛ آن را سریع بارگذاری کن.

۴. جاوااسکریپت کمتر#

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

۵. فونت را مدیریت کن#

فونت را روی سرور خودت نگه دار، فقط حرف‌های لازم را در آن بگذار و از font-display: swap استفاده کن تا متن تا آماده شدن فونت دیده شود.

۶. فشرده‌سازی و کش#

سرور را طوری تنظیم کن که فایل‌ها را با gzip یا brotli فشرده بفرستد و برای فایل‌های ثابت کش طولانی بگذارد. اینجوری بازدید دوم تقریباً فوری می‌شود.

۷. جلوی پریدن صفحه را بگیر#

برای هر تصویر و ویدیو جای مشخصی رزرو کن و عناصری را که دیرتر ظاهر می‌شوند، بالای محتوای در حال خواندن اضافه نکن. این کار CLS را پایین نگه می‌دارد.

جمع‌بندی#

سایت سریع هم کاربر را راضی‌تر می‌کند و هم در سئو کمک می‌کند. با اندازه‌گیری شروع کن، یکی‌یکی بهبود بده و دوباره اندازه بگیر.

HTML؛ ساختار و معنا#

HTML مشخص می‌کند در صفحه چه چیزهایی هست: عنوان، پاراگراف، لینک، دکمه، تصویر و فرم. نکتهٔ مهم این است که تگ درست انتخاب کنی. برای دکمه از <button> استفاده کن، نه از <div> که شبیه دکمه استایل شده؛ چون button خودبه‌خود با صفحه‌کلید و صفحه‌خوان‌ها کار می‌کند.

<button id="hello">سلام!</button>

CSS؛ ظاهر#

CSS ظاهر عناصر را مشخص می‌کند: رنگ، فاصله، اندازه، فونت و حتی انیمیشن. با چند خط می‌توانی دکمهٔ ساده را شکیل کنی:

button {
  background: #0e8f86;
  color: white;
  border: 0;
  border-radius: 10px;
  padding: 12px 20px;
  font-size: 1rem;
}

button:hover {
  background: #0a766e;
}

جاوااسکریپت؛ رفتار#

جاوااسکریپت به صفحه جان می‌دهد؛ مثلاً وقتی کاربر روی دکمه کلیک کرد کاری انجام دهد:

const button = document.querySelector('#hello');

button.addEventListener('click', () => {
  alert('سلام! به سایت من خوش آمدی');
});

هر سه با هم#

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

چند توصیه برای شروع#

• از تگ‌های معنادار مثل header، main، nav و footer استفاده کن.
• طراحی را اول برای موبایل شروع کن و بعد برای صفحهٔ بزرگ‌تر گسترش بده.
• کدت را با گیت نگه‌داری کن تا بتوانی هر تغییر را برگردانی.
• بعد از ساختن سایت، سرعت سایت را روی موبایل بررسی کن.

اگر بخواهی از ابتدا مسیر یادگیری را ببینی، مقالهٔ از کجا برنامه‌نویسی را شروع کنم؟ کمکت می‌کند.

اول بدان چه می‌خواهی بسازی#

برنامه‌نویسی مقصد نیست؛ ابزاری برای ساختن است. اگر می‌خواهی سایت بسازی، سراغ وب برو. اگر ربات تلگرام یا ابزار کوچک برای خودت می‌خواهی، پایتون انتخاب خوبی است. وقتی هدف روشن باشد، بین ده‌ها آموزش گم نمی‌شوی.

فقط یک زبان انتخاب کن#

پایتون و جاوااسکریپت دو انتخاب رایج برای شروع‌اند: خوانا هستند، منابع آموزشی فراوان دارند و خیلی زود می‌شود با آن‌ها چیزی ساخت که واقعاً کار کند. مهم‌تر از «بهترین زبان»، این است که چند ماه روی یکی بمانی. هر هفته زبان عوض کردن یعنی هر هفته از صفر شروع کردن.

مفهوم‌های پایه را جدی بگیر#

قبل از رفتن سراغ فریم‌ورک‌ها، این‌ها را خوب یاد بگیر:

• متغیر و انواع داده
• شرط‌ها (if) و حلقه‌ها
• تابع‌ها
• لیست و دیکشنری (در جاوااسکریپت: آرایه و آبجکت)

این مفهوم‌ها در همهٔ زبان‌ها تکرار می‌شوند و یادگیری زبان بعدی را خیلی سریع‌تر می‌کنند.

هر روز کم، ولی هر روز#

نیم‌ساعت تمرین روزانه معمولاً از یک روز پنج‌ساعته در ماه بهتر است، چون ذهن بین جلسه‌ها مطالب را مرور و جا‌به‌جا می‌کند. یک ساعت ثابت برایش در نظر بگیر؛ مثلاً بعد از انجام تکلیف‌های مدرسه.

زود پروژه بساز#

تماشای آموزش حس یادگیری می‌دهد، ولی ساختن پروژه یادگیری واقعی است. این پروژه‌ها را امتحان کن:

1. ماشین‌حساب ساده
2. برنامهٔ لیست کارها
3. بازی حدس عدد
4. یک صفحهٔ شخصی با HTML و CSS

وقتی گیر کردی#

گیر کردن طبیعی است و بخشی از مسیر است. خطا را کامل بخوان، متنش را جست‌وجو کن و اگر لازم شد سؤالت را همراه با کد و پیام خطای کامل در انجمن‌ها بپرس. خیلی زود هم یاد بگیر از کدهایت نسخه نگه داری؛ مقالهٔ گیت چیست؟ از همین‌جا شروع خوبی است.

اگر هنوز نمی‌دانی وب از چه تکه‌هایی ساخته می‌شود، توضیح HTML و CSS و جاوااسکریپت را بخوان.

جمع‌بندی#

هدفی کوچک انتخاب کن، یک زبان را نگه دار، هر روز کمی تمرین کن و زود شروع به ساختن کن. بقیه‌اش با زمان درست می‌شود. اگر تجربهٔ خودت را داری یا سؤالی برایت پیش آمده، در بخش نظرات بنویس.