Tech That Matters

Author: ziontutorial Page 1 of 11

How to fix Display Capture not Working in OBS Studio

OBS Black Screen Display Capture Solved (Quick Fix)

Sticky post

One of the greatest programmes for recording or streaming your screen is OBS Studio. The free programme makes it simple to take screenshots, record gameplay, and do a variety of other tasks.

However, when utilising the OBS Studio, many users report seeing a dark screen. Let’s look at the several solutions to this annoyance if you’re having the same issue.

What Causes the Black Screen in OBS Studio?

You may resolve your OBS Black Screen Display Capture by following these steps. Simply follow the instructions in this step-by-step guide to resolve the black screen issue, which is most common during first download and use.

Step 1.

Go to your desktop and right click and click on display setting .

OBS Black Screen Display Capture Solved (Quick Fix)

Step 2.

How to fix Display Capture not Working in OBS Studio

Step 3.

Scroll down and go to the graphic setting

How to fix Display Capture not Working in OBS Studio

Step 4.

When you jump to graphic setting select or choose an app to set preferences as a classic app

How to fix Display Capture not Working in OBS Studio

Step 5.

Click on browse and navigate to this address .

C:\Program Files\obs-studio\bin\64bit

and then select obs64 and click on Add button

How to fix Display Capture not Working in OBS Studio

Step 6.

Then your selection will appear like this .

How to fix Display Capture not Working in OBS Studio

Now close all apps and open again OBS application .

Step 7.

Open your obs application and select your Display capture .

How to fix Display Capture not Working in OBS Studio

Finish Output

Now you can enjoy your recording as well as streaming from your computer.

How to fix Display Capture not Working in OBS Studio

Conclusion

Fixed: OBS Studio Black Screen Issue
There is a clear reason why OBS Studio is preferred by the majority of professional gamers over all other applications. The app’s features are comparably better than those of any OBS Studio rivals, and it can be simply integrated with websites like Twitch and YouTube.

Git error Fatal: remote origin already exists

Git error Fatal: remote origin already exists (Quick Fix)

Sticky post
Git error Fatal: remote origin already exists

GitHub: Git error Fatal: remote origin already exists

When you get the error fatal: remote origin already exists. after running this command inside a local Git repository and pushing the code to GitHub.

So recently I came up with a solution so I decided to share how to solve this error with you guys.
When you get this error :

  1. During pushing your code to the GitHub
  2. Cloning your repo from GitHub

It commonly occurs when you clone a remote repository with a configured remote origin URL. But Git doesn’t operate that way.

Replace add origin with a set-url origin for a simple fix.

The set-url command merely modifies your repository’s origin URL so that it no longer points to the profile from which you cloned the project but rather to your remote repository.

Conclusion

I hope this post will help you to solve this error which is Git error Fatal: remote origin already exists. Feel free to comment if you have any sought regarding this error.

People are also reading:

How to make a sidebar in React JS | Dashboard Sidebar | Responsive Sidebar | Navbar React Router V6

Sticky post
How to make a sidebar in React JS | Dashboard Sidebar | Responsive Sidebar | Navbar React Router V6

Hey, guys welcome to another blog How to make a sidebar in React JS | Dashboard Sidebar | Responsive Sidebar | Navbar React Router V6 where we will make sidebar designs from scratch. I hope you like the design If you face any problem during the code implementation of this sidebar you can comment in the comment box I will defiantly reply.

React is a JavaScript front-end library that may be used to build interactive user interfaces. Facebook created and keeps it up to date. It can be applied to the creation of mobile and single-page applications.

Demo of this Sidebar

Prerequisite:

  1. IDE of choice (this tutorial uses VS Code, you can download it here)
  2. npm
  3. create-react-app
  4. react-router-dom
  5. useState React hooks
  6. sass

Basic Setup: To begin a new project using create-react-app, launch PowerShell or your IDE’s terminal and enter the following command:

The name of your project is “react-sidebar-dropdown,” but you can change it to something different like “my-first-react-website” for the time being.

npx create-react-app my-sidebar-app

Enter the following command in the terminal to navigate to your react-sidebar-dropdown folder:

cd my-sidebar-app

Required module: Install the dependencies required in this project by typing the given command in the terminal.

npm install react-router-dom

For icons, I have used flat icon interface icon

npm i @flaticon/flaticon-uicons

Link : Flaticon interface icon

How to make a sidebar in React JS | Dashboard Sidebar | Responsive Sidebar | Navbar React Router V6

Folder structure

How to make a sidebar in React JS | Dashboard Sidebar | Responsive Sidebar | Navbar React Router V6

Once the packages and dependencies are finished downloading, start up your IDE and locate your project folder.

App.js

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/home/Home";
function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes path="/">
          <Route index element={<Home />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

Pages Folder structure

Home.jsx

import React from "react";
import "./home.scss";
import Sidebar from "./../../components/sidebar/Sidebar";
// import Navbar from "./../../components/navbar/Navbar";
const Home = () => {
  return (
    <div className="home">
      <Sidebar />
      <div className="homeContainer"></div>
    </div>
  );
};

export default Home;

home.scss

.home{
    display: flex;
    .homeContainer{
        flex: 6;
    }
}

Lets jump to component folder where we have to design our sidebar using scss and folder structure of sidebar would be like this format.

Lets first talk about sidebar .jsx file and the we will design our sidebar using scss.

Sidebar.jsx

import React from "react";
import "./sidebar.scss";

const Sidebar = () => {
  return (
    <div className="sidebar">
      <div className="top">
        <span className="logo">
          <img src="Dark.png" alt="Katherine Johnson" />
        </span>
      </div>

      <div className="center">
        <ul>
          <li>
            <i className="fi fi-rr-house-blank icon"></i>
            <span>Dashboard</span>
          </li>

          <li>
            <i class="fi fi-rr-apps icon"></i>
            <span>Project</span>
          </li>
          <li>
            <i class="fi fi-rr-list-check icon"></i>
            <span>Task</span>
          </li>
          <li>
            <i class="fi fi-rr-users-alt icon"></i>
            <span>Teams</span>
          </li>
          <li>
            <i class="fi fi-rr-settings icon"></i>
            <span>Setting</span>
          </li>
        </ul>
      </div>

      <div className="middle">
        <div className="middle_card">
          <h1 className="card_text">Upgrade to Pro 🔥</h1>
          <p>Get 1 month free and unlock all pro feature</p>
          <button className="card_button">Upgrade</button>
        </div>
      </div>

      <div className="center">
        <ul>
          <li>
            <i class="fi fi-rr-interrogation icon"></i>
            <span>Help</span>
          </li>

          <li>
            <i class="fi fi-rr-exit icon"></i>
            <span>Logout</span>
          </li>
        </ul>
      </div>
    </div>
  );
};

export default Sidebar;

Then Let’s jump to our scss part where we will focus on the design of this sidebar.

sidebar.scss

.sidebar{
    flex:1;
    border-right: 0.5px solid rgb(230, 227, 227);
    min-height: 100vh;
    background-color: #F5F5F5;  
    .top{
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px;
        .logo
        {
            font-size: 20px;
            font-weight: bold;
            color: #6439ff;
        }
    }

    .center{
        padding-left: 40px;
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
            li{
                display: flex;
                align-items: center;
                margin-top: 30px;
                padding: 5px;
                cursor: pointer;

                &:hover
                {
                    background-color: #eaeaea;
                    border-radius: 0px 30px 30px 0px;
                    
                    
                }

                .icon{
                    font-size: 24px;
                    color: #868686;                   
                }

                span{
                    font-size: 13px;
                    font-weight: 600;
                    color: #888;
                    margin-left: 22px;
                }
            }

            
        }
    }

    .middle
    {
       
        margin: 20px;

        .middle_card
        {
            text-align: center;
            background-color: white;
            padding: 20px;
            border-radius: 14px;
            margin-top: 146px;
            .card_text
            {
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 16px;
            }
           
                p{
                display: flex;
                align-items: center;
                justify-content: center;
                color: #AA8AC3;
                font-size: 12px;
                padding: 10px;
                }
                .card_button
                {
                    background-color:#BBD8F4 ;
                    border: none;
                    padding: 12px 63px;
                    border-radius: 34px;
                    font-size: 15px;
                    font-weight: 600;
                }
            
        }
    }
}

Output

How to make a sidebar in React JS | Dashboard Sidebar | Responsive Sidebar | Navbar React Router V6

Conclusion

Hope you like this tutorial on How to make a sidebar in React JS | Dashboard Sidebar | Responsive Sidebar | Navbar React Router V6. For more such content please visit to the website.

People are also reading:

React JS CRUD Application | React JS Tutorial | React Hooks | JSON Server

Sticky post

Are you looking to create a web application that allows you to manage data? Then, you need a React JS CRUD Application (Create, Read, Update, Delete) application. A CRUD application enables you to perform basic database operations like creating new records, reading existing ones, updating them, and deleting them.

We will implement these below functionality .

how to create React JS CRUD Application

  1. how to post data using react js
  2. how to view data after posting the data
  3. how to delete data using checkboxes using react js
  4. how to edit data using checkboxes using react js

In this post, we’ll guide you through the process of creating a CRUD application using a popular web development framework called React. Here’s what you’ll need:

  • Basic knowledge of React and JavaScript
  • A code editor like Visual Studio Code
  • A local development environment set up on your computer

Step 1: Set up your environment

Before you begin, you need to set up your development environment. You’ll need to install Node.js and NPM (Node Package Manager) to manage your dependencies. You can download them from the official Node.js website. Once installed, you can create a new React app using the create-react-app command. Run the following command in your terminal:

npx create-react-app my-app
cd my-app
npm start

Lets Design Navbar first using bootstrap classes so first install bootstrap by installing bootstrap classes.

npm i bootstrap@5.3.0-alpha3

Nav.js

Here is the code for the navbar just copy and paste into the Nav.js file

import React from "react";
import Container from "react-bootstrap/Container";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import "./index.css";

const Nave = () => {
  return (
    <>
      <section>
        <Navbar bg="primary" expand="lg">
          <Container className="p-3">
            <Navbar.Brand className="text-white" href="#home">
              ziontutorial
            </Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse className="justify-content-end">
              <Nav className="me-auto justify-content-end">
                <Nav.Link className="text-white " href="/">
                  Home
                </Nav.Link>
                <Nav.Link className="text-white" href="/view">
                  Employee
                </Nav.Link>
              </Nav>
            </Navbar.Collapse>
          </Container>
        </Navbar>
      </section>
    </>
  );
};

export default Nave;


After that also install json-server for handling. Here is the npm package you have to install it . If you want to explore more about this package just link on the below link.

Link

After installation of this package just make sure you have to put this in a package.json file so that you can use it for backend server.

These two lines put in your package.json file. Also, download concurrently package for run your backed and frontend at the same time .

"json-server": "json-server --watch db.json --port 3003",
    "start:dev": "concurrently \"npm start\" \"npm run json-server\"",

That’s it , You have to put in your package .json file .

after that you have to make a db.json file for data part . suppose if you want to store data then you can use this db.json file this will come with json server .

App.js

In app.js we are implementing our routes . So that we can jump from one link to another URL through routes package which we have to install.

The react-router-dom package contains bindings for using React Router in web applications. 
npm i react-router-dom

This package help you to call for routing.

App.js Code

import Add from "./Add";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Nave from "./Nav";
import CheckboxTable from "./CheckboxTable";
import Deletemultiplerow from "./Deletemultiplerow";

const App = () => {
  return (
    <BrowserRouter>z
      <div className="App">
        <Nave />
        <>
          <Routes>
            <Route path="/" element={<Add />} />
            <Route path="/view" element={<CheckboxTable />} />
          </Routes>
        </>
      </div>
    </BrowserRouter>
  );
};

export default App;

Add.js Code

Here in add.js for posting the data we have to write the code for it you can quickly. Follow the steps to post the data

import React, { useState } from "react";
import "./App.css";
import axios from "axios";

function App() {
  const [id, idchange] = useState("");
  const [username, usernamechange] = useState("");
  const [email, emailchange] = useState("");
  const [address, addresschange] = useState("");

  const handlesubmit = (e) => {
    e.preventDefault();
    // console.log({ id, username, email, address });
    const empdata = { id, username, email, address };
    axios
      .post("http://localhost:3003/employee", empdata)
      .then((res) => {
        console.log("res", res);

        alert("saved successfully");
        // window.location.reload();
      })
      .catch((err) => {
        alert("some error is comiing ");
      });
  };

  return (
    <>
      <section className="form-section mt-3">
        <h1 className="heading">React Js CRUD Operation Data 😎</h1>

        <form autoComplete="false" onSubmit={handlesubmit}>
          <div className="input-block">
            <label className="label">
              ID <span className="requiredLabel">*</span>
            </label>
            <input
              className="input"
              type="text"
              name="id"
              value={id}
              onChange={(e) => idchange(e.target.value)}
              disabled="disabled"
              placeholder="id"
              tabIndex={-1}
              required
            />
          </div>
          <div className="input-block">
            <label className="label">
              Username <span className="requiredLabel">*</span>
            </label>
            <input
              className="input"
              type="text"
              name="username"
              value={username}
              onChange={(e) => usernamechange(e.target.value)}
              placeholder="username"
              tabIndex={-1}
              required
            />
          </div>
          <div className="input-block">
            <label className="label">
              Email <span className="requiredLabel">*</span>
            </label>
            <input
              className="input"
              type="email"
              name="email"
              value={email}
              onChange={(e) => emailchange(e.target.value)}
              placeholder="ziontutorialofficial@gmail.com"
              tabIndex={-1}
              required
            />
          </div>
          <div className="input-block">
            <label className="label">
              Address <span className="requiredLabel">*</span>
            </label>
            <input
              className="input"
              type="text"
              value={address}
              onChange={(e) => addresschange(e.target.value)}
              name="address"
              tabIndex={-1}
              required
            />
          </div>

          <button tabIndex={-1} className="submit-button">
            Submit
          </button>
        </form>
      </section>
    </>
  );
}

export default App;

Employe.js Code

Here Employe.js for editing the data and deleting the data functionality is there. we have to write the code for it you can quickly follow the steps to edit and delete your data.

import React, { useState, useEffect } from "react";
import axios from "axios";
import { Table, Button, Modal, Form } from "react-bootstrap";

function CheckboxTable() {
  const [items, setItems] = useState([]);
  const [selectedItems, setSelectedItems] = useState([]);
  const [showModal, setShowModal] = useState(false);
  const [editedItem, setEditedItem] = useState(null);
  const [showDeleteModal, setShowDeleteModal] = useState(false);

  useEffect(() => {
    // Fetch data from API endpoint
    axios
      .get("http://localhost:3003/employee")
      .then((response) => setItems(response.data))
      .catch((error) => console.error(error));
  }, []);

  const handleCheckboxChange = (e, item) => {
    if (e.target.checked) {
      setSelectedItems([...selectedItems, item]);
    } else {
      setSelectedItems(
        selectedItems.filter((selectedItem) => selectedItem.id !== item.id)
      );
    }
  };

  const handleEdit = () => {
    // Open modal to edit selected item
    console.log("Opening edit modal...");
    setShowModal(true);
    setEditedItem(selectedItems[0]);
  };

  const handleSave = () => {
    // Update item and close modal
    axios
      .put(`http://localhost:3003/employee/${editedItem.id}`, editedItem)
      .then((response) => {
        setItems(
          items.map((item) =>
            item.id === editedItem.id ? response.data : item
          )
        );
        setShowModal(false);
        setEditedItem(null);
      })
      .catch((error) => console.error(error));
  };

  const handleClose = () => {
    // Close modal and reset edited item
    setShowModal(false);
    setEditedItem(null);
  };

  const handleDelete = () => {
    setShowDeleteModal(true);
  };

  const handleDeleteConfirm = () => {
    // Delete selected items and close modal
    const itemIds = selectedItems.map((item) => item.id);
    axios
      .delete(`http://localhost:3003/employee/${itemIds.join(",")}`)
      .then(() => {
        setItems(items.filter((item) => !itemIds.includes(item.id)));
        setSelectedItems([]);
        setShowDeleteModal(false);
      })
      .catch((error) => console.error(error));
  };

  const handleChange = (e) => {
    // Update edited item with form data
    setEditedItem({ ...editedItem, [e.target.name]: e.target.value });
  };

 

  return (
    <section className="container">
      <h1 className="heading">React Js CRUD Operation Data 😎</h1>
      <div className="button_wrapper">
        <Button
          className="btn1"
          onClick={handleEdit}
          disabled={selectedItems.length !== 1}
        >
          Edit
        </Button>
        <Button
          className="btn-2 ml-5"
          onClick={handleDelete}
          disabled={selectedItems.length === 0}
        >
          Delete
        </Button>
      </div>
      <Table striped bordered hover className="section_wrapper">
        <thead>
          <tr>
            <th></th>
            <th>id</th>
            <th>username</th>
            <th>email</th>
            <th>address</th>
          </tr>
        </thead>
        <tbody>
          {items.map((item) => (
            <tr key={item.id}>
              <td>
                <Form.Check
                  type="checkbox"
                  onChange={(e) => handleCheckboxChange(e, item)}
                  checked={selectedItems.some(
                    (selectedItem) => selectedItem.id === item.id
                  )}
                />
              </td>
              <td>{item.id}</td>
              <td>{item.username}</td>
              <td>{item.email}</td>
              <td>{item.address}</td>
            </tr>
          ))}
        </tbody>
      </Table>

      <Modal show={showModal} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Edit Item</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form>
            <Form.Group controlId="formBasicUsername">
              <Form.Label>Username</Form.Label>
              <Form.Control
                type="text"
                placeholder="Enter username"
                name="username"
                value={editedItem?.username}
                onChange={handleChange}
              />
            </Form.Group>

            <Form.Group controlId="formBasicEmail">
              <Form.Label>Email address</Form.Label>
              <Form.Control
                type="email"
                placeholder="Enter email"
                name="email"
                value={editedItem?.email}
                onChange={handleChange}
              />
            </Form.Group>

            <Form.Group controlId="formBasicAddress">
              <Form.Label>Address</Form.Label>
              <Form.Control
                type="text"
                placeholder="Enter address"
                name="address"
                value={editedItem?.address}
                onChange={handleChange}
              />
            </Form.Group>
          </Form>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleSave}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>

      <Modal show={showDeleteModal} onHide={() => setShowDeleteModal(false)}>
        <Modal.Header closeButton>
          <Modal.Title>Delete Items</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <p>Are you sure you want to delete the selected items?</p>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={() => setShowDeleteModal(false)}>
            Cancel
          </Button>
          <Button variant="danger" onClick={handleDeleteConfirm}>
            Delete
          </Button>
        </Modal.Footer>
      </Modal>
    </section>
  );
}

export default CheckboxTable;

Index.css

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}

html,
body {
  font-family: "Roboto", sans-serif;
  font-size: 10px;
  background-color: #f4f4f4;
}

.heading {
  text-align: center;
  font-size: 2.75rem;
  margin-bottom: 1em;
}

.form-section {
  min-height: 95vh;
  display: grid;
  place-content: center;
}
.section_wrapper {
  place-content: center;
  padding: 10rem;
}

.input-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 2em 0 0.5em;
}

.label {
  font-family: "Roboto";
  letter-spacing: 0.25px;
  font-weight: 500;
  font-size: 1.35rem;
  color: #000;
  margin-bottom: 0.35em;
}

.requiredLabel {
  color: red;
  font-weight: bold;
}

.input {
  padding: 1.35em 1em;
  width: 350px;
  background-color: #fff;
  outline: none;
  border: 1px solid rgb(130, 130, 130);
  border-radius: 0.25em;
}

.submit-button-wrapper {
  display: flex;
}

.float {
  justify-content: flex-end;
}

.submit-button {
  margin-top: 1.75rem;
  background-color: #000;
  color: #fff;
  letter-spacing: 0.5px;
  padding: 0.85em 2.2em;
  border: none;
  font-size: 1.5rem;
  font-weight: 500;
  border-radius: 4px;
}

.button_wrapper {
  margin-bottom: 1rem;
  display: flex;
}

.btn {
  margin-left: 10px;
  padding: 0.85em 2.2em;
  border: none;
  font-size: 1rem;
  font-weight: 500;
}
.btn-1 {
  margin-left: 10px;
  padding: 0.85em 2.2em;
  border: none;
  font-size: 1.5rem;
  font-weight: 500;
}

Index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

db.json

Copy and paste the below code in db.json for employee data structure for this you have to install json server.

{
  "employee": [
    
  ]
}

Conclusion

In conclusion, creating a CRUD application is an essential skill for any web developer. It allows you to manage data and build robust web applications. In this post, we walked through the steps involved in creating a CRUD application using React. We started by setting up our development environment, defining our data model, and implementing the CRUD functions. While this tutorial only scratched the surface of what’s possible with a CRUD application, it should give you a good foundation to build upon.

Remember, the beauty of a CRUD application is its simplicity. Once you’ve mastered the basics, you can build upon them to create more complex applications. Whether you’re building a personal project or working on a team, the skills you learn from creating a CRUD application will serve you well. Happy coding!

Check out this How to Install WordPress on Localhost | Xammp. Comment if you have any dought Regarding this project please comment in the comment box. Or join Our telegram Channel mostly available on that platform you can ask any question.

Happy coding!

People are also reading:

How To Create A Modern Website Using React Js Step-By-Step Website Tutorial

Sticky post
How To Create A Modern Website Using React Js

Are you looking to create a modern website using React? In this step-by-step tutorial, you’ll learn how to set up your development environment, and we will learn How To Create A Modern Website Using React Js .creating a new React project, and build a sleek website using React components and libraries. From installing Node.js and selecting a text editor to coding custom components and using popular libraries like React Router and Bootstrap, this tutorial covers everything you need to know to create a professional-looking website. Whether you’re a beginner or an experienced developer, this guide will help you take your web development skills to the next level. Follow along and create your own stunning website today!. Be ready of a tutorial How To Make Website a modern website using React | Create Website Header Design

App.js

Let’s start by creating an app.js file and writing all the HTML elements.Let’s begin by creating the website’s skeleton using simple HTML. The navbar must come first, followed by the header and finally the picture section of the website. You may use the code below to

import "./App.css";
function App() {
  return (
    <div className="container">
      <nav>
        <img src="images/logo.png" className="logo" alt="imaged" />
        <ul>
          <li>
            <a href="www.ziontutorial.com">Traval Guide</a>
          </li>
          <li>
            <a href="www.ziontutorial.com">Famous Places</a>
          </li>
          <li>
            <a href="www.ziontutorial.com">Contact Us</a>
          </li>
        </ul>
        <button className="btn">
          <img src="images/icon.png" alt="icon" /> Bookings
        </button>
      </nav>
      <div className="content">
        <h1>
          Beautiful
          <br />
          Places to explore
        </h1>
        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book.
        </p>
        <form>
          <input type="text" placeholder="Country Name" />
          <button type="submit" className="btn">
            Search
          </button>
        </form>
      </div>
      <p></p>
    </div>
  );
}

export default App;

Let’s write all the CSS and the landing page which will make this landing page very beautiful.

App.css

Let’s create a really simple CSS style for our header portion. As I mentioned in the previous section, we generated the navbar, header text, and header picture using HTML. Now that we have these components, let’s add some CSS to our skeleton to make the header seem lovely. I’ve listed all the code necessary to construct our header below. You may check this out and experiment with these values to see what happens.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

.container {
  width: 100%;
  min-height: 100vh;
  background-image: linear-gradient(rgb(9, 0, 77, 0.65), rgba(9, 0, 77, 0.65));
  background-image: url("https://source.unsplash.com/random/1920x1080/?wallpaper,landscape");

  background-size: cover;
  background-position: center;
  padding: 10px 8%;
}

nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}

.logo {
  width: 180px;
  cursor: pointer;
}

nav ul {
  list-style: none;
  width: 100%;
  text-align: right;
  padding-right: 60px;
}

nav ul li {
  display: inline-block;
  margin: 10px 20px;
}

nav ul li a {
  color: #ffffff;
  text-decoration: none;
  font-size: 20px;
  font-weight: 400;
}

.btn {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  border: 0;
  outline: 0;
  border-radius: 5px;
  background: #f5168d;
  color: #ffffff;
  font-weight: 500;
  cursor: pointer;
}

.btn img {
  width: 20px;
  margin-right: 10px;
}

.content {
  margin-top: 14%;
  color: #fff;
  max-width: 620px;
}

.content h1 {
  font-size: 70px;
  font-weight: 800;
  line-height: 85px;
  margin-bottom: 25px;
}

.content form {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 5px;
  padding: 10px;
  margin-top: 30px;
}

.content form input {
  border: 0;
  outline: 0;
  width: 100%;
  font-size: 16px;
  padding-left: 10px;
}

.content form .btn {
  font-size: 15px;
  padding: 10px 30px;
}

⭐ Conclusion

via GIPHY

We did it! ? Hope you like How To Create A Modern Website Using React Js. For such projects do visits and comment on which project should I pick next.

Check out this How to Install WordPress on Localhost | Xammp. Comment if you have any dought Regarding this project please comment in the comment box. Or join Our telegram Channel mostly available on that platform you can ask any question.

Happy coding!

People are also reading:

Create Stunning User Interfaces with These Top 30 React UI libraries

Create Stunning User Interfaces with These Top 30 React UI libraries

Sticky post
React UI libraries

React is a popular JavaScript library for building user interfaces. Its flexibility, performance, and ease of use have made it a go-to choice for developers looking to create complex, dynamic applications. With the help of the extensive library ecosystem, developers can quickly and easily build out the user interface of their React applications without having to start from scratch. In this article, we will explore the top 30 React libraries that can be used to enhance the UI of your application. These libraries include a variety of tools for building everything from navigation menus and modals to calendars and image croppers. Whether you are just starting out with React or looking to take your skills to the next level, these libraries will help you build powerful, beautiful, and responsive user interfaces.

Lists Of React UI libraries

  1. React Router: React Router is a popular routing library for React that allows you to handle navigation and routing in your web application. Link: https://reactrouter.com/
  2. React Redux: Redux is a predictable state container for JavaScript apps. React Redux is the official React binding for Redux. Link: https://react-redux.js.org/
  3. Material-UI: MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design. https://mui.com/

  1. React Bootstrap: React Bootstrap is a popular UI library that provides a set of reusable components for building responsive and mobile-first web applications. Link: https://react-bootstrap.github.io/
  2. Ant Design: Ant Design is a comprehensive UI library that provides a wide range of components for building high-quality web applications. Link: https://ant.design/
  3. Styled Components: Styled Components is a popular library for styling React components with CSS. It allows you to write CSS directly in your JavaScript code. Link: https://styled-components.com/
  4. React Select: React Select is a flexible and easy-to-use library for building select inputs in React. It provides a range of features such as search, async loading, and multi-select. Link: https://react-select.com/home
  5. React Toastify: React Toastify is a simple and customizable toast library for React that provides a range of notification styles such as success, warning, and error. Link: https://github.com/fkhadra/react-toastify
  6. React Virtualized: React Virtualized is a library for efficiently rendering large lists and tables in React. It provides a set of components such as List, Table, and Grid that can handle thousands of rows with ease. Link: https://bvaughn.github.io/react-virtualized/#/components/List
  7. React DnD: React DnD is a drag and drop library for React that allows you to build complex drag and drop interfaces with ease. Link: https://react-dnd.github.io/react-dnd/about
  8. React Icons: React Icons is a library of popular icons such as Font Awesome, Material Design, and Feather Icons that can be easily used in React projects. Link: https://react-icons.github.io/react-icons/
  9. React Query: React Query is a powerful and flexible library for managing and caching server state in React applications. It provides a range of features such as pagination, caching, and refetching. Link: https://react-query.tanstack.com/
  10. React Hook Form: React Hook Form is a lightweight and flexible form library for React that uses hooks to manage form state. It provides a range of features such as validation, error messages, and submission handling. Link: https://react-hook-form.com/
  11. React Helmet: React Helmet is a library for managing the head section of your React app. It allows you to dynamically set the title, meta tags, and other important information. Link: https://github.com/nfl/react-helmet
  12. React Table: React Table is a library for building advanced tables and data grids in React. It provides a range of features such as sorting, filtering, and pagination. Link: https://react-table.tanstack.com/
  13. React Query Builder: React Query Builder is a library for building complex and dynamic queries in React. It provides a range of features such as drag and drop interface, validation, and query generation. Link: https://github.com/ukrbublik/react-awesome-query-builder
  14. React Image Gallery: React Image Gallery is a flexible and customizable library for building responsive image galleries in React. It provides a range of features such as lazy loading, zoom, and fullscreen mode. Link: https://www.npmjs.com/package/react-image-gallery
  15. React Date Picker: React Date Picker is a library for building flexible and customizable date pickers in React. It provides a range of features such as range selection, disabled dates, and internationalization. Link: https://reactdatepicker.com/
  16. React Modal: React Modal is a library for building modal dialogs in React
  17. React Big Calendar: React Big Calendar is a popular library for building interactive calendars in React. It provides a range of features such as drag and drop events, date selection, and customizable views. Link: https://jquense.github.io/react-big-calendar/examples/index.html
  18. React Masonry: React Masonry is a library for building dynamic and responsive masonry layouts in React. It provides a simple and easy-to-use interface for creating grids of varying sizes and styles. Link: https://github.com/eiriklv/react-masonry
  19. React Color: React Color is a library for building customizable color pickers in React. It provides a range of features such as swatches, saturation, and hue controls. Link: https://casesandberg.github.io/react-color/
  20. React Slick: React Slick is a popular library for building responsive and customizable carousel components in React. It provides a range of features such as autoplay, infinite scrolling, and variable widths. Link: https://react-slick.neostack.com/
  21. React Beautiful Dnd: React Beautiful Dnd is a drag and drop library for React that provides a simple and easy-to-use interface for building advanced drag and drop components. Link: https://github.com/atlassian/react-beautiful-dnd
  22. React Content Loader: React Content Loader is a library for building customizable placeholder loading animations in React. It provides a range of pre-built animations that can be easily customized to fit your project. Link: https://skeletonreact.com/
  23. React Leaflet: React Leaflet is a library for building interactive maps in React using Leaflet. It provides a range of features such as zoom, pan, and markers. Link: https://react-leaflet.js.org/
  24. React Image Cropper: React Image Cropper is a library for building image croppers in React. It provides a range of features such as zoom, rotation, and aspect ratio control. Link: https://github.com/DominicTobias/react-image-crop
  25. React Elastic Carousel: React Elastic Carousel is a library for building dynamic and flexible carousels in React. It provides a range of features such as elastic scrolling, lazy loading, and customizable options. Link: https://www.npmjs.com/package/react-elastic-carousel
  26. React Native Web: React Native Web is a library that allows you to use React Native components in web applications. It provides a range of features such as platform-specific code, performance optimizations, and code sharing between web and mobile platforms. Link: https://necolas.github.io/react-native-web/docs/
  27. React Swipeable: React Swipeable is a library for building swipeable components in React. It provides a range of features such as touch and mouse support, direction detection, and velocity calculation. Link: https://github.com/FormidableLabs/react-swipeable

Conclusion

React’s popularity continues to grow, thanks to its flexibility, performance, and ease of use. With the vast array of libraries available, developers can easily create dynamic and engaging user interfaces. In this article, we have explored the top 30 React UI libraries that can be used to enhance the UI of your application. From navigation menus and modals to calendars and image croppers, these libraries offer a wide range of tools to help you build powerful, beautiful, and responsive user interfaces. By taking advantage of these libraries, developers can streamline their development process, reduce their workload, and create more compelling applications. We hope this list of libraries will inspire you to create beautiful and functional UIs in your React applications.

People are also reading:

40 Must-Have CSS Libraries to Elevate Your Web Design Game

Sticky post
40 Must-Have CSS Libraries
40 Must-Have CSS Libraries

If you’re a web designer or developer, you know how important it is to stay on top of the latest tools and trends in the field. That’s why we’ve put together a list of 40 must-have CSS libraries that can take your web design game to the next level. From responsive frameworks to advanced animations and effects, these libraries can help you create stunning and engaging websites that stand out from the crowd. Whether you’re a seasoned pro or just starting out, these CSS libraries are sure to be valuable additions to your toolkit.

Here are the link of each website

  1. Bootstrap: https://getbootstrap.com/
  2. Bulma: https://bulma.io/
  3. Foundation: https://foundation.zurb.com/
  4. Semantic UI: https://semantic-ui.com/
  5. Materialize: https://materializecss.com/
  6. UIKit: https://getuikit.com/
  7. Tailwind CSS: https://tailwindcss.com/
  8. Ant Design: https://ant.design/
  9. Spectre.css: https://picturepan2.github.io/spectre/
  10. Semantic UI React: https://react.semantic-ui.com/
  11. Vuetify: https://vuetifyjs.com/en/
  12. PrimeNG: https://www.primefaces.org/primeng/
  13. Shards: https://designrevision.com/downloads/shards/
  14. Element: https://element.eleme.io/
  15. Chakra UI: https://chakra-ui.com/
  16. Carbon Design System: https://www.carbondesignsystem.com/
  17. Fluent UI: https://developer.microsoft.com/en-us/fluentui#/
  18. Grommet: https://v2.grommet.io/
  19. Blueprint: https://blueprintjs.com/
  20. Tachyons: https://tachyons.io/
  21. Basscss: https://basscss.com/
  22. NES.css: https://nostalgic-css.github.io/NES.css/
  23. Milligram: https://milligram.io/
  24. Mini.css: https://minicss.org/
  25. Material Design Lite: https://getmdl.io/
  26. Ionic Framework: https://ionicframework.com/
  27. Quasar: https://quasar.dev/
  28. Webflow: https://webflow.com/
  29. Skeleton: http://getskeleton.com/
  30. Suzie: https://github.com/oddbird/susy
  31. Buefy:https://buefy.org/
  32. React-Bootstrap:https://react-bootstrap.github.io/
  33. Reactstrap:https://reactstrap.github.io/
  34. Rebass :https://rebassjs.org/
  35. Styled Components:https://styled-components.com/
  36. Emotion:https://emotion.sh/docs/introduction
  37. Glamorous:https://glamorous.rocks/
  38. Water.css: https://watercss.kognise.dev/#
  39. Polished:https://polished.js.org/
  40. Hover.css: https://ianlunn.github.io/Hover/

A CSS library is a collection of pre-written CSS code that can be used to style web pages. A library typically focuses on specific CSS functionalities, such as typography or animation, and provides a set of styles that can be added to existing web designs to achieve a desired look and feel.

CSS libraries are often lightweight, easy to use, and can save developers a significant amount of time when styling web pages. They can also help ensure consistency across different pages of a website, and improve the overall user experience by providing a visually appealing and responsive design. Popular CSS libraries include Bootstrap, Foundation, Materialize, and many others.

Most Used CSS libraries

  1. Bootstrap: A CSS framework developed by Twitter that provides a set of pre-designed user interface (UI) components, such as buttons, forms, navigation bars, and grids, to help developers build responsive and mobile-first websites and applications quickly.
  2. Foundation: Another popular CSS framework that offers a suite of UI components, including forms, navigation menus, and typography styles, that are easy to customize and responsive by default.
  3. Materialize: A CSS framework based on Google’s Material Design language, which is a design philosophy that emphasizes a clean and modern look and feel for web and mobile applications.
  4. Bulma: A lightweight and modular CSS framework that focuses on providing a clean and simple design for web interfaces, with a flexible grid system and a range of UI components that can be customized easily.
  5. Semantic UI: A comprehensive and intuitive CSS framework that uses human-friendly HTML syntax to make building responsive and accessible web interfaces easy and efficient. It offers a wide range of UI components, such as buttons, forms, and grids, that can be easily customized.
  6. Tailwind CSS: A CSS utility framework that provides a set of pre-defined classes for common design patterns, such as spacing, typography, and layout. This allows developers to build custom and responsive web interfaces quickly, without needing to write custom CSS styles.
  7. Spectre.css: A minimalist and lightweight CSS framework that provides a range of useful UI components, such as grids, typography, and forms, for building modern and responsive web interfaces.
  8. Pure.css: Another lightweight and minimalistic CSS framework that offers a range of UI components, including forms, tables, and grids, that are easy to customize and responsive by default.
  9. UIKit: A comprehensive and modular CSS framework that offers a range of UI components, such as navigation menus, grids, and forms, that are highly customizable and responsive by default.
  10. Ant Design: A popular CSS framework that provides a range of customizable UI components, such as forms, tables, and navigation menus, that are optimized for building enterprise-level web applications and interfaces. It also offers a design language that emphasizes consistency and usability across all components.
  11. Vuetify: A popular CSS framework for building web interfaces using the Vue.js JavaScript framework, offering a range of customizable UI components, such as navigation menus, forms, and cards.
  12. PrimeNG: A CSS framework for building web interfaces using the Angular JavaScript framework, offering a range of customizable UI components, such as grids, forms, and charts.
  13. Shards: A modern and lightweight CSS framework that provides a range of responsive UI components, such as buttons, forms, and cards, that are easy to customize and integrate into web interfaces.
  14. Element: A CSS framework that provides a range of customizable UI components, such as forms, tables, and grids, for building responsive and modern web interfaces.
  15. Chakra UI: A popular and modern CSS framework that provides a range of customizable UI components, such as forms, modals, and typography, for building responsive and accessible web interfaces.
  16. Carbon Design System: A comprehensive and modular CSS framework that offers a range of UI components, such as buttons, forms, and grids, that are optimized for building enterprise-level web applications.
  17. Fluent UI: A CSS framework that provides a range of customizable UI components, such as buttons, forms, and icons, for building modern and responsive web interfaces.
  18. Grommet: A modern and responsive CSS framework that provides a range of UI components, such as tables, charts, and modals, that are easy to customize and integrate into web interfaces.
  19. Blueprint: A CSS framework that provides a range of customizable UI components, such as forms, navigation menus, and grids, that are optimized for building web interfaces with the React.js JavaScript framework.
  20. Tachyons: A CSS utility framework that provides a set of pre-defined classes for building custom and responsive web interfaces quickly and efficiently, with a focus on readability and consistency.
  21. Basscss: Another CSS utility framework that provides a range of pre-defined classes for building custom and responsive web interfaces quickly and efficiently, with a focus on simplicity and modularity.
  22. NES.css: A fun and retro-themed CSS framework that provides a range of customizable UI components, such as buttons, forms, and cards, for building modern web interfaces with a nostalgic feel.
  23. Milligram: A minimalist and lightweight CSS framework that offers a range of UI components, such as buttons, forms, and typography, for building modern and responsive web interfaces.
  24. Mini.css: Another minimalist and lightweight CSS framework that provides a range of UI components, such as grids, forms, and navigation menus, that are easy to customize and responsive by default.
  25. Material Design Lite: A lightweight and customizable CSS framework based on Google’s Material Design philosophy, offering a range of UI components, such as buttons, forms, and grids, for building modern and responsive web interfaces.
  26. Ionic Framework: A popular CSS framework for building hybrid mobile applications using web technologies, offering a range of customizable UI components, such as buttons, forms, and cards, that can be easily integrated into mobile apps.
  27. Quasar: Another CSS framework for building hybrid mobile applications using web technologies, offering a range of customizable UI components, such as modals, forms, and navigation menus, that are optimized for mobile devices.
  28. Webflow: A comprehensive web design platform that offers a range of customizable templates and UI components, such as forms, animations, and sliders, for building modern and responsive web interfaces without writing code.
  29. Skeleton: A lightweight and responsive CSS framework that provides a set of pre-defined classes for building custom web interfaces quickly and efficiently.
  30. Suzie: A CSS framework that offers a range of customizable UI components, such as buttons, forms,

Conclusion

In general, using CSS libraries can be a helpful way for web developers to save time and effort in creating consistent designs across their projects. By utilizing pre-existing code for common features, developers can focus more on creating great web design and efficient apps. While some CSS libraries may not seem exciting at first, they can still be valuable tools for making the development process more productive and efficient. Overall, incorporating CSS libraries into web development projects can help streamline the design process and create a cohesive visual aesthetic.

People are also reading:

Stanford University Free Courses

The Top 5 Stanford University Free Courses. You Shouldn’t Miss .

Sticky post

Stanford University’s Free Courses Program The Top 6 courses that you must enroll in are listed below.

Stanford University's Free Courses Program The Top 6 courses

Hey guys hope you are doing well, And in today’s article we will discuss the top Top 5 Stanford
University Courses. Which are absolutely Free of cost. I have mentioned the top 5 free courses below with the link. The Top 5 Stanford University Free Courses.You Shouldn’t Miss this courses because its absolutely free of cost.

01. Computer Science 101 | Course – Stanford Online

Stanford University's Free Courses Program The Top 6 courses

This is the first course out of 5 course Computer Science 101. This Course For students with no prior computer science knowledge, CS101 is a self-paced course that covers the fundamental concepts of computer science. In this course, you will learn about the essential ideas of computer science for an audience with zero prior Knowledge.

02. Staying Fit

We are in the second free course which is all about developing and maintaining healthy eating, exercise, and sleep habits.No prerequisites are necessary for this course. All individuals who are over the age of 18 are welcome to join this program.


03. Designing Your Career

We on the third course which is all about design thinking approach to help people of any age and academic background develop a constructive and effective approach to designing their vocation.  This online course uses a design thinking approach to help people of any age and academic background develop an effective approach to designing their career.

04. Game Theory

We are currently in the fourth course, which focuses on Game theory is the mathematical modelling of the strategic interaction of rational (and irrational) agents, and it has gained popularity because to films like “A Beautiful Mind.” Beyond what we often refer to as “games,” like chess, poker, soccer, etc.

05. Social and Economic Networks

Our social and professional life are dominated by social networks. They are essential to the trading of various commodities and services and play a key role in the dissemination of information about job opportunities. They have a big impact on what we buy, how we vote, what languages we speak, whether or not we become criminals, how much education we get, and how likely we are to succeed in our careers. Understanding how social network structures influence behaviour, which network structures are likely to evolve in a society, and why we organise ourselves as we do is crucial given the myriad ways in which network structures affect our wellbeing.

People are also reading:

Page 1 of 11

Powered by ziontutorial & DEV Community 👩‍💻👨‍💻 © 2016 - 2023. ziontutorial.com