آموزش طراحی و کدنویسی صفحه اصلی توییتر با جاوا اسکریپت، CSS و Figma

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

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

• نمای کلی بخش طراحی Design Section Overview

• نمای کلی بخش کدنویسی Coding Section Overview

• میانبرهای رایج قبل از شروع Common Shortcuts Before We Start

• لیست پلاگین ها List of Plugins

• دانلود مواد دوره همراه Download Course Material Bundled

توییتر UI - Figma Twitter UI - Figma

• دکمه های نوار کناری - Figma Sidebar Buttons - Figma

• ناوبری نوار کناری - Figma Sidebar Navigation - Figma

• نمایه نوار کناری - Figma Sidebar Profile - Figma

• نوار کشویی - Figma Sidebar Dropdown - Figma

• کامپوننت هدر خانه - Figma Home Header Component - Figma

• کامپوننت توییت - Figma Tweet Component - Figma

• خبر - فیگما News Feed - Figma

• کاوش مؤلفه - Figma Explore Component - Figma

• مؤلفه اطلاع رسانی - Figma Notification Component - Figma

• کامپوننت پیام - Figma Message Component - Figma

• مؤلفه نشانک - Figma Bookmark Component - Figma

• کامپوننت لیست - Figma List Component - Figma

• کامپوننت پروفایل - Figma Profile Component - Figma

کامپوننت نوار کناری توییتر Twitter Sidebar Component

• راه اندازی توسعه جاوا اسکریپت JavaScript Development Set Up

• تنظیم اولویت کد VS VS Code Preference Set Up

• صفحه اصلی نوار کناری در جاوا اسکریپت Sidebar Home in JavaScript

• میزبان CSS استاتیک Static CSS Host

• اصلاح سبک های تایپوگرافی Fix Typography Styles

• رندر مشروط - جاوا اسکریپت Render Conditionally - JavaScript

• CSS مشترک در جاوا اسکریپت Shared CSS in JavaScript

• اجزای دکمه نوار کناری - جاوا اسکریپت Sidebar Button Components - JavaScript

• لوگو نوار کناری - جاوا اسکریپت Sidebar Logo - JavaScript

• مولفه دکمه - جاوا اسکریپت Button Component - JavaScript

• نام کاربری نوار کناری - جاوا اسکریپت Sidebar Username - JavaScript

• روش SVG Refactoring SVG Method Refactoring

• مؤلفه تایپوگرافی تودرتو - جاوا اسکریپت Nested Typography Component - JavaScript

• طرح نهایی نوار کناری - CSS Sidebar Finalized Layout - CSS

• رفع بالشتک نوار کناری - CSS Sidebar Padding Fix - CSS

• نوار کشویی - CSS Sidebar Dropdown - CSS

• نمایه نوار کناری - CSS Sidebar Profile - CSS

• شنونده رویداد نوار کناری - جاوا اسکریپت Sidebar Event Listener - JavaScript

• رفع شنونده رویداد - جاوا اسکریپت Fixing Event Listener - JavaScript

• CSS و JavaScript Clean Up CSS and JavaScript Clean Up

جزء اخبار توییتر Twitter Newsfeed Component

• سازماندهی ماژول های جاوا اسکریپت Organize JavaScript Modules

• Refactor JavaScript Logic Refactor JavaScript Logic

• استفاده مجدد از مؤلفه - جاوا اسکریپت Reuse Component - JavaScript

• مؤلفه اطلاعات پرطرفدار - جاوا اسکریپت Trending Info Component - JavaScript

• طرح خبر - CSS Newsfeed Layout - CSS

• اصلاح سبک نوار پیمایش - CSS Fixing Scrollbar Style - CSS

• Newsfeed Responsive - CSS Newsfeed Responsive - CSS

• نوار کناری اصلاح جزئی - CSS Minor Fix Sidebar - CSS

• پوشه داده جدید New Data Folder

• محتوای پویا - جاوا اسکریپت Dynamic Content - JavaScript

کامپوننت صفحه اصلی توییتر Twitter Home Component

• انواع Figma - جاوا اسکریپت Figma Variants - JavaScript

• دکمه آیکون - جاوا اسکریپت Icon Button - JavaScript

• کامپوننت صفحه اصلی - HTML Home Component - HTML

• دکمه‌های آیکون توییت - SVG Tweet Icon Buttons - SVG

• طرح بندی کارت توییت - CSS Tweet Card Layout - CSS

• CSS Layout Clean Up CSS Layout Clean Up

• داده های کارت توییت Tweet Card Data

• کارت توییت پویا - جاوا اسکریپت Dynamic Tweet Card - JavaScript

• افکار نهایی Final Thoughts

سخنرانی پاداش Bonus Lecture

• جایزه Bonus