OnlineITtuts Tutorials
OnlineITtuts Tutorials
  • 339
  • 5 929 371
Responsive Navbar in React Using React Router
responsive navbar in react using react router
Hey everyone let's talk about how to make resonsive navbar in react using react router. I'm going to use react router package to make fully responsive navbar bar with cool user interface, by design the project I'm going to use pure CSS to design everything from scratch.
Also, I'm going to use Font Awesome icons to display the bars and cross icons that are help us to display and hide the navbar in small screen size.
I hope you like that and you can learn many new tactics or ideas that are to implement these knowledge with your own project. I hope It's helpful and beneficial for you.
You May Also Like:
Form Validation in React JS | React Form Validation
czcams.com/video/VJ1OWCQJhLk/video.html
How to Create Todo App in React JS
czcams.com/video/9d3Uzfhi3Dw/video.html
How to Upload React Project on Hostinger
czcams.com/video/DvIVwSfRiSI/video.html
How to Create Multi Step Form With Progress bar in React JS
czcams.com/play/PLN7bty2MYPQEFvby_3i2NHJfJFBhnj4Dw.html&si=1pEmxZjIvP5MnIDp
How to Create a Login and Signup Page in React
czcams.com/video/nsQiabWcA1g/video.html
If you are interested in becoming a front-end developer, I will teach you everything step by step. I've been sharing the complete HTML, CSS, and JavaScript-based tutorial on my channel. Also I will be sharing those technology videos on my channel, want to improve your skills, keep in touch with me.
My All Source Codes
www.patreon.com/onlineittuts
Follow Us on Facebook
onlineittuts
Follow Us on Twitter
@onlineittuts
Follow Us on Pinterest
www.pinterest.com/onlineittuts
Music Credit:
Ikson - We Are Free [Official]
czcams.com/video/DnPUq5qBZxk/video.html
Song: Ehrling - You And Me (Vlog No Copyright Music)
czcams.com/video/8HJSl7AiJNg/video.html
Ikson - Anywhere [Official]
czcams.com/video/zwPhqU29rWQ/video.html
Jimmy Hardwind - Want Me (feat. Mike Archangelo)
czcams.com/video/-Rw8zR9wmTY/video.html
Miss You - LiQWYD
czcams.com/video/wDR6toqrO2o/video.html
zhlédnutí: 101

Video

How to Make Responsive Website in HTML and CSS JavaScript
zhlédnutí 113Před 14 hodinami
How to Make Responsive Website in HTML and CSS JavaScript Hey everybody I hope you all of fine, today we are going to learn How to Make Responsive Website in HTML and CSS JavaScript. Inside the website have many things that are help you to improve your logics. So, Let's see the features, the first thing is responsiveness and the second things is changing image with content using next and previo...
How to Make Quiz App in React js
zhlédnutí 201Před 21 dnem
How to Make Quiz App in React js Hey guys, today we are going to learn How to Make Quiz App in React js from scratch. Inside the project you can see the questions/answer and also points, the each correct answer have different points. Once you complete the quiz you will get the points out of total points. Inside the project I'm going to use useReducer hook to manage the states. The Quiz App have...
Form Validation in React JS | React Form Validation
zhlédnutí 122Před 21 dnem
Form Validation in React JS | React Form Validation Hey everybody Let's talk about how to make Form Validation in React JS without using any package or library. I will use pure React JS codes to display the errors on each input and hide the errors, If user fill in the all required fields. So, I'm going to teach with you React Form Validation from scratch. I will use pure CSS to design the proje...
Responsive Restaurant Website Using HTML CSS and JavaScript
zhlédnutí 187Před měsícem
Responsive Restaurant Website Using HTML CSS and JavaScript Hey guys today we are going to learn responsive restaurant website using html css and javascript from scratch. I've designed the complete project for you, you can easily everything from scratch. It's fully professional and responsive website, I've used three technologies such as HTML, CSS and little bit of JavaScript. So, I'm going to ...
Responsive Contact Us Page in HTML and CSS and JavaScript
zhlédnutí 212Před měsícem
Responsive Contact Us Page in HTML and CSS and JavaScript hey guys today we are going to learn how to make Responsive Contact Us Page in HTML and CSS and JavaScript. I designed the fully responsive form with validation. Contact us form are very helpful for any websites. The user will able to contact with you or your team using Contact Form. So, I will share with you how to use HTML and CSS to d...
Responsive Side Navigation Bar in HTML CSS And JavaScript
zhlédnutí 524Před měsícem
responsive side navigation bar in html css and javascript Hey guys, today we are going to learn how to make responsive side navigation bar in HTML CSS and JavaScript. Mostly the top web based applications such as CZcams, WordPress and more using side bar menus. The Reason for using Sidebar menus, they are providing different types of content when the users are registered the particular applicat...
How to Upload React Project on Hostinger
zhlédnutí 846Před měsícem
how to upload react project on hostinger Hey guys, today we are going to learn how to upload react project on hostinger. Before upload the project you've domain and hosting. Once you've domain and hosting, then you are able to upload the React JS Project. I will explain you two methods that you can use it to upload the project. The First is very simple, you can login the hostinger account, then...
Currency Converter App in React JS
zhlédnutí 198Před měsícem
currency converter app in react js Hey guys, today we are going to learn how to make a currency converter app in react js. You have seen the currency converter in Google or other sites to convert the currencies. So, I will use React JS to CSS to make it from scratch, you can build your own currency convert app. creating the Currency Convert App we will use API to get the current currency rates ...
How to Create Multi Step Form in React JS
zhlédnutí 768Před měsícem
how to create multi step form in react js Hey guys today we are going to learn how to create multi step form in react js. It's useful and helpful project for everyone who want to collect the multiple information from users. It's called multi step form with progress bar, inside the form you need to enter fields that you want to get the information from users. So, I'm going teach with guys how to...
Multi Step Progress Bar in React JS
zhlédnutí 489Před měsícem
multi step progress bar in react js hey guys today we are going to learn how to make multi step progress bar in react js. It's simple project but very helpful for collecting the data from users. You can add the forms inside the the each section to collect the data from users. So, we are going to use React JS and CSS to create it from scratch. before watching the tutorial, you must have a basic ...
How to Make Responsive Navbar in React JS
zhlédnutí 334Před měsícem
How to Make Responsive Navbar in React JS hey guys hope you all of fine, today we are going to learn how to make responsive navbar in React JS. Navbar are useful for everyone who will able to navigate the pages easily. So, let's give you easy method to create a navbar using react js from scratch. We will use image as background of the page and also we will use icons that use to display the togg...
How to Create a Login and Signup Page in React
zhlédnutí 511Před 2 měsíci
How to Create a Login and Signup Page in React Hey guys I hope you all of fine, today we are going to learn how to make sign in & sign up form using react js. When you will build web applications with database you can use login and registration features inside the project. User need to register the application and then users are able to login your application. So, It's most useable project the ...
How to Create Todo App in React JS
zhlédnutí 203Před 2 měsíci
how to create todo app in react js hey guys, today we are going to learn how to create todo app in react js. Todo App are used to add the Task inside the application and you can complete and remove the task from App. It's useful App for beginners, they are working with projects, inside the app you will learn how to add, display and remove the content using React JS. So, we are going to build it...
How to Create a Modal Popup in React JS
zhlédnutí 408Před 2 měsíci
how to create a modal popup in react js hey everybody, I hope you all of fine today we are going to learn how to create a modal popup in react js. Modal is used to display message in the website screen. There are many websites using Modal to display the Email Subscribe box that are used to collect the emails. So, Today I'm going teach with you how to use React JS to create modal / popup from sc...
How to Make Accordion in React JS
zhlédnutí 231Před 2 měsíci
How to Make Accordion in React JS
How to Convert Figma Design to HTML and CSS
zhlédnutí 304Před 2 měsíci
How to Convert Figma Design to HTML and CSS
Responsive Landing Page using HTML and CSS
zhlédnutí 203Před 2 měsíci
Responsive Landing Page using HTML and CSS
Autocomplete Search Box in HTML CSS and JavaScript
zhlédnutí 165Před 2 měsíci
Autocomplete Search Box in HTML CSS and JavaScript
Multi Page Responsive Website HTML CSS JavaScript
zhlédnutí 915Před 4 měsíci
Multi Page Responsive Website HTML CSS JavaScript
eCommerce website using HTML CSS and JavaScript
zhlédnutí 302Před 5 měsíci
eCommerce website using HTML CSS and JavaScript
eCommerce website using HTML CSS and JavaScript
zhlédnutí 289Před 5 měsíci
eCommerce website using HTML CSS and JavaScript
eCommerce website using HTML CSS and JavaScript
zhlédnutí 925Před 5 měsíci
eCommerce website using HTML CSS and JavaScript
eCommerce website using HTML CSS and JavaScript
zhlédnutí 724Před 5 měsíci
eCommerce website using HTML CSS and JavaScript
Tip Calculator App using HTML CSS and JavaScript
zhlédnutí 338Před 5 měsíci
Tip Calculator App using HTML CSS and JavaScript
Age Calculator using HTML CSS and JavaScript
zhlédnutí 200Před 5 měsíci
Age Calculator using HTML CSS and JavaScript
Dictionary App using HTML CSS using JavaScript
zhlédnutí 635Před 6 měsíci
Dictionary App using HTML CSS using JavaScript
Make a Website Using HTML CSS and JavaScript
zhlédnutí 667Před 6 měsíci
Make a Website Using HTML CSS and JavaScript
Random Password Generator using HTML CSS and JavaScript
zhlédnutí 395Před 6 měsíci
Random Password Generator using HTML CSS and JavaScript
eCommerce Product Page using HTML CSS and JavaScript
zhlédnutí 2,7KPřed 6 měsíci
eCommerce Product Page using HTML CSS and JavaScript

Komentáře

  • @maxsll3372
    @maxsll3372 Před dnem

    source code?

  • @yashpataliya7695
    @yashpataliya7695 Před dnem

    yee inspect karke agar m window ki size increase or decrease kar raha hun tab tak to meri website responsive hai but jese hi browser per ctrl & + karke chrome ki size increase karraha hun (400%) tab website ki responsiveness kharab ho jaa rahi hai esa kyu ?? please koi help karo aur btao ki isko kese controle karu

  • @Klm6888
    @Klm6888 Před dnem

    Best video for nav bar

  • @seemakasture6053
    @seemakasture6053 Před 2 dny

    Source code please?

  • @Harsh_sharma.1
    @Harsh_sharma.1 Před 2 dny

    where can i find images?

  • @Andrew-dj3xh
    @Andrew-dj3xh Před 3 dny

    Please can I get the code

  • @elitesat951
    @elitesat951 Před 6 dny

    Where's the code example?

  • @ozairramzan9523
    @ozairramzan9523 Před 7 dny

    please tell me how manage this site like CMS and post articles on daily baisi

  • @m4adz766
    @m4adz766 Před 10 dny

    Hello what is theme do you use ?

  • @milandudhatra5010
    @milandudhatra5010 Před 12 dny

    i don`t find code on website please give any way to give source code

  • @milandudhatra5010
    @milandudhatra5010 Před 12 dny

    anyone plese give me source code

  • @shalinib7247
    @shalinib7247 Před 12 dny

    This one worked Thank you......

  • @keshabmaity9436
    @keshabmaity9436 Před 12 dny

    Source is not available please help me

  • @sathwikvarma
    @sathwikvarma Před 13 dny

    npx create-rea ct-app react-first-project npm error code ENOENT npm error syscall lstat npm error path C:\Users\sathw\AppData\Roaming pm npm error errno -4058 npm error enoent ENOENT: no such file or directory, lstat 'C:\Users\sathw\AppData\Roaming pm' npm error enoent This is related to npm not being able to find a file. npm error enoent npm error A complete log of this run can be found in: C:\Users\sathw\AppData\Local pm-cache\_logs\2024-06-22T11_46_23_537Z-debug-0.log

  • @obahcrystal3345
    @obahcrystal3345 Před 15 dny

    thanks

  • @nibbst
    @nibbst Před 16 dny

    thanks dude

  • @Bca_Code_Talk
    @Bca_Code_Talk Před 18 dny

    also provide source code it helps us a lot !

  • @Godspowerugiagbe
    @Godspowerugiagbe Před 19 dny

    Hello how can i add google adsense to my php website guide me true

  • @RakshithPrabhu02
    @RakshithPrabhu02 Před 22 dny

    After you select path you can give the access to path directly while installing

  • @RimshaVictorGill
    @RimshaVictorGill Před 22 dny

    Thanks for sharing this great tutorial.

  • @aparprakashsharma8393

    May I please request you, to make a video , how to upload the MERN full Project ?

  • @aparprakashsharma8393

    thanks buddy , that was so so helpful for me

  • @olufemiomonikeolusegun8337

    Thanks for this wonderful job. I want something like this for my Final Year Project in few months time in the University.

  • @jaitribilla
    @jaitribilla Před 25 dny

    Source code plz

  • @Itsarib-oj4rz
    @Itsarib-oj4rz Před 25 dny

    Warning: mail(): "sendmail_from" not set in php.ini or custom "From:" header missing in C:\xampp\htdocs\AutoEmp\conct.php on line 20 ye error please btaen kia kree

  • @karthis1499
    @karthis1499 Před měsícem

    Im try to install but getting error. Before need to install the visual studio then try again

  • @EvansMills-do8vu
    @EvansMills-do8vu Před měsícem

    Can I get the link

  • @pulokcse7104
    @pulokcse7104 Před měsícem

    where i can fiind the image

  • @EnochPerera
    @EnochPerera Před měsícem

    thanks a bunch, it was clear and easy to follow

  • @absolute_zero982
    @absolute_zero982 Před měsícem

    finally someone uses dark theme and c# in visual studio

  • @veros1572
    @veros1572 Před měsícem

    Thank you!

  • @liemthegreat
    @liemthegreat Před měsícem

    the script not found at the website :(

  • @komal6275
    @komal6275 Před měsícem

    can anyone tell me where i get these images

  • @Guilherme-xz8gg
    @Guilherme-xz8gg Před měsícem

    My brother, great video, but pls stop with the background music

  • @user-nz6oc1np4h
    @user-nz6oc1np4h Před měsícem

    thanks for this tutorial, it helped me a lot

  • @AkandwanahoColeb-wj8rl
    @AkandwanahoColeb-wj8rl Před měsícem

    thanks so much for the good service

  • @Buddy-Gaming901
    @Buddy-Gaming901 Před měsícem

    Not created from scratch kindly change the thumbnail please!

    • @OnlineITtuts
      @OnlineITtuts Před měsícem

      czcams.com/video/1h34uJq7YpA/video.html

  • @mohamedelsayedt2350
    @mohamedelsayedt2350 Před měsícem

    I love you man <3

  • @yasser2768
    @yasser2768 Před měsícem

    Typical hello frieeendz guy 👳🏿

  • @framekart9426
    @framekart9426 Před měsícem

    Who will explain How to install this ?

  • @nehalzakiahmed4324
    @nehalzakiahmed4324 Před měsícem

    i wanted to know how you generated the html whole code in just in single word....Did you use any extension for this or how is it possible? Kindly reply ASAP

    • @OnlineITtuts
      @OnlineITtuts Před měsícem

      No, you can try it without any extension :)

    • @nshachira
      @nshachira Před měsícem

      type "!" (without double quotes) then press tab

    • @rafagleich2258
      @rafagleich2258 Před 5 dny

      No way, i need to check it! If that works, that will save a lot of headache

  • @straighthit
    @straighthit Před měsícem

    Can you provide me the code? Please?

  • @KyawLinnHtet-yd6hz
    @KyawLinnHtet-yd6hz Před měsícem

    Thanks a lot. This is very helpful for me

    • @milandudhatra5010
      @milandudhatra5010 Před 12 dny

      give me this source code i don`t find this code on link who shown here

  • @joelmwabonje4481
    @joelmwabonje4481 Před měsícem

    What theme do you use for your vscode

    • @OnlineITtuts
      @OnlineITtuts Před měsícem

      czcams.com/video/Tfn-rKdwtKg/video.html

  • @Decoder_tricks
    @Decoder_tricks Před měsícem

    JavaScript not working

  • @fahdtai6841
    @fahdtai6841 Před měsícem

    Can't find source code or article on your website about this project 😢

  • @rishavraj7968
    @rishavraj7968 Před měsícem

    Source code

  • @chaimaaGomi
    @chaimaaGomi Před měsícem

    please what can replace mysql_connect in ur code cause i don't have this function

  • @430hera
    @430hera Před měsícem

    Thank you very much

  • @maurod.asuajeg.73
    @maurod.asuajeg.73 Před měsícem

    Thanks a lot, very useful. A problem pop out when file npm log didn´t create. Solution, it was just create file in the path. After that, run it!