- 77
- 1 546 378
Code A Program
India
Приєднався 11 вер 2021
My name is Sridhar Chandrasekar and I have been doing web development as a full-time job.
#codeaprogram, #reactjs, #tailwindcss
#programming, #nextjs
#codeaprogram, #reactjs, #tailwindcss
#programming, #nextjs
Custom Rich Text Editor With Validation | Next.js 14 & React js | next js tailwind css
Custom Rich Text Editor With Validation | Next.js 14 & React js | next js tailwind css
Code A Program...
Create a custom rich text editor, it's support both react js, next js
👁️ Website Live Preview:
nextjs-rich-text-editor.vercel.app/
📂GitHub src link:
github.com/Sridhar-C-25/nextjs-rich-text-editor
📚 Libarys:
Text Editor:
- tiptap.dev/
UI Design
- ui.shadcn.com/
- tailwindcss.com/
Validation
- react-hook-form.com/
- zod.dev/
#nextjs14 #taliwindcss
👍 Thanks for watching!
Make sure to like & Subscribe for more! 💜
Code A Program...
Create a custom rich text editor, it's support both react js, next js
👁️ Website Live Preview:
nextjs-rich-text-editor.vercel.app/
📂GitHub src link:
github.com/Sridhar-C-25/nextjs-rich-text-editor
📚 Libarys:
Text Editor:
- tiptap.dev/
UI Design
- ui.shadcn.com/
- tailwindcss.com/
Validation
- react-hook-form.com/
- zod.dev/
#nextjs14 #taliwindcss
👍 Thanks for watching!
Make sure to like & Subscribe for more! 💜
Переглядів: 925
Відео
Personal Portfolio Website with Next.js & Tailwind CSS
Переглядів 1,2 тис.21 день тому
Personal Portfolio Website with Next.js & Tailwind CSS | #nextjs14 | #tailwindcss Code A Program... Learn how to create a stunning portfolio website using Next.js 14, Tailwind CSS, Shadcn UI, and Framer Motion in this step-by-step tutorial. Perfect for showcasing your work and impressing potential clients or employers! 👁️ Website Live Preview: cap-nextjs-portfolio.vercel.app/ 🎨 Figma Design: ww...
Next js 14 Authentication | oAuth authentication With auth0 | Next.js authentication tutorial
Переглядів 5183 місяці тому
Next js 14 Authentication | oAuth authentication With auth0 | #nextjs14 #auth0 Code A Program... Learn how to set up oAuth authentication with Auth0 in Next.js 14. This tutorial will guide you through the process of implementing authentication in your Next.js application. 📂0auth docs: auth0.com/docs 🔗Npm link: www.npmjs.com/package/@auth0/nextjs-auth0 Random Number Generate Command: node -e "co...
How to make a responsive portfolio website with tailwind CSS
Переглядів 4,4 тис.6 місяців тому
Create Portfolio Website with Tailwind CSS | Tailwind Tutorial for Beginners Code A Program... Learn how to create stunning and professional portfolio sites using the latest version of Tailwind CSS - v3.4. Elevate your web design skills and impress potential clients with your beautiful portfolio websites. This tutorial will walk you through the process step by step, making it easy for beginners...
Vscode Useful Setup for javascript & python | Vscode Useful Extension
Переглядів 5247 місяців тому
Vscode Useful Setup for javascript & python | Vscode Useful Extension | #javascript #python #vscode Code A Program... GitHub : github.com/Sridhar-C-25 Email: codeaprogram@gmail.com #vscode
React Mui Data Table in English | React js Data Table
Переглядів 11 тис.7 місяців тому
How To Make A React Mui Data Table | React js Data Table Code A Program... Other related video: Tanstack Table Design Using React js and tailwind css search, pagination, download option: ua-cam.com/video/WJKt5vpHyA0/v-deo.htmlsi=mx1xyIBGPh3mM9kV GitHub: github.com/Sridhar-C-25 #reactjs #materialui #reacttable
Awesome React js image slider | Custom React Image Slider
Переглядів 2,1 тис.8 місяців тому
How to make a react image slider | Custom React Slider | React js and tailwind css 2024 Code A Program... 📂GitHub src link: github.com/Sridhar-C-25/React-Custom-Swiper-Slider #reactjs #tailwindcss
Custom Createable Multi Selector Using React js and Tailwind css | Createable Multiselect
Переглядів 3,7 тис.8 місяців тому
Custom Createable Multi Selector Using React js and Tailwind css | Createable Multiselect Code A Program... 📂 GitHub src link: github.com/Sridhar-C-25/react-createabl-multi-selector #reactjs #tailwindcss
React js Form Validation tutorial | React Hook Form Advance Usages
Переглядів 8 тис.11 місяців тому
React js Form Validation tutorial | React Hook Form Advance Usages Code A Program... 📂GitHub src : github.com/Sridhar-C-25/react-hook-form Package : React Hook Form(www.react-hook-form.com/) Material Tailwind(www.material-tailwind.com/) tailwind Css(tailwindcss.com/docs/installation) #reactjs #tailwindcss #validation
Tanstack Table Design Using React js and tailwind css search, pagination, download option | #reactjs
Переглядів 25 тис.Рік тому
Tanstack Table Design Using React js and tailwind css search, pagination, download option | #reactjs Code A Program... 📂GitHub src link : github.com/Sridhar-C-25/Tanstack_table Packages (Faker js)[www.npmjs.com/package/@faker-js/faker] (Tanstack Table)[tanstack.com/table/v8] (xlsx)[www.npmjs.com/package/xlsx] (Tailwind Css)[tailwindcss.com/docs/installation] ❤️ Share and subscribe #reactjs #tai...
Learn React Router State | React Router Tips and Tricks
Переглядів 548Рік тому
Learn React Router State | React Router Tips and Tricks Code A Program... Thanks for watching, Follow us on : Github : github.com/Sridhar-C-25 Instagram: codeaprogram #reactjs
Send HTML Email Using Nodejs(express) And Sendinblue
Переглядів 3,5 тис.Рік тому
Send HTML Email Using Nodejs(express) And Sendinblue Code A Program... Thanks for watching, Follow us on : Github : github.com/Sridhar-C-25 Instagram: codeaprogram #nodejs #expressjs
Desktop and Mobile Responsive Sidebar With Submenu Using React js and tailwind css and Framer Motion
Переглядів 37 тис.Рік тому
Desktop and Mobile Responsive Sidebar With Submenu Using React js and tailwind css and Framer Motion Code A Program... GitHub src link :github.com/Sridhar-C-25/sidebar-with-submenu_vid Thanks for watching, Follow us on : Github : github.com/Sridhar-C-25 Instagram: codeaprogram #reactjs #reactjs
How to use ChatGPT To Write Better React Code | React js and Typescript | #chatgpt
Переглядів 1,3 тис.Рік тому
How to use ChatGPT To Write Better React Code | React js and Typescript | #chatgpt
React js Send html email from contact form without server code - Email.js Tutorial
Переглядів 6 тис.Рік тому
React js Send html email from contact form without server code - Email.js Tutorial
How to return a 404 Not Found page for dynamic routes in Next.js | #nextjs
Переглядів 5 тис.Рік тому
How to return a 404 Not Found page for dynamic routes in Next.js | #nextjs
How to Add Syntax Highlighting to Code on Your Website Using React js | Code Highlight | #reactjs
Переглядів 19 тис.Рік тому
How to Add Syntax Highlighting to Code on Your Website Using React js | Code Highlight | #reactjs
React Filterable Selectors ( Country, State, City) Using React js, tailwind css & headless ui
Переглядів 15 тис.Рік тому
React Filterable Selectors ( Country, State, City) Using React js, tailwind css & headless ui
React js firebase phone authentication | Send OTP And Verify phone number | #firebase
Переглядів 67 тис.Рік тому
React js firebase phone authentication | Send OTP And Verify phone number | #firebase
Creating a README File That Makes Your Project Shine | readme file tutorial | #readme
Переглядів 795Рік тому
Creating a README File That Makes Your Project Shine | readme file tutorial | #readme
Alternative Image In React js | Quick Tip | #reactjs
Переглядів 741Рік тому
Alternative Image In React js | Quick Tip | #reactjs
Weather App Using React js And Tailwind CSS | React js project | #reactjs
Переглядів 9 тис.Рік тому
Weather App Using React js And Tailwind CSS | React js project | #reactjs
How to make a responsive navbar with tailwind css | tailwind css tutorial | #tailwindcss
Переглядів 146 тис.Рік тому
How to make a responsive navbar with tailwind css | tailwind css tutorial | #tailwindcss
How To Make A Portfolio Website Using React js and Tailwind CSS
Переглядів 15 тис.Рік тому
How To Make A Portfolio Website Using React js and Tailwind CSS
Custom Scrollbar Using Tailwind CSS | Tailwind css Scrollbar
Переглядів 35 тис.Рік тому
Custom Scrollbar Using Tailwind CSS | Tailwind css Scrollbar
Tailwind CSS Dark/Light/System Base Change Theme With Local Storage | React js dark mode
Переглядів 29 тис.Рік тому
Tailwind CSS Dark/Light/System Base Change Theme With Local Storage | React js dark mode
Animated Auto Slider Using React js And Tailwind CSS | React js carousel slider
Переглядів 5 тис.Рік тому
Animated Auto Slider Using React js And Tailwind CSS | React js carousel slider
React js Form Handling | React js Quick Tips for saving your time
Переглядів 895Рік тому
React js Form Handling | React js Quick Tips for saving your time
Tailwind CSS Only Awesome Testimonials Section Card Hover Effect | #tailwindcss
Переглядів 17 тис.Рік тому
Tailwind CSS Only Awesome Testimonials Section Card Hover Effect | #tailwindcss
React js dropdown menu close functionality | React js Tips | Learn React js
Переглядів 34 тис.Рік тому
React js dropdown menu close functionality | React js Tips | Learn React js
Source please
In description below
Please tell me how to add image beside header
Unbelievable!!! is it responsive?
wtf was that, spend a whole minute showing the same feature with no audio
Thanks 👍🙏
Good Tutorial about TipTap editor, but That keyboard sound is so annoying. Next time make sure to use normal speed for keyboard sound or remove it completely.
Sure
Get this video to 50 likes, and I'll share the GitHub source!
Font?
Source code given = Subscribed :D
12:45
Do you feel this is still the best way to create a mobile-first navbar?
¡Thank you! I've learned a lot from you.
Share and subscribe ❤️
is it on laravel ?
thanks bro!
❤️❤️❤️
Great 🎉 what's you vscode theme?
monokai.pro/vscode
the css file is not shared
I added the css file in drive. Now you can use it
Great work 🙂... Very usefull for you...😅
const menuRef = useRef(); useEffect(() => { const handleClickOutside = (e) => { if(!menuRef.current.contains(e.target)){ setOpen(false); } }; document.addEventListener("mousedown", handleClickOutside); return() =>{ document.removeEventListener("mousedown", handleClickOutside); } }); <div ref={menuRef} className="relative flex items-center"> <MdSettings size={24} onClick={() => setOpen(!open)} /> {open && ( <div className="bg-grey3o p-4 w-52 shadow-lg absolute right-0 top-8"> <ul> {Menus.map((menu, i) => ( <li onClick={() => setOpen(false)} key={i} className="p-2 cursor-pointer rounded hover:bg-hoverPattern" > {menu} </li> ))} </ul> </div> )} </div> THIS WILL WORK,
Does the dropdown automatically open above or below based on the space available on the screen?
very great and easy to understand video!
Wow such a amazing tutorial you better my coding journey .
Thanks for great sharing of valuable Gyan....
font name
Its really worked
Send copy bro
@@dhayanandt5011 are bhai Pehele run hogya fir badme do tin din bad try kiya to Run nhi ho rha hai
@@RudraShejwal-jv2bf send code bro GitHub
Send code bro GitHub
I'm interesting your html attributes highligher and shiner bro. Can you give me trick or extension name.
whats make the highlighted blue background when menu is clicked/active?
Why don't guys speak in the video?. It would be really helpful.
Good content bad code quality
bro i can't write the css in the section in classname
import tailwindcss then again if problem persists then press debug option in package.json file
great tutorial, please which theme are you using?
marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode
please tell me what is your theme name of vs code
thanks so much finally there's someone use easy ways in developing
Thanks ❤️
thanks,you earned a subscriber
Too many unnecessary things, just get straight to the point!
Nice, but you set the state of the countries to the first array like you did this const [country, setCountry] = useState(countryData[0]) cuz this would only show afghnistan, so how were you able to get the rest of the countries as implies in your video
Any clue please
9:09 flex navbar
Very useful tutorial, it is working for me. Thank you.
36:37 working on mobile view
não funciona comigo
very helpful broski, thank you!
Superb bro! One of THE MOST useful tutorials online. Thanks so much for this. Really needed this... this was the last peace of the puzzle for me as I'm currently working on a landing page that needs custom select/Dropdown menu. Again, thanks so much dude ❤
it give me Cannot read properties of undefined (reading 'appVerificationDisabledForTesting') ........and soo on
I FOUND THE SOLUTION: (Use this function in the code) function onCaptchVerify() { if (!window.recaptchaVerifier) { window.recaptchaVerifier = new RecaptchaVerifier( auth, "recaptcha-container", { size: "invisible", callback: (response) => { onSignup(); }, "expired-callback": () => {}, } ); } }
cant you give me the heroLight and heroDark i dont know were to get that and explain
May I ask, where is the `social-icon` class in the `a` tag being decorated?
Thanks man! 👌👌💻💻
background music was cringe. Please dont do it agian
Thank you very much sir ♥♥♥♥♥♥♥♥♥
❤️❤️❤️❤️❤️
Ty very much, helped a lot! =D
Thank you ❤ I really need this for react