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

10 Mega Responsive Websites with HTML, CSS, and JavaScript [Video]

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: در این دوره، 10 وب سایت مگا و کامل واکنش گرا را با سه فناوری اصلی HTML، CSS و JS خواهیم ساخت. اگر دانش اولیه ای از این فناوری ها دارید و هنوز در ساختن وب سایت ها مشکل دارید، یا اگر می خواهید مهارت های توسعه دهنده و طراح خود را ارتقا دهید، به جای درستی آمده اید. ما این دوره را ایجاد کرده‌ایم تا به دانش‌آموزان بهترین تجربه را در سه فناوری اصلی بدهیم و به آنها فرصت دهیم تا بهترین قالب‌های طراحی شده را ایجاد کنند که به آنها امکان می‌دهد مشتریان خود را هیجان زده کنند. ما 10 وب سایت کامل مختلف و نه تنها بخش هایی از آنها را از ابتدا خواهیم ساخت. آنها پر از جلوه ها و طرح های مدرن، زیبا و زیبا خواهند بود. ما با پروژه‌های ساده شروع می‌کنیم و بخش‌های پیشرفته را نیز مرور می‌کنیم. با تسلط بر این فناوری‌های اصلی توسعه وب جلویی، می‌توانید تم‌های عالی و مدرن ایجاد کنید. همچنین، دانش کافی برای حرکت و یادگیری در مورد سایر فناوری‌ها مانند برخی از فریم‌ورک‌ها و کتابخانه‌های فرانت‌اند، که امروزه محبوب و پر تقاضا هستند، خواهید داشت. همه منابع و فایل های کد در اینجا قرار می گیرند: https://github.com/PacktPublishing/10-Mega-Responsive-Websites-with-HTML-CSS-and-JavaScript 10 پروژه با HTML، CSS و جاوا اسکریپت خالص بسازید. تکنیک ها و ترفندهای مدرن طراحی وب را بیاموزید ویژگی های مدرن HTML5، CSS3 و جاوا اسکریپت را کاوش کنید انیمیشن‌ها، تبدیل‌ها و انتقال‌های CSS3 را کاوش کنید یاد بگیرید چگونه قالب های طراحی وب مدرن ایجاد کنید این دوره برای افرادی که می خواهند سه فناوری اصلی HTML، CSS و جاوا اسکریپت را یاد بگیرند ایده آل است. همچنین برای دانش‌آموزانی که دانش اولیه در زمینه توسعه وب جلویی دارند و می‌خواهند مهارت‌های خود را توسعه دهند و برای کسانی که می‌خواهند مهارت‌های طراحی وب را توسعه دهند ایده‌آل است. ساخت وب سایت با سه فناوری اصلی * یاد بگیرید که چگونه یک وب سایت مدرن با جلوه ها و طرح های زیبا بسازید * راه های بسیاری را کاوش کنید که از طریق آنها می توان پروژه را واکنش گرا کرد.

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

خوش آمدی Welcome

  • معرفی Introduction

  • برپایی Setup

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • بخش Watches Work Make Watches section Work

  • بخش Watches Work Make Watches section Work

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

پروژه 10 – PayPal Clone Project 10 – PayPal Clone

پروژه 10 – PayPal Clone Project 10 – PayPal Clone

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

نمایش نظرات

آموزش 10 وب سایت مگا ریسپانسیو با HTML، CSS و جاوا اسکریپت [ویدئو]
جزییات دوره
22 h 18 m
101
Packtpub Packtpub
(آخرین آپدیت)
1
5 از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

George Lomidze George Lomidze

توسعه دهنده/طراح/معلم آنلاین

سلام،

من جورج هستم، یک برنامه‌نویس/طراح وب کامل، یکی از بنیانگذاران 'Code And Create' و نویسنده چندین کلاس در Skillshare.

من هیجان زده هستم که اینجا هستم و فرصتی برای کمک به مردم برای یادگیری یکی از جالب ترین و قدرتمندترین زمینه های امروزی دارم.

من تصمیم گرفتم دانش و تجربه خود را با جهان به اشتراک بگذارم و این دلیل اصلی حضور من در Skillshare است.

من در فناوری‌های زیر تخصص دارم: HTML، CSS، SASS، Bootstrap، JavaScript، jQuery، React، React Native، NodeJS، Git و موارد دیگر...

منتظر دیدار شما در کلاس‌هایم هستم و به شما کمک می‌کنم تا یک توسعه‌دهنده وب حرفه‌ای شوید.