آموزش ایجاد Layout با CSS

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

بررسی اجمالی دوره Course Overview

• بررسی اجمالی دوره Course Overview

فرآیند طرح بندی پاسخگو The Responsive Layout Process

• فرآیند طرح بندی پاسخگو The Responsive Layout Process

• ساختن یک برنامه Making a Plan

• پیاده سازی طرح بندی پاسخگو Implementing Responsive Layouts

• پیاده سازی کامپوننت های پاسخگو Implementing Responsive Components

• درباره این دوره About This Course

• درباره فایل های تمرین About Exercise Files

طراحان و توسعه دهندگان فرانت اند Designers and Front-end Developers

• داستان دو بتانی A Tale of Two Bethanys

• توسعه Frontend در Globomantics Frontend Development at Globomantics

• شفاف سازی الزامات Clarifying Requirements

• کالبد شکافی یک ماکاپ Dissecting a Mockup

اصول و الگوهای چیدمان Layout Principles and Patterns

• فروشگاه توسعه دهندگان وب یک مرحله ای The One-stop Web Dev Shop

• چه قبل از چگونه What before How

• چیدمان های خوب Good Layouts

• الگوهای چیدمان رایج Common Layout Patterns

• طراحی یک چیدمان در عمل Designing a Layout in Action

کد پاک و قابلیت دسترسی Clean Code and Accessibility

• Clean Code چیست؟ What Is Clean Code?

• HTML را پاک کنید Clean HTML

• استانداردهای وب و دسترسی Web Standards and Accessibility

• HTML معنایی و ARIA Semantic HTML and ARIA

• CSS را پاک کنید Clean CSS

• قراردادهای نامگذاری CSS CSS Naming Conventions

Flexbox و Grid مورد بازبینی قرار گرفتند Flexbox and Grid Revisited

• Flexbox و Grid مورد بازبینی قرار گرفتند Flexbox and Grid Revisited

• شباهت های Flexbox و Grid Flexbox and Grid Similarities

• تفاوت Flexbox و Grid Flexbox and Grid Differences

• تراز و توجیه خصوصیات Align and Justify Properties

• پیاده سازی Layout با استفاده از Flexbox Implementing a Layout Using Flexbox

• پیاده سازی یک چیدمان با استفاده از گرید Implementing a Layout Using Grid

• شبکه‌ها: تعریف شبکه‌ها در عمق Grids: Defining Grids In-depth

• شبکه ها: تعیین موقعیت اقلام در عمق Grids: Positioning Items In-depth

• حل مسئله با گرید و فلکس باکس Problem Solving with Grid and Flexbox

• خلاصه: چه زمانی از چه چیزی استفاده کنیم؟ Summary: When to Use What?

ساخت یک چیدمان پاسخگو Building a Responsive Layout

• پیاده سازی طرح بندی پاسخگو Implementing Responsive Layouts

• پیاده سازی استراتژی های گرید Implementing Grid Strategies

• نشانه گذاری برای طرح بندی Markup for Layout

• داستان های رسانه Media Queries

• پیاده سازی Layouts - About Page Implementing Layouts - About Page

• پیاده سازی Layouts - Header & Footer Implementing Layouts - Header & Footer

• پیاده سازی Layouts - از صفحه ما دیدن کنید Implementing Layouts - Visit Us Page

• پیاده سازی Layouts - صفحه اصلی Implementing Layouts - Home Page

• پیاده سازی Layouts - Pies Page Implementing Layouts - Pies Page

• خلاصه طرح پاسخگو Responsive Layout Summary

ساخت اجزای پاسخگو Building Responsive Components

• پیاده سازی کامپوننت های پاسخگو Implementing Responsive Components

• تکنیک هایی برای تصاویر واکنش گرا Techniques for Responsive Images

• پرس و جوهای کانتینر Container Queries

• اجزای پیاده سازی - درباره صفحه Implementing Components - About Page

• اجزای پیاده سازی - سرصفحه و پاورقی Implementing Components - Header & Footer

• پیاده سازی اجزا - از صفحه ما دیدن کنید Implementing Components - Visit Us Page

• اجزای پیاده سازی - صفحه اصلی pt. 1 Implementing Components - Home Page pt. 1

• اجزای پیاده سازی - صفحه اصلی pt. 2 Implementing Components - Home Page pt. 2

• اجزای پیاده سازی - Pies Page pt. 1 Implementing Components - Pies Page pt. 1

• اجزای پیاده سازی - Pies Page pt. 2 Implementing Components - Pies Page pt. 2

• خلاصه اجزای پاسخگو Responsive Components Summary

خلاصه و مراحل بعدی Summary and Next Steps

• خلاصه و مراحل بعدی Summary & Next Steps