یک صفحه فرود متحرک با HTML، CSS و جاوا اسکریپت ایجاد کنید

Create An Animated Landing Page by HTML, CSS and JavaScript

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: HTML5، CSS3 و جاوا اسکریپت مدرن را با ایجاد صفحه وب پاسخگو و تعاملی شامل Flexbox و موارد دیگر بیاموزید. ایده آل برای مبتدیانی که به دنبال چیزهایی برای ساخت پروژه های منحصر به فرد در یک بازه زمانی کوتاه هستند. طراحی و ساخت پروژه های خیره کننده در دنیای واقعی. از HTML5 مدرن استفاده کنید. یک ظاهر طراحی مدرن با Flexbox، انیمیشن‌های CSS، انتقال، ویژگی‌های سفارشی و غیره. طرح‌بندی‌های واکنش‌گرا، در دسترس و شگفت‌انگیز ایجاد کنید. از متغیرها، شرطی ها، توابع و اشیاء جاوا اسکریپت استفاده کنید. استفاده از ویژگی رویداد در جاوا اسکریپت پیشرفته نحوه کار با کد ویژوال استودیو (VSCode). به عنوان یک توسعه دهنده فریلنسری کار کنید. پیش نیازها: بدون نیاز به کدنویسی یا تجربه طراحی یک کامپیوتر با دسترسی به اینترنت هر کامپیوتری کار می کند، (ویندوز، macOS یا لینوکس) نیازی به خرید نرم افزار ندارید، ما از بهترین ویرایشگر کد رایگان در جهان استفاده خواهیم کرد.

سلام، به دوره ای که توسط HTML، CSS، JavaScript ایجاد شده است خوش آمدید!

ساخت وب‌سایت به شما امکان می‌دهد کارهای سرگرم‌کننده و خلاقانه‌ای را از هر کجای دنیا انجام دهید، و حتی درآمد خوبی هم دارد. توسعه وب یکی از آینده سازترین و پردرآمدترین صنایع در جهان است. و HTML و CSS نقطه ورود به این جهان است!

اگر علاقه مند به توسعه front-end هستید، دیگر به دنبال آن نباشید. این دوره کاملاً مبتدی است که کاملاً پاسخگوی تلفن همراه است.

مزیت این دوره این است که کاملاً مبتنی بر پروژه است و من از آواتار خود برای توصیف واضح همه چیز استفاده می کنم. این درس را کاملا قابل درک می کند.

این سخنرانی به سه بخش تقسیم می شود. ما با کاوش در HTML5 شروع می کنیم، دانش آموزان ترکیب یک صفحه وب و نحوه تفسیر یک مرورگر وب کد html را برای نمایش عناصر بصری یک صفحه می آموزند.

بخش HTML مفاهیم کلیدی زیر را پوشش می دهد:

  • ساختار HTML

  • نمای کلی از HTML5

  • استفاده از برچسب تقسیم

  • ایجاد لیست های نامرتب مرتب

  • درج تصاویر

  • ایجاد برچسب پیوندها

  • در حال درج بخش

  • استفاده از ویژگی ها

  • + خیلی بیشتر

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

بخش CSS این دوره مفاهیم کلیدی زیر را پوشش می دهد:

  • قوانین CSS

  • کلاس CSS

  • بخش ها

  • شناسه CSS

  • مدل جعبه

  • ویژگی های قلم

  • پس زمینه

  • موقعیت یابی

  • سبک‌سازی پیوند

  • پویانمایی CSS

  • نمایش انعطاف پذیر

  • انتقال

  • + خیلی بیشتر

در بخش آخر این دوره، دانش آموزان به افزودن قابلیت های تعاملی سمت کلاینت با استفاده از جاوا اسکریپت خواهند پرداخت. جاوا اسکریپت یک زبان برنامه نویسی فوق العاده قدرتمند است که واقعاً می تواند به ارتقاء صفحات وب به سطح دیگری کمک کند. این بخش به دانش‌آموزان آموزش می‌دهد که چگونه تصاویر و اشیاء را متحرک کنند و عناصر HTML و CSS را با استفاده از DOM (مدل شیء سند) دستکاری کنند.

بخش جاوا اسکریپت مفاهیم کلیدی زیر را پوشش می دهد:

  • خروجی جاوا اسکریپت

  • اعلامیه های متغیر

  • اشیاء

  • رشته ها

  • روش ها

  • گزاره های مشروط

  • عملکردها و رویدادها

  • کتابخانه jQuery

  • + خیلی بیشتر


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

پس منتظر چه چیزی هستید؟ برنامه درسی کامل را بررسی کنید، در این سفر به من بپیوندید و در این دوره ثبت نام کنید. من در هر مرحله در کنار شما خواهم بود.



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

مقدمه ای بر توسعه وب Introduction to Web Development

  • چرا باید توسعه وب را یاد بگیرید؟ Why you should learn web development?

HTML HTML

  • ساختار HTML HTML Structure

CSS CSS

  • ساختار CSS CSS Structure

جاوا اسکریپت JavaScript

  • ساختار جاوا اسکریپت JavaScript Structure

مقدمه ای بر VSCode Introduction to VSCode

  • آشنایی با کد ویژوال استودیو (VSCode) Introduction to Visual Studio Code (VSCode)

طراحی وب Web Design

  • مقدمه ای بر Figma Introduction to Figma

مروری بر HTML5 An Overview of HTML5

  • مروری بر ساختار HTML5 An Overview of HTML5 structure

پروژه صفحه فرود Landing Page Project

  • هدر HTML HTML Header

  • قسمت 1 هدر CSS (مهم!) CSS Header part 1 (important!)

  • قسمت 2 سربرگ CSS (مهم!) CSS Header part 2 (important!)

  • منوی فرعی SubMenu

  • لغزنده Sliders

  • جاوا اسکریپت قسمت 1 JavaScript part 1

  • جاوا اسکریپت قسمت 2 JavaScript part 2

  • طراحی واکنشگرا قسمت 1 Responsive Design part 1

  • طراحی ریسپانسیو قسمت 2 Responsive Design part 2

تمرین 1 (کادر جستجوی مدرن با HTML و CSS) Exercise 1 (Modern search box by HTML and CSS)

  • تمرین جعبه جستجو Search box exercise

  • کادر جستجو (تمرین-1) Search box (Exercise-1)

تمرین 2 (رنگین کمان متحرک روی متن توسط HTML، CSS و جاوا اسکریپت) Exercise 2 (Animated Rainbow on text by HTML, CSS and JavaScript)

  • تمرین رنگین کمان روی متن Rainbow on text exercise

  • رنگین کمان روی متن (تمرین 2) Rainbow on text (Exercise-2)

تست تمرین Practice Test

  • تست تمرین Practice Test

قسمت پایانی Final part

  • کد منبع پروژه صفحه فرود Landing Page project Source code

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

نمایش نظرات

Udemy (یودمی)

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

یکی از ویژگی‌های برجسته یودمی، کیفیت بالای دوره‌ها و حضور استادان مجرب و با تجربه در هر حوزه است. این امر به کاربران اعتماد می‌دهد که در حال دریافت آموزش از منابع قابل اعتماد و معتبر هستند و می‌توانند به بهترین شکل ممکن از آموزش‌ها بهره ببرند. به طور خلاصه، یودمی به عنوان یکی از معتبرترین و موثرترین پلتفرم‌های آموزشی آنلاین، به افراد امکان می‌دهد تا به راحتی و با کیفیت، مهارت‌های مورد نیاز خود را ارتقا دهند و به دنبال رشد و پیشرفت شغلی خود باشند.

یک صفحه فرود متحرک با HTML، CSS و جاوا اسکریپت ایجاد کنید
جزییات دوره
1.5 hours
20
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
3,005
4.7 از 5
دارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar