کانال تلگرام پشتیبانی تلگرام شماره تماس پشتیبانی: 0930 395 3766
ورود ثبت نام

آموزش ساخت پروژه وب‌سایت واکنش‌گرا #۲: HTML، CSS و جاوا اسکریپت - آخرین آپدیت

دانلود Make A Responsive Website Project #2: HTML, CSS & Javascript

نکته: ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.
نمونه ویدیوها:
توضیحات دوره:

ساخت وب‌سایت ریسپانسیو با تم تعطیلات با HTML، CSS، Bootstrap، Animate.css، Javascript، JQuery و Snowstorm.js

چگونه یک وب‌سایت ریسپانسیو با HTML، CSS و Javascript بسازیم؟

پیش‌نیازها برای ساخت وب‌سایت ریسپانسیو

  • آشنایی کامل با HTML: درک مفاهیمی مانند تگ <section></section>

  • تسلط بر CSS: شناخت تفاوت بین position: relative و position: absolute

  • تجربه قبلی با Javascript و JQuery: داشتن آشنایی اولیه با این زبان‌ها

برای شرکت در این دوره، نیاز به دانلود JQuery، Bootstrap، Animate.css و Snowstorm دارید. تمام این ابزارها به صورت رایگان و بدون نیاز به ثبت‌نام در دسترس هستند. اگرچه تمامی فایل‌های مورد نیاز در سورس کد ارائه شده‌اند، توصیه می‌شود خودتان نیز با نحوه دانلود این کتابخانه‌ها آشنا شوید.

چرا این دوره برای شما مناسب است؟

آیا دوست دارید بدانید چگونه جلوه‌های ویژه جذابی را که در ویدیوی معرفی مشاهده کردید، ایجاد کنید؟ یا شاید به دنبال راهی برای نصف کردن زمان لازم برای ساخت یک وب‌سایت ریسپانسیو با یک فریم‌ورک ساده هستید؟ اگر پاسخ شما مثبت است، این دوره دقیقاً برای شما طراحی شده است! در این دوره، شما گام به گام در ساخت یک وب‌سایت ریسپانسیو با استفاده از دو فریم‌ورک CSS محبوب، راهنمایی خواهید شد.

محتوای دوره: ساخت وب‌سایت تم تعطیلات

در این دوره، ما از ابتدا یک وب‌سایت ریسپانسیو با تم تعطیلات ایجاد خواهیم کرد. تکنولوژی‌های مورد استفاده شامل HTML، CSS، Bootstrap، Animate.css، JQuery و Snowstorm.js هستند.

پس از اتمام این دوره، شما اطمینان خواهید داشت که:

  • با HTML/CSS کاملاً مسلط شده‌اید.

  • با نحوه ریسپانسیو کردن وب‌سایت‌ها آشنا شده‌اید.

  • نحوه استفاده از مهم‌ترین قابلیت‌های Bootstrap و Animate.css را می‌دانید.

  • نحوه نصب Snowstorm.js را آموخته‌اید.

پشتیبانی و یادگیری

با ثبت‌نام در این دوره، پشتیبانی کامل از من دریافت خواهید کرد. من عاشق کمک به دانشجویان هستم و آماده پاسخگویی به هر سوالی هستم: مسائل مربوط به برنامه‌نویسی، خطاها، توصیه‌های عمومی برنامه‌نویسی - تفاوتی نمی‌کند!

سرگرم‌کننده!

در نهایت، کشف خواهید کرد که برنامه‌نویسی وب چقدر سرگرم‌کننده است و مطمئن هستم که اوقات خوشی خواهید داشت.

سورس کد پروژه

شما می‌توانید سورس کد این پروژه را در آخرین درس دانلود کنید تا به راحتی همراه با دوره پیش بروید.

نکات مهم: دانلود ابزارها

لطفاً توجه داشته باشید: برای تکمیل این پروژه، نیاز به دانلود JQuery، Bootstrap، Animate.css و Snowstorm.js دارید. تمام این موارد به صورت رایگان و بدون نیاز به ثبت‌نام قابل دانلود هستند. فایل‌های مربوطه در سورس کد گنجانده شده‌اند، اما اکیداً توصیه می‌شود که خودتان نیز آن‌ها را دانلود کنید تا با محل یافتن فایل‌های صحیح آشنا شوید.

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

مقدمه Introduction

  • مقدمه Introduction

مروری بر CSS CSS Review

  • خصوصیت انیمیشن CSS CSS Animation Property

  • خصوصیت ترنزیشن CSS CSS Transition Property

  • اضافه کردن نوع فونت در CSS CSS Adding A Type Of Font

  • خصوصیت خانواده فونت CSS CSS Font Family Property

نحوه ایجاد Overlay How To Create An Overlay

  • نحوه ایجاد Overlay How To Create An Overlay

مروری بر Layout Layout Review

  • انواع Layout Types Of Layouts

  • استفاده از درصد به جای پیکسل Using Percentages Instead Of Pixels

مقدمه ای بر Bootstrap Introduction To Bootstrap

  • Bootstrap چیست What Is Bootstrap

  • نصب Bootstrap Installing Bootstrap

کلاس‌های Bootstrap استفاده شده در این پروژه Bootstrap Classes Used In This Project

  • Bootstrap: کلاس‌های دکمه Bootstrap: Button Classes

  • Bootstrap: کلاس Container Bootstrap: Container Class

  • Bootstrap: کلاس‌های سیستم Grid (ستون‌ها) Bootstrap: Grid System(Columns) Classes

  • Bootstrap: کلاس Text-Center Bootstrap: Text-Center Class

اضافه کردن Javascript Adding The Javascript

  • نصب JQuery Installing JQuery

  • نصب Snowstorm.js Installing Snowstorm.js

مقدمه ای بر Animate.css Introduction To Animate.css

  • Animate.css چیست What Is Animate.css

  • نحوه استفاده از Animate.css How To Use Animate.css

ایجاد وب‌سایت اصلی ما Creating Our Main Website

  • اضافه کردن فایل‌های StyleSheet Adding The Stylesheets

  • تنظیم Body و Font Faces Setting Up The Body And Font Faces

  • تنظیم کلاس‌های دکمه (Btns) Setting Up Btns Classes

  • تنظیم کلاس‌های Input Setting Up The Input Classes

  • تنظیم کلاس‌های Heading Setting Up The Heading Classes

  • تنظیم کلاس Paragraph Setting Up The Paragraph Class

  • تنظیم کلاس‌های Sectionhead Setting Up The Sectionhead Classes

  • بخش اول: اضافه کردن HTML First Section: Adding The HTML

  • بخش اول: اضافه کردن CSS First Section: Adding The CSS

  • بخش دوم: اضافه کردن HTML Second Section: Adding The HTML

  • بخش دوم: اضافه کردن CSS Second Section: Adding The CSS

  • بخش سوم: اضافه کردن HTML Third Section: Adding The HTML

  • بخش سوم: اضافه کردن CSS Third Section: Adding The CSS

  • بخش چهارم: اضافه کردن HTML Fourth Section: Adding The HTML

  • بخش چهارم: اضافه کردن CSS Fourth Section: Adding The CSS

  • بخش پنجم: اضافه کردن HTML Fifth Section: Adding The HTML

  • بخش پنجم: اضافه کردن CSS Fifth Section: Adding The CSS

  • بخش ششم: اضافه کردن CSS و HTML Sixth Section: Adding CSS and HTML

  • بخش هفتم: اضافه کردن HTML و CSS Seventh Section: Adding HTML and CSS

مقدمه ای بر طراحی Responsive Introduction To Responsive Design

  • مقدمه ای بر Media Queries Introduction To Media Queries

  • نکته ای در مورد Min-Width در Media Queries A Note On Min-Width In Media Queries

  • یک مثال ساده از Media Queries A Simple Example Of Media Queries

  • Media Queries: دو مثال دیگر Media Queries: Two More Examples

واکنش‌گرا کردن وب‌سایت ما Making Our Website Responsive

  • انتخاب اولین Media Query Selecting The First Media Query

  • اولین Media Query: اضافه کردن CSS The First Media Query: Adding The CSS

  • انتخاب دومین Media Query Selecting The Second Media Query

  • دومین Media Query: اضافه کردن CSS The Second Media Query: Adding The CSS

  • انتخاب سومین Media Query Selecting The Third Media Query

  • سومین Media Query: اضافه کردن CSS The Third Media Query: Adding The CSS

  • انتخاب چهارمین Media Query Selecting The Fourth Media Query

  • چهارمین Media Query: اضافه کردن CSS The Fourth Media Query: Adding The CSS

  • انتخاب پنجمین Media Query Selecting The Fifth Media Query

  • پنجمین Media Query: اضافه کردن CSS The Fifth Media Query: Adding The CSS

  • انتخاب ششمین Media Query Selecting The Sixth Media Query

  • ششمین Media Query: اضافه کردن CSS The Sixth Media Query: Adding The CSS

  • انتخاب و اضافه کردن هفتمین Media Query Picking And Adding Seventh Media Query

نتیجه‌گیری (کد منبع در Lecture) Conclusion(Source Code In Lecture)

  • نتیجه‌گیری Conclusion

درس اختیاری Bonus Lecture

  • تشکر ویژه Special Thanks

آموزش نواختن هارپ: درس هایی برای مبتدیان

آموزش نواختن هارپ: درس هایی برای مبتدیان

Learn to Play Harp: Lessons For Beginners

آموزش فناوری در حرکت: بدون کد برای کدگذاران

آموزش فناوری در حرکت: بدون کد برای کدگذاران

Tech on the Go: No-Code for Coders

آموزش مدیریت عمیق SAP Solution Manager 7.2

آموزش مدیریت عمیق SAP Solution Manager 7.2

دانلود SAP Solution Manager 7.2 Administration Deep Dive

نمایش نظرات

آموزش ساخت پروژه وب‌سایت واکنش‌گرا #۲: HTML، CSS و جاوا اسکریپت
جزییات دوره
4.5 hours
56
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
8,348
4.2 از 5
دارد
دارد
دارد
Eric Tam

https://donyad.com/d/8fd3ce

جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Eric Tam Eric Tam

توسعه دهنده نرم افزار * بیش از 90 بررسی پنج ستاره * من یک توسعه دهنده نرم افزار خودم آموخته هستم که در حال حاضر با HTML ، CSS ، Javascript و PHP کار می کنم. من بیش از هفت سال است که برنامه نویسی می کنم. بیشتر دوره های من مبتنی بر پروژه است زیرا معتقدم بهترین راه برای یادگیری ایجاد پروژه های شخصی است. اگر در حین گذراندن دوره های من به کمک نیاز دارید ، لطفاً در صورت تمایل از ما سال کنید. من عاشق کمک به دانشجویان هستم.