Code Tech
Code Tech
  • 44
  • 31 568
How to Use React Router DOM and Install Tailwind CSS | MERN Stack Tutorial Series
Welcome back to our MERN stack tutorial series! If you missed the previous video, make sure to check it out. In this video, we’ll focus on two essential tools for building modern web applications: React Router DOM for routing and Tailwind CSS for styling.
Previous video Link: ua-cam.com/video/ABE-IKlu6tI/v-deo.html
What is React Router DOM?
React Router DOM is a library that enables seamless navigation between different pages or views in a React application. It’s a must-have for creating single-page applications (SPAs) that feel dynamic and responsive.
📘 Official Documentation: reactrouter.com/6.28.0/start/tutorial
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that makes styling faster and more efficient. Instead of writing custom CSS, you can apply pre-built classes directly in your HTML or JSX, saving you time and effort.
📘 Official Documentation: tailwindcss.com/docs/guides/vite
What You’ll Learn in This Video:
How to set up and install React Router DOM in a React project.
Adding routes to enable navigation between pages.
Installing Tailwind CSS and integrating it into your React application.
Building a simple example using both tools in the context of our MERN stack project.
Tags:
#MERNStack #ReactRouterDOM #TailwindCSS #ReactTutorial #FullStackDevelopment #WebDevelopment #LearnWithMe #CodingTutorial #FrontendDevelopment #ProgrammingTips
Переглядів: 247

Відео

Learn MERN Stack with Me: A Beginner-Friendly Guide
Переглядів 40214 днів тому
Welcome to my channel! In this video, we’ll dive into the world of the MERN stack - a powerful technology stack for building modern web applications. Whether you're a coding enthusiast or just starting your development journey, this video will guide you step by step as we explore and connect the frontend and backend using the MERN stack. What is MERN Stack? The MERN stack is a popular combinati...
How to use Tailwind CSS in Django Project
Переглядів 8946 місяців тому
I hope you like my tutorials , Pardon my mistakes. Please subscribe to my channel for updates.. Follow Me- UA-cam:ua-cam.com/channels/sjnvE4i5Z-VR-lWhODX99w.html
How to make flex box responsive | CSS tutorial
Переглядів 2287 місяців тому
In this video we are going to see how to make flex box responsive for mobile devices. I hope you like my tutorials , Pardon my mistakes. Please subscribe to my channel for updates.. Follow Me- UA-cam:ua-cam.com/channels/sjnvE4i5Z-VR-lWhODX99w.html
How to Change Network Access Mongodb Atlas
Переглядів 3388 місяців тому
In this video we are going to see how change network access of mongodb atlas project I hope you like my tutorials , Pardon my mistakes. Please subscribe to my channel for updates.. Follow Me- UA-cam:ua-cam.com/channels/sjnvE4i5Z-VR-lWhODX99w.html
How to deploy database in Mongodb Atlas
Переглядів 1388 місяців тому
In this video we are going to see how to deploy your database in mongodb atlas I hope you like my tutorials , Pardon my mistakes. Please subscribe to my channel for updates.. Follow Me- UA-cam:ua-cam.com/channels/sjnvE4i5Z-VR-lWhODX99w.html
How to Create a new Project in Mongodb Atlas
Переглядів 3458 місяців тому
I hope you like my tutorials , Pardon my mistakes. Please subscribe to my channel for updates.. Follow Me- UA-cam:ua-cam.com/channels/sjnvE4i5Z-VR-lWhODX99w.html
How to delete a project on Mongodb Atlas
Переглядів 5858 місяців тому
In this video we are going to see how to delete a project on Mongodb Atlas I hope you like my tutorials , Pardon my mistakes. Please subscribe to my channel for updates.. Follow Me- UA-cam:ua-cam.com/channels/sjnvE4i5Z-VR-lWhODX99w.html
DJANGO BLOG PROJECT | LOGIN REGISTER LOGOUT + BOOTSTRAP 4
Переглядів 111Рік тому
Github: github.com/AyanUpadhaya/django-blog-project I hope you like my tutorials , Pardon my mistakes. Please subscribe to my channel for updates.. Follow Me- Git Hub Profile: github.com/AyanUpadhaya Follow me twitter: ayanupadhaya96 UA-cam:ua-cam.com/channels/sjnvE4i5Z-VR-lWhODX99w.html Contact Email: ayanU881@gmail.com
DJANGO BLOG PROJECT | MODEL VIEW TEMPLATE | PART 01
Переглядів 75Рік тому
DJANGO BLOG PROJECT | MODEL VIEW TEMPLATE | PART 01. I hope you like my tutorials , Pardon my mistakes. Please subscribe to my channel for updates.. Follow Me- UA-cam:ua-cam.com/channels/sjnvE4i5Z-VR-lWhODX99w.html
My First Interaction With Vue JS by Creating a Todo app
Переглядів 52Рік тому
My First Interaction With Vue JS by Creating a Todo app I hope you like my tutorials , Pardon my mistakes. Please subscribe to my channel for updates.. Follow Me- UA-cam:ua-cam.com/channels/sjnvE4i5Z-VR-lWhODX99w.html
How to create cards with Bootstrap ? | Build profile cards with Bootstrap 5
Переглядів 118Рік тому
How to create cards with Bootstrap ? | Build profile cards with Bootstrap 5 I hope you like my tutorials , Pardon my mistakes. Please subscribe to my channel for updates.. Follow Me- UA-cam:ua-cam.com/channels/sjnvE4i5Z-VR-lWhODX99w.html
Web Scraping in Python - Requests HTML
Переглядів 153Рік тому
Web Scraping in Python - Requests HTML
Create Todo List App in Django -CURD Operation Handling | Part - 3.2
Переглядів 92Рік тому
Create Todo List App in Django -CURD Operation Handling | Part - 3.2
Create Todo List App in Django - Create Static Files and Model Form | Part - 3.1
Переглядів 41Рік тому
Create Todo List App in Django - Create Static Files and Model Form | Part - 3.1
Create Todo List App in Django - Setting up Templates and Models | Part - 2
Переглядів 31Рік тому
Create Todo List App in Django - Setting up Templates and Models | Part - 2
Create Todo List App in Django Setting up Project and App | Part - 1
Переглядів 64Рік тому
Create Todo List App in Django Setting up Project and App | Part - 1
Build a Login and Registration Page Using Bootstrap 4 | Build With Bootstrap
Переглядів 2052 роки тому
Build a Login and Registration Page Using Bootstrap 4 | Build With Bootstrap
KOF 2005 Game Play Video
Переглядів 2142 роки тому
KOF 2005 Game Play Video
Python Multi-clipboard Project For Beginners Tutorial
Переглядів 1,3 тис.2 роки тому
Python Multi-clipboard Project For Beginners Tutorial
NodeJs File Manager | JavaScript Project
Переглядів 5 тис.2 роки тому
NodeJs File Manager | JavaScript Project
Python Snake Game In Turtle Library | Lesson Video
Переглядів 2123 роки тому
Python Snake Game In Turtle Library | Lesson Video
Create A Todo Application Using Python and Flask | Updating and Deploying to Heroku | Final Part
Переглядів 2173 роки тому
Create A Todo Application Using Python and Flask | Updating and Deploying to Heroku | Final Part
Create A Todo Application Using Python and Flask | Database, Adding & Deleting Task | Part 2
Переглядів 5753 роки тому
Create A Todo Application Using Python and Flask | Database, Adding & Deleting Task | Part 2
Create A Todo Application Using Python and Flask | Rendering Templates | Part 1
Переглядів 5093 роки тому
Create A Todo Application Using Python and Flask | Rendering Templates | Part 1
How To Make A Pong Game In Python Using Turtle Library | Lesson Video
Переглядів 1003 роки тому
How To Make A Pong Game In Python Using Turtle Library | Lesson Video
How To Create A File Manager In Python | Beginners Python Project
Переглядів 9 тис.3 роки тому
How To Create A File Manager In Python | Beginners Python Project
Expense Tracker App in Python With Database + API
Переглядів 1,1 тис.3 роки тому
Expense Tracker App in Python With Database API
Learn Transparent Text Effect Photoshop Tutorial
Переглядів 207 років тому
Learn Transparent Text Effect Photoshop Tutorial
How To Make Lyric Videos With Youtube Movie Maker
Переглядів 4,2 тис.7 років тому
How To Make Lyric Videos With UA-cam Movie Maker

КОМЕНТАРІ

  • @adeyinkanewton2903
    @adeyinkanewton2903 2 місяці тому

    Nice vieo , please hope this will work perfectly well when the site is in production mode

  • @kenturkey6868
    @kenturkey6868 4 місяці тому

    Good Video....

  • @ashok1949
    @ashok1949 Рік тому

    Do you know how to talk in English

    • @codetechpro
      @codetechpro Рік тому

      The video was created many years ago. At that time I was making videos in my native language. Also at that time the channel wasn’t even about coding. So for your answers yes I know but not fluent like native, you can check my latest videos if you want

  • @kuarantinedlife9851
    @kuarantinedlife9851 Рік тому

    Thanks so much, this was awesome and waiting for the next parts.

    • @codetechpro
      @codetechpro Рік тому

      Thanks, new lessons will be on the way

  • @zas5629
    @zas5629 Рік тому

    What's the code for this checklist?

    • @zas5629
      @zas5629 Рік тому

      Can I get the code?

    • @codetechpro
      @codetechpro Рік тому

      ​@@zas5629 this is just a notepad in my phone

  • @OfficalOxy
    @OfficalOxy 2 роки тому

    "cd stands for current directory" me: cd is like a usb or a bootable usb not "current directory"

  • @ostranger9458
    @ostranger9458 2 роки тому

    You're the best, bro. I've goto understand the program logical from your video, tks so much! I already do this in my PC with Windows System and worked very well.

    • @codetechpro
      @codetechpro 2 роки тому

      Thank you for your wonderful comment. It inspired me todo more

  • @codexed-i
    @codexed-i 2 роки тому

    I'm using that one as a base for my own!

  • @shalinibhatt5321
    @shalinibhatt5321 2 роки тому

    Thank you:) for the tutorial.

  • @toddh2327
    @toddh2327 2 роки тому

    Thanks for sharing, keep it up.

  • @Rednuz-88
    @Rednuz-88 2 роки тому

    Thanks for the tutorial. I am getting an application error when I follow the link created that is hosting my app in Heroku. I don't know what could be the issue.

    • @codetechpro
      @codetechpro 2 роки тому

      Search on stack overflow. I am sure they will have answers that you need.

  • @psychonighty3076
    @psychonighty3076 2 роки тому

    if you want to , really and I mean really don't hesitate to ask for advice about quality and how to compress heavy videos to a small amount without loosing quality . I'm sure the video is really good if it was in a high quality ♥

    • @codetechpro
      @codetechpro 2 роки тому

      Thank you mentioning that. I'll make sure you get quality videos. Thank you.

  • @TEAL2010
    @TEAL2010 2 роки тому

    Bro pls help I'm getting error that there is no such file as audio.mp3

    • @codetechpro
      @codetechpro 2 роки тому

      Can you please paste your code on pastebin and share the link with me? so that I can see what is actually wrong with your code.

    • @klaasvaak2575
      @klaasvaak2575 2 роки тому

      putting that pastebin code is obviously the better solution as code tech can actually find the problem. I am just guessing. Looking at the code 1.for every file ,2. check the extension 3. then move your first found file to a predefined folder based on that extension. So you start with a found file (of any extension), if that same file is not found after it must be that you are searching for the wrong name or at the wrong location/directory as the script can't find the previously found file again. TLDR: you have a "audio.mp3" file so i assume this one is found and you can't not find something you did find in the past, the file didn't just disappear. Youprobably searched for the wrong thing the second time around (so while trying to move in your for loop).

  • @maxrg8912
    @maxrg8912 2 роки тому

    there's another way dictionary = {i: j for i, j in zip(user, age)}

  • @theinfiniteme55
    @theinfiniteme55 2 роки тому

    Got so annoyed by the typing sound. Also, typing needs to be faster.

    • @codetechpro
      @codetechpro 2 роки тому

      Sorry it was actually a background sound. Apology. Next time I will try to add real sound or not...

  • @krkmjr8429
    @krkmjr8429 2 роки тому

    the typing sound is cringe

    • @codetechpro
      @codetechpro 2 роки тому

      its just a background sound...apology

    • @krkmjr8429
      @krkmjr8429 2 роки тому

      @@codetechpro ik it is

  • @jd69-420
    @jd69-420 2 роки тому

    This was an amazing tutorial!!

    • @codetechpro
      @codetechpro 2 роки тому

      Thanks a lot. I am happy you like it.

  • @jugszy
    @jugszy 2 роки тому

    Getting this error. Mp3 file is stored in correct folder. File "C:\Users\just4\AppData\Local\Programs\Python\Python310\lib\shutil.py", line 254, in copyfile with open(src, 'rb') as fsrc: FileNotFoundError: [Errno 2] No such file or directory: 'audio.mp3'

    • @codetechpro
      @codetechpro 2 роки тому

      Please paste your whole code on pastebin page and share that link so that I can check well...

  • @LwyzUan
    @LwyzUan 2 роки тому

    Awesome! Issue is I have 0 knowledge in coding and could get about 10% of all that you did there.

    • @codetechpro
      @codetechpro 2 роки тому

      Sorry to know about your experience. I created that speed video long time ago. Cause at that I was not confident enough to speak, plus English isn't my native language. But please be with me. I will recreate that video this time in a tutorial format after my next video. My next video will making a game in pygame. So please follow the channel

    • @LwyzUan
      @LwyzUan 2 роки тому

      @@codetechpro Thanks for replying. Subtitles are always welcomed as well! Already subbed. Will be waiting for more content.

  • @nirmalasharma2072
    @nirmalasharma2072 3 роки тому

    the head.direction is not working in my computer

    • @codetechpro
      @codetechpro 3 роки тому

      can you send your written code through your mail - ayanu881@gmail.com so that I can check.

    • @nirmalasharma2072
      @nirmalasharma2072 3 роки тому

      #Imports import turtle import random import time run = True #Creating a window win = turtle.Screen() win.title("Snake game") win.bgcolor("light green") win.setup(width=600 , height=600) win.tracer(0) #head head = turtle.Turtle() head.speed(1) head.shape("square") head.color("blue") head.shapesize(stretch_len=1, stretch_wid=1) head.penup() head.goto(-250,250) head.direction = "down" #making food food = turtle.Turtle() food.speed(1) food.shape("circle") food.color("green") food.shapesize(stretch_len=.9, stretch_wid=.9) food.penup() food.goto(0,0) #Making functions def move(): if head.direction == "Down": y = head.ycor() head.sety(y-20) if head.direction == "Up": y = head.ycor() head.sety(y+20) if head.direction == "Left": x = head.xcor() head.setx(x-20) if head.direction == "Right": x = head.xcor() head.setx(x+20) #most important part while run: move() win.update() win.mainloop()

    • @codetechpro
      @codetechpro 3 роки тому

      @@nirmalasharma2072 in the beginning head.direction = "down" the value is in lowercase letter and in the if statement comparison head.direction == "Down": the value is in title case . Therefore change the value in lowercase letter to match comparison. Now it should work. Remember python is case sensitive.

    • @nirmalasharma2072
      @nirmalasharma2072 3 роки тому

      @@codetechpro Ok i will try it right now

  • @joellapayne8720
    @joellapayne8720 3 роки тому

    s0z5q vun.fyi

  • @dnirenhephzibah7059
    @dnirenhephzibah7059 3 роки тому

    cs1pq vyn.fyi

  • @jackilarissa4639
    @jackilarissa4639 3 роки тому

    sknlb vur.fyi

  • @dfksoidfsdfsuiodf
    @dfksoidfsdfsuiodf 3 роки тому

    Bruh float and bool as string 😅

  • @antumandal447
    @antumandal447 5 років тому

    Bengali font support kore na, ki kore thik korbo?

    • @codetechpro
      @codetechpro 5 років тому

      Bolte parchina karon bengali font try kori ni, ah kintu akta jinis try kore dekhte paren, avro...

  • @mansigarg8773
    @mansigarg8773 6 років тому

    sir plz talk in hindi also