بوت استرپ - یک چارچوب جلویی با استفاده از HTML، CSS و jQuery - برای کمک به توسعه‌دهندگان طراحی شده است تا به سرعت و به راحتی وب‌سایت‌هایی پاسخگو و آماده برای موبایل بسازند که با مرورگرهای مختلف سازگار هستند. یک چارچوب متن باز، بوت استرپ دارای یک شبکه 12 ستونی و اجزایی است که آماده استفاده هستند. در این دوره، Ray Villalobos به شما کمک می‌کند تا با Bootstrap 4 شروع به کار کنید و یک نمای کلی از همه چیزهای این فریمورک محبوب ارائه می‌دهد. Ray گزینه‌های نصب را پوشش می‌دهد و سبک‌های اساسی را که نحوه نمایش محتوای شما را در پلتفرم‌ها و مرورگرهای مختلف عادی می‌کند، مرور می‌کند. او همچنین توضیح می دهد که چگونه از سیستم شبکه فلکس باکس برای ساختن تقریباً هر نوع طرح بندی که می توانید رویاپردازی کنید، استفاده از کلاس های مختلف برای دور زدن پروژه خود، کار با مؤلفه های تعاملی مانند کرکره ها و چرخ فلک ها و موارد دیگر توضیح می دهد.

 

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

این دوره با CodeSpaces GitHub ، یک محیط توسعه دهنده ابر فوری که تمام عملکردهای IDE مورد علاقه شما را بدون نیاز به تنظیمات محلی محلی ارائه می دهد ، یکپارچه شده است. با استفاده از Codepaces GitHub ، می توانید از هر دستگاهی ، در هر زمان استفاده کنید-همه در حالی که از ابزاری استفاده می کنید که احتمالاً در محل کار با آن روبرو خواهید شد. برای یادگیری نحوه شروع کار ، از فیلم "استفاده از CodeSpaces GitHub با این دوره" دیدن کنید.

این دوره مروری کوتاه از ماژول چیدمان شبکه CSS را ارائه می دهد و زمینه ای را برای استفاده از آن در کنار (یا به جای) روش های طرح بندی سنتی تر فراهم می کند. علاوه بر این ، نمونه های کاری از پنج الگوی شبکه مشترک استفاده شده برای طرح های وب مدرن را ارائه می دهد. مربی Carrie Dils مفاهیم هسته CSS را پوشش می دهد ، نحوه استفاده از شبکه CSS را برای دستیابی به یک طرح مورد نظر نشان می دهد ، نمونه های عملی از استفاده از شبکه CSS را ارائه می دهد ، و طرح های پاسخگو را با شبکه CSS نشان می دهد.

این دوره با CodeSpaces GitHub ، یک محیط توسعه دهنده ابر فوری که تمام عملکردهای IDE مورد علاقه شما را بدون نیاز به تنظیمات محلی محلی ارائه می دهد ، یکپارچه شده است. با استفاده از Codepaces GitHub ، می توانید از هر دستگاهی ، در هر زمان استفاده کنید-همه در حالی که از ابزاری استفاده می کنید که احتمالاً در محل کار با آن روبرو خواهید شد. برای یادگیری نحوه شروع کار ، از فیلم "استفاده از CodeSpaces GitHub با این دوره" دیدن کنید.

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

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

توسعه وب بر ایجاد محتوای بسیار بصری متمرکز است، اما بسیاری از خزنده‌ها طرح‌بندی‌ها و تصاویری را که زمینه را به خوانندگان انسانی می‌دهند نادیده می‌گیرند. برای کمک به جستجوی گوگل و سایر ربات ها، می توانید از داده های معنایی ساخت یافته استفاده کنید. این ابرداده نامرئی اما حیاتی تعیین می‌کند که سایت‌های شما چگونه به صورت آنلاین ظاهر می‌شوند و می‌توانند به افزایش رتبه جستجوی شما کمک کنند. در این دوره، جن کرامر نشان می‌دهد که چگونه می‌توان داده‌های ساختار یافته برای ماشین‌خوان‌ها را به صفحاتی که برای انسان‌ها نیز در نظر گرفته شده است، اضافه کرد. یاد بگیرید که چگونه محتوا را در طرحواره ها توصیف کنید، از متا تگ ها استفاده کنید و از ابزارهایی مانند Structured Data Markup Helper و Structured Data Testing Tool - هر دو از Google - برای اضافه کردن ریزداده و کد JSON-LD به صفحات خود استفاده کنید. در فصل سوم، جن چندین نمونه داده ساختاریافته و همچنین چالشی برای آزمایش توانایی شما در ارائه نتایج جستجوی غنی ارائه می‌کند.

 بسیاری از توسعه دهندگان وب فقط روی یک قسمت از یک برنامه تمرکز می کنند: انتهای جلو ، انتهای عقب ، پایگاه داده یا پلت فرم میزبان. با این حال ، JavaScript به چنان زبانی همه جا تبدیل شده است که می تواند برای همه این قسمت ها استفاده شود. این بدان معنی است که یک توسعه دهنده JavaScript هم اکنون می تواند یک برنامه وب کامل ایجاد کند ، کاری که قبلاً به یک تیم کامل نیاز داشت. در این دوره ، مربی توسعه کامل پشته ، Shaun Wassell به توسعه دهندگان نشان می دهد که چگونه می توانند دقیقاً با استفاده از Next.js برای ساختن یک برنامه کامل ، این کار را انجام دهند. نحوه ایجاد رابط های React اساسی را در Next.js پیدا کنید ، عملکردهای پشتی را به برنامه های Next.js اضافه کنید ، درخواست های شبکه را ایجاد کنید و در نهایت میزبان یک برنامه کامل است.

 با API Realtime Openai ، می توانید از طریق WeBRTC ، یک گپ AI Voice-to-Voice در زمان واقعی سفارشی ایجاد کنید. در این دوره ، شما بررسی خواهید کرد که چگونه API Realtime کار می کند ، چگونه می توانید یک اتصال ایمن WEBRTC را با نشانه های زودگذر تنظیم کنید ، و نمونه هایی از نحوه اضافه کردن چت AI در زمان واقعی سفارشی با صدا ، متن و عملکرد را با استفاده از JavaScript دریافت کنید.

این دوره - دومین قسمت از مجموعه - بر پایه اصول PHP با MySQL ساخته شده است و مفاهیم میانی لازم برای توسعه برنامه های کاربردی وب در دنیای واقعی را در حین ایجاد یک سیستم مدیریت محتوای فعال آموزش می دهد. کوین اسکوگلند نحوه ایجاد ناوبری پویا را نشان می دهد تا به کاربران عمومی اجازه دهد صفحات مختلف محتوای مبتنی بر پایگاه داده را مرور کنند. او نشان می دهد که چگونه می توان محتوا را از عموم پنهان کرد و توابعی نوشت که به زمینه حساس هستند و از گزینه های آرگومان برای رفتار شرطی استفاده می کنند. او نشان می دهد که چگونه می توان احراز هویت کاربر را پیاده سازی کرد و از توابع رمز عبور داخلی PHP برای تنظیم ایمن دسترسی به صفحه استفاده کرد. در نهایت، او نشان می دهد که چگونه جداول پایگاه داده مرتبط می توانند به منابع تو در تو با تغییر و محدوده بندی توابع تبدیل شوند. در طول مسیر، کوین توصیه های عملی ارائه می دهد و نمونه هایی از بهترین شیوه ها را ارائه می دهد.

برنامه‌های تک صفحه‌ای ممکن است روان، سریع و مؤثر باشند، اما با قطع اتصال شبکه ناپدید می‌شوند. برنامه‌های وب پیشرو (PWA) به‌صورت آفلاین کار می‌کنند، انعطاف‌پذیری را افزایش می‌دهند و به توسعه‌دهندگان اجازه می‌دهند تجربه‌های کاربری یکپارچه‌ای را ایجاد کنند که شبیه برنامه‌های بومی است. در این دوره آموزشی با Eve Porcello بیاموزید که چگونه با استفاده از React، چارچوب انعطاف پذیر front-end، PWA خود را بسازید. ایو توضیح می‌دهد که چگونه مولفه PWA را بسازید، داده‌ها را واکشی کنید، از Lighthouse برای اعتبارسنجی برنامه خود استفاده کنید، و قابلیت‌های آفلاین را اضافه کنید تا برنامه‌تان را حتی در زمانی که اینترنت قطع است اجرا کنید. به علاوه، یاد بگیرید که چگونه برنامه خود را به صورت محلی با مرورگرهایی مانند Chrome و Safari برای iOS نصب کنید.

با ورود صفحه نمایش های جدید خیره کننده مانند صفحه نمایش Apple Retina به بازار، بسیاری از طراحان می خواهند یاد بگیرند که چگونه سایت های خود را برای شبکیه چشم آماده کنند. این دوره چندین گزینه برای بهینه سازی گرافیک و سایر مطالب ارائه می دهد تا در نمایشگرهای شبکیه (یا HiDPI) و غیر شبکیه به طور یکسان عالی به نظر برسد. نویسنده برایان وود شامل ترکیب فونت‌های آیکون و فاویکون‌ها، بهینه‌سازی تصاویر SVG و درون خطی، و نمایش تصاویر واکنش‌گرا با استفاده از CSS، جاوا اسکریپت و راه‌حل پلی‌فیل PictureFill است.

رابط خط فرمان Angular (CLI) ابزار توصیه شده برای ساخت و نگهداری برنامه های Angular است. درک آنچه ارائه می دهد - و نحوه استفاده حداکثری از ویژگی های آن - می تواند شما را برای حداکثر بهره وری توسعه با Angular آماده کند. در این دوره آموزشی، یاد می گیرید که چگونه Angular CLI نه تنها به ایجاد پروژه های جدید Angular کمک می کند، بلکه چگونه از گردش کار و تست ساخت اپلیکیشن مراقبت می کند. مدرس Victor Mejia ایجاد پروژه‌های جدید، سفارشی‌سازی سرور توسعه، تولید کد برنامه Angular، اجرای آزمایش‌ها و موارد دیگر را پوشش می‌دهد. بعلاوه، او سناریوهای دنیای واقعی را به اشتراک می گذارد که می تواند به شما کمک کند تا درک عملی تری از نحوه استفاده از CLI ایجاد کنید. در پایان این دوره، دانش لازم برای استفاده از Angular CLI به عنوان ابزار اصلی در گردش کار توسعه اپلیکیشن Angular خود را خواهید داشت.

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

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

نیاز به اشتراک‌گذاری ویدیو یا صدا در سایت‌های خود دارید، اما رها کردن آن در یوتیوب یا موتور پادکست گزینه‌ای نیست؟ فن‌آوری‌های وب بومی - HTML، CSS، و جاوا اسکریپت - پشتیبانی مستقیم از صدا و تصویر را فراهم می‌کنند و به شما امکان می‌دهند رسانه‌ها را ترکیب کنید و تجربه پخش را به طور کامل سفارشی کنید. این دوره مقدماتی با مربی جوزف لابرک به شما کمک می کند تا صدا و تصویر تعاملی را در وب سایت ها و برنامه های خود بسازید. ابتدا اصول عناصر رسانه ای HTML5 و ویژگی های آنها را مرور کنید. سپس نحوه جاسازی رسانه، پشتیبانی از بک گراند و تنظیم اندازه، صدا و سایر تنظیمات مهم را بیابید. سپس، یاد بگیرید که چگونه رابط‌ها را سفارشی کنید تا ظاهر و عملکرد پخش‌کننده خود را در مرورگرهای مختلف استاندارد کنید. بعلاوه، بیاموزید که چگونه تجربه کاربری را با HTML5 Media API کاملا تعاملی کنید.

 زبان نشانه گذاری فرامتن (HTML) پایه و اساس توسعه وب سایت و برنامه های کاربردی وب است. این به شما این امکان را می دهد که اطمینان حاصل کنید که محتوای شما توسط هر دو بخش از مخاطبان شما قابل درک است: افرادی که محتوای شما را تماشا می کنند، می خوانند یا به آن گوش می دهند و رایانه هایی که آن را نمایش می دهند. در این دوره، یاد بگیرید که چگونه HTML عالی را با قطعاتی که خود HTML ارائه می دهد، ایجاد کنید. مربی جن سیمونز تمام مفاهیم اساسی را که برای استفاده سنجیده از HTML نیاز دارید برجسته می کند. او بر نشانه‌گذاری معنایی تمرکز می‌کند: برچسب‌گذاری محتوا همانطور که هست، و نه فقط برای قالب‌بندی، قرارداد یا راحتی. این تأثیر گسترده ای برای کسانی دارد که از وب متفاوت استفاده می کنند. این تضمین می‌کند که وقتی یک صفحه‌خوان یا یک سیستم (مانند یک موتور جستجو) صفحه‌ای را مصرف می‌کند، دقیقاً می‌داند چه چیزی در آن وجود دارد و چگونه آن اطلاعات را دسته‌بندی کند.

 این دوره مقدمه ای جامع برای HTMX ، یک کتابخانه سبک وزن جاوا اسکریپت است که با فعال کردن رابط های کاربر پویا و تعاملی با حداقل تلاش ، توسعه وب را تقویت می کند. بیاموزید که چگونه از ویژگی های HTMX استفاده کنید تا اقدامات سمت سرور را تحریک کنید ، درخواست های ناهمزمان را انجام دهید و DOM را به روز کنید. مربی Eve Porcello نمونه های عملی و بهترین شیوه ها را برای ادغام HTMX در پروژه های موجود پوشش می دهد. در پایان دوره ، شما باید با مهارت های ایجاد برنامه های وب مدرن و پاسخگو با استفاده از HTMX آشنا باشید.

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

webpack جدیدترین و بهترین افزونه به مجموعه ابزار توسعه دهندگان فرانت اند است. این یک بسته ماژول مناسب برای بزرگترین برنامه های وب تک صفحه ای است و می تواند جاوا اسکریپت، CSS و موارد دیگر را پردازش کند.\r\n\r\n نحوه نصب وب پک، اجرای ساخت و ویرایش فایل پیکربندی را کشف کنید. نحوه استفاده از لودرها برای اجرای وظایف و پردازش فایل هایی مانند CSS، Sass و تصاویر درون خطی را بیاموزید. سپس Eve تقسیم کد درخواستی را با بسته وب نمایش می‌دهد، که به کد شما اجازه می‌دهد سریع‌تر و کارآمدتر اجرا شود. علاوه بر این، یاد بگیرید که چگونه یک webpack-dev-server راه اندازی کنید تا با ایجاد تغییرات، فایل ها را در زمان واقعی ارائه و بارگذاری مجدد کنید.

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