آموزش یک شغل توسعه دهنده وب داشته باشید: تسلط بر گردش کار مدرن

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

خوش آمدی! Welcome!

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

Git Essentials Git Essentials

• گیت چیست؟ What is Git?

• Git in Action را ببینید See Git in Action

• نکته مهم در مورد نرم افزار ویرایش متن Important Note About Text Editing Software

• یادداشت سریع برای کاربران مک Quick Note For Mac Users

• دستان خود را کثیف کنید Git Your Hands Dirty

• GitHub خود را راه اندازی کنید Setup Your GitHub

معرفی Node.js و NPM Intro to Node.js & NPM

• نیاز به اتوماسیون و سازماندهی The Need for Automation and Organization

• یک یادداشت سریع A Quick Note

• Node.js مقدمه Node.js Introduction

• معرفی NPM NPM Introduction

• نکته مهم در مورد نسخه های بسته برای جلوگیری از ناامیدی Important Note About Package Versions To Save You Frustration

ملزومات Webpack Webpack Essentials

• معرفی Webpack Webpack Introduction

• ویرایشگر متن خود را برای درک نحو PostCSS تنظیم کنید Setup Your Text Editor To Understand PostCSS Syntax

• CSS با Webpack CSS With Webpack

• یادداشت مهم Important Note

معماری CSS CSS Architecture

• معماری فایل CSS CSS File Architecture

• BEM چیست؟ What is BEM?

• دو بلوک را کامل کنید Complete Two Blocks

مهلت زمانی سریع بسته وب Quick Webpack Timeout

• سرور توسعه دهنده Webpack Webpack Dev Server

ملزومات اول موبایل Mobile-first Essentials

• "موبایل اول" به چه معناست؟ What does "Mobile-first" Mean?

• تصاویر واکنش گرا Responsive Images

• نکاتی برای آزمایش تصاویر واکنش گرا Tips for Testing Responsive Images

بیایید بسازیم! Let's Build!

• ایجاد بلوک های قابل استفاده مجدد Creating Reusable Blocks

• بلوک تیتر Headline Block

• بلوک طرح بندی ستون Column Layout Block

• توجه به جزئیات (قسمت اول) Attention to Detail (Part 1)

• توجه به جزئیات (قسمت دوم) Attention to Detail (Part 2)

Git Timeout Git Timeout

• نکات Git - نحوه مدیریت (و اجتناب از) تضادهای ادغام Git Tips - How to Handle (and Avoid) Merge Conflicts

ساخت بخش "ویژگی های ما". Building "Our Features" Section

• طراحی ویژگی های ما (قسمت 1) Styling Our Features (Part 1)

• طراحی ویژگی های ما (قسمت 2) Styling Our Features (Part 2)

بخش "وصیت نامه" ساختمان Building "Testimonial" Section

• توصیفات استایل سازی (قسمت 1) Styling Testimonials (Part 1)

• یادداشت سریع Quick Note

• توصیفات استایلینگ (قسمت 2) Styling Testimonials (Part 2)

• توصیفات استایل (بخش 3) Styling Testimonials (Part 3)

بیایید طراحی سایت خود را به پایان برسانیم Let's Finish Styling our Site

• طراحی پاورقی ما Styling our Footer

• رنگ هگزا دسیمال تا RGBA در درس بعدی Hexadecimal to RGBA Color In The Next Lesson

• سبک دادن به سربرگ ما (قسمت 1) Styling our Header (Part 1)

• سبک دادن به سربرگ ما (قسمت 2) Styling our Header (Part 2)

• شبکه CSS (محتوای همپوشانی) CSS Grid (Overlapping Content)

• شبکه CSS برای ستون ها CSS Grid For Columns

سازمان جاوا اسکریپت JavaScript Organization

• برنامه نویسی شی گرا Object-Oriented Programming

• الگوی ماژول JS و "پک وب" The JS Module Pattern and "webpack"

نوشتن جاوا اسکریپت برای منوی هدر ما Writing JavaScript for Our Header Menu

• چگونه از کد اسپاگتی جلوگیری کنیم How to Avoid Spaghetti Code

• تنظیم منوی موبایل ما Adjusting Our Mobile Menu

• متحرک کردن نماد منوی همبرگر به یک "X" Animating Hamburger Menu Icon Into an "X"

• اختیاری: حذف شناورها از سربرگ سایت Optional: Removing Floats from Site Header

آشکار کردن عناصر در اسکرول Revealing Elements on Scroll

• آشکار کردن عناصر در اسکرول Revealing Elements on Scroll

• یادداشت سریع Quick Note

• آشکار کردن عناصر در اسکرول (قسمت 2) Revealing Elements on Scroll (Part 2)

• آشکار کردن عناصر در اسکرول (قسمت 3) Revealing Elements on Scroll (Part 3)

سربرگ چسبنده دسکتاپ Desktop Sticky Header

• سربرگ چسبنده رومیزی (قسمت 1) Desktop Sticky Header (Part 1)

• سربرگ چسبنده رومیزی (قسمت 2) Desktop Sticky Header (Part 2)

• سربرگ چسبنده رومیزی (قسمت 3) Desktop Sticky Header (Part 3)

پوشش Modal/Lightbox خودمان را بسازیم Build Our Own Modal / Lightbox Overlay

• ساخت یک مدال از ابتدا (قسمت 1) Building a Modal From Scratch (Part 1)

• ساخت یک مدال از ابتدا (قسمت 2) Building a Modal From Scratch (Part 2)

تقسیم کد و بارگذاری تنبل Code Splitting & Lazy Loading

• تقسیم کد با Webpack Code Splitting With Webpack

• بارگذاری تنبل تصاویر برای بارگذاری سریعتر صفحه Lazy Loading Images for Faster Page Loads

ساخت و استقرار Building and Deploying

• آماده سازی فایل های ما برای Go Live (قسمت 1) Preparing Our Files for Go Live (Part 1)

• آماده سازی فایل های ما برای Go Live (قسمت 2) Preparing Our Files for Go Live (Part 2)

• نکته درباره فایل JS Vendor Note About Vendor JS File

• آماده سازی فایل های ما برای Go Live (قسمت 3) Preparing Our Files For Go Live (Part 3)

• آماده سازی فایل های ما برای Go Live (قسمت 4) Preparing Our Files For Go Live (Part 4)

• برو زنده! استقرار سایت ما در صفحات GitHub Go Live! Deploying our Site to GitHub Pages

Netlify (ساختارهای خودکار و عملکردهای ابری) Netlify (Automated Builds & Cloud Functions)

• Netlify مقدمه Netlify Introduction

• توابع ابری/مثال AWS Lambda (قسمت 1) Cloud Functions / AWS Lambda Example (Part 1)

• توابع ابری/مثال AWS Lambda (قسمت 2) Cloud Functions / AWS Lambda Example (Part 2)

• توابع ابری/مثال AWS Lambda (قسمت 3) Cloud Functions / AWS Lambda Example (Part 3)

• راه حل CORS (تست عملکرد ابر از Localhost) CORS Solution (Test Cloud Function from Localhost)

ادغام React در گردش کار ما Integrating React Into Our Workflow

• ادغام React در گردش کار ما Integrating React Into Our Workflow

مشتاقانه منتظر است Looking Forward

• مصاحبه های شغلی Job Interviews

• مراحل بعدی و پیشرفت شغلی Next Steps & Career Progression

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