دوره آموزشی
آموزش های یودمی
دوبله زبان فارسی

توسعه وب Full Stack با HTML ،CSS ،Bootstrap و React JS

توسعه وب Full Stack با HTML ،CSS ،Bootstrap و React JS

✅ سرفصل و جزئیات آموزش

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

  • یادگیری استفاده از جدیدترین HTML5 و CSS3 برای افزودن استایل منحصربه‌فرد به Bootstrap
  • یادگیری Bootstrap 4 و UI ها از ابتدا
  • این دوره بهترین راه برای یادگیری React JS یا React است.
  • یاد بگیرید چگونه اپلیکیشن‌های تک‌صفحه‌ای با React JS بسازید.
  • یادگیری و ایجاد تم‌ها و UI های شگفت‌انگیز و باکیفیت Bootstrap 4 از ابتدا
  • یادگیری کامپایل کردن Sass به ساده‌ترین روش ممکن با استفاده از یک GUI
  • آموزش فشرده Bootstrap Grid System همراه با طرح‌بندی تم
  • ما گام به گام با یادگیری اصول CSS، دانش خود را بهبود خواهیم بخشید.
  • ایجاد یک صفحه فرود زیبا و واکنش‌گرا برای هر کسی با html css javascript ،react js و bootstrap
  • آماده‌سازی صفحات وب با ویژگی‌های Grid CSS و Flexbox بسیار آسان‌تر خواهد شد
  • شما یاد خواهید گرفت که از تگ‌های اساسی که معمولاً در html css react و react bootstrap استفاده می‌شوند، استفاده کنید.
  • شما قادر خواهید بود لیست‌هایی در فرمت‌های مختلف در React js ،React ،bootstrap ،html css تهیه کنید.
  • شما با یادگیری ساختار فرم، قادر به ایجاد صفحات ورود کاربر و ثبت‌نام که معمولاً استفاده می‌شوند، خواهید بود.
  • در دنیای در حال توسعه، ما درباره تمام جزئیات مربوط به طراحی وب سازگار با صفحه‌نمایش‌های مختلف صحبت خواهیم کرد.
  • یادگیری components ،props ،states و متدهای چرخه عمر کامپوننت در React JS
  • ایجاد React Components قابل استفاده مجدد
  • یادگیری نحوه اتصال به یک API خارجی در React
  • استفاده از React Portals برای رندر کردن فرزندان خارج از سلسله‌مراتب DOM
  • هر جنبه‌ای از ایجاد وب‌سایت‌ها و اپلیکیشن‌ها مستلزم مجموعه‌ای منحصربه‌فرد از مهارت‌ها است.
  • این دوره به مدرس چیزهای زیادی آموخت! قبلاً، مدرس به‌سختی می‌دانست چگونه یک فایل HTML را اجرا کند.
  • اکنون، می‌تواند یک سرور Nodejs با عملکرد کامل ایجاد کند که به درخواست‌های HTTP پاسخ می‌دهد!
  • دنیای توسعه وب به وسعت خود اینترنت است.
  • توسعه وب توصیف گسترده‌ای از تسک ها و فناوری‌هایی است که در ایجاد یک وب‌سایت نقش دارند.
  • این کار می‌تواند به سادگی ساختن یک وب‌سایت متنی استاتیک یا به پیچیدگی توسعه یک وب‌سایت داینامیک تعاملی باشد.
  • شما می‌توانید توسعه وب را به دو دسته مختلف تقسیم کنید: فرانت‌اند (سمت کاربر) و بک‌اند (سمت سرور). کد Frontend روی کامپیوتر کاربر اجرا می‌شود.
  • این می‌تواند شامل HTML ،JavaScript و CSS باشد.
  • کد Backend روی سرور اجرا می‌شود. این معمولاً شامل ارتباط با یک پایگاه داده است و اغلب شامل زبان‌هایی مانند Python Ruby ،Java یا PHP می‌شود.
  • توسعه وب لزوماً شامل فرآیند طراحی نمی‌شود. این کار بر روی کد تمرکز دارد.
  • یک طراح وب، وایرفریم‌ها را می‌سازد تا دیدگاه خود را برای یک وب‌سایت موکاپ کند و سپس آن را با یک توسعه‌دهنده به اشتراک می‌گذارد.
  • توسعه‌دهنده مسئول نوشتن کدی است که آن طراحی را پیاده‌سازی می‌کند.
  • برخی از توسعه‌دهندگان وب مدرک یا گواهینامه‌ای در این زمینه کسب می‌کنند.
  • HTML ،CSS و JavaScript سه زبان برنامه‌نویسی اولیه‌ای هستند که برای ورود به توسعه وب باید یاد بگیرید.
  • شما به این سه عنصر اساسی برای ایجاد یک وب‌سایت مدرن و کار به عنوان یک توسعه‌دهنده وب frontend نیاز دارید.
  • چه علاقه‌مند به افزودن React به مجموعه مهارت‌های توسعه فعلی خود باشید، یا بخواهید وب اپلیکیشن‌های full-stack را با استفاده از ابزارهایی مانند NodeJS ،Redux و Mongo توسعه دهید
  • React یک فریم‌ورک Javascript ضروری برای توسعه وب است. این محبوب‌ترین فریم‌ورک برای توسعه رابط‌های کاربری اپلیکیشن‌های وب، موبایل و دسکتاپ است.
  • React یک کتابخانه front-end در Javascript است که توسط فیسبوک توسعه یافته است.
  • یادگیری توسعه وب با react js ،html css javascript bootstrap ،html ،css

توضیحات دوره

در این دوره شما یاد خواهید گرفت؛

  • یادگیری استفاده از جدیدترین HTML5 و CSS3 برای افزودن استایل منحصربه‌فرد به Bootstrap
  • یادگیری و ایجاد تم‌ها و UI های شگفت‌انگیز و باکیفیت Bootstrap 4 از ابتدا
  • تسلط به تک‌تک کامپوننت‌های Bootstrap
  • یادگیری کامپایل کردن Sass به ساده‌ترین روش ممکن با استفاده از یک GUI
  • دوره فشرده Bootstrap Grid System همراه با طرح‌بندی تم
  • یادگیری چگونگی افزودن انیمیشن اسکرول وب‌سایت به هر کامپوننت Bootstrap یا عنصر HTML
  • توسعه وب full stack، توسعه وب، توسعه وب front end با react ،react js
  • Bootstrap 4 ،Bootstrap 5 ،HTML5 ،CSS3
  • توسعه وب Fullstack با html ،css ،javascript ،react ،react js
  • React Bootstrap ،react js ،full stack ،bootstrap react ،fullstack web development ،reactjs
  • دوره کامل توسعه وب با react js
  • دوره کامل css
  • react با bootstrap
  • ما با نصب محلی و مبانی React شروع خواهیم کرد. پس از آن، ما 5 پروژه ایجاد خواهیم کرد.
  • پروژه 1 – یادگیری، ایجاد اپلیکیشن react و Jsx با اپلیکیشن ‘first-app’
  • پروژه 2 – یادگیری سیستم props در React با اپلیکیشن ‘blog-posts’
  • پروژه 3 – یادگیری کامپوننت‌های react ،state، متدهای lifecycle، عملیات async و موارد دیگر... با اپلیکیشن ‘hemisphere’
  • پروژه 4 – مدیریت event handlers، واکشی داده از یک API خارجی، و نمایش لیست رکوردها با اپلیکیشن ‘image-list’
  • پروژه 5 – مسیریابی با React Router و استفاده از React Portals برای رندر کردن فرزندان خارج از سلسله‌مراتب DOM با اپلیکیشن ‘react-router’

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

  • اگر می‌خواهید HTML 5 ،CSS 3 ،Bootstrap 4 و React JS را به عنوان اولین قدم در توسعه وب، به طور کامل و آسان یاد بگیرید، در جای درستی هستید.
  • افرادی که مایل به ایجاد یک حرفه در توسعه وب هستند.
  • اگر می‌خواهید وب‌سایت خود را بسازید، باید در این دوره شرکت کنید.
  • هر کسی که می‌خواهد یک توسعه‌دهنده React شود.
  • دانشجویانی که می‌خواهند یاد بگیرند چگونه وب اپلیکیشن‌های تک‌صفحه‌ای سریع بسازند.
  • هر کسی که علاقه‌مند به یادگیری یک فناوری بسیار محبوب است که توسط شرکت‌های فناوری پیشرو مانند فیسبوک، اینستاگرام و نتفلیکس استفاده می‌شود.
  • همچنین، اگر به دنبال ورود به توسعه اپلیکیشن React-Native هستید، شروع با React Js عالی خواهد بود. هنگامی که با مفاهیمی مانند JSX ،props و states آشنا شدید، همان مفاهیم در React Native نیز اعمال می‌شوند. و ورود به React Native بسیار آسان خواهد بود.
  • هر کسی که قصد تغییر شغل دارد و می‌خواهد یک توسعه‌دهنده React شود.
  • هر کسی که می‌خواهد توسعه وب، توسعه وب full stack، توسعه وب front end را یاد بگیرد.
  • هر کسی که می‌خواهد توسعه وب، fullstack web development با react ،react js ،html ،css را یاد بگیرد.
  • هر کسی که می‌خواهد fullstack web development با html css bootstrap 4 ،bootstrap 5 ،hmtl ،css را یاد بگیرد.
  • هر کسی که می‌خواهد توسعه‌دهنده وب‌سایت، طراح وب، توسعه‌دهنده اپلیکیشن وب، توسعه‌دهنده وب frontend شود.

توسعه وب Full Stack با HTML ،CSS ،Bootstrap و React JS

  • بیایید ببینیم در بخش HTML چه خواهید آموخت؟ 04:41
  • اینترنت و HTML چیست؟ 06:24
  • تگ‌های اولیه HTML5 08:33
  • تصاویر و ویژگی‌های HTML 08:25
  • لیست‌های HTML 07:00
  • مثال لیست HTML 08:24
  • عناصر سطح بلوک و خطی 05:34
  • آزمون توسعه وب فول استک با HTML ،CSS ،Bootstrap و React JS None
  • جداول HTML 08:55
  • مثال جدول HTML 06:00
  • فرم‌های HTML 12:07
  • مثال فرم‌های HTML 07:51
  • آزمون توسعه وب فول استک با React Js None
  • آزمون - توسعه وب فول استک با HTML ،CSS ،Bootstrap ،React JS و Angular None
  • آزمون - توسعه وب با React ،Bootstrap ،HTML ،CSS None
  • بیایید با CSS آشنا شویم 04:40
  • مبانی CSS 11:46
  • رنگ‌ها در CSS 08:41
  • پس‌زمینه و حاشیه در CSS 07:57
  • سلکتورها در CSS 07:50
  • آزمون - توسعه وب با React ،Bootstrap ،HTML ،CSS None
  • آزمون - توسعه وب با React ،Bootstrap ،HTML ،CSS None
  • متن و فونت‌ها در CSS 09:31
  • اشکال‌زدایی در CSS 08:14
  • مدل جعبه در CSS 07:08
  • موقعیت‌دهی در CSS 06:40
  • فلوت در CSS 07:44
  • خواص display در CSS 06:47
  • تمرین مدل جعبه در CSS 11:50
  • تمرین چیدمان Float 08:22
  • Box-Sizing 06:27
  • مدیا کوئری‌ها 07:12
  • آزمون - توسعه وب با React ،Bootstrap ،HTML ،CSS None
  • مقدمه‌ای بر Flexbox 05:19
  • خواص Flexbox - بخش 1 08:57
  • خواص Flexbox - بخش 2 06:37
  • خواص Flexbox - بخش 3 03:56
  • معرفی گرید CSS 04:00
  • گرید CSS 06:19
  • گرید CSS - بخش 2 09:41
  • گرید CSS - بخش 3 03:55
  • گرید CSS - بخش 4 04:54
  • گرید CSS - بخش 5 05:45
  • پروژه گرید و Flexbox 02:59
  • پروژه گرید و Flexbox - بخش 2 04:37
  • پروژه گرید و Flexbox - بخش 3 04:48
  • پروژه گرید و Flexbox - بخش 4 02:59
  • آزمون CSS None
  • Bootstrap چیست؟ 05:41
  • اضافه کردن Bootstrap به پروژه 08:59
  • طراحی وب 07:19
  • آزمون Bootstrap None
  • ناوبار 12:16
  • سیستم گرید 10:07
  • بخش هدر 06:48
  • فایل CSS ما - بخش 1 09:27
  • فایل CSS ما - بخش 2 07:23
  • Font Awesome و بخش ویژگی‌ها 06:47
  • Font Awesome و بخش ویژگی‌ها - بخش 2 06:20
  • آزمون Bootstrap None
  • مودال‌های Bootstrap 07:34
  • مودال‌ها - بخش 2 06:01
  • کارت‌های Bootstrap 07:07
  • کارت‌های Bootstrap - بخش 2 06:56
  • چرخ‌ونقاله -بخش 1 07:47
  • چرخ‌ونقاله -بخش 2 03:30
  • Z-Index در CSS 07:05
  • Z-Index در پروژه ما 04:47
  • گالری تصاویر 07:53
  • فرم‌ها 09:03
  • تغییرات کلی 04:17
  • تغییرات کلی - بخش 2 05:06
  • آزمون Bootstrap None
  • مروری بر اولین اپلیکیشن React شما 11:06
  • سؤالات متداول 09:18
  • Let ،Const و Var در 3 دقیقه 03:53
  • نصب Node JS 05:26
  • ساخت اپلیکیشن React خودتان 05:35
  • چرا باید یک اپلیکیشن React بسازید؟ 06:27
  • شروع ساخت اپلیکیشن React 06:24
  • می‌خواهید یاد بگیرید چگونه اپلیکیشن React را متوقف کنید؟ 05:17
  • کامپوننت‌های تابعی مهم 15:05
  • آزمون None
  • تبدیل HTML به JSX 06:02
  • استایل‌دهی خطی با JSX در React JS 10:53
  • متغیر جاوااسکریپت در JSX 12:43
  • آزمون None
  • سه اصل کامپوننت‌ها 03:34
  • اپلیکیشن ساده با React 02:55
  • استایل‌دهی اپلیکیشن با Semantic UI 08:34
  • ساخت کامپوننت 03:57
  • مشخص کردن تصویر در React JS 03:19
  • تکثیر یک کامپوننت واحد 01:58
  • تو در تو کردن کامپوننت‌ها 12:06
  • سیستم Props 04:10
  • ارسال Props به فرزند 13:02
  • مروری بر کامپوننت‌های قابل استفاده مجدد 02:46
  • خصوصیات فرزندان 12:42
  • آزمون None
  • کامپوننت‌های مبتنی بر کلاس و کامپوننت‌های تابعی 05:48
  • مروری بر اپلیکیشن جدید 08:42
  • دریافت موقعیت فیزیکی کاربران 07:57
  • مدیریت عملیات Async در React 03:35
  • تبدیل کامپوننت تابعی به مبتنی بر کلاس 04:53
  • آزمون None
  • قوانین State 04:19
  • مقدارسازی State در سازنده 13:48
  • مروری بر متدهای چرخه عمر 12:25
  • رندر شرطی 05:18
  • آزمون None
  • شناخت متدهای چرخه عمر 12:55
  • بازسازی اپلیکیشن با متدهای چرخه عمر 03:08
  • ارسال State به عنوان Props 04:27
  • عبارات سه‌تایی در JSX 05:48
  • نمایش تصویر 06:33
  • استایل‌دهی اپلیکیشن 10:11
  • ابزارهای رایگان توسعه‌دهنده React 03:48
  • مرور کلی اپلیکیشن 06:54
  • آزمون None
  • مروری بر اپ 02:43
  • طراحی کامپوننت 03:03
  • مدیریت فرم‌ها 08:31
  • استایل‌دهی اپلیکیشن 03:22
  • ساخت هندلرهای رویداد 06:15
  • عناصر کنترل‌شده در مقابل کنترل‌نشده 04:41
  • چرا عناصر کنترل‌شده؟ 07:39
  • درک کلمه کلیدی ‘this’ در JS 10:06
  • ارتباط از فرزند به والد 03:02
  • فراخوانی Callback در فرزندان 04:42
  • دریافت داده 03:50
  • مقایسه Axios و Fetch 03:45
  • توابع Async Await 10:06
  • تنظیم State 03:23
  • رندر کردن لیست کامپوننت‌ها 05:15
  • اجرای مقادیر کلیدی در لیست 04:35
  • چه چیزهایی از اپلیکیشن آموخته‌ایم؟ 04:04
  • آزمون None
  • شروع پروژه 03:13
  • روتر React 21:09
  • لینک‌ها و لینک‌های ناوبری 06:05
  • ریدایرکت برنامه‌نویسی شده 07:20
  • پارامترهای مسیر 15:07
  • تگ Switch در React Router 03:53
  • آزمون None
  • چرا React Portals؟ 08:49
  • چگونه مودال بسازیم؟ 07:37
  • ساخت React Portals 06:53
  • آزمون None

5,918,000 1,183,600 تومان

مشخصات آموزش

توسعه وب Full Stack با HTML ،CSS ،Bootstrap و React JS

  • تاریخ به روز رسانی: 1404/09/07
  • سطح دوره:مقدماتی
  • تعداد درس:148
  • مدت زمان :14:59:29
  • حجم :4.53GB
  • زبان:دوبله زبان فارسی
  • دوره آموزشی:AI Academy

آموزش های مرتبط

The Great Courses
2,495,000 499,000 تومان
  • زمان: 06:19:16
  • تعداد درس: 40
  • سطح دوره:
  • زبان: دوبله فارسی
The Great Courses
6,787,000 1,357,400 تومان
  • زمان: 17:11:52
  • تعداد درس: 113
  • سطح دوره:
  • زبان: دوبله فارسی
The Great Courses
8,360,500 1,672,100 تومان
  • زمان: 21:10:47
  • تعداد درس: 202
  • سطح دوره:
  • زبان: دوبله فارسی
The Great Courses
5,720,500 1,144,100 تومان
  • زمان: 14:29:26
  • تعداد درس: 36
  • سطح دوره:
  • زبان: دوبله فارسی
The Great Courses
4,206,500 841,300 تومان
  • زمان: 10:39:08
  • تعداد درس: 64
  • سطح دوره:
  • زبان: دوبله فارسی
The Great Courses
4,391,000 878,200 تومان
  • زمان: 11:07:45
  • تعداد درس: 63
  • سطح دوره:
  • زبان: دوبله فارسی
The Great Courses
7,261,000 1,452,200 تومان
  • زمان: 18:23:18
  • تعداد درس: 103
  • سطح دوره:
  • زبان: دوبله فارسی
The Great Courses
490,000 98,000 تومان
  • زمان: 00:57:00
  • تعداد درس: 20
  • سطح دوره:
  • زبان: دوبله فارسی
The Great Courses
490,000 98,000 تومان
  • زمان: 00:41:00
  • تعداد درس: 9
  • سطح دوره:
  • زبان: دوبله فارسی

آیا سوالی دارید؟

ما به شما کمک خواهیم کرد تا شغل و رشد خود را افزایش دهید.
امروز با ما تماس بگیرید