آموزش طراحی Responsive با استفاده از پیش پردازنده CSS

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

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

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

بررسی اجمالی پیش پردازنده CSS CSS Preprocessor Overview

• مقدمه Introduction

مقدمه ای بر SASS Introduction to SASS

• مقدمه ای بر SASS Introduction to SASS

راه اندازی یک پروژه جدید SASS Setting up a New SASS Project

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

• با استفاده از جستجوی رسانه در پروژه های جزئی پروژه ایجاد کنید Create a Project with Media Queries in the Partial Files

• باimports یک پروژه با Media Query ایجاد کنید Create a Project with Media Queries with the @imports

• نمایش گزینه های ذخیره برنامه Koala A Demonstration of the Koala App Save Options

• افزودن تنظیم مجدد CSS به عنوان جزئی Adding a CSS Reset as a Partial

ایجاد سرصفحه سایت Building the Site Header

• بررسی اجمالی متغیرها و تو در تو Overview of Variables and Nesting

• استفاده از دارایی های ایجاد شده در فتوشاپ Using Photoshop Generate Assets

• بررسی پرونده شروع Examining the Start File

• پیاده سازی متغیرها برای هدر Implementing Variables for the Header

• پیاده سازی Nesting برای Header Implementing Nesting for the Header

• ساخت پاورقی Building the Footer

ساخت ردیف ها و ستون های اصلی Building the Main Rows and Columns

• مقدمه Introduction

• ساخت ردیف ها و ستون های HTML Building the HTML Rows and Columns

• سبک کردن متن با استفاده از Nesting و متغیرها Styling the Text Using Nesting and Variables

• سبک دادن به ستون ها با استفاده از Nesting و Operations Styling the Columns Using Nesting and Operations

ساخت ناوبری Tabbed Building the Tabbed Navigation

• مقدمه Introduction

• ایجاد پیمایش در HTML Building the Navigation in HTML

• سبک کردن ناوبری با استفاده از وراثت/گسترش Styling the Navigation Using Inheritance/Extend

لیست سبک با گلوله های سفارشی Style Lists with Custom Bullets

• مقدمه Introduction

• سبک کردن لیست ها با Mixins Styling the Lists with Mixins

ستون های سبک روزنامه را بسازید Build Newspaper Style Columns

• مقدمه Introduction

• انتقال مقادیر به یک Mixin Passing Values to a Mixin

استفاده از حلقه for برای یک شبکه 12 ستونی Using a for Loop for a 12 Column Grid

• مقدمه Introduction

• فایل نمایشی The Demo File

• ساخت حلقه Building a for Loop

• استفاده از شبکه های 12 ستونی برای طراحی یک چیدمان Using 12-column Grids to Design a Layout

• بسته بندی متن با استفاده از شکل خارج Textwrapping Using Shape Outside

• آزمایش برای چندین مرورگر و دستگاه های تلفن همراه Testing for Multiple Browsers and Mobile Devices