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

دانلود Mastering CSS with Sass and Bootstrap - Ace Your Interviews

نکته: ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.
نمونه ویدیوها:
توضیحات دوره: این دوره دارای قابلیت Coursera Coach است! روشی هوشمندتر برای یادگیری با گفتگوهای تعاملی و آنی که به شما کمک می‌کند دانش خود را آزمایش کنید، فرضیات را به چالش بکشید و در حین پیشروی در دوره، درک خود را عمیق‌تر کنید. آیا به دنبال موفقیت در مصاحبه‌های توسعه وب هستید؟ این دوره شما را به مهارت‌های ضروری در CSS، Sass و Bootstrap مجهز می‌کند. شما خواهید آموخت که چگونه صفحات وب بسیار تعاملی و از نظر بصری جذاب ایجاد کنید که نه تنها کاربردی باشند، بلکه در تمامی دستگاه‌ها واکنش‌گرا (Responsive) باشند. با تسلط بر مبانی CSS و تکنیک‌های پیشرفته مانند Sass و Bootstrap، شما آماده خواهید بود تا با اعتماد به نفس با هر چالشی در مصاحبه مقابله کنید. دوره با ایجاد یک پایه محکم در HTML آغاز شده و سپس به مبانی CSS، انتخابگرها و روش‌های استایل‌دهی پیشرفته می‌پردازد. شما یاد می‌گیرید که چگونه از Sass برای ساده‌سازی و بهینه‌سازی شیت‌های استایل خود استفاده کنید و قابلیت نگهداری کدتان را بهبود ببخشید. در طول دوره، چارچوب Bootstrap را بررسی خواهید کرد و تجربه عملی در ایجاد چیدمان‌های واکنش‌گرا و اجزای رابط کاربری (UI) کسب می‌کنید که ساخت اپلیکیشن‌های وب مدرن را بسیار آسان می‌کند. با پیشروی در دوره، روی پروژه‌های واقعی مانند ساخت نوار ناوبری واکنش‌گرا، منوها و طراحی فرم‌ها با استفاده از Bootstrap کار خواهید کرد. همچنین به بررسی Transitionهای CSS، انیمیشن‌ها و چیدمان‌های Flexbox برای ایجاد تجربه‌های کاربری غنی خواهید پرداخت. این دوره به گونه‌ای طراحی شده است که مهارت‌های شما را به صورت تدریجی ارتقا دهد و اطمینان حاصل کند که شما نه تنها تئوری را می‌آموزید، بلکه آنچه را که یاد گرفته‌اید از طریق تکالیف و پروژه‌های عملی به کار می‌بندید. در پایان این دوره، شما برای مصاحبه‌های توسعه وب آماده خواهید بود و قادر خواهید بود وب‌سایت‌های واکنش‌گرا و دارای ساختار صحیح را از ابتدا بسازید. این دوره برای کسانی که می‌خواهند تخصص خود را در توسعه وب عمیق‌تر کرده و مهارت‌های خود را به کارفرمایان بالقوه نشان دهند، ایده‌آل است.

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

مقدمه 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

نمایش نظرات

آموزش تسلط بر CSS با Sass و Bootstrap - موفقیت در مصاحبه‌های شغلی
جزییات دوره
18h 15m
188
(آخرین آپدیت)
32
- از 5
دارد
دارد
دارد
Chris Croft
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Chris Croft Chris Croft

مربی مدیریت، سخنران، نویسنده