آموزش یک نمونه کار مدرن/خلاق html css js three js بسازید

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

راه اندازی، سئو، بازنشانی سبک ها Setup, Seo, Reset styles

• ابزارهای لازم را نصب کنید Install necessary tools

• بیایید پروژه خود را با استفاده از parcel و npm تنظیم کنیم Let's setup our project using parcel and npm

• رتبه بندی سئو در موتورهای جستجو قسمت 1 Seo-rank higher in search engines part 1

• رتبه سئو بالاتر در موتورهای جستجو قسمت 2 Seo-rank higher in search engines part 2

• بازنشانی سبک ها، توضیح اندازه جعبه، ارث بردن... Reset styles, explaining box sizing, inherit...

لودر متحرک بسیار جذاب Awesome Animated loader

• بیایید لودر (Markup and styles) P1 را بسازیم Let's build the loader (Markup and styles) P1

• بیایید لودر (انیمیشن های GSAP) P2 را بسازیم Let's build the loader (GSAP animations) P2

• بیایید لودر (FINISH THE JOB) P3 را بسازیم Let's build the loader (FINISH THE JOB) P3

بخش فرود (سربرگ، دکمه های جالب/پیوندها/اجتماعی/ماوس متحرک ...) Landing section (Header, cool buttons/links/socials/animated mouse...)

• هدر را بسازید Build the Header

• فقط با استفاده از CSS یک لینک متحرک عالی بسازید! Build an awesome animated link using CSS ONLY !

• فانتزی ترین دکمه متحرک را فقط با CSS بسازید! Build the most fancy animated button with CSS ONLY !

• اتمام دکمه فانتزی و پاسخگو کردن هدر Finishing the fancy button and making the header responsive

• پیوندهای اجتماعی رنگی متحرک فقط CSS! Animated colored social links CSS ONLY !

• اسکرول به پایین نماد متحرک فقط با CSS انجام می شود Scroll down animated icon done ONLY WITH CSS

• بخش پایان فرود (INTRO INFOS) Finish Landing section(INTRO INFOS)

مهارت ها Skills

• مهارت ها (مارکاپ و css) Skills (Markup and css)

• انیمیشن متحرک مهارت Skills moving animation

بررسی ها Reviews

• بررسی هدر کارت با افکت سایه Review Header Card with shadow effect

• راه اندازی Swiper js Swiper js setup

• کارت بررسی Review card

• از جاوا اسکریپت برای فهرست کردن نظرات استفاده کنید (کشنده پاسخگو نیز :)) Use JavaScript to list reviews (responsive swiper also :) )

• سبک دادن به Swiper و اجزای آن بخش 1 Styling the Swiper and it's components PART 1

• سبک دادن به Swiper و اجزای آن بخش 2 Styling the Swiper and it's components PART 2

پروژه ها projects

• طرح پروژه ها Projects layout

• یک دایره چشم چرخان متحرک با فقط CSS دوباره بسازید! Build an animated rotating Eye Circle with ONLY CSS AGAIN !

• یک لینک متحرک خنده دار منحنی با CSS INLY AGAIN ایجاد کنید :) Create a curvy animated funny link with CSS INLY AGAIN :)

• پروژه ها را پاسخگو کنید Make projects responsive

سوالات متداول Frequently asked questions

• سوالات متداول (نشانه گذاری و سبک ها) Frequently asked questions (Markup and styles)

• آکاردئون با جاوا اسکریپت Accordion with JavaScript

مخاطب Contact

• تماس با قسمت 1 Contact Part 1

• تماس با قسمت 2 Contact Part 2

• ایمیل ها را آسان دریافت کنید Receive emails easy

پس زمینه 3 بعدی متحرک با THREE JS Animated 3d background with THREE JS

• THREE JS برای مبتدیان مطلق توضیح داده شده است THREE JS explained for absolute beginners

• تنظیم پس زمینه سه بعدی 3d Background setup

• پس زمینه 3 بعدی متحرک (راس توضیح داده شده است) Animated 3d background (Vertices explained)

• انیمیشن پس زمینه تکان دادن سه بعدی 3d Waving background animation

افکت تصویر سه بعدی rgb با سه JS و Shader 3d rgb image effect with THREE JS and Shaders

• افکت تصویر اریب سه بعدی rgb قسمت 1 3d rgb skew image effect part 1

• جلوه تصویر کج سه بعدی rgb قسمت 2 3d rgb skew image effect part 2

• افکت تصویر اریب سه بعدی rgb قسمت 3 3d rgb skew image effect part 3

• افکت تصویر اریب سه بعدی rgb قسمت 4 3d rgb skew image effect part 4

انیمیشن ها، اسکرول صاف Animations, Smooth scroll

• فرود انیمیشن ها، رفع مشکلات لودر Landing animations, fixing loader issues

• پیوند زمان بارگذاری با بارگذاری صفحه Linking loading time with page loading

• اسکرول صاف و رفع تمام مشکلات آن Smooth scroll and fixing all it's issues