آموزش Nextjs 14، Tailwind CSS وب سایت نمونه کارها را ایجاد کنید

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

منابع و الزامات Resources & Requirements

• پيش نياز Prerequisite

• کد منبع را دانلود کنید Download Source Code

پایه های بعدی JS Next JS Basics

• پروژه Next.js را ایجاد کنید Create Next.js Project

• ساختار پوشه Next.js Next.js Folder Structure

• مسیریابی Next.js Next.js Routing

• Next.js سمت سرور در مقابل اجزای سمت مشتری Next.js Server Side vs Client Side Components

• Tailwind CSS چیست؟ What is Tailwind CSS?

• خانواده فونت را تنظیم کنید Set Font Family

تنظیم تم تاریک و روشن Dark and Light Theme Setting

• بخش معرفی Section Intro

• بسته تم های بعدی را نصب کنید Install Next Themes Package

• کامپوننت سوئیچ ایجاد کنید Create Switch Component

• Switch Component را پویا کنید Make Switch Component Dynamic

سرتیتر Header

• بخش معرفی Section Intro

• بیایید بخش سرصفحه را شروع کنیم Let's Start Header Section

• داده های سرصفحه بیشتر را اضافه کنید Add More Header Data

• هدر را پاسخگو کنید Make Header Responsive

مخاطبین و درباره Contacts & About

• مقدمه Intro

• بخش تنظیمات داده برای مخاطبین Setup Data For Contacts Section

• بخش مخاطبین سبک Style Contacts Section

• درباره داده های بخش About Section Data

• بخش سبک درباره Style About Section

مهارت ها Skills

• مقدمه Intro

• داده های مهارتی Skills Data

• آرایه مهارت های حلقه Loop Skills Array

تاریخچه کار Work History

• مقدمه Intro

• داده های بخش سابقه کار Work History Section Data

• از داده های سابقه کاری استفاده کنید Use Work History Data

• حلقه مهارت ها و گزینه ها Loop Skills and Options

پروژه ها Projects

• مقدمه Intro

• داده های پروژه ها Projects Data

• از داده های پروژه استفاده کنید Use Projects Data

• نسبت تصویر Image Aspect Ratio

• ایجاد مدل Create Model

• مدل را پویا کنید Make Model Dynamic

• نمایش جزئیات پروژه در مدل Display Project Details in Model

بررسی ها Reviews

• مقدمه Intro

• داده ها را بررسی می کند Reviews Data

• بررسی های حلقه Loop Reviews

• چیدمان بنایی Masonry Layout

• دکمه نمایش بیشتر Show More Button

• ایجاد کامپوننت پاورقی Create Footer Component

گسترش Deployment

• کد منبع را در Github آپلود کنید Upload Source Code on Github

• استقرار در Vercel Deploy on Vercel

• رفع مشکل Fix Issue