آموزش جامع توسعه وب با HTML و CSS: ساخت وب‌سایت‌های ریسپانسیو - آخرین آپدیت

سرفصل ها و درس ها

ماژول ۱: شروع یادگیری توسعه وب Module 1: Getting Started with Web Development

• درک مفاهیم پایه توسعه وب 1. Understanding the Basics of Web Development

• وب‌سایت‌ها در پشت صحنه چگونه کار می‌کنند 2. How Websites Function Behind the Scenes

• راه‌اندازی ابزارهای ضروری برای توسعه وب 3. Setting Up Essential Tools for Web Development

ماژول ۲: مفاهیم پایه HTML برای ساخت صفحات وب Module 2: Core HTML Concepts for Building Web Pages

• آشنایی با HTML و کاربرد آن 1. Introduction to HTML and Its Purpose

• ساختار یک سند HTML 2. Structure of an HTML Document

• کار با تیترها، پاراگراف‌ها و محتوای متنی 3. Working with Headings, Paragraphs, and Text Content

• سازماندهی چیدمان با استفاده از تگ div و کامنت‌های HTML 4. Organizing Layout Using <div> Elements and HTML Comments

ماژول ۳: افزودن لینک‌ها و تصاویر برای بهبود صفحات وب Module 3: Adding Links and Images to Enhance Web Pages

• ایجاد هایپرلینک‌ها با استفاده از تگ‌های Anchor 1. Creating Hyperlinks Using Anchor Tags

• افزودن و نمایش تصاویر در صفحات وب 2. Adding and Displaying Images in Web Pages

ماژول ۴: سازماندهی محتوا با استفاده از لیست‌های HTML Module 4: Organizing Content Using HTML Lists

• آشنایی با لیست‌های HTML 1. Introduction to HTML Lists

• درک لیست‌های مرتب و نامرتب 2. Understanding Ordered and Unordered Lists

• کار با لیست‌های تو در تو و لیست‌های تعریفی 3. Working with Nested and Definition Lists

ماژول ۵: ساخت فرم‌ها و مدیریت ورودی‌های کاربر Module 5: Creating Forms and Handling User Input

• آشنایی با فرم‌های HTML و ورودی‌های کاربر 1. Introduction to HTML Forms and User Input

• بررسی انواع مختلف Inputها 2. Exploring Different Input Types

• بهبود فرم‌ها با اعتبارسنجی و اتریبیوت‌ها 3. Enhancing Forms with Validation and Attributes

ماژول ۶: طراحی و ساختاردهی داده‌ها با جداول HTML Module 6: Designing and Structuring Data with HTML Tables

• آشنایی با جداول: ردیف‌ها، ستون‌ها و تگ‌های اصلی 1. Introduction to Tables: Rows, Columns, and Core Tags

• ساختاردهی جداول با thead، tbody و tfoot 2. Structuring Tables with <thead>, <tbody> and <tfoot>

• ادغام سلول‌ها با استفاده از Colspan و Rowspan 3. Merging Cells Using Colspan and Rowspan

ماژول ۷: نوشتن HTML تمیز و معنادار با تگ‌های Semantic Module 7: Writing Clean and Meaningful HTML with Semantics

• آشنایی با عناصر Semantic در HTML 1. Introduction to Semantic HTML Elements

• ساخت یک صفحه وب معنایی با ساختار درست 2. Building a Well-Structured Semantic Web Page

• بهبود سئو (SEO) و دسترسی‌پذیری با مارک‌آپ معنایی 3. Improving SEO and Accessibility with Semantic Markup

ماژول ۸: شروع کار با CSS برای استایل‌دهی وب Module 8: Getting Started with CSS for Web Styling

• درک CSS و نقش آن در طراحی وب 1. Understanding CSS and Its Role in Web Design

• نحوه همکاری CSS در کنار HTML 2. How CSS Works Alongside HTML

• اعمال CSS به روش‌های Inline، Internal و External 3. Applying CSS Using Inline, Internal, and External Methods

ماژول ۹: درک انتخابگرهای CSS و تکنیک‌های استایل‌دهی Module 9: Understanding CSS Selectors and Styling Techniques

• آشنایی با انتخابگرهای (Selectors) CSS 1. Introduction to CSS Selectors

• استفاده از انتخابگرهای Element، Class و ID 2. Using Element, Class, and ID Selectors

• کار با انتخابگرهای Universal و Grouped 3. Working with Universal and Grouped Selectors

• اعمال استایل‌ها با استفاده از ویژگی‌ها و مقادیر CSS 4. Applying Styles Using CSS Properties and Values

ماژول ۱۰: استایل‌دهی متن و تایپوگرافی برای خوانایی بهتر Module 10: Styling Text and Typography for Better Readability

• اهمیت تایپوگرافی در طراحی وب 1. Importance of Typography in Web Design

• استایل‌دهی به فونت‌ها، اندازه‌ها و ظاهر متن 2. Styling Fonts, Sizes, and Text Appearance

• بهبود متن با تزئینات و فاصله‌گذاری 3. Enhancing Text with Decorations and Spacing

ماژول ۱۱: بررسی عمیق مدل جعبه‌ای (Box Model) در CSS Module 11: Exploring the CSS Box Model in Depth

• مروری بر مدل جعبه‌ای (Box Model) در CSS 1. Overview of the CSS Box Model

• درک Margin، Border، Padding و Content 2. Understanding Margin, Border, Padding, and Content

• مدیریت Overflow و Box Sizing 3. Managing Overflow and Box Sizing

ماژول ۱۲: کنترل چیدمان با ویژگی‌های Display در CSS Module 12: Controlling Layouts with CSS Display Properties

• توضیح عناصر Block و Inline 1. Block and Inline Elements Explained

• بررسی مقادیر مختلف ویژگی Display 2. Exploring Different Display Property Values

• کنترل نمایش و رندرینگ عناصر 3. Controlling Element Visibility and Rendering

ماژول ۱۳: جای‌گذاری عناصر صفحه با استفاده از CSS Module 13: Positioning Page Elements Using CSS

• آشنایی با مفاهیم جای‌گذاری (Positioning) در CSS 1. Introduction to CSS Positioning Concepts

• کار با حالت‌های Static، Relative، Absolute، Fixed و Sticky 2. Working with Static, Relative, Absolute, Fixed, and Sticky Positioning

• استفاده از آفست‌های Top، Right، Bottom و Left 3. Using Top, Right, Bottom, and Left Offsets

• مدیریت ترتیب روی هم قرارگیری با Z-Index 4. Managing Stacking Order with Z-Index

ماژول ۱۴: ساخت چیدمان‌های ریسپانسیو با Flexbox Module 14: Building Responsive Layouts with Flexbox

• آشنایی با سیستم چیدمان Flexbox 1. Introduction to Flexbox Layout System

• درک Flex Container، محور اصلی (Main Axis) و محور متقاطع (Cross Axis) 2. Understanding Flex Container, Main Axis, and Cross Axis

• کنترل تراز و جهت با استفاده از ویژگی‌های Flex 3. Aligning and Direction Control Using Flex Properties

• مقایسه Flexbox با چیدمان‌های مبتنی بر Float 4. Comparing Flexbox and Float-Based Layouts

ماژول ۱۵: ایجاد چیدمان‌های پیشرفته با استفاده از CSS Grid Module 15: Creating Advanced Layouts Using CSS Grid

• آشنایی با CSS Grid و ساختار گرید 1. Introduction to CSS Grid and Grid Structure

• مدیریت فاصله گریدها (Gaps)، تراز و جای‌گذاری آیتم‌ها 2. Managing Grid Gaps, Alignment, and Item Placement

• ساخت گریدهای ریسپانسیو با Auto Fill و Auto Fit 3. Creating Responsive Grids with Auto-Fill and Auto-Fit

ماژول ۱۶: بهبود استایل‌ها با Pseudo Classes و Pseudo Elements Module 16: Enhancing Styles with CSS Pseudo-Classes and Elements

• آشنایی با Pseudo Classes و Pseudo Elements 1. Introduction to Pseudo-Classes and Pseudo-Elements

• تفاوت بین Pseudo Classes و Pseudo Elements 2. Differences Between Pseudo-Classes and Pseudo-Elements

• استایل‌دهی کاربردی با Hover، First Child، Before و After 3. Practical Styling with Hover, First-Child, Before, and After

ماژول ۱۷: پروژه نهایی – توسعه یک وب‌سایت کاملاً ریسپانسیو Module 17: Final Project – Developing a Fully Responsive Website

• مرور کلی پروژه و برنامه‌ریزی چیدمان 1. Project Overview and Layout Planning

• ساخت ساختار وب‌سایت از نوار ناوبری (Navbar) تا فوتر (Footer) 2. Building the Website Structure from Navbar to Footer

• اعمال طراحی ریسپانسیو و تست نهایی 3. Applying Responsive Design and Final Testing