آموزش رایگان طراحی سایت Google با HTML و CSS

قیمت فعلی: رایگان

قیمت دوره‌ ممکن است توسط سایت مبدا تغییر کند

آموزش رایگان طراحی سایت Google با HTML و CSS — از صفر تا قالب گوگل 🎯

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

آموزش رایگان طراحی سایت Google با HTML و CSS — از صفر تا قالب گوگل 🎯

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

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

📌 مشخصات دوره در یک نگاه

HTML اصلاً چیه و چرا باید یادش بگیری؟

HTML مخفف HyperText Markup Language هست؛ یعنی زبانی برای نشانه‌گذاری متن. با HTML محتوا و ساختار صفحه‌ات رو می‌سازی. مثل اسکلت بدن می‌مونه — بدون اون، هیچی سر جاش نیست.

این زبان اولین‌بار سال ۱۹۸۹ اختراع شد و از اون موقع تا حالا، پایه‌ی هر صفحه وبی بوده. حتی الان که نسخه HTML5 اومده، بازم همون نقش رو داره، فقط پویاتر و بهینه‌تر شده.

یه نکته کاربردی: وقتی برای اولین بار وارد دنیای HTML می‌شی، با سه مفهوم اصلی روبرو می‌شی — عناصر (Elements)، تگ‌ها (Tags) و ویژگی‌ها (Attributes). این سه‌تا رو خوب بفهمی، ۷۰٪ راه رو رفتی.

HTML به چه کارهایی میاد؟

• ساختاردهی به محتوای صفحه (تیتر، پاراگراف، لیست، لینک و...)
• تعریف بخش‌های مختلف صفحه مثل هدر، فوتر و بخش اصلی
• ایجاد فرم‌های ورودی اطلاعات
• لینک دادن بین صفحات مختلف

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

CSS چیه و چطور صفحه رو خوشگل می‌کنه؟

CSS مخفف Cascade Styling Sheets هست. اگه HTML اسکلت باشه، CSS همون پوست و ظاهریه که به صفحه‌ات جون می‌ده. رنگ، فاصله، چیدمان، سایه، فونت — همه‌شون کار CSS هستن.

این زبان حدود سال ۱۹۹۶ به وجود اومد تا صفحات وب فقط یه مشت متن خشک و خالی نباشن. الان دانستن CSS یکی از ضروری‌ترین مهارت‌های هر طراح سایته.

CSS برای چه مواردی استفاده می‌شه؟

• تعیین رنگ پس‌زمینه و متن
• تنظیم margin و padding
• تعیین عرض و ارتفاع عناصر
• ساخت چیدمان‌های مختلف (Flexbox، Grid و...)
• اضافه کردن انیمیشن و افکت‌های بصری

یه چیز جالب: CSS مستقل از HTML کار می‌کنه و حتی می‌تونی ازش توی هر زبان نشانه‌گذاری مبتنی بر XML هم استفاده کنی.

تفاوت HTML و CSS در چیه؟ (سوال خیلی از بچه‌ها)

خیلی از افراد فکر می‌کنن این دو تا یکی هستن، ولی فرق‌های اساسی دارن:

• HTML محتوا و ساختار رو تعریف می‌کنه، ولی CSS ظاهر و طراحی رو کنترل می‌کنه.
• HTML می‌تونه CSS رو توی خودش جا بده، ولی CSS نمی‌تونه HTML رو در خودش داشته باشه.
• HTML از تگ استفاده می‌کنه، CSS از سلکتور و بلوک اعلان.
• کد HTML معمولاً حجیم‌تره، ولی CSS سبک‌تر و سریع‌تر لود می‌شه.
• HTML بدون CSS هم کار می‌کنه (البته زشت و ساده)، ولی CSS بدون HTML معنی نداره.

HTML و CSS زبان برنامه‌نویسی هستن یا نه؟

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

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

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

با یادگیری HTML و CSS چه کارهایی می‌تونی بکنی؟

• طراحی قالب‌های وردپرس
• کار با فریمورک بوت‌استرپ
• دست‌کاری و شخصی‌سازی قالب‌های آماده
• ساخت لندینگ پیج‌های ساده
• آماده شدن برای یادگیری جاوااسکریپت و PHP

یه مثال واقعی: فرض کن استادت ازت خواسته یه صفحه شخصی برای معرفی خودت بسازی. با HTML و CSS می‌تونی توی چند ساعت یه صفحه تمیز و مرتب تحویل بدی — بدون نیاز به هیچ ابزار گرون‌قیمتی.

توی این دوره دقیقاً چی یاد می‌گیری؟ 📚

سرفصل‌های دوره به این ترتیبه:

• آشنایی با HTML و ایجاد پروژه
• ساخت صفحه سایت با HTML — بخش اول
• ساخت صفحه سایت با HTML — بخش دوم
• طراحی Header صفحه با CSS
• طراحی و استایل‌دهی بخش جستجو با CSS
• طراحی Footer صفحه با CSS

آخرش هم یه پروژه کامل داری: طراحی صفحه گوگل. یعنی هرچی یاد گرفتی رو روی یه نمونه واقعی پیاده می‌کنی.

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

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

اگه هیچ پیش‌زمینه‌ای هم نداری، نگران نباش. این دوره با زبان ساده نوشته شده و برای افراد غیرمتخصص هم قابل فهمه.

بعد از این دوره چه مهارت‌هایی داری؟

• کدنویسی با HTML و CSS در سطح مقدماتی تا متوسط
• درک اصول و مفاهیم پایه طراحی وب
• توانایی ساخت صفحات ساده و استایل‌دهی به اون‌ها
• آمادگی برای ورود به دوره‌های پیشرفته‌تر مثل جاوااسکریپت و PHP

جالب بدون که منبع اصلی این دوره، راهنمای رسمی توسعه‌دهندگان گوگل برای بهینه‌سازی کدهای HTML و CSS هست. یعنی داری از همون منبعی یاد می‌گیری که خود گوگل توصیه کرده.

منابع مکمل که پیشنهاد می‌شه بعد از این دوره بب