توسعه‌دهنده وب فرانت‌اند - HTML ،CSS و جاوا اسکریپت مدرن

آنچه یاد خواهید گرفت:

• چگونه صفحات وب با HTML و CSS ایجاد کنیم؟
• ایجاد محتوای تعاملی وب با جاوا اسکریپت
• مبانی کدنویسی جاوا اسکریپت
• جان بخشی به صفحات وب با کد
• وبسایت‌های مدرن واکنش‌گرا
• صفحات وب تعاملی و پویا

پیش‌نیازهای دوره

• مهارت‌های اولیه کامپیوتر
• مهارت‌های اولیه اینترنت
• نصب و راه‌اندازی اپلیکیشن‌ها

توضیحات دوره

طراحی وب برای مبتدیان - کدنویسی HTML ،CSS و جاوا اسکریپت مدرن

مباحث تحت پوشش:

• چگونه صفحات وب با HTML و CSS ایجاد کنیم؟
• ایجاد محتوای تعاملی وب با جاوا اسکریپت
• مبانی کدنویسی جاوا اسکریپت
• جان بخشی به صفحات وب با کد
• وبسایت‌های مدرن واکنش‌گرا
• صفحات وب تعاملی و پویا

آیا کنجکاو هستید که وبسایت‌ها را ایجاد کنید؟ این دوره مکان مناسبی برای شروع است.

موارد دوره:

• بیش از نه ساعت درس با کیفیت بالا
• ورک‌بوک قابل دانلود 16صفحه‌ای شامل کد منبع HTML، نکات، منابع و چالش‌ها
• ورک‌بوک قابل دانلود 32 صفحه‌ای CSS شامل کد منبع، نکات، منابع و چالش‌ها
• ورک‌بوک‌های قابل دانلود 10 و 17 صفحه‌ای جاوا اسکریپت شامل کد منبع، نکات، منابع و چالش‌ها
• دسترسی مادام‌العمر به بروزرسانی‌های دوره

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

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

دوره مفاهیم اصلی جاوا اسکریپت را پوشش می‌دهد تا شما بتوانید کد را تست کرده و با عملکرد آن آشنا شوید. با استفاده از جاوا اسکریپت می‌توانید به DOM HTML در مرورگر دسترسی پیدا کنید که این امکان را به شما می‌دهد تا با محتوای صفحات وب تعامل کرده و آن را دستکاری دهید. جاوا اسکریپت محتوای تعاملی و پویا را که امروز در تمام صفحات وب مدرن وجود دارد ایجاد می‌کند.

شما می‌توانید ببینید که چگونه سریعاً شروع به کدنویسی کنید و در عین حال بر طراحی صفحات وب خود تمرکز کنید که با کد منبع و مثال‌های فراوان پر شده است.

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

یادگیری HTML

چگونه یک فایل HTML ایجاد کرده و کد HTML خود را به شیوه‌ای مدرن ساختاردهی کنید که آماده استایل‌دهی باشد؟ دروس این بخش شامل آموزش‌های مربوط به شروع کدنویسی و ایجاد صفحات وب است.

• راه‌اندازی ویرایشگر و ایجاد فایل‌های HTML
• اشکال‌زدایی کد خود
• تگ‌های HTML برای ساختار صفحه
• آنچه یک عنصر HTML را تشکیل می‌دهد؟
• تگ‌ Self closing چیست؟
• چگونه از Attributes عنصر استفاده کنیم؟
• لینک‌دهی صفحات با استفاده از هایپرلینک‌ها
• افزودن تصاویر به صفحه وب شما
• لیست‌ها و جداول برای محتوای قابل خواندن
• عناصر صفحه سمانتیک
• چگونه یک صفحه وب ساده ایجاد کنیم؟
• آنلاین شدن با صفحه گیت‌هاب و وبسایت HTML شما

یادگیری HTML شامل کدهای زیر است:

• ویرایشگر و راه‌اندازی برای نوشتن HTML - ایجاد فایل HTML
• آناتومی عنصر HTML - تگ ابتدایی، محتوا، عنصر، تگ پایانی
• چهار تگ ضروری برای صفحات HTML - بررسی html، هد، عنوان و بادی
• کامنت‌ها در کد
• ایجاد قالب اولیه
• آشنایی با تگ‌های متداول HTML - بررسی<h1><p><div><span>
• تگ‌های Self closing - بررسی <hr><br>
• attributes تگ (شناسه، استایل و کلاس)
• افزودن تصاویر - تگ‌های self closing
• لیست‌ها - <li> <ol> <ul>
• جداول - <table><tr><td> <th>
• عناصر سمانتیک - HTML <nav><header><section><article><aside><footer>

یادگیری CSS

استایل‌های شیت‌های (CSS) چیست و چگونه می‌توانید صفحات وب خود را استایل‌دهی کنید؟ HTML، ساختاری برای صفحات وب شما فراهم می‌آورد و CSS به شما اجازه می‌دهد تا صفحه خود را استایل‌دهی کنید. شما صفحه را با استایل خود طراحی می‌کنید، طرح‌بندی‌های صفحه را راه‌اندازی می‌کنید و رنگ‌ها، فونت‌ها و موارد دیگر را اضافه می‌کنید. شما صفحات وب خود را به گونه‌ای ارائه می‌دهید که می‌خواهید به نظر برسند، مستقل از HTML، می‌توانید محتوای وب خود را به شکلی که تصور می‌کنید، استایل‌دهی کنید.

• بررسی نحوه افزودن CSS به صفحه HTML خود
• چگونه به پس‌زمینه عناصر صفحه و متن، رنگ اضافه کنیم؟
• مدل جعبه‌ای چیست و چگونه می‌توانید بوردرها، حاشیه‌ها و padding را به هر عنصر صفحه اعمال کنید؟
• استایل‌دهی متن، بروزرسانی فونت و سفارشی‌سازی خروجی متن
• بروزرسانی لینک‌های خود و افزودن شبه کلاس‌ها به عناصر صفحه خود
• چگونه ویژگی‌های نمایش را اعمال کرده، پوزیشن را قرار داده و طرح‌بندی صفحه خود را راه‌اندازی کنید؟
• کشف ویژگی‌های واقعی و مفید CSS
• CSS combinators برای انتخاب عناصر
• چگونه یک صفحه وب واکنش‌گرا با CSS float و CSS grid و CSS flexbox بسازید؟

یادگیری مبانی جاوا اسکریپت

کد جاوا اسکریپت صفحه وب html را به نحوی که بارگذاری می‌شود اجرا می‌کند. افزودن جاوا اسکریپت به کد شما می‌تواند تجربه کاربری صفحه وب را بهبود بخشد. شما از یک وبسایت استاتیک به یک وبسایت تعاملی با html می‌پردازید. این بخش مبانی شروع کار با جاوا اسکریپت و سینتکس کد برای نوشتن کد جاوا اسکریپت را پوشش می‌دهد. جاوا اسکریپت مجموعه‌ای از دستورالعمل‌ها می‌باشد که می‌توانید در کد خود اضافه کنید تا به مرورگر بگویید که چه کاری انجام دهد.

متغیرها در قلب کدنویسی هستند.

• مقدمه جاوا اسکریپت و پرامپت هشدار
• متغیرها - Let و Const
• عملگرها
• آرایه‌ها و آبجکت‌ها
• تایپ‌های داده
• توابع
• شرطی‌ها
• حلقه‌ها - Do While و For و While و for each

یادگیری DOM جاوا اسکرپیت

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

• DOM (مدل آبجکت سند) چیست؟
• چگونه با جاوا اسکریپت عناصر را از صفحه وب خود انتخاب کنیم؟
• دستکاری و تغییر عناصر صفحه خود با جاوا اسکریپت
• چگونه attributes استایل‌دهی عناصر را تنظیم کنیم؟
• تعاملی کردن آنها با listener های رویداد
• رویدادهای DOM و رویدادهای صفحه با جاوا اسکریپت
• چگونه عناصر را با کد ایجاد کرده و به صفحه وب خود اضافه کنیم؟
• حرکت عناصر و انیمیشن عناصر
  • انتخاب عناصر
  • درخت DOM
  • انتخاب چندین عنصر
  • دستکاری عناصر
  • افزودن listener های رویداد
  • مقادیر ورودی
  • ایجاد عناصر
  • انیمیشن
  • حرکت عناصر
  • رویدادهای پنجره
  • رویدادهای سند
  • رویدادهای کیبورد
  • ردیابی فشردن کلیدها

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

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