این دوره به شما اصول اولیه طراحی وب واکنشگرا برای ساخت یک وب سایت چند صفحهای و نحوه ترکیب اصول طراحی برای توسعه وب را به شما میآموزد.
آنچه خواهید آموخت:
ساخت واکنشگرا برای صفحههای کوچک، متوسط و بزرگ برای هر وب سایت مهم است. در این دوره آموزشی، ایجاد طرحبندی صفحه با CSS، یاد میگیرید که از قدرت پرسوجوهای رسانهای برای ساختن یک وبسایت پاسخگو و پاسخگو برای یک فروشگاه پای تلفن همراه استفاده کنید. ابتدا، صفحه را با استفاده از عناصر معنایی مناسب HTML5 که با محتوای مناسب پر شده است، قرار میدهید. در مرحله بعد، چندین شیوه نامه اضافه میکنید تا به کنترل صفحه برای عرضهای مختلف صفحه کمک کند. سپس، ناوبری همبرگر را برای صفحههای کوچک و ناوبری افقی برای صفحههای وسیعتر خواهید ساخت. در نهایت، شما یاد خواهید گرفت که با استفاده از float طرحبندیهای چند ستونی ایجاد کنید. پس از اتمام این دوره، مهارت و دانش لازم برای ساخت صفحات ریسپانسیو با CSS را خواهید داشت.
نمونه ویدیوی آموزشی ( زیرنویسها جدا از ویدیو است و میتوانید آنرا نمایش ندهید ) :
[ENGLISH]
01 Course Overview [2mins]
01-01 Course Overview [2mins]
02 Introduction [4mins]
02-01 Introduction to Creating Page Layouts with CSS [4mins]
03 Basic Page with Semantic Tags [10mins]
03-01 Introduction to Basic Page with Semantic Tags [5mins]
03-02 Semantic Tags and Head Information [5mins]
04 Styles Sheets and Media Queries [16mins]
04-01 Introduction to CSS and Media Queries [4mins]
04-02 Preparing the HTML file [2mins]
04-03 Linking Style Sheets [3mins]
04-04 Adding Media Queries [4mins]
04-05 Fixing Font Problems [3mins]
05 Build the Header and Footer [18mins]
05-01 Introduction to the Header and Footer [4mins]
05-02 Row-column Design [5mins]
05-03 CSS for a 12 Column Grid [3mins]
05-04 Limiting the Page Width [6mins]
06 Build Responsive Navigation [17mins]
06-01 Introduction to Responsive Navigation [6mins]
06-02 Add the HTML Navigation [2mins]
06-03 Styling the Small Screen [3mins]
06-04 Styling the Medium and Large Screens [3mins]
06-05 Adding JavaScript [3mins]
07 Build the Hero [10mins]
07-01 Introduction to Hero Images [4mins]
07-02 Options for the Hero Image [2mins]
07-03 Building the Hero Image [4mins]
08 Build this Week`s Specials [8mins]
08-01 Introduction to Weekly Specials [2mins]
08-02 Grid, Position, and RGBA [6mins]
09 Responsive Fruit Pie Gallery [8mins]
09-01 Introduction to Gallery Page [2mins]
09-02 Wayfinding and Grid Columns [4mins]
09-03 Implementing Multiple Selectors [2mins]
10 Implementing a CSS Preprocessor [17mins]
10-01 Introduction to CSS Preprocessors [4mins]
10-02 Converting to a SASS Workflow [6mins]
10-03 Implementing SASS Variables [4mins]
10-04 Implementing SASS Nesting [3mins]
11 Introduction to Bootstrap [17mins]
11-01 Introduction to Bootstrap [4mins]
11-02 Downloading and Connecting Files [2mins]
11-03 Building the Header and Footer [3mins]
11-04 Building the Navigation [3mins]
11-05 Building the Hero and Cards [5mins]
12 Wrap Up [11mins]
12-01 Overview [3mins]
12-02 Moving from Float to Flexbox [2mins]
12-03 Automating Grid Classes with SASS Loops [6mins]
[فارسی]
01 بررسی اجمالی دوره [2 دقیقه]
01-01 بررسی اجمالی دوره [2 دقیقه]
02 مقدمه [4 دقیقه]
02-01 مقدمهای بر ایجاد طرحبندی صفحه با CSS [4 دقیقه]
03 صفحه اصلی با برچسبهای معنایی [10 دقیقه]
03-01 مقدمهای بر صفحه اصلی با برچسبهای معنایی [5 دقیقه]
03-02 برچسبهای معنایی و اطلاعات سر [5 دقیقه]
04 برگههای سبک و پرسشهای رسانه [16 دقیقه]
04-01 مقدمهای بر CSS و پرسشهای رسانهای [4 دقیقه]
04-02 آمادهسازی فایل HTML [2 دقیقه]
04-03 پیوند دادن شیتهای سبک [3 دقیقه]
04-04 افزودن پرسشهای رسانهای [4 دقیقه]
04-05 رفع مشکلات فونت [3 دقیقه]
05 ساخت هدر و پاورقی [18 دقیقه]
05-01 مقدمهای بر سربرگ و پاورقی [4 دقیقه]
05-02 طراحی سطر-ستون [5 دقیقه]
05-03 CSS برای یک شبکه 12 ستونی [3 دقیقه]
05-04 محدود کردن عرض صفحه [6 دقیقه]
06 ساخت ناوبری پاسخگو [17 دقیقه]
06-01 مقدمهای بر ناوبری پاسخگو [6 دقیقه]
06-02 ناوبری HTML را اضافه کنید [2 دقیقه]
06-03 سبک دادن به صفحه نمایش کوچک [3 دقیقه]
06-04 طراحی صفحه نمایش متوسط و بزرگ [3 دقیقه]
06-05 افزودن جاوا اسکریپت [3 دقیقه]
07 قهرمان را بسازید [10 دقیقه]
07-01 مقدمهای بر تصاویر قهرمان [4 دقیقه]
07-02 گزینههای تصویر قهرمان [2 دقیقه]
07-03 ساختن تصویر قهرمان [4 دقیقه]
08 ساخت ویژههای این هفته [8 دقیقه]
08-01 معرفی ویژههای هفتگی [2 دقیقه]
08-02 شبکه، موقعیت و RGBA [6 دقیقه]
09 گالری پای میوه پاسخگو [8 دقیقه]
09-01 معرفی صفحه گالری [2 دقیقه]
09-02 ستونهای Wayfinding و Grid [4 دقیقه]
09-03 پیادهسازی انتخابگرهای چندگانه [2 دقیقه]
10 پیادهسازی یک پیش پردازنده CSS [17 دقیقه]
10-01 مقدمهای بر پیش پردازندههای CSS [4 دقیقه]
10-02 تبدیل به یک گردش کار SASS [6 دقیقه]
10-03 پیادهسازی متغیرهای SASS [4 دقیقه]
10-04 اجرای SASS Nesting [3 دقیقه]
11 مقدمهای بر بوت استرپ [17 دقیقه]
11-01 مقدمهای بر بوت استرپ [4 دقیقه]
11-02 دانلود و اتصال فایلها [2 دقیقه]
11-03 ساخت هدر و پاورقی [3 دقیقه]
11-04 ساخت ناوبری [3 دقیقه]
11-05 ساختن قهرمان و کارتها [5 دقیقه]
12 جمعبندی [11 دقیقه]
12-01 نمای کلی [3 دقیقه]
12-02 حرکت از Float به Flexbox [2 دقیقه]
12-03 خودکار کردن کلاسهای شبکه با حلقههای SASS [6 دقیقه]
پل چنی در طراحی واکنشگرا، سیستمهای مدیریت محتوا و عکاسی واقعیت مجازی تخصص دارد. او دورههایی را برای Pluralsight تدریس میکند و یک تجارت توسعه وب و دانشگاه طراحی Spartan را اداره میکند که در آن منابع بسیاری از دورههای آنلاین را میزبانی میکند.