آموزش طراحی وب یکی از چیزهایی است که خواهان زیادی دارد و البته خیلی‌ها هم به‌راحتی به آن دست پیدا می‌کنند؛ چراکه آموزش‌های رایگان و غیررایگان زیادی در اینترنت وجود دارد. اما چرا هنوز هم کارفرمایان نیروی کار متخصص موردنظر خود را پیدا نمی‌کنند و درصد زیادی از افرادی که آموزش‌های طراحی وب و توسعه فرانت‌اند را گذرانده‌اند به نتیجه نمی‌رسند؟ آیا رمز و رازی وجود دارد که متخصصان و مدرسان این حوزه نمی‌خواهند شما بدانید؟ شاید هم همه چیز فقط یادگیری HTML، CSS و JavaScript نیست!
پاسخ این سوالات مشخص است. بسیاری از افراد به نتیجه نمی‌رسند چون نقشه راه مناسبی ندارند. این افراد در اصل همانند بیابان‌نوردهایی هستند که تنها به اندازه یک روزشان آب و غذا به همراه دارند؛ در صورتی که افراد حرفه‌ای می‌دانند که بیابان‌گردی شوخی نیست و بدون همراه داشتن تیم متخصص، ابزارهای جهت‌یابی و آب و غذا به اندازه حداقل سه برابر بیشتر از سفرهای معمولی، امکان پذیر نخواهد بود.
این موضوع مهم انگیزه‌ای شد تا ما نقشه راه یادگیری طراحی سایت را برای شما گردآوری کنیم و تجربیات 15 ساله خود را در اختیارتان قرار دهیم.
ما اوج گرفتن را دوست داریم اما باهم اوج گرفتن را بیشتر!
در انتها به سوالات زیر پاسخ می‌دهیم:
کدام منبع آموزشی را انتخاب کنم؟
درآمد طراحان سایت چقدر است؟
بله درست است. شما باید یادگیری همه چیز را از صفر شروع کنید و این‌بار به تک تک جزئیات دقت بیشتری کنید. خودتان را جای کودک 5 ساله‌ای بگذارید که هیچ چیز از اینترنت و مرورگرهای وب نمی‌داند. قدم به قدم و آهسته پیش بروید. هرچقدر تسلط بیشتری به مفاهیم این حوزه‌ها داشته باشید، در آینده بهتر می‌توانید از آن‌ها برای پیش بردن اهداف خودتان استفاده کنید. البته این موارد در هیچ کدام از دوره‌های آموزش طراحی وب موجود در اینترنت آموزش داده نمی‌شود و بهتر است خودتان با جستجو و کنجکاوی آن را یاد بگیرید.
تصویر از فردی که به تازگی با اینترنت آشنا شده
اولین قدم برای شروع آموزش طراحی سایت، یادگیری HTML5 است. HTML5 یک زبان نشانه‌گذاری است که ساختار و اسکلت صفحات سایت را مشخص می‌کند. خوشبختانه یادگیری این زبان بسیار آسان است و برای شروع ذهن شما را به چالش نمی‌کشد.
شما به عنوان یک توسعه دهنده سایت باید آشنایی عمومی با سئو یا SEO (مخفف Search Engine Optimization) داشته باشید. ساده بخواهیم بگوییم، شما برای اینکه بتوانید طراح سایت خوبی شوید باید بدانید که موتورهای جستجو مثل گوگل، سایت شما را چگونه می‌بینند و ارزیابی می‌کنند. البته سئو به تنهایی یک علم گسترده است که به خیلی چیزها بستگی دارد و شما نیازی نیست به عنوان یک توسعه دهنده وب، درگیر آن شوید.
تنها کاری که شما باید انجام دهید این است که انواع لایه‌بندی در طراحی وب و همچنین کاربرد و نحوه استفاده از تگ‌های معنایی HTML5 را به خوبی یاد بگیرید. هر کدام از تگ‌های معنایی HTML5 معنا و مفهوم خاصی برای موتورهای جستجو و مرورگرها دارند و این موجب می‌شود سایت شما سئوی خوبی داشته باشد.
اما استفاده صحیح از HTML5 چگونه موجب سئوی خوب وب سایت می‌شود؟
شما به عنوان یک توسعه دهنده وب با کمک HTML5، یک معماری بهینه برای وب سایت ایجاد می‌کنید و با این کار، کار ربات‌های خزنده گوگل را راحت‌تر می‌کنید. در نتیجه سایت به خوبی و خوشی ایندکس (به معنی ثبت و فهرست‌بندی) می‌شود.
وقتی که سایت شما معماری خوبی داشته باشد و به راحتی ایندکس شود، نزد گوگل اعتبار و درجه بالاتری خواهد داشت. اعتبار بالا باعث می‌شود در نتایج جستجو رتبه بالایی داشته باشید و به راحتی دیده شوید. این موضوع منجر به افزایش بازدید و رونق سایت می‌شود.
بد نیست بدانید کمتر از 1% از کاربران به صفحه دوم نتایج جستجوی گوگل سر می‌زنند و این باعث شده تا کاربران در فضای مجازی، به شوخی صفحه دوم نتایج گوگل را محل خوبی برای پنهان کردن یک جسد تشبیه کنند. اینجاست که می‌فهمیم درک تگ‌های معنایی HTML5 برای یک توسعه دهنده فرانت‌اند تا چه حد مهم و تاثیرگذار است.
تصویر تشبیه صفحه دوم نتایج گوگل به محل خوبی برای پنهان کردن یک جسد
CSS سلسله مراتبی از ویژگی‌هایی را تشکیل می‌دهد که بر ظاهر عناصر سایت تاثیر می‌گذارند. CSS را می‌توان مکملی برای HTML دانست چراکه بدون CSS سایت ما هیچ‌گونه رنگ و لعابی ندارد.
اینطور تصور کنید که باب راس، نقاش معروف قصد دارد یک نقاشی رنگ‌روغن از طبیعت بکشد. او سرتاسر بوم سفید را با رنگ سفید می‌پوشاند. این پایین‌ترین سطح در سلسه مراتب است. مانند کلاسی که روی بدنه سایت اعمال می‌شود (کلاس یک قالب کد است. برای مثال اگر درخت را یک شی در نظر بگیریم، ویژگی‌هایی مانند قد، اندازه، رنگ و... را در یک کلاس تعریف کرده و به درخت اعمال می‌کنیم).
باب سپس یک درخت را با رنگ سبز یشمی رنگ‌آمیزی می‌کند (در برنامه نویسی این ویژگی در کلاس tree نوشته شده و به درخت اعمال می‌شود). برای اینکه این درخت تنها نباشد، درختان دیگری هم اضافه کرده و آن‌ها را رنگ‌آمیزی می‌کند. در برنامه نویسی اگر بخواهیم چنین کاری انجام دهیم، تنها کافیست درختان دیگری اضافه کنیم و کلاس tree را به آن‌ها اعمال کنیم، بدون اینکه نیاز باشد دوباره همان ویژگی‌ها را بنویسیم. همچنین می‌توانیم به هر درخت کلاس‌های دیگری هم اعمال کنیم تا ویژگی‌های جدیدی داشته باشد مثلا یک کلاس برای سایه درخت می‌نویسیم و آن را به هر درختی که بخواهیم اعمال می‌کنیم. این است جادوی CSS!
تصویر باب راس در حال نقاشی رنگ روغن
تا اینجای کار شما می‌توانید با استفاده از HTML برای سایت خود ساختار ایجاد کنید، سپس با استفاده از CSS به آن استایل دهید و زیبایش کنید. اما قدرت CSS به همین‌جا ختم نمی‌شود و شما با یادگیری CSS پیشرفته می‌توانید انیمیشن‌های پیچیده و تایپوگرافی‌های زیبایی را طراحی کنید.
اکنون باید بتوانید کدهای سایت را به‌گونه‌ای تغییر دهید تا برای نمایش در صفحات کوچک موبایل و تبلت سازگار یا به اصطلاح ریسپانسیو شود. امروزه اکثر کاربران از موبایل برای جستجو در وب استفاده می‌کنند. آن‌ها در صورتی‌که وارد سایتی شوند و برای مشاهده مطالب آن ناچار به زوم کردن باشند، با ناامیدی سایت را ترک می‌کنند. همچنین گوگل نیز ترجیح می‌دهد چنین سایت‌هایی را در نتایج جستجو نشان ندهد و به نوعی آن‌ها را از دایره رقابت حذف می‌کند.
اینجاست که باز هم می‌توانیم روی قدرت CSS حساب باز کنیم و با یادگیری ریسپانسیو کردن سایت بدون فریمورک از این چالش هم سربلند بیرون برویم.
CSS grid یک ماژول در CSS است که به توسعه‌دهندگان وب کمک می‌کند طرح‌های پیچیده واکنش‌گرا را راحت‌تر پیاده‌سازی کنند. grid این امکان را می‌دهد که بتوان صفحه را به بخش‌های مختلف تقسیم کرد؛ به‌گونه‌ای که این بخش‌ها با یکدیگر تداخل نداشته باشند.
FlexBox نیز یکی از ماژول‌های CSS است که کار را در طراحی وب بسیار ساده کرده و نمای تازه‌ای به صفحات HTML می‌بخشد. با استفاده از ماژول FlexBox می‌توان طراحی چند سطری و یا چند ستونی را با زحمت کمتری انجام داد و بهتر آن را مدیریت کرد.
یکی از تفاوت‌های اصلی CSS grid با flexbox در مورد بعد است. ما در صفحه وب معمولا عناصر را به 2 حالت تک بعدی و دو بعدی در نظر می‌گیریم. مثلا منو سایت ما را نگاه کنید، این منو به عنوان یک عنصر تک بعدی شناخته می‌شود، یعنی در یک مسیر یا یک جهت قرار گرفته است (فقط در جهت محور طول). برای پیاده‌سازی چنین چیزی بهتر است از flexbox استفاده کنیم، البته با CSS grid هم این کار شدنی است اما flexbox با کد کمتر و کیفیت بهتر این کار را انجام می‌دهد.
در طرف مقابل ساختار دو بعدی را داریم. مثلا منوی بالای صفحه با منوی کنار صفحه یک سایت را کنار یکدیگر به عنوان یک عنصر دوبعدی در نظر بگیرید. یعنی اِلمان‌ها در دو بعد یا دو جهت قرار گرفته‌اند. در این حالت استفاده از CSS grid توصیه می‌شود. چون سرعت کار را بالا برده و خروجی بهتری می‌دهد.
نباید فراموش کرد که هیچ کدام از این دو ماژول بر دیگری برتری ندارد و هر کدام در جای خود مناسب و کاربردی هستند. باید با توجه به نیاز، بهترین و مناسب‌ترین ماژول را انتخاب کرد. همچنین می‌توان به طور همزمان از CSS grid و flexbox استفاده کرد تا کار با قالب بندی و Layout آسان‌تر شود.
تفاوت CSS grid با flexbox
اگر تا این جا مراحل را به خوبی پیش رفته باشید، می‌توانید پروژه‌های تمرینی انجام دهید و آموخته‌هایتان را به چالش بکشید. شما با انجام پروژه می‌توانید تشخیص دهید که آیا مطالب را به درستی یاد گرفته‌اید یا نیاز به تمرین بیشتر دارید. همچنین در صورتی که در آینده با این چالش‌ها مواجه شدید، به سرعت و به راحتی می‌توانید از پس آن‌ها برآیید؛ چراکه قبلا با آن‌ها مواجه شده‌اید و راه حل را می‌دانید. بهترین روش این است که سری به وب سایت dribbble بزنید و یک طرح را انتخاب و سپس کدنویسی کنید. حتی می‌توانید یکی از وب سایت‌هایی که روزانه با آن سروکار زیادی دارید را انتخاب کرده و طرح آن را مجددا کدنویسی کنید. همچنین به عنوان تمرین بیشتر می‌توانید قالب‌های رایگان موجود در اینترنت را دانلود کرده و کدهایشان را بخوانید.
هنگامی که توسعه وب را انجام می‌دهید، دوست دارید در زمان خود صرفه‌جویی کنید و ترجیح می‌دهید از کدهای استانداردی که قبلا امتحانشان را پس داده‌اند، استفاده کنید. به همین دلیل توصیه می‌شود استفاده از کتابخانه‌ها و فریمورک‌ها را هم یاد بگیرید.
کتابخانه، قطعه کدی است که می‌توان بارها و بارها از آن استفاده کرد اما فریمورک، برنامه بزرگیست که از قبل نوشته شده است. فریمورک از چندین کتابخانه تشکیل می‌شود و کنترل بیشتری روی برنامه ما دارد.
یکی از محبوب‌ترین فریمورک‌ها، فریمورک بوت استرپ (Bootstrap) است. این فریمورک تقریبا هر آنچه که ما برای طراحی صفحات سایت نیاز داریم را تدارک دیده است. با کمک کدهای از پیش تعریف شده در این فریمورک، به راحتی و در عرض چند دقیقه می‌توانیم فرم‌ها، دکمه‌ها، هشدارها و منوهای مورد نظرمان را ایجاد کنیم و خیلی سریع‌تر از قبل پروژه را به پایان برسانیم. البته می‌توانیم استایل‌های موردنظر خودمان را هم اعمال کنیم. البته این‌ها فقط اندکی از مزایای بوت استرپ هستند. بهتر است بیشتر از این دهانتان را آب نیندازیم؛ خودتان دست به کار شوید و این فریمورک را امتحان کنید تا به قدرت درونش پی ببرید.
اگر بخواهیم مثالی از بدن انسان بزنیم، HTML اسکلت بدن، CSS پوست و JavaScript ماهیچه‌های بدن هستند که به ما در حرکت کمک می‌کنند.
زبان جاوااسکریپت با افزودن قابلیت‌ها، وب سایت را زنده می‌کند. این زبان مسئول عناصری است که کاربر می‌تواند با آن‌ها ارتباط برقرار کند، مانند منوهای کشویی، فرم‌های تماس، فرم‌های ثبت نام و.... همچنین برای ایجاد مواردی مانند انیمیشن‌ها، پخش ویدئو و نقشه‌های تعاملی استفاده می‌شود.
با استفاده از جاوااسکریپت می‌توانید کارهای شگفت‌انگیزی روی سایت انجام دهید. اما ما برای اینکه کارمان راحت‌تر باشد ترجیح می‌دهیم از jQuery که یکی از کتابخانه‌های محبوب جاوااسکریپت است استفاده کنیم. البته برای یاد گرفتن و کار با جی‌کوئری شما به دانستن HTML، CSS و کمی جاوااسکریپت نیاز دارید. گرچه جی‌کوئری یکی از کتابخانه‌های قدیمی جاوااسکریپت است اما بسیار قدرتمند است و شما می‌توانید کدنویسی مواردی از قبیل اعتبارسنجی فرم‌های ورود و ثبت نام را با آن انجام دهید.
تصویر HTML CSS JS به اسکلت و پوست و گوشت انسان
ما با استفاده از ابزار Gulp می‌توانیم کارهای تکراری، زمانبر و اعصاب خردکن را به صورت خودکار انجام دهیم و به این ترتیب از برنامه نویسی لذت بیشتری ببریم.
به طور کلی با Gulp می‌توانیم کارهای زیر را انجام دهیم:
اگر دوست دارید درباره گالپ و نحوه نصب آن بیشتر بدانید، مطالعه مقاله "Gulp چیست و چه کاربردی دارد؟" را به شما پیشنهاد می‌کنیم.
احتمالا با شنیدن اسم پاگ به یاد سگ‌های خوشگل و دوست داشتنی نژاد Pug می‌افتید، اما پاگ در دنیای برنامه نویسی کاربرد دیگری دارد. Pug یک Template Engine برای HTML است که به ما کمک می‌کند تا کارهایمان را سریع‌تر و راحت‌تر انجام دهیم.
Template Engine، برنامه است که قالب‌های نوشته شده به زبان‌های مختلف (طیف گسترده‌ای از زبان‌ها را شامل می‌شود) را به HTML کامپایل می‌کند. پاگ حجم کدها را تا حد قابل توجهی کاهش می‌دهد. همچنین، خوانایی کدها در تمپلیت انجین پاگ بسیار بالا است و بیشتر شبیه به پاراگراف‌های جذابی به نظر می‌رسند که به راحتی می‌توان آن‌ها را خواند. تگ‌ها در پاگ نیازی به بسته شدن ندارند و از همه مهم‌تر اینکه جاوا اسکریپت و Pug به خوبی با هم سازگار هستند و می‌توانید به‌راحتی کدهای جاوا اسکریپت خود را درون پاگ قرار دهید.
اگر درباره نحوه عملی استفاده از پاگ کنجکاو هستید، پینشهاد می‌کنیم مقاله "Pug چیست؟" را مطالعه کنید.
تصویر پاگ
Sass یک پیش‌پردازنده CSS است که تا حد زیادی محدودیت‌ها و ضعف‌های این زبان را جبران می‌کند. Sass به ما اجازه می‌دهد از ویژگی‌هایی مانند تعریف متغیرها، قواعد تودرتو و ارث‌بری در CSS استفاده کنیم. به این ترتیب با کمک Sass کدنویسی ما بسیار ساده‌تر و سریع‌تر می‌شود.
این مرحله برای شما ضروری نیست اما اگر قصد دارید رزومه خودتان را پربارتر کنید، یاد گرفتن فتوشاپ در حد توانایی تغییر سایز و حجم تصاویر برایتان مفید خواهد بود و از چشم کارفرما دور نخواهد ماند.
تفاوتی نمی‌کند که در چه زمینه‌ای برنامه نویسی می‌کنید؛ به هر حال باید کار کردن با سیستم کنترل نسخه را یاد بگیرید. فرض کنید اعضای تیم شما ساکن شهرهای مختلفی هستند و به صورت ریموت روی پروژه‌هایتان کار می‌کنید. برای این منظور باید سیستمی داشته باشید که بتوانید با کمک آن کد منبع و تغییراتی که در طول زمان روی آن انجام می‌شود را مدیریت کنید. سیستم کنترل نسخه به شما امکان می‌دهد در صورتی که اشتباهی در کدها رخ داد، هر زمان که خواستید به عقب برگردید.
گیت (Git) محبوب‌ترین سیستم کنترل نسخه است که اعضای یک تیم حرفه‌ای با کمک آن می‌توانند بدون تداخل و صرفه‌جویی در زمان به تکمیل بخش‌های مختلف پروژه بپردازند و به صورت بهینه یک پروژه را جلو ببرند.
شاید در ابتدای راه، یاد گرفتن نحوه کار با گیت برای شما ترسناک به نظر برسد، چراکه باید از دستورات خط فرمان استفاده کنید و این برای برنامه نویسان امروزی که به کدنویسی در محیط‌های زیبا عادت کرده‌اند کمی سخت است. اما نگران نباشید وقتی که آن را یاد بگیرید آن‌قدر دلبسته‌اش می‌شوید که بدون گیت نمی‌توانید کار کنید.
تصویر سیستم کنترل نسخه گیت
دوره متخصص طراحی وب رو باید بررسی بفرمایید.