آموزش تسلط بر CSS با Sass و Bootstrap - موفقیت در مصاحبه‌های شغلی - آخرین آپدیت

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

مقدمه Introduction

• مقدمه Introduction

مبانی HTML HTML Basics

• ساختار صفحه HTML HTML Page Structure

• تگ پاراگراف The Paragraph Tag

• تگ‌ها، تگ‌های خالی و المان‌ها Tags, Empty Tags & Elements

• اتریبیوت‌ها (ویژگی‌ها) Attributes

• تگ‌های div و span div & span

• تگ‌های H1 تا H6 H1 to H6

• تگ لیست بدون ترتیب ul The Unordered List Tag ul

• تگ لیست مرتب ol The Ordered List Tag ol

• تگ لینک a a Anchor Tag

• مفاهیم پیشرفته تگ لینک (#) a - Advanced Concept (#)

• تگ تصویر img img Tag

• مسیر نسبی در مقابل مسیر مطلق Relative Path vs. Absolute Path

• تگ input - متنی، عددی و ایمیل The input Tag - Text, Numeric & Email

• تگ input - چک‌باکس و رادیو input - Checkbox & Radio

• تگ select The select Tag

• مقایسه HTML و XHTML HTML vs. XHTML

• تگ‌های معنایی (Semantic) - Address, Footer, Section, Header Semantic Tags - Address, Footer, Section, Header

• مفهوم دسترسی‌پذیری در اپلیکیشن‌های وب Concept of Accessibility in Web Applications

• ویژگی ARIA ARIA - Attribute

• تگ‌های Meta (تگ‌های مناسب برای سئو) Meta Tags (The SEO Friendly Tags)

• نصب گوگل آنالیتیکس Installing Google Analytics

• درک مفهوم DOM Understanding DOM

مبانی CSS و انتخابگرها CSS Basics & Selectors

• مقدمه Introduction

• استایل‌دهی Inline و سینتکس پایه CSS Inline Styling and Basic CSS Syntax

• استایل‌دهی داخلی با تگ style Internal Styling with style Tag

• استایل‌دهی خارجی با تگ link External Styling - link Tag

• انتخابگر المان Element Selector

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

• انتخابگر ترکیبی element.class element.class Selector

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

• انتخابگر گروهی Group Selector

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

• اولویت‌بندی در CSS (Specificity) CSS Specificity

• انتخابگر جهانی و CSS Reset Universal Selector & CSS Reset

ترکیب‌کننده‌ها و انتخابگرهای پیشرفته (بخش اول) Combinators - Advanced Selectors (Part 1)

• مقدمه Introduction

• انتخابگر فرزند (space) Descendant Selector (space)

• انتخابگر فرزند مستقیم (>) Child Selector (>)

• انتخابگر مجاور (+) Adjacent Selector (+)

• انتخابگر ویژگی element[attribute] Attribute Selector - element[attribute]

• انتخابگر ویژگی با فاصله (~) Attribute Spaced Selector (~)

• انتخابگر ویژگی با پیشوند (^) Attribute Selector (^) - Prefixed Value

• انتخابگر ویژگی با پسوند ($) Attribute Selector ($) - Suffixed Value

• انتخابگر ویژگی شامل () Attribute Contains Selector (*)

• انتخابگر ویژگی با خط تیره (|) Attribute Hyphenated Selector (|)

کلاس‌ها و عناصر مجازی - انتخابگرهای پیشرفته (بخش دوم) Pseudo-classes & Elements - Advanced Selectors (Part 2)

• مقدمه Introduction

• کلاس‌های مجازی زبانی Linguistic Pseudo-classes

• کلاس‌های مجازی مکانی Location Pseudo-classes

• کلاس‌های مجازی اقدام کاربر - hover (بخش اول) :hover - User Action Pseudo-classes (Part 1)

• کلاس‌های مجازی اقدام کاربر - active (بخش دوم) :active - User Action Pseudo-classes (Part 2)

• کلاس‌های مجازی اقدام کاربر - focus (بخش سوم) :focus - User Action Pseudo-classes (Part 3)

• کلاس‌های مجازی اقدام کاربر - focus-within (بخش چهارم) :focus-within - User Action Pseudo-classes (Part 4)

• کلاس‌های مجازی ورودی - enabled / disabled :enabled / :disabled - Input Pseudo-classes

• ویژگی‌های readonly و contenteditable readonly / contenteditable Attributes

• کلاس‌های مجازی ورودی - read-only / read-write :read-only / :read-write - Input Pseudo-classes

• کلاس مجازی placeholder-shown :placeholder-shown - Input Pseudo-class

• کلاس‌های مجازی ورودی - valid / invalid و required :valid / :invalid & :required - Input Pseudo-classes

• افزونه پیش‌نمایش زنده HTML/CSS HTML/CSS Live Preview Extension

• انتخابگر nth-child - کلاس مجازی ساختاری درخت :nth-child() Selector - Tree Structural Pseudo-class

• انتخابگر nth-child - آرگومان‌های پیچیده :nth-child() Selector - Complex Arguments

• عناصر مجازی (تفاوت کلاس مجازی و عنصر مجازی) Pseudo-element (pseudo-class vs. pseudo-element)

• عنصر مجازی first-line (بخش اول) ::first-line - Pseudo-element (Part 1)

• عنصر مجازی first-letter (بخش دوم) ::first-letter - Pseudo-element (Part 2)

• عناصر مجازی before / after (بخش سوم) ::before / ::after - Pseudo-element (Part 3)

• عناصر مجازی before / after (بخش چهارم) ::before / ::after - Pseudo-element (Part 4)

فرمت‌بندی متن Text Formatting

• خانواده فونت (font-family) font-family

• قانون @font-face @font-face

• ضخامت فونت (font-weight) font-weight

• ارتفاع خط (line-height) line-height

• استایل فونت (font-style) font-style

• تغییر شکل متن (text-transform) text-transform

• گونه فونت (font-variant) font-variant

• تزیین متن (text-decoration) text-decoration

• تراز متن (text-align) text-align

• تورفتگی متن Indenting Text

• ویژگی color - اعمال رنگ پیش‌زمینه color Property - Applying Foreground Color

کار با رنگ‌ها و گرادینت‌ها Working with Colors & Gradients

• مقدمه - روش‌های مختلف تخصیص رنگ Introduction - Different Ways to Assign Colors

• استفاده از مقادیر RGB Using RGB Values

• نمادهای هگزادسیمال (Hex) Hexadecimal Notations

• استفاده از مقادیر HSL Using HSL Values

• کار با شفافیت (Opacity) Working with Opacity

• گرادینت‌های CSS - linear-gradient() CSS Gradients - linear-gradient()

• گرادینت‌های CSS - radial-gradient() CSS Gradients - radial-gradient()

• گرادینت‌های CSS - conic-gradient() CSS Gradients - conic-gradient()

واحدهای اندازه‌گیری CSS CSS Units

• مقدمه Introduction

• واحدهای مطلق - px Absolute Units - px

• واحدهای مطلق - pt Absolute Units - pt

• واحدهای مطلق - cm Absolute Units - cm

• واحدهای مطلق - mm Absolute Units - mm

• واحدهای مطلق - in Absolute Units - in

• واحدهای مطلق - Pica (pc) Absolute Units - Pica (pc)

• واحدهای نسبی - em Relative Units - em

• واحدهای نسبی - rem Relative Units - rem

• واحدهای نسبی - % (درصد) Relative Units - % (Percentage)

• واحدهای نسبی - ex Relative Units - ex (x-height)

• واحدهای نسبی - ch Relative Units - ch (Character Width)

• واحدهای نسبی - vw Relative Units - vw

• واحدهای نسبی - vh Relative Units - vh

• واحدهای نسبی - vmin / vmax Relative Units - vmin / vmax

• واحدهای اندازه‌گیری زاویه - deg, grad, rad و turn Angle Measurement Units - deg, grad, rad & turn

• واحدهای اندازه‌گیری زمان - ms / s Time Measurement Units - ms / s

اصول چیدمان صفحه در CSS CSS Page Layout Fundamentals

• مقدمه Introduction

• مدل جعبه‌ای CSS (Box Model) CSS Box Model

• اعمال Border در CSS Applying Border in CSS

• اعمال Padding در CSS Applying Padding in CSS

• اعمال Margin در CSS Applying Margin in CSS

• مارجین‌های هم‌پوشان و مارجین‌های منفی Collapsing Margins and Negative Margins

• درک مفهوم Float Understanding Float

• پاکسازی Floatها (Clearing) Clearing Floats

• هم‌پوشانی کانتینر و Float Container/Float Collapsing

• روش Clearfix - روش مدرن پاکسازی Floatها Clearfix - Modern Way to Clear Floats

• ایجاد چیدمان چند ستونه با Float Creating Multiple Columns Floated Layout

• ویژگی display display Property

• چیدمان‌های ثابت، سیال و واکنش‌گرا Fixed, Fluid & Responsive Layouts

• درک مفهوم گریدها (Grids) Understanding Grids

• اشغال ردیف‌ها و ستون‌ها در Grid Spanning Rows and Columns in Grid

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

• ویژگی‌های Flex Container Flex Container Properties

• ویژگی‌های Flex Item Flex Item Properties

• محاسبه flex-grow Calculation of flex-grow

• مقدمه‌ای بر @media Query @media Query - Introduction

• تمرین - پیاده‌سازی @media Query Assignment - Implementation of @media Query

• نوع رسانه - all Media Type - all

• نوع رسانه - screen Media Type - screen

• نوع رسانه - print Media Type - print

• ساخت یک فرم واکنش‌گرای ساده با Media Query و Breakpoint Creating a Basic Responsive Form Using Media Query with Breakpoint

تغییر شکل (CSS Transform) CSS Transform

• مقدمه Introduction

• جابجایی المان با متد translate() Move Element With translate() Method

• متد rotate() rotate() Method

• تمرین - متد rotate() Assignment - rotate() Method

• تغییر اندازه المان‌ها با تابع scale() Resizing Elements Using scale() Function

• تغییر شکل المان‌ها با تابع skew() Transforming Elements Using skew() Function

• تمرین - اعمال skew روی متن Assignment - skew() on Text

• متد matrix() - روش جامع matrix() - The All-in-One Method

• طراحی کارت سه بعدی Flip با متد transform 3D Card Flip Design Using transform Method

انتقال‌ها (CSS Transitions) CSS Transitions

• مقدمه‌ای بر Transitionهای CSS Introduction to CSS Transitions

• اعمال Transition روی ویژگی‌های CSS Transitioning CSS Properties

• تعیین سرعت و منحنی با transition-timing-function Specifying Speed & Curve with transition-timing-function

• ایجاد تاخیر با transition-delay Delaying the Transition with transition-delay

• ترکیب Transform با Transition Combining Transform with Transition

انیمیشن‌های CSS CSS Animations

• مقدمه Introduction

• قانون @keyframes @keyframes Rule

• تمرین - ساخت انیمیشن توپ bouncing Assignment - Creating a Bouncing Ball Animation

• نام و مدت زمان انیمیشن - گام اول animation-name & animation-duration - The First Step

• تاخیر در انیمیشن (animation-delay) animation-delay

• کنترل تکرارها با ویژگی animation-iteration-count Controlling Iterations with animation-iteration-count Property

• تمرین - کنترل تکرارهای انیمیشن Assignment - Controlling Iterations

• تغییر جهت انیمیشن با ویژگی animation-direction Changing Animation Direction with animation-direction Property

• تعیین منحنی سرعت با ویژگی animation-timing-function Defining Speed Curve with animation-timing-function Property

• تمرین - ساخت انیمیشن پس‌زمینه Assignment - Creating Background Animation

• ویژگی animation-fill-mode animation-fill-mode Property

• تمرین - انیمیشن غروب خورشید Assignment - Sunset Animation

اسس (SASS) SASS

• مقدمه Introduction

• پیکربندی SASS در پروژه Configuring SASS in Project

• متغیرها در SASS SASS Variables

• تودرتو سازی (Nesting) در SASS Nesting in SASS

• فایل‌های Partial در SASS SASS Partials

• ماژول‌های SASS SASS Modules

• میکسین‌ها (Mixins) در SASS SASS Mixins

• وراثت در SASS - قانون @extend Inheritance with SASS - @extend Rule

• عملگرها Operators

• تمرین - ساخت سایدبار واکنش‌گرا با SASS Assignment - Responsive Sidebar with SASS

بوت‌استرپ (Bootstrap) Bootstrap

• مقدمه Introduction

• پیکربندی Bootstrap Configuring Bootstrap

• کانتینرها (Containers) Containers

• کلاس‌های کمکی (Utility/Helper Classes) Utilities/Helper Classes

• جایگزین Jumbotron در بوت‌استرپ 5 Jumbotron (Not!) in Bootstrap 5

• دکمه‌ها Buttons

• دکمه‌های گروهی و اسپینرها Grouped Buttons and Spinners

• سیستم چیدمان گرید Grid System Layout

• ساخت فرم ورود با بوت‌استرپ Login Form Using Bootstrap

• صفحه‌بندی (Pagination) همراه با تمرین Pagination with Assignment

• مودال (Modal) Modal

• تمرین مودال برای ثبت‌نام ایمیل Modal Assignment for Email Registration

• breadcrumb (راهنمای مسیر) Breadcrumb

• نوار ناوبری (Navigation Bar) Navigation Bar

پروژه‌ها و تکالیف عملی Practical Assignments

• منوی پایه - نوار ناوبری بالایی Basic Menu - Top Navigation Bar

• افزودن آیتم‌های منوی تقسیم شده (Split Menu) Adding Split Menu Items

• منوی واکنش‌گرا Responsive Menu

• آکاردئون افقی Horizontal Accordion

• آکاردئون‌های عمودی Vertical Accordions

• منوی سایدبار همبرگری با CSS CSS Hamburger Sidebar Menu

• فرم عضویت (Subscribe) Subscribe Form

• کاروسل عمودی با SCSS Vertical Carousel with SCSS

• چیدمان کارت‌های واکنش‌گرا با CSS Responsive Card Layout - CSS

• سبد خرید واکنش‌گرا Responsive Shopping Cart

• افکت پارالاکس با CSS CSS Parallax

• فوتر واکنش‌گرا با بوت‌استرپ Responsive Footer with Bootstrap