آموزش طراحی وب Responsive دستی 3: ستون ها ، Flexbox و شبکه ها

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

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

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

مقدمه Introduction

• مقدمه Introduction

شبکه دوازده ستونی Twelve Column Grid

• بررسی اجمالی Overview

• روحانی Sprites

• پیشرفت مترقی Progressive Enhancement

• عملیات SASS SASS Operations

• پروژه - نمادهای اجتماعی Project - Social Icons

• پروژه - ستون ها قسمت 1 Project - Columns Part 1

• پروژه - ستون ها قسمت 2 Project - Columns Part 2

اشکال CSS CSS Shapes

• بررسی اجمالی Overview

• برای نمادهای اجتماعی از Font Awesome استفاده کنید Use Font Awesome for Social Icons

• برای برش یک تصویر مربعی از Clip-path استفاده کنید Use Clip-path to Crop a Square Image

• برای بسته بندی متن از شکل خارج استفاده کنید Use Shape-outside to Wrap Text

• آزمایش کردن Testing

فلکس باکس Flexbox

• بررسی اجمالی Overview

• پیمایش با استفاده از Flexbox Navigation Using Flexbox

• SASS Mixin برای یک گرادیان SASS Mixin for a Gradient

• Flexbox برای متن Flexbox for Text

• Flexbox برای یک گالری عکس Flexbox for an Image Gallery

• در حال آزمایش Flexbox Testing Flexbox

شبکه CSS CSS Grid

• بررسی اجمالی شبکه CSS Overview of CSS Grid

• بلوک متن در شبکه CSS Text Blocks in CSS Grid

• گالری تصاویر در شبکه CSS Image Gallery in CSS Grid

• پیشوندهای Microsoft برای CSS Grid Microsoft Prefixes for CSS Grid

• چیدمان صفحه را با استفاده از شبکه CSS کامل کنید Complete Page Layout Using CSS Grid

• آزمایش کردن Testing

پروژه پخش کننده موسیقی Music Player Project

• مقدمه ای بر رابط برنامه Player Introduction to Player App Interface

• ساخت الگو Building the Template

• ساخت صفحه آلبوم Building the Album Page

• ساخت صفحه هنرمند Building the Artist Page

• ساخت صفحه پخش کننده Building the Player Page

• آزمایش کردن Testing