آموزش PSD به HTML5 پاسخگو: مبتدی تا پیشرفته

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

شروع و آماده سازی Getting Started & Preparations

• طرح کلی دوره و آنچه می خواهید یاد بگیرید Course Outline & What Are You Going to Learn

• پیش از شروع: چرا تصمیم درستی گرفته اید؟ Pre-Start: Why You've Just Made the Right Decision

• چرا PSD به HTML5 یک مهارت ضروری برای هر طراح/توسعه‌دهنده وب است Why PSD to HTML5 is a Must-Have Skill for Any Web Designer/Developer

• نمایش طرح تکمیل شده PSD Showcasing the Finished PSD design

• نمایش وب سایت نهایی نهایی Showcasing the Final Finished Website

• به گروه رسمی فیس بوک در اینجا بپیوندید! Join the Official Facebook Group Here!

• در اینجا به چت روم دوره رسمی بپیوندید! Join the Official Course Chatroom Here!

• نحوه استفاده از پرسش و پاسخ برای برقراری ارتباط با جامعه How to Use the Q&A to Communicate With The Community

تنظیم محیط: دستان خود را کثیف کنید Environment Setup: Get Your Hands Dirty

• شخصی سازی و انتخاب ویرایشگر کد مناسب Personalizing and Choosing the Right Code Editor

• دانلود و نصب Photoshop CC نسخه آزمایشی رایگان Downloading & Installing Photoshop CC Free Trial

• راه اندازی محیط پروژه Setting Up the Project Environment

• فایل های پروژه نهایی را از اینجا دانلود کنید Download the Final Project Files Here

• دانلود رایگان هدیه: 25 طرح PSD تمام شده و مدرن برای تمرین مهارت های خود Download Free Gift: 25 Finished & Modern PSD designs to Practice Your Skills On

مطالعه و آماده سازی طرح PSD تمام شده Studying & Preparing the Finished PSD design

• تعیین اندازه و اندازه گیری پروژه ما Determining The Size & Measurements of Our Project

• انتخاب و تصمیم گیری ساختار فایل/تصویر برای کار با Choosing & Deciding the File/Image Structure to Work With

• برش دادن طرح Slicing Up the Design

• نصب و پیاده سازی فونت ها Installing & Implementing Fonts

• کلاس های کمکی: آنها چه هستند و چه زمانی از آنها استفاده کنیم؟ Helper Classes: What Are They and When to Use Them?

• آزمون طراحی PSD PSD Design Quiz

تبدیل طرح PSD به یک وب سایت کاربردی Converting the PSD design Into a Functional Website

• کدگذاری بخش قهرمان: ایجاد نشانه گذاری و نوار ناوبری Coding the Hero Section: Creating the Markup & the Navbar

• شکل دادن به بخش قهرمان: تعیین موقعیت محتوا و صیقل دادن نوار نوار Styling the Hero Section: Positioning the Content & Polishing the Navbar

• حالت دادن به بخش قهرمان: دکمه ها، شناورها و عرض سفارشی Styling the Hero Section: Buttons, Floats & Custom Width

• کدگذاری بخش برنامه: ایجاد ستون های سفارشی Coding the App Section: Creating Custom Columns

• استایل بخشیدن به بخش برنامه: تعیین موقعیت و صیقل دادن ستون های سفارشی Styling the App Section: Positioning and Polishing the Custom Columns

• کدگذاری بخش بینی: نوشتن نشانه گذاری اولیه HTML Coding the Nose Section: Writing the Basic HTML Markup

• مدل دادن به بخش بینی: انتقال رنگ ها از فتوشاپ به CSS3 Styling the Nose Section: Transferring Colors from Photoshop to CSS3

• کدنویسی پاورقی: معرفی پاورقی های سبک لیست Coding the Footer: Introducing List-Style Footers

• سبک دادن به پاورقی: تنظیم یک تصویر پس زمینه به یک عنصر فهرست سبک Styling the Footer: Setting a Background Image to a List-Style Element

• کدگذاری بخش حق چاپ: نمادهای سریع HTML5 را یاد بگیرید Coding the Copyright Section: Learn Quick HTML5 Symbols

• سبک بخشیدن به بخش حق چاپ: نهایی کردن محتوای وب سایت Styling the Copyright Section: Finalizing the Website's Content

• آزمون طراحی سایت Website Design Quiz

صیقل دادن به وب سایت: یاد بگیرید که انیمیشن های تعاملی شگفت انگیز ایجاد کنید Polishing the Website: Learn to Create Amazing Interactive Animations

• آماده سازی: نصب و راه اندازی کتابخانه های انیمیشن معروف Preparations: Installing & Setting Up Famous Animation Libraries

• پویانمایی تعاملی روشن آیفون: آماده سازی فایل ها و درج برش های تصویر Interactive iPhone Turn-on Animation: Preparing Files & Inserting Image Slices

• انیمیشن ها به کنار: توضیح Z-index و موقعیت یابی نسبی و مطلق Animations Aside: Explaining Z-index and Relative & Absolute Positioning

• انیمیشن آیفون: جابجایی آیفون به اطراف با تکنیک های اصلی موقعیت یابی iPhone Animation: Moving the iPhone Around with Basic Positioning Techniques

• انیمیشن آیفون: ایجاد انیمیشن نهایی شده iPhone Animation: Creating the Finalized Animation

• انیمیشن آیفون: کلیک روی دکمه و اضافه کردن تاخیر با جاوا اسکریپت iPhone Animation: Clicking the Button and Adding Delays with JavaScript

• دستان خود را کثیف کنید: متحرک سازی بقیه وب سایت با WOW.js Get Your Hands Dirty: Animating the Rest of the Website with WOW.js

• مسابقه انیمیشن و موقعیت یابی Animation & Positioning Quiz

بیایید وب سایت خود را واکنش گرا کنیم! Let's Make Our Website Responsive!

• آماده سازی: پرسش های رسانه ای توضیح داده شد + اضافه کردن تغییرات نهایی جزئی به وب سایت Preparation: Media Queries Explained + Adding Minor Final Changes to the Website

• چیدمان پاسخگو: پاسخگو کردن بخش قهرمان Responsive Layout: Making the Hero Section Responsive

• طرح‌بندی پاسخ‌گو: تکمیل طرح‌بندی پاسخ‌گو با درخواست‌های رسانه‌ای بیشتر Responsive Layout: Finishing the Responsive Layout with More Media Queries

• نوار ناوبری: ایجاد نوار ناوبری پاسخگو سفارشی از ابتدا! Navigation Bar: Creating Custom Responsive Navigation Bar from Scratch!

• آزمون پاسخگویی Responsiveness Quiz

نتیجه گیری و مباحث نهایی Conclusion & Final Toughts

• تبریک می گویم! توانجامش دادی! حالا چی؟ Congratulations! You did it! What now?

سخنرانی های جایزه BONUS Lectures

• Inspect Element چیست و چه زمانی باید از آن استفاده کرد؟ What is 'Inspect Element' and When Should You Use It?

• سری تبدیل کوتاه: نمایش یک طراحی جدید PSD Short Conversion Series: Showcasing a Brand New PSD Design

• سری تبدیل کوتاه: ایجاد نشانه گذاری طرح بندی Short Conversion Series: Creating the Layout Markup

• Short Conversion Series: Styling & Preparing the Content Holder Short Conversion Series: Styling & Preparing the Content Holder

• چت روم دوره رسمی Official Course Chatroom!

• جایزه Bonus