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 .
Step 2.
Step 3.
Scroll down and go to the graphic setting
Step 4.
When you jump to graphic setting select or choose an app to set preferences as a classic app
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
Step 6.
Then your selection will appear like this .
Now close all apps and open again OBS application .
Step 7.
Open your obs application and select your Display capture .
Finish Output
Now you can enjoy your recording as well as streaming from your computer.
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.
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 :
During pushing your code to the GitHub
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.
Also, we are using sass for styling in this project. So we have to make it easy for styling . Install the package for sass also .
npm i sass
Folder structure
Once the packages and dependencies are finished downloading, start up your IDE and locate your project folder. Lets start Create Simple Login form with React JS code
1. App.js Code
Write this code app.js if you face any problem for designing he login page just comment in the comment box.
Now let’s jump to index.js file where have only written a few lines of react js. Which is only needed to run our react app. Here is the code for it.
Index.js
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.scss";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
For styling part of index.js file also follow the same step we did in app.css . Just few line of code for the index.scss code .
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:
IDE of choice (this tutorial uses VS Code, you can download it here)
npm
create-react-app
react-router-dom
useState React hooks
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.
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.
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
how to post data using react js
how to view data after posting the data
how to delete data using checkboxes using react js
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
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.
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.
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 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!
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.
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
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/
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/
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/
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/
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/
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/
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
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
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
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
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/
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/
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/
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
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/
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
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
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/
React Modal: React Modal is a library for building modal dialogs in React
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
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
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/
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/
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
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/
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/
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
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
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/
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.
creating a stunning Twitter login page clone using the ReactJS library
In this article, we will guide you through the process of designing a stunning Twitter Login Clone using react js. You’ll learn the best practices for creating a user-friendly and responsive login page, as well as how to implement essential design elements to make your login page stand out. By the end of this article, you’ll have a step-by-step guide to building a customizable and visually appealing Twitter log in page clone using React js.
The goal of this tutorial is to introduce developers to the React.js library.The reader should be familiar with the fundamental web development technologies, such as:
Basics for HTML and CSS
Javascript
Basics of React.js in ES6
Note: join Our telegram Channel mostly available on that platform you can ask any question.
What we will Learn
Here we will learn how to design a Twitter login clone using react. we will learn to code a simple Twitter login clone using the React.js library. The workflow of the app is the same as the previous blog.If you have not read that blog kindly follow the link .
After the successful installation of Nodejs, install and set up a React app using the below command.
npx create-react-app react-counter-app
Then jump to that folder eg. if your folder name is react-counter-app the type
cd react-counter-app
After that Go to the App.js file and start your coding part here we will define our state and functions which are required to increment and decrement our numbers.
Letβs jump into the app.js part where all the logic of our application
App.js
letβs jump into our App.js where all the magic happens and we discuss our application markup here.
import "./App.css";
function App() {
return (
<div className="logo-box">
<img src="./logo.png" alt="apple" className="logo" />
<h2>Sign In to Twitter</h2>
<button>
<img src="./google.png" alt="apple" />
Sign in with Google
</button>
<button>
<img src="./apple.png" alt="apple" />
Sign in with Google
</button>
<hr></hr>
<span>Or</span>
<form>
<input type="text" placeholder="Phone email or username" />
<button>Next</button>
</form>
<button>Forget Password</button>
<p>
Don't Have an account<a>Sign up</a>
</p>
</div>
);
}
export default App;
App.css
Let’s begin creating the CSS for our Twitter login clone that will completely transform the appearance of our application. We will be implementing the necessary styles to replicate the design of Twitter’s login page, including the use of their distinctive blue color scheme and typography. There is the code just copy and paste it in your app.css file
You can always refer to the GitHub repository to clone the project we have created.
1.https://github.com/tinkugupta5/Counter_app
Conclusion
We did it! ? Hope you like How To Make a Twitter Login Clone Using React Js | Sign In Page Design With React Js. For such projects do visits and comment on which project should I cover next.
Check out this BMI Calculator using react and hooks. 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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Skeleton: A lightweight and responsive CSS framework that provides a set of pre-defined classes for building custom web interfaces quickly and efficiently.
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.
Stanford University’s Free Courses Program The Top 6 courses that you must enroll in are listed below.
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.
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.
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.
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.
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.
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.