دوره آموزش HTML و CSS

فول دوره آموزش HTML و CSS؛ از صفر تا طراحی صفحات حرفه‌ای وب

مدرس: Simon Bao 💻🌐

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

HTML برای ساختار صفحه
و
CSS برای ظاهر و طراحی آن.

اگر می‌خواهید وارد دنیای طراحی وب و Front-End شوید، یادگیری HTML و CSS یکی از اولین و مهم‌ترین قدم‌هاست.

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

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

🌐 در این دوره با چه موضوعاتی آشنا می‌شوید؟

• HTML چیست و چه نقشی در وب دارد؟
• CSS چیست و چگونه ظاهر صفحات را کنترل می‌کند؟
• ساخت اولین صفحه HTML
• ساختار استاندارد یک HTML Document
• Heading و Paragraph
• Link و Anchor
• کار با Image
• ساخت Listها
• Tableها
• Form و Input
• Button و عناصر تعاملی
• Semantic HTML
• استفاده از Class و ID
• اتصال CSS به HTML
• Selectorهای مختلف CSS
• Color و Background
• Font و Typography
• Margin و Padding
• Border و Border Radius
• Width و Height
• Box Model
• Display
• Position
• Flexbox
• CSS Grid
• Responsive Design
• Media Query
• طراحی Navbar
• ساخت Card
• طراحی Sectionهای مختلف
• ساخت Landing Page
• طراحی فرم‌های زیبا
• Hover Effect و Transition
• مدیریت Layout صفحات
• اصول ساخت UI تمیز
• تمرین پروژه‌های واقعی HTML و CSS

🧱 HTML؛ اسکلت یک صفحه وب

فرض کنید می‌خواهید یک خانه بسازید.

قبل از رنگ، دکوراسیون و وسایل، ابتدا باید ساختار اصلی خانه شکل بگیرد.

در طراحی وب، HTML تقریباً همین نقش را دارد.

با HTML مشخص می‌کنید:

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

HTML ظاهر حرفه‌ای ایجاد نمی‌کند؛ ساختار محتوا را می‌سازد.

🏷️ Tagها؛ زبان ساختار HTML

HTML از Tagهای مختلف تشکیل می‌شود.

مثلاً:

Heading
Paragraph
Image
Link
Button
Form

هر Tag نقش مشخصی در ساخت صفحه دارد.

در ابتدای کار ممکن است تعداد Tagها زیاد به نظر برسد، اما خیلی زود متوجه می‌شوید که مجموعه‌ای از عناصر پرکاربرد بارها در پروژه‌های مختلف تکرار می‌شوند.

🧠 Semantic HTML؛ فقط چیزی نسازید که «کار کند»

HTML خوب فقط مجموعه‌ای از divها نیست.

تگ‌های Semantic مثل:

header
nav
main
section
article
footer

کمک می‌کنند ساختار صفحه معنی مشخص‌تری داشته باشد.

این موضوع می‌تواند برای نظم پروژه، Accessibility و حتی درک بهتر ساختار توسط موتورهای جست‌وجو مفید باشد.

🎨 CSS؛ جایی که صفحه شما ظاهر پیدا می‌کند

اگر HTML اسکلت صفحه باشد، CSS مسئول ظاهر آن است.

با CSS می‌توانید تعیین کنید:

رنگ چیست؟
فونت چه باشد؟
فاصله عناصر چقدر باشد؟
دکمه چه شکلی باشد؟
عناصر کجا قرار بگیرند؟
صفحه روی موبایل چگونه نمایش داده شود؟

همین‌جاست که یک صفحه ساده HTML کم‌کم به یک Website واقعی شبیه می‌شود.

🎯 Selector؛ دقیقاً چه چیزی را می‌خواهید تغییر دهید؟

در CSS ابتدا باید مشخص کنید Style روی کدام عنصر اعمال شود.

می‌توانید بر اساس:

Tag
Class
ID
یا ساختار عناصر

انتخاب انجام دهید.

شناخت Selectorها اهمیت زیادی دارد، چون در پروژه‌های بزرگ‌تر باید بتوانید دقیقاً همان قسمتی را تغییر دهید که می‌خواهید، بدون اینکه بخش‌های دیگر خراب شوند.

📦 Box Model؛ یکی از مهم‌ترین مفاهیم CSS

تقریباً هر عنصر در صفحه را می‌توان مثل یک Box در نظر گرفت.

این Box بخش‌هایی مثل:

Content
Padding
Border
Margin

دارد.

وقتی Box Model را درست بفهمید، بسیاری از مشکلات مربوط به فاصله‌ها و اندازه عناصر بسیار قابل‌درک‌تر می‌شوند.

↔️ Margin و Padding را اشتباه نگیرید

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

Padding فاصله داخل عنصر است.

Margin فاصله عنصر با عناصر اطراف است.

درک همین تفاوت ساده برای ساخت Layout مرتب بسیار مهم است.

🔠 Typography؛ متن فقط محتوا نیست

Font، اندازه متن، Line Height و فاصله‌ها روی ظاهر کلی سایت تأثیر زیادی دارند.

یک سایت ممکن است از نظر ساختار کاملاً درست باشد اما با Typography نامناسب، آماتور دیده شود.

در طراحی حرفه‌ای باید برای:

Heading
Subtitle
Body Text
Button Text

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

🎨 Color؛ فقط رنگ موردعلاقه را انتخاب نکنید

یک UI حرفه‌ای معمولاً از Palette مشخص استفاده می‌کند.

برای مثال:

Primary Color
Secondary Color
Background
Text Color
Accent

وقتی رنگ‌ها به‌صورت منظم استفاده شوند، طراحی یکپارچه‌تر به نظر می‌رسد.

📐 Layout؛ عناصر را درست کنار هم قرار دهید

بخش بزرگی از طراحی وب درباره این است که:

چه چیزی کجا قرار بگیرد؟

Navbar بالا.

Hero Section.

قسمت خدمات.

Cards.

Testimonials.

Footer.

CSS ابزارهای مختلفی برای ساخت این Layoutها ارائه می‌دهد و دو مورد بسیار مهم آن:

Flexbox و CSS Grid

هستند.

↔️ Flexbox؛ ساخت Layoutهای منعطف

Flexbox یکی از ابزارهای اصلی CSS مدرن است.

با آن می‌توانید خیلی راحت:

عناصر را کنار هم قرار دهید،
وسط‌چین کنید،
فاصله ایجاد کنید،
ترتیب را کنترل کنید
و Layoutهای Responsive بسازید.

بعد از یادگیری Flexbox، بسیاری از کارهایی که قبلاً پیچیده به نظر می‌رسیدند ساده‌تر خواهند شد.

🔲 CSS Grid؛ کنترل قدرتمندتر روی صفحه

Grid زمانی بسیار کاربردی است که Layout ساختار سطری و ستونی داشته باشد.

مثلاً:

Product Cards
Gallery
Dashboard
Portfolio

با CSS Grid می‌توانید تعداد ستون‌ها، فاصله‌ها و رفتار Layout را کنترل کنید.

Flexbox و Grid رقیب هم نیستند؛ در پروژه‌های واقعی معمولاً هر دو در کنار هم استفاده می‌شوند.

📱 Responsive Design؛ سایت فقط برای لپ‌تاپ نیست

کاربر ممکن است سایت شما را روی:

Desktop
Laptop
Tablet
Mobile

باز کند.

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

Responsive Design کمک می‌کند Layout متناسب با اندازه صفحه تغییر کند.

📏 Media Query؛ طراحی برای صفحه‌های مختلف

Media Query یکی از ابزارهای CSS برای ایجاد طراحی Responsive است.

مثلاً می‌توانید مشخص کنید:

در Desktop منو کامل نمایش داده شود.

در Mobile اندازه Font کاهش پیدا کند.

Cards از سه ستون به یک ستون تبدیل شوند.

Padding صفحه کمتر شود.

به این ترتیب همان HTML می‌تواند در دستگاه‌های مختلف ظاهر مناسب‌تری داشته باشد.

🧭 Navbar؛ یکی از اولین پروژه‌های واقعی

Navbar تقریباً در بیشتر سایت‌ها وجود دارد.

Logo.

Menu.

Login.

CTA.

و در Mobile شاید Hamburger Menu.

ساخت یک Navbar خوب تمرین بسیار مناسبی برای یادگیری:

Flexbox
Spacing
Alignment
Responsive Design

است.

🪪 Card؛ کامپوننتی که همه‌جا می‌بینید

کارت‌های محصول، مقاله، دوره و خدمات از رایج‌ترین الگوهای UI هستند.

یک Card می‌تواند شامل:

Image
Title
Description
Price
Button

باشد.

ساخت همین Component ساده تمرین بسیار خوبی برای Border، Shadow، Padding و Hover Effect است.

🖱️ Hover و Transition؛ طراحی را زنده‌تر کنید

گاهی یک تغییر کوچک هنگام حرکت Mouse روی Button می‌تواند حس حرفه‌ای‌تری به صفحه بدهد.

با CSS می‌توانید Hover State بسازید و با Transition تغییرات را نرم‌تر کنید.

مثلاً:

تغییر رنگ
حرکت جزئی
Shadow
Scale

اما هدف این نیست که تمام صفحه مدام حرکت کند؛ افکت باید در خدمت تجربه کاربری باشد.

📝 Form؛ ارتباط کاربر با سایت

تقریباً هر سایت واقعی نوعی Form دارد.

Login.

Registration.

Search.

Contact.

Newsletter.

در HTML ساختار Form و Inputها را ایجاد می‌کنید و با CSS ظاهر آن‌ها را طراحی می‌کنید.

ساخت یک Form تمیز و Responsive یکی از پروژه‌های مهم برای افراد مبتدی است.

🖼️ Image؛ فقط عکس را داخل صفحه نیندازید

تصاویر باید از نظر:

اندازه
نسبت
موقعیت
و رفتار Responsive

کنترل شوند.

اگر تصویر بزرگ‌تر از Container باشد یا نسبت مناسبی نداشته باشد، Layout به‌راحتی خراب می‌شود.

CSS کمک می‌کند تصاویر را بهتر داخل طراحی مدیریت کنید.

🧹 کد مرتب، پروژه قابل‌مدیریت‌تر

در یک پروژه کوچک شاید هر نوع کدنویسی جواب بدهد.

اما وقتی تعداد صفحات و Styleها بیشتر می‌شود، ساختار اهمیت پیدا می‌کند.

نام‌گذاری درست Classها، مرتب کردن CSS و جلوگیری از تکرار غیرضروری Styleها باعث می‌شود پروژه راحت‌تر قابل‌ویرایش باشد.

🔍 Inspect Element؛ یکی از بهترین ابزارهای یادگیری

Browser DevTools به شما اجازه می‌دهد HTML و CSS صفحه را مستقیماً بررسی کنید.

می‌توانید Styleها را موقتاً تغییر دهید و نتیجه را همان لحظه ببینید.

این ابزار برای:

Debugging
آزمایش طراحی
پیدا کردن مشکل Layout
و یادگیری از سایت‌های دیگر

بسیار کاربردی است.

🐞 وقتی طراحی خراب شد، نترسید

یک عنصر رفت بیرون صفحه؟

Flex کار نمی‌کند؟

Margin عجیب شده؟

Mobile Layout خراب است؟

این اتفاقات بخش طبیعی یادگیری Web Development هستند.

باید یاد بگیرید مشکل را مرحله‌به‌مرحله پیدا کنید.

گاهی فقط یک Property کوچک دلیل تمام مشکل است.

🏗️ فقط Tutorial نبینید؛ سایت بسازید

بهترین راه یادگیری HTML و CSS ساخت پروژه است.

بعد از هر بخش می‌توانید چیزی بسازید:

Personal Profile
Landing Page
Portfolio
Restaurant Website
Product Page
Blog Layout
Login Form

با هر پروژه با مشکلات جدیدی روبه‌رو می‌شوید و دقیقاً همان‌جا یادگیری عمیق‌تر اتفاق می‌افتد.

🎨 طراحی را از روی نمونه بازسازی کنید

یکی از تمرین‌های عالی این است که یک طراحی ساده انتخاب کنید و بدون دیدن کد آن، سعی کنید با HTML و CSS بازسازی‌اش کنید.

در این تمرین باید خودتان تصمیم بگیرید:

این Layout با Flex بهتر است یا Grid؟

Padding چقدر باشد؟

Font Size مناسب چیست؟

Responsive آن چگونه باشد؟

این کار شما را از دنبال‌کننده Tutorial به حل‌کننده مسئله تبدیل می‌کند.

🚀 HTML و CSS پایان مسیر نیست؛ شروع مسیر است

بعد از تسلط روی HTML و CSS می‌توانید وارد مرحله بعد شوید:

JavaScript
React
Next.js
Tailwind CSS
Bootstrap
Front-End Development

اما تمام این ابزارها زمانی قابل‌فهم‌تر خواهند بود که پایه HTML و CSS شما قوی باشد.

Frameworkها تغییر می‌کنند.

ابزارها تغییر می‌کنند.

اما مفاهیم اصلی Web همچنان اهمیت دارند.

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

• افراد کاملاً مبتدی در برنامه‌نویسی
• علاقه‌مندان به طراحی سایت
• کسانی که قصد ورود به Front-End دارند
• دانشجویان رشته‌های کامپیوتر
• طراحان UI/UX که می‌خواهند Coding یاد بگیرند
• صاحبان کسب‌وکارهایی که می‌خواهند ساختار سایت را بهتر بفهمند
• فریلنسرهای مبتدی
• علاقه‌مندان به Web Development
• کسانی که قصد یادگیری JavaScript و React در آینده دارند
• افرادی که می‌خواهند صفحات Responsive طراحی کنند

💻 از یک صفحه سفید تا اولین وب‌سایت واقعی

در شروع فقط چند Tag و Property دارید.

اما همین ابزارهای ساده وقتی کنار هم قرار بگیرند می‌توانند به:

Landing Page
Portfolio
Blog
Product Page
یا یک Website کامل

تبدیل شوند.

دوره «فول دوره آموزش HTML و CSS با Simon Bao» کمک می‌کند از پایه با ساختار صفحات وب آشنا شوید و مهارت‌های اصلی HTML، CSS، Box Model، Flexbox، Grid و Responsive Design را در پروژه‌های واقعی تمرین کنید.

قرار نیست فقط کدهایی را که مدرس می‌نویسد کپی کنید.

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

برای مشاهده این دوره و دسترسی به آموزش‌های بیشتر برنامه‌نویسی و طراحی وب:

wsho.ir