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

درس‌ها Lessons

• به استادی HTML و CSS خوش آمدید Welcome to HTML and CSS Masterclass

• شروع کار Getting Started

• توسعه وب چیست؟ What is Web Development?

• چگونه ویرایشگر متن (VSCode) را دانلود و نصب کنیم How to download and install text editor (VSCode)

• پیمایش رابط کاربری VSCode Navigating VSCode interface

• نصب و دانلود مرورگر Install and download browser

• نصب و درک افزونه‌های HTML و CSS Install and understand HTML and CSS extensions

• چگونه فایل‌ها و پوشه‌های HTML و CSS ایجاد کنیم How to create HTML and CSS files and folder

• HTML چیست What is HTML

• اسناد HTML HTML documents

• ادامه اسناد HTML Continuation on HTML documents

• تگ‌های HTML HTML Tags

• ادامه تگ‌های HTML Continuation on HTML Tags

• لینک‌ها Links

• تصاویر Images

• لیست‌ها Lists

• جداول Tables

• فرم‌های HTML HTML forms

• رسانه HTML HTML Media

• ادامه رسانه HTML Continuation on HTML Media

• دکمه Button

• کامنت‌ها Comments

• عناصر معنایی HTML HTML Semantic Elements

• CSS چیست What is CSS

• انواع CSS Types of CSS

• سینتکس CSS CSS Syntax

• کامنت‌های CSS CSS Comments

• انتخابگر جهانی Universal Selector

• انتخابگر عنصر Element Selector

• انتخابگر کلاس Class Selector

• انتخابگر ID ID Selector

• انتخابگر گروه‌بندی Grouping Selector

• انتخابگر نوادگان Descendant Selector

• انتخابگرهای شبه کلاس Pseudo-classes Selectors

• ادامه انتخابگرهای شبه کلاس Continuation on Pseudo-classes Selectors

• واحدهای CSS CSS Units

• استایل‌دهی فونت Font Styling

• رنگ فونت Font Color

• استایل‌دهی پس‌زمینه Background Styling

• مدل جعبه CSS (Padding, Border و Margin) 12 CSS Box Model (Padding, Border and Margin)

• ویژگی Display Display Property

• Float, Clear و Overflow Float, Clear and Overflow

• تعیین موقعیت Positioning

• ادامه تعیین موقعیت Continuation on Positioning

• تبدیلات Transformation

• انتقال Transition

• انیمیشن Animation

• مقایسه CSS Flexbox با CSS Grid CSS Flexbox Vs CSS Grid

• مقدمه‌ای بر Flexbox Introduction to Flexbox

• Flexbox ریسپانسیو Responsive Flexbox

• تکمیل Flexbox Completion on Flexbox

• CSS Grid CSS Grid

• ادامه CSS Grid Continuation on CSS Grid

• پروژه ۱ - ساخت وب‌سایت سفر Project 1 - Building a Travel Website

• ایجاد محتوای بخش Hero Creating the Hero Section Content

• ریسپانسیو کردن وب‌سایت Making the Website Responsive

• پروژه ۲ - ساخت وب‌سایت گالری عکس Project 2 - Building a Photo Gallery Website

• ساخت بخش Hero وب‌سایت گالری عکس Building the Hero Section of Photo Gallery Website

• ساختاردهی چیدمان گالری Structuring the Gallery Layout

• انیمیشن بخش Hero وب‌سایت Animation of the Website Hero Section

• ساخت فوتر وب‌سایت گالری Building the Gallery Website Footer

• ریسپانسیو بودن وب‌سایت گالری عکس - بخش ۶ Responsiveness of Photo Gallery Website - Part 6

• نتیجه‌گیری وب‌سایت گالری عکس Conclusion of Photo Gallery Website

• پروژه ۳ - ساخت وب‌سایت آژانس معماری Project 3 - Building an Architecture Agency Website

• ایجاد محتوای بخش Hero Creating the Hero Section Content

• ایجاد بخش اول Creating the first section

• ایجاد بخش تصاویر Creating the images section

• ایجاد بخش فرم Creating the form section

• ایجاد بخش فوتر Creating the footer section

• تکمیل بخش فوتر completing the footer section

• انیمیشن وب‌سایت Website Animation

• طراحی ریسپانسیو وب‌سایت Website Responsive Design

• نتیجه‌گیری وب‌سایت معماری Conclusion of the Architectural Website