جاوااسکریپت را رها کنید! ابتدا باید HTML و CSS یاد بگیرید

گردآوری و تالیف : علیرضا معمارزاده
تاریخ انتشار : 15 آبان 1398
دسته بندی ها : طراحی وب

این ایده که شما می‌توانید در زمینهٔ توسعه front-end از جاوااسکریپت استفاده کنید و موفق شوید، یک اشتیاق روبه رشد در بین مردم است. 

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

چرا من به HTML و CSS نیاز دارم؟

قالب‌های کاری (UI) که ما امروزه می‌شناسیم مثل React و Vue روی بلوک‌های اصولی یک صفحه وب ساخته‌شده‌اند.

اگرچه قالب‌های کاری UI، این اصول را با استفاده از بعضی ابزارهای جالب و جاوااسکریپت تقویت می‌کنند، اما آنچه شما می‌سازید اساساً چیزی مشابه وبسایت Space Jam مربوط به سال 1996 است.

اما من این را می‌دانم که نوشتن دستی HTML و CSS منسوخ‌ شده است.

بدانید که ابزارهایتان چه‌کاری انجام می‌دهند!

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

شما ممکن است چیزهای عجیبی را در حال اجرا در مرورگر دیده باشید مثل‌ اینکه چرا HTML یک کد را به‌جای دیگری انتقال داده است؟ 

به مثال زیر توجه کنید:

جاوااسکریپت را رها کنید! ابتدا باید HTML و CSS یاد بگیرید

وقتی‌که شما چنین چیزی را در Chrome بارگذاری می‌کنید، متوجه یک سری تغییرات می‌شوید...

جاوااسکریپت را رها کنید! ابتدا باید HTML و CSS یاد بگیرید

چرا تمام پاراگراف‌های من به رنگ بنفش نیست؟ اشکال کار از کجاست؟

یک تگ پاراگراف (<p>) نمی‌تواند شامل اِلِمان بلوکی دیگری باشد، بنابراین Chrome و سایر مرورگرها، HTML شمارا به‌سرعت برای اعتباربخشی به آن انطباق می‌دهند. 

HTML در این مورد بسیار آسان‌گیر است! اما این‌یک ایراد رایج است که توسعه‌دهندگان قدیمی و جدیدی را که با نحوه عملکرد HTML آشنا نیستند، گیج می‌کند.

جادوی CSS را یاد بگیرید

این روزها CSS می‌تواند هرکاری انجام دهد که البته بیشتر از تنظیم تعداد کمی رنگ است و شما را قادر می‌سازد که الگوهای پیوسته UI را از طریق نرم‌افزارتان فراهم کنید.

اگر شما تازه‌ یادگیری جاوااسکریپت را شروع کرده‌اید، احتمالاً وسوسه شدید که هر کاری با آن انجام دهید اما به‌زودی متوجه می‌شوید که مدیریت تمام قدرت واقعی CSS در جاوااسکریپت شما، کاری پرزحمت و غیرضروری است مگر اینکه شما در محیط Facebook باشید.

شما چه‌کاری را می‌توانید با CSS انجام دهید؟ تنها با CSS، عنوان Alien movie  را بسازید. حالت شناور برای دکمه‌هایتان تعریف کنید یا هرچیزی را انیمیشن کنید

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

در زیر من نمونه کدی از آن را برای شما نوشته‌ام:

جاوااسکریپت را رها کنید! ابتدا باید HTML و CSS یاد بگیرید

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

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

جاوااسکریپت را رها کنید! ابتدا باید HTML و CSS یاد بگیرید

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

بنابراین به‌وسیله HTML، من می خواهم آن را طوری نشان دهم که به‌صورت زیر به نظر بیاید:

این کار به Bing (موتور جستجو شرکت مایکروسافت)، Google و تمام موتورهای جستجو اجازه می‌دهد که دقیقاً بفهمند چه چیزی باید مهمترین بخش صفحه باشد و به شناسایی سلسله‌مراتب کلی هم کمک می‌کند.

دسترسی‌های خاصی ایجاد کنید

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

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

یک لیست از راهنمای مسیر ساده رایج که امروزه در بیشتر وبسایت‌ها دیده می‌شود، تهیه کنید. ممکن است که وسوسه شوید تعداد کمی div بنویسید چون آنها به‌درستی کار می‌کنند؟ ویا به جای آن از تگ‌های معنایی (Semantic) استفاده کنید؟

جاوااسکریپت را رها کنید! ابتدا باید HTML و CSS یاد بگیرید

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

از این روش به‌عنوان قدم بعدی استفاده کنید، اگر این منوی راهنمای شما است، آن را در قالب یک اِلِمان راهنمای HTML5 بگذارید. 

کدتان را ساده کنید

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

با استفاده از کد‌های Html ما می‌توانیم یک منوی dropdown بسازیم.

با استفاده از مزیت‌های CSS، ما می‌توانیم به‌صورت پویا یک اِلِمان شبیه جعبه کنترل ایجاد کنیم که به‌صورت چک شده یا نشده عمل کند:

جاوااسکریپت را رها کنید! ابتدا باید HTML و CSS یاد بگیرید

این کار و هنر شماست، به آن توجه بیشتری کنید

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

به‌راحتی با فراگیر کردن کارتان و جذب مخاطب بیشتر برای نرم‌افزارتان، احساس برنده بودن خواهید داشت.

کلام آخر

در این مقاله ما بر اهمیت یادگیری html و css قبل از اینکه بخواهید جاوااسکریپت یاد بگیرید صحبت کردیم.

دوره‌هایی جدید و رایگان از html و css بر روی سایت قرار دارند. در زیر لینک آنها برای شما قرار می‌دهم.

آموزش کامل CSS

آموزش HTML 

منبع

مقالات پیشنهادی

  • ۱۰ کاراکتر طراحی شده با HTML و CSS

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

    ارسطو عباسی
  • چگونه از فیلترهای CSS استفاده کنیم ؟

    فیلترهای CSS ابزاری بسیار قدرتمند و مفید است که به ما اجازه می دهد تا روی تعدادی از المنت های مان افکت های بصری زیبایی را ایجاد کنیم. این فیلترها برای...

    ارسطو عباسی