آموزش طراحی وب از صفر: راهنمای کامل HTML، CSS و جاوااسکریپت

نویسنده: آموزشگاه فنی حرفه‌ای آزاد آراهوش

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

خلاصه: هشت نکته‌ای که باید همین حالا بدانید

• طراحی وب یعنی ساخت ظاهر و ساختار صفحه‌هایی که در مرورگر دیده می‌شوند؛ ساخت بخش سرور و پایگاه داده کار دیگری است.
• HTML ساختار، CSS ظاهر و جاوااسکریپت رفتار صفحه را می‌سازد؛ به همین ترتیب یاد بگیرید.
• امروز سایت باید روی موبایل درست کار کند؛ به این می‌گویند طراحی واکنش‌گرا.
• برای سایت فارسی دو چیز را فراموش نکنید: lang="fa" dir="rtl" و یک فونت فارسی مناسب.
• خوانایی با نسبت کنتراست سنجیده می‌شود؛ حداقل ۴٫۵ به ۱ برای متن معمولی.
• سرعت صفحه سنجش دارد: سه شاخص Core Web Vitals با آستانه‌های مشخص.
• بدون پروژه عملی چیزی یاد نمی‌گیرید؛ بعد از هر مفهوم یک صفحه واقعی بسازید.
• سیستم‌های مدیریت محتوا جای کدنویسی را کامل پر نمی‌کنند، اما برای خیلی از سایت‌ها کافی‌اند.

طراحی وب دقیقاً چیست؟

طراحی وب مجموعه کارهایی است که نتیجه‌اش صفحه‌هایی است که در مرورگر می‌بینید و با آن‌ها کار می‌کنید: چیدمان، رنگ، فونت، دکمه‌ها، منو، فرم‌ها و رفتارشان. در بازار کار، دو عنوان جدا اما نزدیک به هم دیده می‌شود. طراح وب بیشتر روی ظاهر و تجربه کاربری و نمونه اولیه صفحه‌ها تمرکز دارد، و توسعه‌دهنده فرانت‌اند آن طرح را با کد به صفحه واقعی تبدیل می‌کند. در تیم‌های کوچک و پروژه‌های فریلنسری این دو معمولاً یک نفرند.

برای فهم ساده‌تر، سایت را مثل یک خانه تصور کنید. HTML اسکلت و دیوارهاست، CSS رنگ و دکوراسیون و چیدمان اتاق‌هاست، و جاوااسکریپت برق و کلیدهاست که کار می‌کنند. هر سه لازم‌اند اما ترتیب یادگیری مهم است: اسکلت اول، بعد ظاهر، بعد رفتار.

دو واژه‌ای که زیاد می‌شنوید: فرانت‌اند هر چیزی است که در مرورگر کاربر اجرا و دیده می‌شود، و بک‌اند بخشی است که روی سرور اجرا می‌شود، مثل ذخیره سفارش‌ها در پایگاه داده یا ورود کاربر. این مقاله درباره فرانت‌اند است. دوره آموزشی MDN که مرجع آموزشی معروف وب است، همین مسیر را به‌شکل چند ماژول معرفی می‌کند: ساختاردهی محتوا با HTML، مبانی استایل با CSS، چیدمان با CSS و اسکریپت‌نویسی پویا با جاوااسکریپت.

یک سایت چطور کار می‌کند؟

قبل از کد، باید مسیر یک صفحه را بدانید:

1. شما نشانی سایت را در مرورگر تایپ می‌کنید.
2. مرورگر نام دامنه را به نشانی یک سرور تبدیل می‌کند و از آن سرور صفحه را می‌خواهد (درخواست).
3. سرور فایل‌های صفحه را برمی‌گرداند (پاسخ): معمولاً یک فایل HTML، چند فایل CSS و جاوااسکریپت، و تصویرها.
4. مرورگر این فایل‌ها را می‌خواند و صفحه را می‌کشد.

پس برای داشتن یک سایت به این‌ها نیاز دارید: دامنه (نام سایت)، هاست یا سرور (جایی که فایل‌ها ذخیره می‌شوند) و خودِ فایل‌های سایت. در سایت‌های ساده، همه صفحه‌ها فایل‌های آماده‌اند (سایت ایستا). در سایت‌های بزرگ‌تر مثل فروشگاه، سرور صفحه را در لحظه از پایگاه داده می‌سازد (سایت پویا). شروع یادگیری با سایت ایستا ساده‌تر است و برای فرانت‌اند کافی.

در بخش‌های بعد وارد خود سه زبان می‌شویم.

HTML: ساختار صفحه

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

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>اولین صفحه من</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>سلام دنیا</h1>
    <nav>
      <a href="#about">درباره من</a>
      <a href="#contact">تماس</a>
    </nav>
  </header>
  <main>
    <section id="about">
      <h2>درباره من</h2>
      <p>این اولین صفحه وب من است.</p>
      <img src="photo.jpg" alt="تصویر من" width="400" height="300">
    </section>
  </main>
  <footer>همه حقوق محفوظ است</footer>
  <script src="app.js"></script>
</body>
</html>

چند خط این کد را باید بفهمید:

• lang و dir: زبان صفحه فارسی و جهت راست‌به‌چپ است. بدون آن‌ها مرورگر و ابزارهای کمکی جهت و زبان را حدس می‌زنند و صفحه شما به‌هم می‌ریزد.
• charset: تعیین می‌کند حروف فارسی درست دیده شوند.
• viewport: بدون این خط، موبایل صفحه را به‌شکل یک سایت دسکتاپ کوچک‌شده نشان می‌دهد.
• تگ‌های معنایی (header، nav، main، section، footer): به‌جای ساختن همه‌چیز با div، هر تکه را با نام واقعی‌اش علامت بزنید. هم برای ابزارهای کمکی (مثل صفحه‌خوان نابینایان) و هم برای موتورهای جستجو واضح‌تر است.
• alt و width و height در تصویر: alt متن جایگزین تصویر است، و تعیین عرض و ارتفاع به مرورگر اجازه می‌دهد جای تصویر را از قبل رزرو کند تا صفحه موقع بارگذاری نپرد.

CSS: ظاهر و چیدمان

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

body {
  font-family: Vazirmatn, sans-serif;
  line-height: 1.8;
  margin: 0;
  color: #1f2937;
}

header {
  background: #2f6db5;
  color: white;
  padding: 1rem;
}

nav a {
  color: white;
  margin-inline-end: 1rem;
}

هر قانون CSS دو بخش دارد: انتخابگر (کدام عنصر) و خصوصیت‌ها (چه ظاهری). مفاهیم مهمی که باید زود یاد بگیرید:

• جعبه (Box Model): هر عنصر یک جعبه است: محتوا، فضای داخلی (padding)، حاشیه (border) و فاصله بیرونی (margin). بیشتر مشکل‌های چیدمان از ندانستن همین جعبه است.
• فلکس و گرید (Flexbox و Grid): دو ابزار اصلی چیدمان. فلکس برای ردیف یا ستونِ ساده، و گرید برای شبکه دوبعدی.
• آبشاری بودن (Cascade): وقتی چند قانون به یک عنصر برسند، مرورگر طبق اولویت و ترتیب یکی را برمی‌گزیند. اگر استایلی کار نمی‌کند، معمولاً قانون دیگری روی آن برنده شده است.
• واحد rem: اندازه‌ها را بر اساس اندازه فونت پایه می‌نویسد و وقتی کاربر اندازه نوشته مرورگر را بزرگ می‌کند، صفحه هم با او بزرگ می‌شود.

در نمونه بالا به margin-inline-end دقت کنید؛ توضیحش در بخش فارسی‌سازی آمده است. رنگ سفید روی پس‌زمینه #2f6db5 را هم با فرمول WCAG حساب کرده‌ایم: نسبت کنتراست حدود ۵٫۳ به ۱ است، یعنی از حداقل ۴٫۵ بیشتر است.

جاوااسکریپت: رفتار صفحه

جاوااسکریپت اولین زبانی است که واقعاً برنامه‌نویسی است: متغیر دارد، شرط و حلقه دارد و می‌تواند صفحه را در لحظه تغییر دهد. مثلاً باز و بسته شدن یک منو با کلیک:

const button = document.querySelector("#menu-button");
const menu = document.querySelector("#menu");

button.addEventListener("click", () => {
  menu.classList.toggle("open");
});

این کد دو عنصر را از صفحه پیدا می‌کند، به کلیک دکمه گوش می‌دهد و هر بار کلاس open را به منو اضافه یا از آن حذف می‌کند؛ ظاهر باز یا بسته بودن را CSS مشخص می‌کند. این تقسیم کار، یعنی JavaScript رفتار را عوض کند و CSS ظاهر را، نشانه یک سایت تمیز است.

جاوااسکریپت پرکاربردترین زبان برنامه‌نویسی در نظرسنجی توسعه‌دهندگان Stack Overflow سال ۲۰۲۵ بود و حدود ۶۶ درصد پاسخ‌دهندگان از آن استفاده کرده بودند؛ این عدد برای همه زمینه‌هاست، نه فقط طراحی وب. نکته مهم برای مبتدی: جاوااسکریپت را بعد از اینکه HTML و CSS را در حد ساخت چند صفحه کامل یاد گرفتید شروع کنید. اگر قبلاً با پایتون کار کرده‌اید، مقاله «آموزش پایتون از صفر» نشان می‌دهد مفاهیم مشترک (متغیر، شرط، حلقه) کجاست و راحت‌تر منتقل می‌شود.

طراحی واکنش‌گرا: یک سایت برای همه صفحه‌ها

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

1. تگ viewport که در کد HTML بالا آمد.
2. تصویرهای انعطاف‌پذیر: با max-width: 100% تصویر هیچ‌وقت از عرض صفحه بیرون نمی‌زند.
3. کوئری رسانه (media query): قانون‌هایی که فقط از یک عرض به بعد اعمال می‌شوند.

img {
  max-width: 100%;
  height: auto;
}

.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

این کد روی موبایل کارت‌ها را زیر هم می‌چیند و از عرض ۷۶۸ پیکسل به بعد در سه ستون می‌گذارد. رویکرد «موبایل‌اول» یعنی اول قانون‌های ساده موبایل را بنویسید و بعد با media query برای صفحه‌های بزرگ‌تر اضافه کنید. دلیلش هم ساده است: بیشتر بازدیدکنندگان سایت‌های فارسی با موبایل می‌آیند (این برداشت عمومی ماست و آمار رسمی نیست؛ آمار سایت خودتان را از ابزار تحلیل ببینید). برای تست کافی است در مرورگر F12 را بزنید و حالت موبایل را روشن کنید.

فارسی‌سازی سایت: جهت، فونت و چند نکته ریز

سایت فارسی فقط ترجمه متن نیست. این‌ها را از ابتدا رعایت کنید:

• lang و dir روی تگ html: lang="fa" dir="rtl". با این دو، چیدمان از راست شروع می‌شود، لیست‌ها و گرید درست جهت می‌گیرند و صفحه‌خوان‌ها زبان را می‌شناسند.
• خصوصیت‌های منطقی (logical properties): به‌جای margin-right و margin-left از margin-inline-start و margin-inline-end استفاده کنید. این‌ها «ابتدا» و «انتها» را بر اساس جهت صفحه تعیین می‌کنند و اگر روزی نسخه انگلیسی ساختید، دوباره‌نویسی نمی‌خواهد. همین کار را با text-align: start به‌جای right انجام دهید.
• فونت: فونت وزیرمتن یک فونت فارسی و عربی متن‌باز است که طراحش صابر راستی‌کردار است و با مجوز SIL Open Font License نسخه ۱٫۱ منتشر شده است. طبق صفحه رسمی، می‌توانید آن را با npm نصب کنید یا از CDN بخوانید و در CSS بنویسید font-family: Vazirmatn, sans-serif. ما پیشنهاد می‌کنیم فایل فونت را روی سرور خودتان قرار دهید تا به سرویس خارجی وابسته نباشید. همیشه یک فونت پشتیبان مثل sans-serif هم بنویسید.
• فاصله خطوط: حروف فارسی به فضای عمودی بیشتری نیاز دارند. line-height بین ۱٫۷ تا ۲ برای متن‌های بلند معمولاً راحت‌تر خوانده می‌شود؛ این یک توصیه عملی است نه استاندارد، پس روی متن خودتان امتحانش کنید.
• نیم‌فاصله: در نوشتن متن‌ها از نیم‌فاصله درست استفاده کنید (مثلاً «می‌شود»، «وب‌سایت»). کلیدش در بیشتر صفحه‌کلیدهای فارسی Shift و فاصله است.
• متن چپ‌به‌راست داخل فارسی: ایمیل، نشانی سایت و شماره تلفن را با <span dir="ltr"> بگذارید تا علامت‌ها جابه‌جا نشوند، مثلاً <span dir="ltr">info@example.com</span>.

طراحی رابط و تجربه کاربری: چند اصل که ظاهر را حرفه‌ای می‌کند

لازم نیست طراح گرافیک باشید تا صفحه‌ای مرتب بسازید. این اصل‌ها بیشتر مشکل‌های مبتدی‌ها را حل می‌کنند:

• سلسله‌مراتب: چشم کاربر باید بداند اول کجا را ببیند. با اندازه، وزن و رنگ مشخص کنید کدام تیتر مهم‌تر است. هر صفحه یک کار اصلی دارد (مثلاً «ثبت‌نام»)، پس یک دکمه اصلی هم کافی است. وقتی سه دکمه هم‌اندازه و هم‌رنگ می‌گذارید، کاربر نمی‌داند کدام را بزند.
• فاصله و فضای خالی: بیشترین فرق بین یک صفحه آماتور و یک صفحه تمیز، فاصله است. فاصله‌ها را از یک مقیاس ثابت (مثلاً مضرب‌های یک مقدار پایه) بردارید تا صفحه یکدست بماند.
• رنگ: یک رنگ اصلی، یک رنگ تأکید و چند رنگ خنثی (سفید، خاکستری، مشکی) کافی است. اگر هر بخش یک رنگ جدا داشته باشد، صفحه شلوغ می‌شود.
• تایپوگرافی: یک یا دو فونت. اندازه متن اصلی را آن‌قدر بزرگ بگیرید که روی موبایل بدون زوم خوانده شود؛ برای متن‌های فارسی معمولاً از ۱۶ پیکسل کمتر نروید (توصیه عملی است نه استاندارد).
• فرم‌ها: هر فیلد یک برچسب دارد، نوع ورودی درست انتخاب شده (مثلاً type="email" برای ایمیل) و پیام خطا می‌گوید دقیقاً چه چیزی اشتباه است، نه فقط «خطا».

دسترس‌پذیری: ساده‌ترین بخشی که بیشتر فراموش می‌شود

دسترس‌پذیری یعنی سایت برای کسانی هم قابل‌استفاده باشد که کم‌بینا هستند، فقط با صفحه‌کلید کار می‌کنند یا از صفحه‌خوان استفاده می‌کنند. بخش بزرگی از آن با همان HTML درست و چند عادت ساده تأمین می‌شود.

معیار رایج برای خوانایی رنگ‌ها، نسبت کنتراست است. طبق معیار موفقیت ۱٫۴٫۳ از WCAG (سطح AA)، نسبت کنتراست متن معمولی با پس‌زمینه باید دست‌کم ۴٫۵ به ۱ باشد و برای متن بزرگ (۱۸ پوینت یا ۱۴ پوینت ضخیم) دست‌کم ۳ به ۱. این معیار برای متن داخل placeholder فیلدها هم صدق می‌کند. چند نمونه را با فرمول WCAG خودمان حساب کرده‌ایم:

• متن سفید روی #2f6db5: حدود ۵٫۳ به ۱ ← قبول
• متن خاکستری #999999 روی سفید: حدود ۲٫۸۵ به ۱ ← رد
• متن #767676 روی سفید: حدود ۴٫۵۴ به ۱ ← به‌زحمت قبول
• متن سفید روی زرد #fbbf24: حدود ۱٫۶۷ به ۱ ← کاملاً رد

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

• برای هر تصویر معنادار یک alt بنویسید، و برای تصویر تزئینی alt خالی بگذارید.
• با کلید Tab کل سایت را بگردید. اگر نمی‌دانید الان کدام دکمه انتخاب شده، قاب فوکوس را خراب کرده‌اید؛ outline را بدون جایگزین حذف نکنید.
• ترتیب تیترها را منطقی نگه دارید: یک h1، زیرمجموعه‌هایش h2 و همین‌طور ادامه.
• اطلاعات مهم را فقط با رنگ نشان ندهید (مثلاً خطا فقط قرمز باشد)؛ کنارش متن یا آیکن هم بگذارید.

سرعت و سئوی فنی

گوگل سرعت و تجربه صفحه را با سه شاخص به نام Core Web Vitals می‌سنجد. طبق وب‌سایت web.dev:

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

این اعداد برای نود و پنجمین صدک بازدیدکنندگان واقعی گزارش می‌شوند. شاخص INP از مارس ۲۰۲۴ جای FID را گرفته است؛ هر راهنمایی که هنوز FID را شاخص اصلی می‌نامد قدیمی است. ابزار رایگان برای سنجش PageSpeed Insights و پنل Performance مرورگر کروم است.

مبتدی با چند کار ساده بیشترین اثر را می‌گذارد:

• تصاویر را قبل از آپلود کوچک و فشرده کنید؛ عکسی که چهار مگابایت است و در صفحه کوچک نمایش داده می‌شود، هدر دادن سرعت است.
• برای هر img عرض و ارتفاع بنویسید تا چیدمان نپرد (CLS).
• تصویر اصلی بالای صفحه را lazy-load نکنید، چون LCP را بدتر می‌کند.
• اسکریپت‌های اضافه را کم کنید؛ ابزارهای خارجی مثل ویجت چت و آنالیتیکس از مقصران رایج INP و CLS بد هستند.

سئوی فنی هم بخش زیادی‌اش HTML درست است: یک h1، یک title و توضیح متای خلاصه برای هر صفحه، لینک‌های داخلی با متن توضیحی، تصاویر با alt و نشانی‌های خوانا. یک نکته صادقانه: سرعت خوب شرط لازم است، نه کافی. گوگل خودش می‌گوید این شاخص‌ها با آنچه سیستم رتبه‌بندی دنبالش است هم‌خوانی دارد، اما سایت سریع بدون محتوای مفید جای خوبی در نتایج نمی‌گیرد.

ابزارهای شروع

• ویرایشگر کد: یک ویرایشگر مثل VS Code برای نوشتن HTML و CSS کافی است و رنگ‌بندی و پیشنهاد کد دارد.
• ابزارهای توسعه مرورگر: با F12 باز می‌شوند و بهترین مدرس شما هستند: می‌توانید CSS هر سایت را ببینید و تغییر بدهید و خطاها را بخوانید.
• مستندات MDN: مرجع رسمی و آموزشی HTML، CSS و جاوااسکریپت.
• Git و GitHub: بعد از چند پروژه شروع کنید؛ برای نگه‌داشتن نسخه‌ها و نمایش نمونه‌کار.
• Figma یا ابزار مشابه: برای طراحی نمونه اولیه قبل از کدنویسی.
• سخت‌افزار: برای شروع یک ویرایشگر و یک مرورگر کافی است و به سیستم خیلی قوی نیاز ندارید.

کدنویسی دستی یا سیستم مدیریت محتوا؟

سیستم‌های مدیریت محتوا مثل WordPress یا بخش وب‌سایت Odoo (بلاگ همین سایت هم با Odoo اجرا می‌شود) کار را برای کسی که فقط می‌خواهد محتوا منتشر کند ساده می‌کنند. اما HTML و CSS را حذف نمی‌کنند: هر وقت بخواهید ظاهر قالب را عوض کنید، یک بخش ساده بسازید یا خطایی را پیدا کنید، دانش پایه لازم می‌شود. قاعده ساده: سایت معرفی یا بلاگ با ویرایشگران غیرفنی را معمولاً با سیستم مدیریت محتوا بسازید؛ رابط خاص، اپلیکیشن وب یا طراحی کاملاً سفارشی را با کد. و برای یادگیری، اول HTML و CSS دستی را بلد شوید تا ابزارها شما را محدود نکنند.

نقشه راه یادگیری در هشت گام

1. راه‌اندازی: یک ویرایشگر، یک مرورگر و یک پوشه برای پروژه.
2. HTML: تیترها، پاراگراف، لینک، تصویر، فهرست، فرم و تگ‌های معنایی.
3. CSS پایه: رنگ، فونت، جعبه (padding و margin) و انتخاب‌گرها.
4. چیدمان: فلکس‌باکس و گرید. هر دو را با یک پروژه تمرین کنید.
5. واکنش‌گرایی: viewport، تصاویر انعطاف‌پذیر و media query.
6. فارسی‌سازی: lang و dir، خصوصیت‌های منطقی و فونت.
7. جاوااسکریپت پایه: پیدا کردن عنصر، رویداد کلیک، تغییر کلاس و متن.
8. انتشار: گرفتن دامنه و هاست و بارگذاری سایت.

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

پنج پروژه تمرینی

1. صفحه شخصی یا رزومه: HTML معنایی و CSS پایه.
2. صفحه فرود برای یک کسب‌وکار فرضی: بخش معرفی، مزایا، دکمه فراخوان. واکنش‌گرا و با فونت فارسی.
3. گالری تصاویر: با گرید و تصاویر فشرده‌شده؛ پروژه خوبی برای آزمایش سرعت.
4. فرم تماس: فقط ظاهر و اعتبارسنجی ساده سمت مرورگر. ارسال واقعی فرم به سرور نیاز دارد که بعداً یاد می‌گیرید.
5. لیست کارها با جاوااسکریپت: اضافه کردن و حذف کردن آیتم؛ اولین پروژه‌ای که صفحه را «زنده» می‌کند.

اشتباه‌های رایج مبتدی‌ها

• شروع با یک فریم‌ورک بزرگ قبل از آنکه HTML و CSS را بلد باشید.
• کپی کردن کد بدون فهمیدن آن؛ اگر چیزی را تغییر دادید و نفهمیدید چرا خراب شد، یعنی هنوز یاد نگرفته‌اید.
• فراموش کردن تگ viewport و طراحی فقط برای صفحه بزرگ.
• گذاشتن متن داخل تصویر. متن تصویری برای صفحه‌خوان و موتور جست‌وجو نامرئی است و در موبایل ناخوانا می‌شود.
• حذف outline فوکوس بدون جایگزین.
• استفاده از چند فونت و چند رنگ اصلی که صفحه را شلوغ می‌کند.
• آپلود تصاویر چندمگابایتی بدون فشرده‌سازی.

بازار کار: یک نگاه واقع‌بینانه

ما آمار رسمی از تعداد شغل‌های طراحی وب در ایران نداریم و عدد حدس نمی‌زنیم. چیزی که می‌توانیم بگوییم این است: فرصت‌ها معمولاً در چند مسیر دیده می‌شوند: توسعه‌دهنده فرانت‌اند در شرکت‌ها، طراح سایت با سیستم مدیریت محتوا و کار فریلنسری. در همه این مسیرها نمونه‌کار قابل‌دیدن معمولاً بیشتر از یک گواهینامه به کار می‌آید؛ پس از همان پروژه‌های تمرینی بالا چند مورد را با کیفیت بالا منتشر کنید. اگر هنوز در انتخاب مسیر شغلی در حوزه فناوری مردد هستید، مقاله «نقشه راه ورود به دنیای IT و کامپیوتر» (لینک‌اش در همین بلاگ هست) مسیرهای مختلف را کنار هم می‌گذارد.

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

طراحی وب در درچه با آراهوش

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

• آدرس: اصفهان، درچه، خیابان آیت‌الله درچه‌ای، قبل از کوچه ۶، آموزشگاه آراهوش
• تلفن: ۳۳۷۶۳۳۷۷
• موبایل: ۰۹۹۱۳۰۵۹۲۴۲
• تلگرام، اینستاگرام و ایتا: @arahoosh

برای اطلاع از سرفصل، زمان و هزینه دوره با ما تماس بگیرید.

سؤالات متداول

یادگیری طراحی وب سخت است؟ سخت‌ترین بخش آن شروع کردن و ادامه دادن است، نه خود HTML و CSS. این دو زبان قواعد روشنی دارند؛ پیچیدگی از جاوااسکریپت و از ابزارهای اطراف آن شروع می‌شود.

بدون برنامه‌نویسی هم می‌شود سایت ساخت؟ بله، با سیستم‌های مدیریت محتوا یا سایت‌سازها، اما در تنظیمات و ظاهر محدود می‌شوید و برای تغییرات خاص باید کد بدانید.

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

اول کدام را یاد بگیرم؟ به ترتیب HTML، CSS و بعد جاوااسکریپت. مسیر آموزشی MDN هم همین ترتیب را رعایت می‌کند.

آیا با لپ‌تاپ معمولی می‌شود شروع کرد؟ بله؛ برای شروع فقط یک ویرایشگر و یک مرورگر لازم است.

تفاوت طراح وب و برنامه‌نویس وب چیست؟ طراح وب بیشتر روی ظاهر و تجربه کاربری تمرکز دارد و برنامه‌نویس وب روی منطق، داده و سرور. در پروژه‌های کوچک ممکن است یک نفر هر دو کار را بکند.

در درچه برای یادگیری طراحی وب کجا بروم؟ آموزشگاه آراهوش در درچه دوره طراحی وب دارد. از صفحه دوره‌ها شروع کنید یا تماس بگیرید.

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

جمع‌بندی

طراحی وب از سه لایه ساخته می‌شود: HTML برای ساختار، CSS برای ظاهر و جاوااسکریپت برای رفتار. اما سایتی که فقط درست کار کند کافی نیست: باید روی موبایل خوب دیده شود، برای فارسی‌زبان‌ها درست تنظیم شده باشد (lang، dir و فونت مناسب)، کنتراست رنگ‌ها رعایت شده باشد و سریع بارگذاری شود. با ساختن پروژه‌های کوچک به‌جای فقط خواندن، هر بخش این راهنما را تمرین کنید. اگر دنبال کلاس طراحی وب در درچه هستید، با آراهوش تماس بگیرید: ۳۳۷۶۳۳۷۷ یا ۰۹۹۱۳۰۵۹۲۴۲.

منابع

• MDN: Learn web development: مسیر آموزشی HTML، CSS و جاوااسکریپت.
• web.dev: Web Vitals: تعریف و آستانه‌های LCP، INP و CLS.
• W3C: Understanding SC 1.4.3 Contrast (Minimum): معیار کنتراست متن.
• GitHub: فونت وزیرمتن: معرفی فونت، نصب و مجوز SIL OFL.
• نظرسنجی توسعه‌دهندگان Stack Overflow ۲۰۲۵: فناوری‌ها: درصد استفاده از جاوااسکریپت (برای همه زمینه‌ها، نه فقط وب).
• نسبت‌های کنتراست در این مقاله را خودمان با فرمول WCAG حساب کرده‌ایم؛ کدهای نمونه ساده و استاندارد هستند اما قبل از انتشار آن‌ها را در مرورگر امتحان کنید.