آموزش HTML CSS از صفر: سرفصل‌ها، زمان یادگیری، هزینه دوره و مدرک در ۱۴۰۵

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

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

این دوره برای چه کسی است؟

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

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

در یک دوره خوب، HTML حدود ۲۵ ساعت از کل وقت را می‌گیرد. ترتیب منطقی درس‌ها این است:

• ساختار سند: تگ‌های html و head و body، عنوان صفحه، تعیین زبان فارسی و جهت راست‌به‌چپ با lang و dir، و اینکه چرا charset باید UTF-8 باشد تا حروف فارسی به‌هم نریزد.
• متن و لینک: عنوان‌های h1 تا h6، پاراگراف، فهرست‌ها، لینک به صفحه دیگر و به بخشی از همان صفحه.
• عکس و رسانه: تگ img با متن جایگزین (alt)، ویدیو و صدا، و اینکه چرا عکس سنگین سایت را کند می‌کند.
• جدول و فرم: جدول برای داده‌های جدولی، فرم ورود و ثبت‌نام، انواع input و برچسب (label) که هر فیلد را قابل فهم می‌کند.
• تگ‌های معنادار (semantic): header، nav، main، article، section و footer. این تگ‌ها به موتور جستجو و به صفحه‌خوان نابینایان می‌گویند هر بخش چه نقشی دارد.
• دسترس‌پذیری پایه: ترتیب درست عنوان‌ها، متن alt معنادار و فرمی که با صفحه‌کلید هم پر شود. راهنمای جهانی این کار WCAG است که نسخه ۲٫۲ آن در مهر ۱۴۰۲ منتشر شد.

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

HTML امروز نسخه شماره‌دار ندارد و «استاندارد زنده» نامیده می‌شود. نام HTML5 که روی دوره‌ها می‌بینید، همین نسل فعلی است. دوره‌ای که هنوز تگ‌هایی مثل font و center را درس می‌دهد، قدیمی است.

مرحله دوم: پایه CSS، حدود ۲۵ ساعت

• سه راه وصل کردن CSS به صفحه و اینکه چرا فایل جداگانه بهتر است.
• انتخابگرها (selector)، کلاس و شناسه، و قاعده آبشاری: وقتی دو دستور با هم تضاد دارند، کدام برنده می‌شود. بیشتر سردرگمی تازه‌کارها از همین نقطه است.
• مدل جعبه (box model): margin، border، padding و اندازه محتوا. تا این مفهوم جا نیفتد، هیچ چیدمانی درست درنمی‌آید.
• رنگ، فونت فارسی، واحدهای px و rem و درصد، و متغیرهای CSS تا رنگ‌های سایت در یک جا تعریف شوند.
• جای‌گذاری عناصر (position) و لایه‌ها.

مرحله سوم: چیدمان و واکنش‌گرایی، حدود ۳۰ ساعت

• Flexbox برای چیدن عناصر در یک ردیف یا یک ستون، مثل منو و کارت‌ها.
• Grid برای چیدمان دوبعدی کل صفحه، مثل صفحه اول یک فروشگاه.
• طراحی واکنش‌گرا (responsive) با media query و روش «اول موبایل»: صفحه اول برای گوشی نوشته می‌شود و بعد برای صفحه بزرگ‌تر باز می‌شود.
• عکس‌های واکنش‌گرا و ویژگی‌های تازه‌ای مثل container query و انتخابگر :has() که از ۱۴۰۲ در همه مرورگرهای اصلی کار می‌کنند.
• transition و animation ساده برای حرکت‌های کوچک دکمه و منو.

فارسی بودن سایت یک نکته جدا دارد: چیدمان راست‌به‌چپ. دوره‌ای که همه تمرین‌هایش انگلیسی و چپ‌به‌راست است، شما را با ویژگی‌هایی مثل direction و margin-inline تنها می‌گذارد. پیش از ثبت‌نام بپرسید آیا دست‌کم یک پروژه فارسی در دوره هست.

فاصله دوره ضعیف و دوره خوب در همین مرحله پیدا می‌شود. دوره ضعیف Flexbox و Grid را در یکی دو جلسه رد می‌کند. دوره خوب چند صفحه کامل را با آن‌ها از صفر می‌چیند و همان صفحه را در عرض گوشی، تبلت و لپ‌تاپ امتحان می‌کند. مرحله چهارم هم حدود ۲۰ ساعت است: ابزار توسعه‌دهنده مرورگر، ویرایشگر کد، ساختار پوشه پروژه، انتشار صفحه روی اینترنت و پروژه پایانی.

HTML و CSS از معدود مهارت‌هایی هستند که بخش بزرگشان را واقعا می‌شود رایگان یاد گرفت. سه دسته منبع رایگان در دسترس است:

• دوره‌های ویدیویی فارسی رایگان: دست‌کم یک آکادمی برنامه‌نویسی شناخته‌شده، دوره HTML و دوره CSS «مقدماتی تا پیشرفته» و دو دوره پروژه‌محور Flexbox و Grid را رایگان گذاشته است. این‌ها برای مرحله اول و دوم کافی‌اند.
• آموزش‌های متنی سازندگان مرورگرها: HTML و CSS را از پایه تا ویژگی‌های تازه توضیح می‌دهند. زبانشان بیشتر انگلیسی است و دقیق‌ترین مرجع برای وقتی است که می‌خواهید بدانید یک ویژگی واقعا چطور کار می‌کند.
• دوره‌های تمرینی با گواهی رایگان: یک سایت آموزشی بین‌المللی برای طراحی وب واکنش‌گرا گواهی رایگان می‌دهد و هر درس را با تمرین کدنویسی در همان صفحه جلو می‌برد.

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

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

عنوان آگهی‌ها نشان می‌دهد HTML و CSS فقط مال برنامه‌نویس‌ها نیست:

• ۱۳۵ آگهی برنامه‌نویس عمومی، فول‌استک یا بک‌اند بود، یعنی کسی که بیشتر با سرور کار می‌کند ولی باید صفحه را هم بفهمد.
• ۱۲۱ آگهی فرانت‌اند بود و ۱۱۵ تا از آن‌ها جاوا اسکریپت را هم می‌خواستند.
• ۱۰۱ آگهی سئو، تولید محتوا و دیجیتال مارکتینگ بود.
• ۸۴ آگهی طراحی سایت، وردپرس و مدیریت سایت بود.
• ۳۴ آگهی پشتیبانی و ادمین سایت و ۲۸ آگهی طراحی رابط کاربری و محصول بود.

کنار HTML و CSS، ۲۲۱ آگهی Git، ۱۸۳ آگهی طراحی واکنش‌گرا، ۷۲ آگهی Tailwind و ۳۰ آگهی Bootstrap خواسته بودند. ۱۳۱ آگهی نمونه‌کار می‌خواستند و ۳۱۶ آگهی، یعنی ۶۳ درصد، هیچ شرط تحصیلی ننوشته بودند. ۳۲۰ آگهی در استان تهران بود و ۶۰ آگهی کار دورکاری داشت.

۱۱۲ آگهی HTML و CSS را بدون جاوا اسکریپت و بدون هیچ زبان برنامه‌نویسی دیگری خواسته بودند. ۶۸ تا از آن‌ها سئو و محتوا و ۱۹ تا طراحی بود. پس HTML و CSS به‌تنهایی بیشتر راه کارهای کنار سایت را باز می‌کند تا برنامه‌نویسی را. ۶۶ آگهی از همین ۱۱۲ آگهی مبلغ نوشته بودند و میانه پیشنهادشان ۳۰ تا ۳۷٫۵ میلیون تومان در ماه بود. ۹ آگهی کارآموزی که مبلغ داشتند، میانه ۲۰ تا ۳۰ میلیون تومان پیشنهاد داده بودند. این‌ها پیشنهاد آگهی است، نه دریافتی واقعی، و خالص یا ناخالص بودنش نوشته نشده بود. حداقل دستمزد قانونی ۱۴۰۵ حدود ۲۱٫۸ میلیون تومان ناخالص در ماه است.

هزینه یادگیری HTML و CSS در ۱۴۰۵ از رایگان شروع می‌شود و در کلاس‌ها و بسته‌های آموزشگاهی تهران بین ۵ و ۱۲٫۹ میلیون تومان است. کلاس آنلاین زنده یک آموزشگاه بزرگ ۵٫۶۳ میلیون و نسخه حضوری آن ۷ میلیون تومان است. کلاس ۴۰ ساعته‌ای که مدرک فنی و حرفه‌ای هم می‌دهد، آنلاین ۹٫۱۵ و حضوری ۱۱٫۵ میلیون تومان است و دوره ۹۰ ساعته‌ای که جاوا اسکریپت و Bootstrap را هم دارد ۱۲٫۹ میلیون. اگر کسی هر دو استاندارد رسمی HTML و CSS را با سقف شهریه حضوری بگذراند، ۳۱۰ ساعت کلاس و حدود ۱۸٫۵ میلیون تومان خرج دارد. نسخه آنلاین همین دو استاندارد ۱۴٫۸ میلیون است.

برای مقایسه، هزینه هر ساعت را هم ببینید. کلاس ۴۰ ساعته ۱۱٫۵ میلیونی ساعتی حدود ۲۹۰ هزار تومان درمی‌آید و دوره ۹۰ ساعته ۱۲٫۹ میلیونی ساعتی حدود ۱۴۰ هزار تومان. سقف رسمی استاندارد HTML برای هر ساعت حدود ۵۸ هزار تومان است. یعنی دوره کوتاه همیشه ارزان‌تر نیست، فقط کوتاه‌تر است.

مدرک فنی و حرفه‌ای یا گواهی آموزشگاه؟

سازمان فنی و حرفه‌ای برای این مهارت چند استاندارد دارد: «برنامه‌نویس زبان HTML برای طراحی صفحات وب» ۱۷۰ ساعت، «طراحی قالب سایت با CSS» ۱۴۰ ساعت و یک استاندارد کوتاه‌تر مبانی طراحی وب ۵۴ ساعت. گواهی آن بعد از قبولی در آزمون کتبی و عملی صادر می‌شود و با کد ملی قابل استعلام است. این مدرک برای تدریس در آموزشگاه و پرونده‌هایی که مدرک رسمی می‌خواهند به کار می‌آید.

در بازار کار خصوصی وضع فرق دارد. در ۵۰۳ آگهی آبان ۱۴۰۵ که HTML یا CSS خواسته بودند، هیچ آگهی مدرک فنی و حرفه‌ای نخواسته بود و فقط یک آگهی داشتن گواهی دوره را امتیاز دانسته بود. در عوض ۱۳۱ آگهی نمونه‌کار خواسته بودند. پس اگر بین دو کلاس مردد هستید، کلاسی را انتخاب کنید که با چند پروژه واقعی و قابل نمایش تمام می‌شود، نه کلاسی که فقط مدرک بهتری می‌دهد.

پیش از ثبت‌نام چهار سؤال بپرسید: چند صفحه کامل سر کلاس ساخته می‌شود، تمرین‌ها راست‌به‌چپ و فارسی هم هست یا نه، مدرس کد تک‌تک شاگردها را می‌بیند و نظر می‌دهد یا نه، و Flexbox و Grid و طراحی واکنش‌گرا چند جلسه وقت دارند.

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

چارچوب‌های CSS را بعد از تسلط بر خود CSS بردارید، نه به جای آن. Tailwind CSS در آگهی‌ها بیشتر خواسته شده بود (۷۲ آگهی) و در پروژه‌های تازه رایج‌تر است. Bootstrap با ۳۰ آگهی بیشتر در پروژه‌های قدیمی‌تر، پنل‌های مدیریتی و قالب‌های آماده دیده می‌شود. هر دو بدون فهم مدل جعبه و Flexbox فقط کپی کردن کلاس‌هاست.

کنار این‌ها Git و GitHub را زود شروع کنید. ۲۲۱ آگهی آن را خواسته بودند و جای خوبی هم برای نگه داشتن نمونه‌کارهای HTML و CSS شماست.

مسیر به کدام سمت می‌رود؟

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

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