مسیر یادگیری طراحی سایت در سبزوار؛ از HTML تا اولین پروژه

طراحی سایت یکی از مهارت‌هایی است که زود به نتیجه می‌رسد. از همان جلسه‌های اول صفحه‌ای می‌سازید که در مرورگر باز می‌شود و می‌توانید به دیگران نشانش دهید. ولی اسم‌هایی مثل فرانت‌اند، بک‌اند، React و لاراول گاهی تازه‌کارها را گیج می‌کند. در این مقاله مسیر را قدم‌به‌قدم مرتب کرده‌ایم.

سایت از چه بخش‌هایی ساخته می‌شود؟

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

قدم ۱: HTML؛ اسکلت صفحه

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

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

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

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

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

قدم ۴: سرعت، سئو و انتشار

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

قدم ۵: انتخاب تخصص

• React: برای ساخت وب‌اپلیکیشن‌های بزرگ و پرتعامل. دوره‌ی React ۳۶ جلسه است.
• PHP و لاراول: برای بک‌اند، دیتابیس و پنل مدیریت. دوره‌ی PHP ۳۶ جلسه و دوره‌ی لاراول ۴۰ جلسه است.

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

نمونه‌کار؛ مهم‌تر از مدرک

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

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

ابزارهایی که لازم دارید

خبر خوب این است که برای شروع طراحی سایت تقریباً هیچ هزینه‌ای لازم نیست:

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

کوچک‌ترین صفحه‌ی وب

برای اینکه بدانید چقدر ساده شروع می‌شود، این یک صفحه‌ی کامل است. آن را در یک فایل به اسم index.html بنویسید و در مرورگر باز کنید:

<!doctype html>
<html lang="fa" dir="rtl">
<body>
  <h1>سلام دنیا</h1>
  <p>این اولین صفحه‌ی من است.</p>
  <style> h1 { color: teal; } </style>
</body>
</html>

اگر teal را به tomato تغییر دهید و صفحه را تازه کنید، رنگ عنوان فوراً عوض می‌شود. این حلقه‌ی «تغییر بده، ببین» مهم‌ترین عادت یک طراح سایت است و دلیل اینکه وب برای شروع این‌قدر جذاب است.

چک‌لیست قبل از انتشار سایت

• روی موبایل و کامپیوتر هر دو باز کرده‌ام و درست دیده می‌شود.
• تمام عکس‌ها فشرده‌اند و متن جایگزین دارند.
• هر صفحه عنوان و توضیح مخصوص خودش را دارد.
• شماره‌ی تماس و آدرس درست است و لینک‌ها کار می‌کنند.
• سایت با پروتکل امن https باز می‌شود.
• سرعت باز شدن صفحه‌ی اول را روی گوشی امتحان کرده‌ام.

داشتن سایت چه هزینه‌هایی دارد؟

ساختن سایت خودتان کم‌هزینه است، ولی نگهداری‌اش هزینه‌ی ثابت دارد: دامنه (آدرس سایت) و هاست (جایی که فایل‌ها نگه‌داری می‌شود). این دو را معمولاً هر سال تمدید می‌کنید. اگر برای مشتری سایت می‌سازید، حتماً از اول بگویید این هزینه‌ها با کیست و تمدیدشان چه موقع است. خیلی از اختلاف‌های کاری از همین نکته‌ی ساده شروع می‌شود.

یک کارت معرفی ساده با HTML و CSS

برای اینکه ببینید با کمی CSS ظاهر صفحه چقدر عوض می‌شود، این کارت معرفی را ببینید:

<div class="card">
  <h2>Ali Ahmadi</h2>
  <p>Web designer</p>
</div>

<style>
.card {
  max-width: 280px;
  padding: 20px;
  border-radius: 16px;
  background: #f4f4f6;
  text-align: center;
}
</style>

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

طراحی واکنش‌گرا یعنی چه؟

یک سایت خوب باید روی صفحه‌ی بزرگ کامپیوتر و صفحه‌ی کوچک گوشی هر دو راحت خوانده شود. با چند خط CSS می‌توانید بگویید «وقتی عرض صفحه از ۶۰۰ پیکسل کمتر شد، ستون‌ها زیر هم بیایند». کسی که این مهارت را بلد نیست، سایتی می‌سازد که روی گوشی باید زوم کرد. این از اشتباه‌های رایج تازه‌کارهاست و کارفرماها هم به آن حساسند، چون بیشتر مشتری‌ها سایت را با گوشی می‌بینند.

سایت خوب فقط شکل نیست

چند ویژگی کمتر دیده‌شده که سایت حرفه‌ای را از سایت معمولی جدا می‌کند:

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

چطور یاد بگیریم که خودمان نمونه‌کار بسازیم؟

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

اشتباه‌های رایج تازه‌کارها

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

چطور اولین سفارش را بگیریم؟

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

کلاس طراحی سایت در سبزوار

دوره‌ی طراحی سایت الکترا ۳۶ جلسه و ۵۴ ساعت است. قدم‌های ۱ تا ۴ همین مقاله را پوشش می‌دهد، یعنی HTML تا انتشار روی هاست. پیش‌نیاز ندارد و آخرش یک سایت کامل برای نمونه‌کار دارید. برای قدم بعد از آن، مقایسه‌ی PHP و لاراول برای شروع بک‌اند را بخوانید و اگر به اپلیکیشن موبایل علاقه دارید، آشنایی با فلاتر را هم ببینید. نمی‌دانید از کدام قدم شروع کنید؟ با ۰۹۳۰۹۱۱۸۵۵۸ تماس بگیرید یا از فرم ثبت‌نام وقت مشاوره‌ی رایگان بگیرید.