شروع از صفر: نترس
طراحی وب برای مبتدیان با همین سوال شروع می‌شود: از کجا شروع کنم؟ خبر خوب این است که با HTML و CSS می‌توانی در همان روز اول یک صفحهٔ ساده بسازی و در مرورگر ببینی. نیازی به نصب سرور یا ابزار پیچیده برای شروع نیست.
مفاهیم خیلی پایه
- HTML ساختار صفحه را می‌سازد: عنوان، پاراگراف، لینک، تصویر. مثل اسکلت یک ساختمان.
- CSS ظاهر را تعیین می‌کند: رنگ، فونت، فاصله و چیدمان. مثل رنگ و دکوراسیون.
- مرورگر این دو را می‌خواند و به صورت صفحهٔ قابل مشاهده نشان می‌دهد.
در ابتدا فقط با همین دو زبان کار می‌کنی؛ جاوااسکریپت بعداً برای تعامل و انیمیشن اضافه می‌شود.
ابزارهای لازم برای شروع
- ویرایشگر متن: VS Code یا Cursor (رایگان). یک فایل با پسوند
.htmlبساز و کد بنویس. - مرورگر: Chrome یا Firefox. فایل HTML را با دابل‌کلیک یا با «باز کردن فایل» در مرورگر باز کن تا نتیجه را ببینی.
همین دو کافی است. بعداً می‌توانی ابزار طراحی (Figma) و ابزارهای بیلد (مثل Vite) را اضافه کنی.
اولین صفحهٔ تو
یک فایل به نام index.html بساز و این را داخلش بگذار:
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>اولین صفحهٔ من</title>
</head>
<body>
<h1>سلام، دنیا!</h1>
<p>این اولین صفحهٔ وب من است.</p>
</body>
</html>فایل را ذخیره کن و در مرورگر باز کن. اگر «سلام، دنیا!» و پاراگراف را دیدی، اولین قدم را برداشتی.
مراحل بعدی برای مبتدی
- یک لینک و یک تصویر به همین صفحه اضافه کن (درس «متن، لینک و تصویر» در همین بخش).
- یک فایل
style.cssبساز و با<link>به HTML وصل کن؛ چند رنگ و فونت ساده اعمال کن (درس «مبانی CSS»). - چیدمان ساده با Flexbox تمرین کن تا بتوانی منو یا کارت کنار هم بچینی (درس «چیدمان با Flexbox»).
- یک صفحهٔ دوم بساز و بین دو صفحه لینک بده؛ بعد سعی کن همان طرح را روی موبایل هم درست نشان بدهی (Media Query).
منابع و ادامهٔ راه
همین بخش آموزش (از «معرفی طراحی وب» تا «دسترسی‌پذیری» و «فریمورک‌ها») یک مسیر منسجم برای مبتدی است. در کنار آن، یک پروژهٔ کوچک انتخاب کن (مثلاً صفحهٔ معرفی خودت یا یک رستوران فرضی) و مرحله‌به‌مرحله آن را با HTML و CSS بساز. با تمرین و تکرار، طراحی وب برای مبتدیان به‌تدریج به یک مهارت پایدار تبدیل می‌شود.