How to create good websites design.

Atharva Shankar Ahvad — Thu, 19 Aug 2021 09:31:53 +0000

first thing
create figma
then add create navbar

add glass morphisum effect
then add color to your background
add your boi then add your photo and then cute liitle footer

how to use react-router-dom, but better !!

Atharva Shankar Ahvad — Thu, 19 Aug 2021 05:33:17 +0000

1st step
//create react app like this ==> npx create-react-app react-router-dom

2nd step
//instal react-router-dom ==> npm i react-router-dom or yarn add react-router-dom

and then open your text editor like 'sublime text 4',

//3rd step

create file named as 'src/Navbar.js',
and use this code.

import React from 'react'
import {Link} from 'react-router-dom'

const Navbar = () => {
    return (
        <div>
            <Link to="/">Home</Link>
            <Link to="/about">About</Link>
        </div>
    )
}

export default Navbar

create your pages like "Home ,ABout,Contact etc" I am just gonna go with "Home and About" ok :).

this is my home and about code
home :

import React from 'react'

const Home = () => {
    return (
        <div>
            <h1>This Is home page</h1>
        </div>
    )
}

export default Home

and this is for about :

import React from 'react'

const Home = () => {
    return (
        <div>
            <h1>This Is about page</h1>
        </div>
    )
}

export default Home

last step
//you have paste this code in app.js

import logo from './logo.svg';
import {BrowserRouter as Br,Route} from 'react-router-dom'
import Navbar from './Navbar'
import Home from './Home'
import About from './About'

function App() {
  return (
    <div className="App">

      <Br>
        <Navbar />
        <Route exact path="/">
        <Home />
      </Route>
      <Route exact path="/about">
        <About />
      </Route>
      </Br>
    </div>
  );
}

export default App;

DEV Community: Atharva Shankar Ahvad

How to create good websites design.

how to use react-router-dom, but better !!