آموزش 10 وب سایت مگا ریسپانسیو با HTML، CSS و جاوا اسکریپت

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

خوش آمدی Welcome

• معرفی Introduction

• برپایی Setup

پروژه 1 - غذاها Project 1 - Foods

• پیش نمایش پروژه Project Preview

• ایجاد نشانه گذاری HTML برای فرود و تعریف سبک های رایج Create HTML Markup for Landing and Define Common Styles

• صفحه فرود را سبک کنید و نمایش اسلاید ایجاد کنید Style Landing Page and Create Slideshow

• کارت های سه بعدی بسازید و سبک کنید Create and Style 3D Cards

• ایجاد و سبک گالری غذا Create and Style Foods Gallery

• ایجاد و سفارشی کردن پاورقی Create and Customize Footer

• ایجاد و سبک نوار ناوبری ثابت Create and Style Fixed Navbar

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

پروژه 2 - طراحی خلاق Project 2 - Creative Design

• پیش نمایش پروژه Project Preview

• ایجاد نشانه گذاری HTML برای فرود و تعریف سبک های رایج Create HTML Markup for Landing and Define Common Styles

• ایجاد افکت "امواج" با استفاده از پس زمینه شناور Create "Waves" Effect using Floating Background

• صفحه فرود را سفارشی کنید Customize Landing Page

• ایجاد و سفارشی سازی بخش مشتریان Create and Customize Customers Section

• بخش تیم ایجاد و سبک کنید Create and Style Team Section

• بخش و پاورقی مخاطب را ایجاد و سبک کنید Create and Style Contact Section and Footer

• دکمه Scroll-up را ایجاد کنید و نوار ناوبری را فعال کنید Create Scroll-up Button and Make Navbar Work

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

پروژه 3 - وب سایت آژانس تجاری Project 3 - Business Agency Website

• پیش نمایش پروژه Project Preview

• ایجاد و سفارشی کردن فرود Create and Customize Landing

• انیمیشن ها را به Landing اضافه کنید Add Animations to Landing

• نوار نوار را ایجاد و سفارشی کنید Create and Customize Navbar

• Navbar را به کار بیاندازید Make Navbar Work

• بخش ایجاد و سبک درباره ما Create and Style About Us Section

• کنترل های ویدئویی سفارشی را به کار بیاندازید Make Custom Video Controls Work

• بخش کارت های قیمت گذاری را ایجاد و سفارشی کنید Create and Customize Pricing Cards Section

• کارت‌های قیمت‌گذاری را با استفاده از Swiper.js کارآمد کنید Make Pricing Cards Work using Swiper.js

• بخش ایجاد و سبک تماس Create and Style Contact Section

• ایجاد و سبک پاورقی Create and Style Footer

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

پروژه 4 - تجارت الکترونیک اپل Project 4 - Apple eCommerce

• پیش نمایش پروژه Project Preview

• صفحه فرود را ایجاد و سفارشی کنید Create and Customize Landing Page

• ایجاد نمایش اسلاید تصاویر پس زمینه Create Background Images Slideshow

• مکعب را ایجاد و سفارشی کنید Create and Customize Cube

• کنترل کننده های مکعب را ایجاد و سفارشی کنید Create and Customize Cube Controllers

• مکعب کار کند Make Cube Work

• ایجاد و سفارشی سازی بخش آیفون Create and Customize iPhones Section

• ایجاد و سبک کردن بخش مک بوک - قسمت 1 Create and Style MacBook Section - Part 1

• بخش مک بوک را ایجاد و سبک کنید - قسمت 2 Create and Style MacBook Section - Part 2

• بخش ایجاد و سبک ساعت‌ها Create and Style Watches Section

• بخش Watches Work Make Watches section Work

• بخش ایرپاد را ایجاد و سبک کنید Create and Style AirPods Section

• ایجاد و سفارشی کردن پاورقی Create and Customize Footer

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

پروژه 5 - نمونه کارها شخصی Project 5 - Personal Portfolio

• پیش نمایش پروژه Project Preview

• صفحه فرود را ایجاد و سفارشی کنید Create and Customize Landing Page

• ایجاد و سبک ناوبری Create and Style Navigation

• نوارهای پیشرفت را ایجاد و سفارشی کنید Create and Customize Progress Bars

• ایجاد و سفارشی سازی بخش پروژه ها Create and Customize Projects Section

• بخش ایجاد و سبک تماس Create and Style Contact Section

• ایجاد و سبک پاورقی Create and Style Footer

• نوارهای نوار و پیشرفت را با استفاده از جاوا اسکریپت کار کنید Make Navbar and Progress Bars Work Using JavaScript

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

پروژه 6 - ماشین های کلاسیک Project 6 - Classic Cars

• پیش نمایش پروژه Project Preview

• ایجاد نشانه گذاری HTML برای فرود و تعریف سبک های رایج Create HTML Markup for Landing and Define Common Styles

• ایجاد و کارکرد ناوبری Create and Make Navigation Work

• منوی همبرگر را سبک و درست کنید Style and Make Hamburger Menu Work

• صفحه فرود را ایجاد و سفارشی کنید Create and Customize Landing Page

• بخش اتومبیل های محبوب را ایجاد و سفارشی کنید Create and Customize Popular Cars Section

• ایجاد و سبک گالری ویدیو Create and Style Video Gallery

• ایجاد و سبک گالری تصاویر Create and Style Image Gallery

• ایجاد و سفارشی کردن بخش تماس و پاورقی Create and Customize Contact Section and Footer

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

پروژه 7 - وب سایت معمار Project 7 - Architect Website

• پیش نمایش پروژه Project Preview

• صفحه فرود را ایجاد و سفارشی کنید Create and Customize Landing Page

• ایجاد و کارکردن نوار کناری Create and Make Sidebar Work

• بخش ایجاد و سبک درباره ما با استفاده از شبکه CSS Create and Style About Us Section Using CSS Grid

• ایجاد و سفارشی کردن کارت با Tilt.js Create and Customize Cards with Tilt.js

• بخش ایجاد و سبک تماس Create and Style Contact Section

• پروژه را پاسخگو کنید و بارگذاری اسپینر ایجاد کنید Make Project Responsive and Create Loading Spinner

پروژه 8 - جاده Project 8 - The Road

• پیش نمایش پروژه Project Preview

• ایجاد نشانه گذاری HTML برای فرود و سبک های رایج Create HTML Markup for Landing and Common Styles

• صفحه فرود را سفارشی کنید و کاری کنید Customize and Make Landing Page Work

• محبوب ترین بخش تورها را ایجاد و سبک کنید Create and Style The Most Popular Tours Section

• ایجاد و سفارشی کردن بخش توصیفات با پس زمینه ویدیو Create and Customize Testimonials Section with Video Background

• ایجاد و سفارشی کردن بخش تماس با پس زمینه متحرک Create and Customize Contact Section with Animated Background

• ایجاد و سبک پاورقی Create and Style Footer

• ایجاد و کارکرد ناوبری Create and Make Navigation Work

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

پروژه 9 - خانه شراب Project 9 - The Wine House

• پیش نمایش پروژه Project Preview

• ایجاد و سفارشی سازی بخش های اول، دوم و سوم Create and Customize First, Second, and Third Sections

• ایجاد و سفارشی کردن بخش چهارم و پنجم Create and Customize Fourth and Fifth Sections

• نوار ناوبری را ایجاد و سبک کنید و نوارهای پیشرفت کار کنند Create and Style Navbar and Make Progress Bars Work

• افکت اسکرول افقی با جاوا اسکریپت ایجاد کنید Create Horizontal Scroll Effect with JavaScript

• نوار پیشرفت را با جاوا اسکریپت کار کنید Make Progress Bar Work with JavaScript

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

پروژه 10 - کلون پی پال Project 10 - PayPal Clone

• پیش نمایش پروژه Project Preview

• ایجاد و سبک صفحه فرود - قسمت 1 Create and Style Landing Page - Part 1

• صفحه فرود را ایجاد و سبک کنید - قسمت 2 Create and Style Landing Page - Part 2

• ایجاد و کارکرد منوهای کشویی Create and Make Dropdown Menus work

• ایجاد و سفارشی سازی بخش خدمات Create and Customize Services Section

• بخش ایجاد و سبک ویژگی ها Create and Style Features Section

• ایجاد و سبک بخش "شروع به کار". Create and Style "Get Started" Section

• ایجاد و سبک پاورقی Create and Style Footer

• صفحه ورود به سیستم را ایجاد و سبک کنید Create and Style Login Page

• صفحه ثبت نام را ایجاد و سبک کنید Create and Style Sign Up Page

• پروژه را پاسخگو کنید - قسمت 1 Make the Project Responsive - Part 1

• پروژه را پاسخگو کنید - قسمت 2 Make the Project Responsive - Part 2

• پروژه را پاسخگو کنید - قسمت 3 Make the Project Responsive - Part 3

• پروژه را پاسخگو کنید - قسمت 4 Make the Project Responsive - Part 4

جایزه BONUS

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