Anuj Singla
Anuj Singla
  • 228
  • 206 599
Make a Project with Patternfly Elements (Part -3) | Web Components 2023 tutorial | Anuj Singla #11
How to make Project with Patternfly Elements with HTML CSS JavaScript (Part -3) - Anuj Singla #11
Website Code - github.com/anujsingla/website-webcomponent
Patternfly Elements Library: github.com/patternfly/patternfly-elements
Github Project: github.com/anujsingla/webcomponent-youtube
In this video, I will show you how to make a project with Patternfly Elements in HTML, CSS, and JavaScript. I'll describe the project and then show you how to create the HTML, CSS, and JavaScript code.
If you want to learn how to make a project with Patternfly Elements, this video is for you! I'll show you everything you need to know to create a project with Patternfly Elements from start to finish. Whether a beginner or an experienced developer, this video is a great way to learn how to make a project with Patternfly Elements!
Resources:
github.com/web-padawan/awesome-web-components
ultimatecourses.com/blog/the-ultimate-guide-to-web-components
bennypowers.dev/
lit.dev/
github.com/lit/lit-element-starter-ts
Support my channel:
www.buymeacoffee.com/anujsingla
(Free Courses)
React course :- bit.ly/3qXnSYU
Javascript course :- bit.ly/3qYCG9u
Typescript course :- bit.ly/3qY9Fe6
Frontend Interview Questions and Answer - th-cam.com/play/PLEtjGa9VEukMRyitRx0nitoCD8u2XEYiz.html
HTML Tutorial for Beginners to advance - th-cam.com/play/PLEtjGa9VEukMJvP4Z8O01LvkCB7-1myXu.html
NPM - th-cam.com/play/PLEtjGa9VEukO4Ud2SGoHhuFYCPfDAzFjd.html
Remix run React framework Tutorial in Hindi - th-cam.com/play/PLEtjGa9VEukMKVhD0GKHthRmwVMFWjaeW.html
(Social Media Links)
Twitter : singla387
Facebook page : bit.ly/3nZlyyx
Telegram : bit.ly/3nX2v8f
LinkedIn : bit.ly/3rIMt2A
About Me:-
I am Anuj Singla, and working as a Principal Software Engineer at Redhat. At Redhat, I spend most of my days writing code. I am working on different technologies like React, Angular, JavaScript, NodeJs, and Typescript. I want to teach web development to everybody. I am also handling meetup events for Remix India Online - www.meetup.com/remix-india-online/
Tags :-
#webcomponents #opensource #contribute #customelements #framework #react #anujsingla #typescript #hindi #html #css
มุมมอง: 280

วีดีโอ

How to make Project with Patternfly Elements HTML CSS JavaScript (Part -2) - Anuj Singla Hindi #10
มุมมอง 208ปีที่แล้ว
How to make Project with Patternfly Elements HTML CSS and JavaScript (Part - 2) - Anuj Singla Hindi #10 Website Code - github.com/anujsingla/website-webcomponent Patternfly Elements Library: github.com/patternfly/patternfly-elements Github Project: github.com/anujsingla/webcomponent-youtube In this video, I will show you how to make a project with Patternfly Elements in HTML, CSS, and JavaScrip...
Project with Patternfly Elements (HTML, CSS, JS) | Web Tutorials Hindi (Part-1) | Anuj Singla #9
มุมมอง 316ปีที่แล้ว
How to make Project with Patternfly Elements HTML CSS and JavaScript (Part -1) - Anuj Singla Hindi #9 Website Code - github.com/anujsingla/website-webcomponent Patternfly Elements Library: github.com/patternfly/patternfly-elements Github Project: github.com/anujsingla/webcomponent-youtube In this video, I will show you how to make a project with Patternfly Elements in HTML, CSS, and JavaScript....
How to Contribute in Open Source Patternfly Elements Web Component library - Anuj Singla Hindi #8
มุมมอง 116ปีที่แล้ว
How to Contribute in Open Source Patternfly Elements Web Component library - Anuj Singla Hindi #8 Patternfly Elements Library: github.com/patternfly/patternfly-elements In this video, I'll show you how to contribute to the Patternfly Elements Web Component library in Hindi. If you're interested in contributing to the Patternfly Elements Web Component library, this is the video for you! In this ...
What is Lit library | How to make Web Components with Lit library - Anuj Singla Hindi #7
มุมมอง 420ปีที่แล้ว
What is HTML template element with Example | Web Components - Anuj Singla Hindi #3 In this video, Anuj Singla will show you how to make Web Components with the Lit library. Web Components are crucial for building user interfaces in modern web applications, and Lit provides a fast, scalable, and easy way to create them. If you want to learn more about Lit library or build some Web Components, th...
Learn How to Make a Todo List with Web Components! - #6 Anuj Singla Hindi
มุมมอง 242ปีที่แล้ว
What is HTML template element with Example | Web Components - Anuj Singla Hindi #3 This video will teach you how to make a to-do list with web components! Todo lists are a great way to keep track of your tasks, and this tutorial will show you how to create your own to-do list in just a few minutes. This is the sixth video in our series on web development. In this video, we'll be teaching you ho...
What is Slot element in web components | Understand with an example - Anuj Singla Hindi #5
มุมมอง 440ปีที่แล้ว
What is Slot element in web components | Understand with an example - Anuj Singla Hindi #5 In this video, we'll discuss a Slot element in web components and how you can use it to create custom components. We'll also look at an example to help explain what it does. If you're new to web components or just want to understand them better, this video is for you! By the end of this video, you'll bett...
What is Shadow DOM | Web Components - Anuj Singla Hindi #4
มุมมอง 1.1Kปีที่แล้ว
What is Shadow DOM | Web Components - Anuj Singla Hindi #4 Shadow DOM is a new component type that allows you to create encapsulated pieces of the DOM. This video tutorial will introduce you to Shadow DOM and show you how to use it in web components. In this fourth video in the Shadow DOM series, Anuj Singla covers some of the more advanced features of Shadow DOM. He covers elements, attributes...
What is HTML template element with Example | Web Components - Anuj Singla Hindi #3
มุมมอง 406ปีที่แล้ว
What is HTML template element with Example | Web Components - Anuj Singla Hindi #3 In this video, we'll explore the HTML template element and how it works with web components. We'll create a simple example to show you how it works. If you're new to web components or looking for a refresher, this video is for you! We'll explore the HTML template element and show you how it works with web compone...
Web Component Lifecycle Methods with Example | Web Components 2023 | Anuj Singla Hindi #2
มุมมอง 741ปีที่แล้ว
Understand Web Component Lifecycle Methods with Example | Web Components 2023 | Anuj Singla Hindi #2 In this video, I will discuss the lifecycle methods of web components with an example. If you're new to web components or want to brush up on your knowledge, this video is for you! I'll be discussing the different lifecycle methods of web components and how to use them with an example. This vide...
What are Web Components | Create Your Own in Minutes | web components tutorial 2023 | Anuj Singla #1
มุมมอง 1.7Kปีที่แล้ว
What are Web Components | Create Your Own in Minutes | web components tutorial 2023 | Anuj Singla #1
A Pro’s Guide: Accessible React Modal Testing with React Testing Library - #12 by Anuj Singla
มุมมอง 636ปีที่แล้ว
A Pro’s Guide: Accessible React Modal Testing with React Testing Library - #12 by Anuj Singla
How to Explain ChatGPT to a 5 Year Old?! | ChatGPT big and Smart brother | Anuj Singla Hindi
มุมมอง 72ปีที่แล้ว
How to Explain ChatGPT to a 5 Year Old?! | ChatGPT big and Smart brother | Anuj Singla Hindi
Build an Accessible Modal with React | React Modal - #11 | Anuj Singla Hindi
มุมมอง 671ปีที่แล้ว
Build an Accessible Modal with React | React Modal - #11 | Anuj Singla Hindi
Web Accessibility Auditing Library and Tools for Fixing the Accessibility Issues - #10 | Anuj Singla
มุมมอง 616ปีที่แล้ว
Web Accessibility Auditing Library and Tools for Fixing the Accessibility Issues - #10 | Anuj Singla
How to Add a "Skip to Main Content" Link on Your Website for Easier Navigation? - #9 | Anuj Singla
มุมมอง 854ปีที่แล้ว
How to Add a "Skip to Main Content" Link on Your Website for Easier Navigation? - #9 | Anuj Singla
What is Distinguishable content for Web Accessibility | Anuj Singla #shorts
มุมมอง 58ปีที่แล้ว
What is Distinguishable content for Web Accessibility | Anuj Singla #shorts
How to Make Accessible Forms - Tips and examples for everyone - #8 | Anuj Singla Hindi
มุมมอง 844ปีที่แล้ว
How to Make Accessible Forms - Tips and examples for everyone - #8 | Anuj Singla Hindi
What is Accessibility Tree? | How can I view it in Chrome DevTools? | Anuj Singla Hindi
มุมมอง 917ปีที่แล้ว
What is Accessibility Tree? | How can I view it in Chrome DevTools? | Anuj Singla Hindi
What is ARIA Live Attribute? | How to use it with Example #6 | Anuj Singla Hindi
มุมมอง 1.6Kปีที่แล้ว
What is ARIA Live Attribute? | How to use it with Example #6 | Anuj Singla Hindi
What Are ARIA Attributes? | What They Are, Why They're Important & How to Use Them #5 | Anuj Singla
มุมมอง 3.7Kปีที่แล้ว
What Are ARIA Attributes? | What They Are, Why They're Important & How to Use Them #5 | Anuj Singla
What Are Accessibility Principles? - Anuj Singla breaks down Understandable, Robust Principle! | #4
มุมมอง 1.4Kปีที่แล้ว
What Are Accessibility Principles? - Anuj Singla breaks down Understandable, Robust Principle! | #4
What Are Accessibility Principles? - Anuj Singla breaks down Operable Principle 2 in detail! | #3
มุมมอง 1.9Kปีที่แล้ว
What Are Accessibility Principles? - Anuj Singla breaks down Operable Principle 2 in detail! | #3
What Are Accessibility Principles? - Anuj Singla breaks down Perceivable Principle 1 in detail! | #2
มุมมอง 3.2Kปีที่แล้ว
What Are Accessibility Principles? - Anuj Singla breaks down Perceivable Principle 1 in detail! | #2
What is Web Accessibility | Learn Web Accessibility: Beginner to Advance | #1 | Anuj Singla Hindi
มุมมอง 12Kปีที่แล้ว
What is Web Accessibility | Learn Web Accessibility: Beginner to Advance | #1 | Anuj Singla Hindi
LAYOFFS TRACKER with React JS, Patternfly UI and React Query - Top Cards and Make Layoffs Table #3
มุมมอง 108ปีที่แล้ว
LAYOFFS TRACKER with React JS, Patternfly UI and React Query - Top Cards and Make Layoffs Table #3
LAYOFFS TRACKER with React JS, Patternfly UI and React Query - Mock Data and React Query setup #2
มุมมอง 93ปีที่แล้ว
LAYOFFS TRACKER with React JS, Patternfly UI and React Query - Mock Data and React Query setup #2
LAYOFFS TRACKER with React JS, Patternfly UI and React Query - Project Setup and App Layout #1
มุมมอง 282ปีที่แล้ว
LAYOFFS TRACKER with React JS, Patternfly UI and React Query - Project Setup and App Layout #1
Atri Framework: How to deploy to GitHub Pages | Full-stack web development | Anuj Singla Hindi #5
มุมมอง 819ปีที่แล้ว
Atri Framework: How to deploy to GitHub Pages | Full-stack web development | Anuj Singla Hindi #5
Atri Framework: CFP Form | #4 | Full-stack web development | Anuj Singla Hindi
มุมมอง 349ปีที่แล้ว
Atri Framework: CFP Form | #4 | Full-stack web development | Anuj Singla Hindi

ความคิดเห็น

  • @vipinmishra265
    @vipinmishra265 12 วันที่ผ่านมา

    We need lessons on RTL

  • @md.jahidhasan9800
    @md.jahidhasan9800 20 วันที่ผ่านมา

    Hi sir, i request you, can you make video series "CRUD system using Mobx state tree in react typescript & Laravel API"?

  • @NikhilThoranala
    @NikhilThoranala 29 วันที่ผ่านมา

    When I am trying to close the calendar by pressing the escape key, it is getting closed when I press it for two times when nvda is opened.. how can I resolve the issue

  • @sushilchauhan2586
    @sushilchauhan2586 หลายเดือนก่อน

    I dont know whether u will respond or not.. still asking can you make video what topic should an accessibility developer must know in js and react

  • @Amirxon91
    @Amirxon91 2 หลายเดือนก่อน

    I don't understand this. Why do you post in English but talk not English ?

  • @sahilkothari6398
    @sahilkothari6398 3 หลายเดือนก่อน

    Pls make videos on wcag guidelines of accessibility

  • @tahreemfatima1303
    @tahreemfatima1303 3 หลายเดือนก่อน

    plz make a tutorial on firebase using mobex in react

  • @nishilsuthar2749
    @nishilsuthar2749 3 หลายเดือนก่อน

    If we have useTransition hook already, then why the devs have created useDefferedValue hook then? As both are doing same task

  • @tech.ismelody2529
    @tech.ismelody2529 4 หลายเดือนก่อน

    Hello sir,Do unit test cases also written for web accesiblity

  • @shaheenafirdous8877
    @shaheenafirdous8877 4 หลายเดือนก่อน

    Thmx for the session

    • @anujsingla
      @anujsingla 4 หลายเดือนก่อน

      thanks

  • @rivsonmoraes6098
    @rivsonmoraes6098 4 หลายเดือนก่อน

    If I have some content within my slot tags, how can get the value. e.g. <slot name='filename-1'> 'xyzabc' </slot>. How do I get the value xyzabc back?. Whenever i try the fetch,I get null string not sure why

  • @hardikluhar4738
    @hardikluhar4738 4 หลายเดือนก่อน

    Great Info!!

    • @anujsingla
      @anujsingla 4 หลายเดือนก่อน

      Glad it was helpful!

  • @harrykang4956
    @harrykang4956 5 หลายเดือนก่อน

    thank you for this video sir 🙏

    • @anujsingla
      @anujsingla 4 หลายเดือนก่อน

      Welcome!

  • @banupopulusu2365
    @banupopulusu2365 5 หลายเดือนก่อน

    anuj sir very good

    • @anujsingla
      @anujsingla 4 หลายเดือนก่อน

      thanks

  • @harrykang4956
    @harrykang4956 5 หลายเดือนก่อน

    Thanks for this video

  • @rajendramodusu5980
    @rajendramodusu5980 5 หลายเดือนก่อน

    Sir u deserve Million views n likes Best part u encourage n jo asp bolte ho in most videos( i am learning) Bahut humble 👍👍👍

    • @anujsingla
      @anujsingla 4 หลายเดือนก่อน

      Thank you so much 😀

    • @rajendramodusu5980
      @rajendramodusu5980 4 หลายเดือนก่อน

      @@anujsingla anujsir I emailed you lot of times can u share your current email Id I will appreciate. Thanks for tge reply

  • @rajendramodusu5980
    @rajendramodusu5980 5 หลายเดือนก่อน

    Anuj sir please reply kardo Aapko email bhi kya

  • @coolmind2476
    @coolmind2476 5 หลายเดือนก่อน

    Which language is this video? I understand nothing...

  • @mdarifurrahman5195
    @mdarifurrahman5195 6 หลายเดือนก่อน

    Thank you.

  • @rajendramodusu5980
    @rajendramodusu5980 6 หลายเดือนก่อน

    Anujsir please reply Do u guve training

  • @rajendramodusu5980
    @rajendramodusu5980 6 หลายเดือนก่อน

    Do you give training sir

  • @GaonwaloKiDuniya
    @GaonwaloKiDuniya 6 หลายเดือนก่อน

    ERROR in src/hooks/ResourcesQuery.ts:7:67 TS2345: Argument of type '{ enabled?: boolean | undefined; staleTime?: number | undefined; refetchInterval?: number | false | ((data: IResource[] | undefined, query: Query<IResource[], Error, IResource[], QueryKey>) => number | false) | undefined; ... 31 more ...; meta?: QueryMeta | undefined; }' is not assignable to parameter of type 'Omit<UseQueryOptions<IResource[], Error, IResource[], ReactQueryConstant[]>, "queryKey" | "queryFn">'. Types of property 'useErrorBoundary' are incompatible. Type 'boolean | ((error: Error, query: Query<IResource[], Error, IResource[], QueryKey>) => boolean) | undefined' is not assignable to type 'boolean | ((error: Error, query: Query<IResource[], Error, IResource[], ReactQueryConstant[]>) => boolean) | undefined'. Type '(error: Error, query: Query<IResource[], Error, IResource[], QueryKey>) => boolean' is not assignable to type 'boolean | ((error: Error, query: Query<IResource[], Error, IResource[], ReactQueryConstant[]>) => boolean) | undefined'. Type '(error: Error, query: Query<IResource[], Error, IResource[], QueryKey>) => boolean' is not assignable to type '(error: Error, query: Query<IResource[], Error, IResource[], ReactQueryConstant[]>) => boolean'. Types of parameters 'query' and 'query' are incompatible. Type 'Query<IResource[], Error, IResource[], ReactQueryConstant[]>' is not assignable to type 'Query<IResource[], Error, IResource[], QueryKey>'. The types of 'options.queryFn' are incompatible between these types. Type 'QueryFunction<IResource[], ReactQueryConstant[]> | undefined' is not assignable to type 'QueryFunction<IResource[], QueryKey> | undefined'. Type 'QueryFunction<IResource[], ReactQueryConstant[]>' is not assignable to type 'QueryFunction<IResource[], QueryKey>'. Type 'QueryKey' is not assignable to type 'ReactQueryConstant[]'. Type 'string' is not assignable to type 'ReactQueryConstant[]'. 5 | 6 | export function useGetResource(options?: UseQueryOptions<IResource[], Error>) { > 7 | return useQuery([ReactQueryConstant.RESOURCES], fetchResources, { | ^ > 8 | ...options, | ^^^^^^^^^^^^^^^ > 9 | }); | ^^^^ 10 | }

  • @urspappuyt
    @urspappuyt 7 หลายเดือนก่อน

    Very informative 👏

  • @HipalZ_Support
    @HipalZ_Support 7 หลายเดือนก่อน

    ty so much for this useful content

  • @user-gh6vq4wr1m
    @user-gh6vq4wr1m 8 หลายเดือนก่อน

    Can you create a video to how can i insert data in mysql

  • @waseemakram8778
    @waseemakram8778 8 หลายเดือนก่อน

    In the last test, that console.log is not a warning. You have a console.log in your Accessible modal when you had added an eventlistener to listen to keydown events.

  • @waseemakram8778
    @waseemakram8778 8 หลายเดือนก่อน

    Thank you for this very informative video.

  • @hackinguru
    @hackinguru 8 หลายเดือนก่อน

    best techer

  • @hackinguru
    @hackinguru 8 หลายเดือนก่อน

    nice sir

  • @AshishYadav-ql3up
    @AshishYadav-ql3up 8 หลายเดือนก่อน

    thks a lot

  • @waseemakram8778
    @waseemakram8778 8 หลายเดือนก่อน

    It was very helpful. Thank you so much for your time that you have put into these videos. 🙏

  • @waseemakram8778
    @waseemakram8778 8 หลายเดือนก่อน

    Thank you, dear, for this series.

  • @jvandco30
    @jvandco30 9 หลายเดือนก่อน

    Thank you for explaining clearly...

  • @suneethaila9839
    @suneethaila9839 9 หลายเดือนก่อน

    Sir, is it available in English?

  • @jvandco30
    @jvandco30 9 หลายเดือนก่อน

    Hello brother. Thank you for posting such useful video. It was very needed for me at this point of time. Our company managers have allocated the task of creating new elements for our internal library. We have to develop with lit only. PLease explain all concepts thoroughly and make the library developers to stay in JOB. thank you brother.

  • @ayushpahuja7082
    @ayushpahuja7082 9 หลายเดือนก่อน

    Really Helpful Thanks man!

  • @RanjithKumar-qj9mn
    @RanjithKumar-qj9mn 10 หลายเดือนก่อน

    any plugins for angular14

  • @raviiirathore9984
    @raviiirathore9984 10 หลายเดือนก่อน

    Very cute baby ❤❤

  • @surajrao123
    @surajrao123 10 หลายเดือนก่อน

    very helpfull . Thank you sir I love you

  • @armylovers8972
    @armylovers8972 10 หลายเดือนก่อน

    bhai tumhe knowledge tho h but TH-cam pr knowledge k sath sath bolna phi padta h video eese silently hoke bana rate ho jesi ki hame pada nahi rate ho bs hud work kar rahe ho

  • @harishankarmaurya9617
    @harishankarmaurya9617 11 หลายเดือนก่อน

    what is the name of extension?

  • @syedmusab2372
    @syedmusab2372 11 หลายเดือนก่อน

    {new Error("user error")} ye line likhney pe Error me problem ari hai hover krney pe jo error show horaha hai wo ap k sath share krdia ab isey kesey thik karo? Type 'Error' is not assignable to type 'ReactNode'.ts(2322) index.d.ts(1421, 9): The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>' var Error: ErrorConstructor new (message?: string | undefined, options?: ErrorOptions | undefined) => Error (+1 overload)

  • @syedmusab2372
    @syedmusab2372 11 หลายเดือนก่อน

    amazing playlist sir. good effort

    • @anujsingla
      @anujsingla 11 หลายเดือนก่อน

      Thank

  • @amritobiswas1067
    @amritobiswas1067 11 หลายเดือนก่อน

    Thank You very much. Great content.

    • @anujsingla
      @anujsingla 11 หลายเดือนก่อน

      Thank

  • @syedmusab2372
    @syedmusab2372 11 หลายเดือนก่อน

    Thank you so much sir for made journey of react simple

    • @anujsingla
      @anujsingla 11 หลายเดือนก่อน

      Thank

  • @RashidAli-oc1sr
    @RashidAli-oc1sr ปีที่แล้ว

    Mui react me server side pagination nhi work ksr rhi

  • @Viral_Shorts_v
    @Viral_Shorts_v ปีที่แล้ว

    🎉 good work 👏

  • @subhadipghorui2216
    @subhadipghorui2216 ปีที่แล้ว

    Thank You sir. Simple straight. Can you explain when we use below approach <rootStoreContext.Provider value={{ rootStore: rootStoreInstance }}> {/* Your app components */} </rootStoreContext.Provider>

  • @babatechnicalgmt7482
    @babatechnicalgmt7482 ปีที่แล้ว

    Remix js me Rest api video create Karo na bhai ji

  • @devuthakkar1602
    @devuthakkar1602 ปีที่แล้ว

    For example, I'm doing client side filtering and I have 2 components so how can I manage my usestate variable of listing records with mobx to update everytime?