برنامه جامع آموزش توسعه وب: بوت کمپ ۲۰۲۴ - آخرین آپدیت

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

مقدمه Introduction

• مسیر شغلی جدید شما Your New Career Path

• توسعه‌دهنده چیست؟ What Is A Developer?

• کد را چگونه/کجا می‌نویسیم؟ How / Where Do We Write Code?

بخش بالایی صفحه اصلی Top Section Of Homepage

• بیایید کدنویسی صفحه اصلی را شروع کنیم Let's Start Coding The Homepage

• مبانی فاصله‌گذاری طرح‌بندی Layout Spacing Basics

• یافتن لذت خود Finding Your Joy

• تنظیمات VS Code و فونت‌های گوگل VS Code Settings & Google Fonts

• نکات Figma (توضیح حالت Dev) Figma Tips (Dev Mode Explanation)

• مدل جعبه CSS CSS Box Model

• گرید CSS (ستون‌های متعدد) CSS Grid (Multiple Columns)

• آیکون‌های SVG SVG Icons

• نکته SVG Figma SVG Figma Tip

• پاشیدن رنگ پس‌زمینه Background Splashes Of Color

بخش "حیوانات خانگی" پایین صفحه اصلی Bottom "Pets" Section of Homepage

• هنر گمشده CSS The Lost Art Of CSS

• شروع قسمت حیوانات خانگی Starting The Pets Area

• ایجاد کارت‌های حیوانات خانگی Creating The Pet Cards

• تکمیل کارت حیوان خانگی Finishing The Pet Card

• طراحی موبایل / واکنش‌گرا Mobile / Responsive Design

• تکمیل استایل‌های موبایل Finishing Mobile Styles

• تغییرات کوچک CSS Tiny CSS Changes

Git: مهارت جهانی Git: The Universal Skill

• چرا به Git نیاز داریم؟ Why Do We Need Git?

• نصب Git Installing Git

• ایجاد اولین ریپازیتوری خود Creating Our First Repository

• گیت‌هاب GitHub

• صفحات گیت‌هاب GitHub Pages

• وب‌سایت / نمونه کارها / وبلاگ خود را ایجاد کنید Create Your Own Website / Portfolio / Blog

• به‌روزرسانی ریپازیتوری خود Updating Our Repository

• دریافت به‌روزرسانی‌های همکار Pulling In Co-Worker's Updates

• معنی ":wq" چیست؟ What Does ":wq" Mean?

• شاخه‌های ویژگی Feature Branches

جاوا اسکریپت JavaScript

• جاوا اسکریپت چیست What Is JavaScript

• توابع و اشیاء Functions & Objects

• خودتان امتحان کنید! Try It Yourself!

• واکشی داده Fetching Data

• تکمیل ویژگی دما Finishing Temperature Feature

• برنامه‌نویسی یک چالش عاطفی است Programming Is An Emotional Challenge

جاوا اسکریپت برای قسمت حیوانات خانگی JavaScript For Pets Area

• واکشی داده‌های پویا حیوانات خانگی Fetching Dynamic Pet Data

• کارت‌های پویای حیوانات خانگی Dynamic Pet Cards

• توضیحات و سن حیوان خانگی Pet Description & Age

• تصویر جایگزین حیوان خانگی Pet Fallback Image

• دکمه فعال فیلتر گونه Species Filter Active Button

• فیلتر کردن واقعی کارت‌های حیوان خانگی Actually Filtering The Pet Cards

پروژه‌های پویا مبتنی بر داده Dynamic Data-Driven Projects

• چگونه وب‌سایت‌های پویا ایجاد می‌کنیم؟ How Do We Create Dynamic Websites?

• ایجاد پایگاه داده ما Creating Our Database

• Netlify Netlify

• Node.js Node.js

• اتصال به MongoDB در Node Connect To MongoDB Within Node

• بهره‌برداری واقعی از URL داده ما Actually Leveraging Our Data URL

اجازه به کاربران وارد شده برای مدیریت حیوانات خانگی Letting Logged In Users Manage Pets

• بیایید از Netlify برای همه چیز استفاده کنیم Let's Use Netlify For Everything

• کوکی چیست؟ What Is A Cookie?

• تلاش برای ورود Login Attempt

• تنظیم کوکی و خروج از حساب Setting Cookie & Logging Out

• Cookies MaxAge (ثانیه نه میلی‌ثانیه) Cookies MaxAge (Seconds Not Milliseconds)

• استایل‌دهی ناحیه مدیریت Styling Admin Area

• بارگیری حیوانات خانگی در ناحیه مدیریت Loading Pets In Admin Area

• بهبود تجربه کاربری Improving The User Experience

افزودن، ویرایش و حذف حیوانات خانگی Adding, Editing & Deleting Pets

• فرم افزودن حیوان خانگی جدید Add New Pet Form

• دریافت داده‌های حیوان خانگی جدید در سرور Receiving New Pet Data On Server

• ذخیره حیوان خانگی جدید در پایگاه داده Saving New Pet Into Database

• معنی "فرار" از متن چیست؟ What Does "Escaping" Text Mean?

• نکته سریع VS Code درباره MongoDB Quick VS Code Tip About MongoDB

• فرم ویرایش حیوان خانگی موجود Edit Existing Pet Form

• ذخیره تغییرات در حیوان خانگی موجود Save Changes To Existing Pet

• نکته امنیتی MongoDB MongoDB Security Tip

• انیمیشن فرم هنگام بارگیری Animate Form While Loading

• حذف حیوان خانگی Delete Pet

• بارگذاری زنده روی Netlify Pushing Up Live To Netlify

عکس‌های آپلود شده توسط کاربر User Uploaded Photos

• عکس‌های آپلود شده توسط کاربر را کجا ذخیره کنیم؟ Where Do We Store User Uploaded Photos?

• ایجاد امضایی که Cloudinary بتواند به آن اعتماد کند Creating A Signature That Cloudinary Can Trust

• آپلود عکس به Cloudinary Uploading Photo To Cloudinary

• ذخیره شناسه عکس در پایگاه داده ما Saving Photo ID To Our Database

• ویرایش عکس حیوان خانگی موجود Edit Existing Pet's Photo

• راه‌اندازی زنده با ویژگی عکس ما Going Live With Our Photo Feature

Express.js و فرم تماس Express.js & Contact Form

• شبیه‌سازی پروژه Express.js Cloning Express.js Project

• نکته سریع درباره جلسات و ثبت‌نام کاربر Quick Note About Sessions & User Registration

• HTML و CSS برای پوشش HTML & CSS For Overlay

• مطابقت طراحی پوشش Matching Design of Overlay

• باز کردن و بستن پوشش Opening & Closing The Overlay

• نمایش حیوان خانگی مربوطه در پوشش Show Relevant Pet In Overlay

• ارسال داده به بک‌اند ما Sending Data To Our Backend

• اعتبارسنجی داده در بک‌اند ما Validating Data On Our Backend

• ارسال ایمیل به صورت برنامه‌نویسی Programmatically Sending Emails

• تشکر و بستن خودکار پوشش Thank You & Automatically Closing Overlay

• توجه به جزئیات Attention To Detail

• ذخیره مخاطبین در پایگاه داده Saving Contacts To Database

• خروجی لیست مخاطبین برای یک حیوان خانگی Outputting List Of Contacts For A Pet

• راه‌اندازی زنده با سرور Express ما Going Live With Our Express Server

اتاق گفتگو (React و Next.js) Chat Room (React & Next.js)

• SPA چیست؟ What Is a SPA?

• React چیست؟ What Is React?

• Next.js چیست؟ What Is Next.js?

• شروع واقعی ویژگی چت Actually Starting Chat Feature

• استایل‌دهی ویژگی چت (CSS) Styling Chat Feature (CSS)

• طراحی برای حباب‌های چت Design For Chat Bubbles

• باز کردن و بستن رابط کاربری چت Open and Close Chat UI

• نشان پیام خوانده نشده Unread Message Badge

• Pusher چیست؟ What Is Pusher?

• گزارش حباب چت Chat Bubble Log

• جزئیات UX چت Chat UX Details

• هاستینگ (استقرار) برنامه Next.js ما Hosting (Deploying) Our Next.js App

وظیفه وردپرس WordPress Task

• شروع کار با پروژه جدید ما Getting Started With Our New Project

• افزودن تم ما Adding Our Theme

• Tailwind به "npm start" نیاز دارد Tailwind Needs "npm start"

• الگوی پست تک (تکی) Single (Individual) Post Template

• استایل‌دهی الگوی ما Styling Our Template

• تکمیل استایل‌دهی ما Finishing Our Styling

• واکشی از پایگاه داده وردپرس Pull From The WordPress Database

• شروع ویژگی جستجو Starting The Search Feature

• پوشش جستجو Search Overlay

• استایل‌دهی نتایج Styling The Results

• باز کردن و بستن پوشش Opening & Closing Overlay

• تایمرها در جاوا اسکریپت Timers in JavaScript

• حلقه زدن از طریق داده‌های نتایج Looping Through Results Data

حرکت به جلو Moving Forward

• چگونه به جلو حرکت کنیم How To Move Forward

• حرکات بعدی شما Your Next Moves

• سخنرانی جایزه Bonus Lecture