In this blog, we will be building with a Pokemon GraphQL API that gives us data about different Pokemons.

We will be using Apollo and GraphQL to handle the data fetching, and React for building our front-end application.

No worries if you don't know these technologies, I will be walking you through the basics as you read on.

Prerequisites

You should have these in your computer to follow along:

• Nodejs v18+
• A code editor
• A web browser

Let's create our React app.

React Application Setup

To create your React app, navigate to your terminal, and use the Command Prompt. Open your Command Prompt and choose your preferred location for creating your React project. Let's go with Desktop.

cd Desktop

The above command will navigate to your Desktop.

npm create vite@latest pokemon-app -- --template react

npm create vite@latest will start to build a new project using Vite. But we attached the name of our project (pokemon-app) and the technology or framework our app will be using (-- -- template react).

You can set another template like svelte, vanilla or vue and the project will be created using that framework. Read more about Vite on its official website.

After the Vite installation, run the following commands:

cd pokemon-app
npm install
npm run dev

We'll use the commands above to finish the React setup.

Run the first command, cd pokemon-app, to navigate to the pokeman-app folder.

Run code . to open the folder in your code editor.

modal displaying over VSCode to accept that you trust the authors of the files opened in VSCode

Mark the trust the author checkbox if that pops up.

Open your code editor's terminal. If you are running VSCode on Windows, the shortcut is `Ctrl + `` .

Run the other 2 commands in the terminal one after the other.

npm install

npm run dev

Your project should be running in the browser now.

We will be managing our data fetching using GraphQL and Apollo.

How to Use GraphQL and Apollo

GraphQL is a query language for APIs and a runtime for fulfilling queries with your existing data. It allows you to request only the data you need in your application and nothing more, making it very efficient and flexible.

Apollo is a state management library that allows you to manage local and remote data with GraphQL. It can be used to fetch, cache, and modify application data, all while automatically updating your UI.

Let's install the packages you need.

Installing Packages

Run the command below in your terminal to install the Apollo client.

npm install @apollo/client

Navigate to your main.jsx file and import these:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import {
  ApolloProvider,
  ApolloClient,
  InMemoryCache,
} from "@apollo/client";
import "./index.css";

You have imported React and ReactDOM for DOM manipulation.

ApolloClient is responsible for managing your application's data fetching and state management. It handles sending GraphQL queries and mutations to your GraphQL server and caching the results.

ApolloProvider will be used to wrap your React application to provide the Apollo Client instance to all your components so that your application can access data fetched through Apollo Client.

InMemoryCache is a cache implementation to store the results of GraphQL queries in memory for efficient access and retrieval.

You have also imported index.css to style your application.

How to Create an Apollo Client

const client = new ApolloClient({
  uri: "https://graphql-pokemon2.vercel.app/",
  cache: new InMemoryCache(),
});

The code above creates a new instance of ApolloClient with the some configurations:

1. uri: This specifies the URL of your GraphQL API endpoint. This is the endpoint where your Apollo Client will send GraphQL queries and mutations.
2. cache: This configures the cache implementation for Apollo Client to use an in-memory cache to access data and store the result of GraphQL queries, reducing the need to re-fetch data from the server.

You can now wrap your <App /> component with ApolloProvider:

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>
);

Note that client props was also passed to provide your application with ApolloClient configuration.

Go to your App.jsx component and input this:

import React from "react";
import { PokemonsContainer } from "./components/PokemonsContainer";

export default function App() {
  return (
    <main>
      <PokemonsContainer />
    </main>
  );
}

You imported React and PokemonsContainer will be created. The PokemonsContainer component was wrapped in main tag and will be rendered when the component is pasted in the DOM.

Let's create the PokemonsContainer component in a file located in components folder. That is:

📂 src/components/PokemonsContainer.jsx

Pokemons Container Component

import React from "react";
import { useQuery } from "@apollo/client";
import { Pokemon } from "../components/Pokemon";
import { GET_POKEMONS } from "../graphql/get-pokemons";

The useQuery from @apollo/client is used for executing queries in an Apollo application. To do that, useQuery() is called and a GraphQL query string is passed as a argument. When your component renders, useQuery returns an object from Apollo Client that contains loading, error, and data properties that you can use to render your UI.

Pokemon component was imported to render a user interface for a Pokemon, this will be built shortly.

GET_POKEMONS was also imported. This will contain a GraphQL query.

After importing the above functions, continue building your page.

export function PokemonsContainer() {
  const { loading, error, data } = useQuery(GET_POKEMONS, {
    variables: { first: 5 },
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  const pokemons = data?.pokemons || [];
  return (
    <div className="container">
      {pokemons &&
        pokemons.map((pokemon) => (
          <Pokemon key={pokemon.id} pokemon={pokemon} />
        ))}
    </div>
  );
}

As mentioned earlier, useQuery returns an object from Apollo Client that contains loading, error, and data properties. They are destructured here so you can access them in the page.

Notice that we're providing a configuration option (variables) to the useQuery hook. { variables: { first: 5 } } was also passed as the second argument. The variables option is an object that contains all of the variables we want to pass to our GraphQL query. In this case, we passed an object { first: 5 } to specify that we want the first five Pokemons.

If the query is still loading, <p>Loading...</p> is returned to signify the user while <p>Error: {error.message}</p> will be returned if there is an error.

The pokemons constant was created to hold the value of the Pokemons property of the data object. If data.pokemons is not available, the pokemons constant will be an empty array.

A div is returned with a classname of container which checks if pokemons is available and maps the array over the Pokemon component.

Let's create the Pokemon component:

📂src/components/Pokemon.jsx

Pokemon Component

import React from "react";

export function Pokemon({ pokemon }) {
  return (
    <div className="pokemon">
      <div className="pokemon__name">
        <p>{pokemon.name}</p>
      </div>
      <div className="pokemon__meta">
        <span>{pokemon.maxHP}</span>
        <span>{pokemon.maxCP}</span>
      </div>
      <div className="pokemon__image">
        <img src={pokemon.image} alt={pokemon.name} />
      </div>
      <div className="pokemon__attacks">
        {pokemon.attacks.special.slice(0, 3).map((attack) => (
          <span key={`${attack.name}-${attack.damage}`}>{attack.name}</span>
        ))}
      </div>
    </div>
  );
}

The structure of an instance of a Pokemon is defined here with the classname for styling. The name, maxHP, maxCP, image and attacks array will be rendered.

Let's create the GET_POKEMONS GraphQL query.

📂src/graphql/get-pokemons

GraphQL Query

import gql from "graphql-tag";

export const GET_POKEMONS = gql`
  query pokemons($first: Int!) {
    pokemons(first: $first) {
      id
      name
      image
      maxHP
      maxCP
      attacks {
        special {
          name
          damage
        }
      }
    }
  }
`;

You imported gql from graphql-tag and created a GraphQL query named GET_POKEMONS.

The pokemons query function was wrapped in strings for the gql function to parse them into query documents.

$first: Int! means that your query is expecting a variable called first, which is an integer, and the ! symbol after the Int means that the variable is required.

Recall that we created the variables object in the PokemonsContainer component, it's here below.

 const { loading, error, data } = useQuery(GET_POKEMONS, {
   variables: { first: 5 },
 });

pokemons(first: $first) was also declared. $first will be assigned to 5 here (we passed in 9 in the above code snippet). Thus, the array will contain only 5 objects. Each object will contain id, name, image, maxHP, maxCP, and attacks object which will contain the special object containing name and damage.

The GraphQL server might contain more properties but will only return the properties listed above. That is one of the cool functionalities of GraqhQL – it gives you only the data you request for.

Styling our Application

Your index.css should contain this:

/* RESETS
=========================================== */
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

body {
  margin: 20px 0;
  padding: 0 20px;
  line-height: 1;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #202020;
  background-color: #fbfbfb;
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* POKEMON APPLICATION
=========================================== */
.container {
  display: flex;
  max-width: 80%;
  margin: auto;
  height: 100vh;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.container p {
  margin: 0;
}

.container .pokemon {
  width: 20%;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  overflow: hidden;
  /* margin: 5px; */
}

.container .pokemon__name {
  background-color: #ecd018;
  text-align: center;
  padding: 10px;
}

.container .pokemon__name p {
  text-transform: uppercase;
  font-weight: bold;
  color: white;
  letter-spacing: 4px;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
}

.container .pokemon__image {
  padding: 20px;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container .pokemon__image img {
  max-width: 100%;
  height: auto;
}

.container .pokemon__attacks {
  display: flex;
  padding-left: 10px;
  padding-right: 10px;
  justify-content: space-between;
}

.container .pokemon__attacks span {
  width: 32%;
  background-color: #f16820;
  border-radius: 3px;
  padding: 7px;
  font-weight: 700;
  color: #fff;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 12px;
  margin-bottom: 10px;
  word-wrap: break-word;
  text-align: center;
  line-height: 15px;
}

.container .pokemon__meta {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding: 0 10px;
}

.container .pokemon__meta span {
  color: white;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
  background-color: #7bb7b7;
  font-weight: bold;
  margin: 0;
  padding: 5px 20px;
  border-radius: 5px;
}

All things done right, you should have this in your browser:

a picture showing the five pokemons data in the browser

You can get the GitHub code here: https://github.com/segunajibola/pokemon-graphql

You can also view the live site hosted on Vercel here: pokemonsapp.vercel.app

Check my portfolio of projects: segunajibola.com

Conclusion

That will be all. I hope you found value here as you learn more about the web.

If you enjoyed this article and want to see more content related to JavaScript and web development, then follow me here, Twitter (X) or connect on LinkedIn. I'd be happy to count you as one of my ever-growing group of awesome friends on the internet.

You can also join my WhatsApp developer community and OpenSource community of 330+ developers learning and building cool projects.

If you also want to support me, you can also buy me a cup of coffee.

Thanks and bye. 👋

And Tailwind CSS and React are a great combo to use if you're building a frontend project.

In this article, you will learn how to setup your coding environment with Vite, install React and Tailwind CSS with their latest versions, and start building your projects right away.

We will be using these tools:

• VSCode for our code editor
• Node.js for our package manager
• Vite for our development environment

If you don't have these tools installed, you can do so by clicking the links for each one above.

After setting up Node.js for your VSCode, you can now use Node.js to install Vite for your project using the terminal.

Step 1 – Create Your Project Folder

Open your terminal, and navigate to the folder where you want to build your project – for example Desktop. Input the command below in the terminal and click enter:‌

npm create vite@latest your-project-name -- --template react

The command above will create your project folder.‌

My project name is "food-app", the food-app folder will be created in the Programming folder on my Desktop

‌Note that we have used -- --template react to specify that we are building a React app with Vite.

Step 2 – Navigate to Your Project Folder

Input the command below in your terminal and click enter:

cd food-app

‌This command will navigate to your project folder. You should have this:

Inputing "cd food-app" in terminal to navigate to the "food-app" folder

Step 3 – Install Tailwind CSS and Other Dependencies

Input the command below in your terminal and click enter:

npm install -D tailwindcss postcss autoprefixer

This command will install the following:

• The Tailwind CSS framework
• Post CSS, which provides plugins to perform different functionalities like prefixes in Vanilla CSS
• Autoprefixer, which is a PostCSS plugin to parse CSS and add vendor prefixes to CSS rules.

Your folder should look like this in your VSCode:‌

Confirm that you have the below text in your package.json‌:

Step 4 – Generate the Configuration Files

Input the command below in your terminal and click enter:

npx tailwindcss init -p

This command generates tailwind.config.cjs andpostcss.config.cjs configuration files, also known as config files. They help you interact with your project and customize everything.

Step 5 – Configure Source Paths

Add the paths to all of your template files in your tailwind.config.cjs file. Template files include HTML templates, JavaScript components, and other source files that contain Tailwind class names. This is to make sure that vanilla CSS is generated for the corresponding elements.

Your tailwind.config.cjs looks like this for now:

Current config file named as tailwind.config.cjs, it contains the module.export object to customize tailwind with property like content, theme and plugins

Add this in your content section.

"./index.html",


"./src/**/*.{js,ts,jsx,tsx}",

So your file should now look like this:

Config file after updating the content property

Step 6 – Add Tailwind Directives to Your CSS

Tailwind directives are custom Tailwind-specific statements that instruct CSS how to behave. You'll need to add directives for three of Tailwind’s layers.

@tailwind base injects Tailwind's base styles and base styles registered by plugins, @tailwind components injects Tailwind's component classes and component classes registered by plugins, while @tailwind utilities injects Tailwind's utility classes and utility classes registered by plugins.

Add the statements below to your ./src/index.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base;
@tailwind components;
@tailwind utilities;

Your index.css file contains some default styling. You can clear all that and paste the three lines of directives above.

Step 7 – Start Your Vite Server

Run your build process with the npm run dev command in the terminal. You should get this message below in your terminal‌:

The message you get after running your Vite server that provides localhost link, network, and help.

Hold the ctrl key and click on the link at Local – here it's http://127.0.0.1:5174. It will open a new tab in your browser if you do that.

A screenshot of the webpage on first run

Our styles are broken because we cleared the default CSS in the index.css file to input our directives.

Step 8 – Start Writing Tailwind CSS

You can start using Tailwind’s utility classes to style your content. Navigate to your App.jsx file, where you should see this below:

Screenshot of the App.jsx file

Clear the return element starting from line 9, and replace it with the text below to test your Tailwind to know if it is working. Input this:

<h1 className="text-3xl font-bold underline text-center">Hello world!</h1>

Now you have this:

Adding the h1 element to the App.jsx file

According to the above image, text-3xl font-bold text-red-500 underline text-center has been added as a className to the div element. This is the standard for writing Tailwind CSS styling.

You can learn more about Tailwind classnames here. Your browser should update automatically.

Screenshot of the webpage after add the h1 element

You can now start building your React projects and style them with Tailwind CSS.

Conclusion

You have now created a React and Tailwind CSS app using Vite, a frontend build tool. You have learned what Vite is and how to create a Vite app with a React template, as well as how to install Tailwind and other dependencies.

Thanks for reading this article. If you enjoyed it, consider sharing it to help other developers.

You can reach me on Twitter, LinkedIn and GitHub.

Happy Learning.‌

The dynamic values passed in a JavaScript function can change when the function gets called in another location in the code. The keywords we use to name these data are parameters and arguments, but some developers confuse them.

In this article, you will learn about parameters and arguments and what they are, along with where and when to use them.

Table of Contents

• Introduction to JavaScript functions
• How to use Parameters and Arguments in a function
• The power of arguments
• Conclusion

Introduction to JavaScript Functions

One of the fundamental building blocks in JavaScript programming is a function. It's a block of code designed to perform a particular task.

Functions are reusable code which you can use anywhere in your program. They eliminate the need to repeat the same code all the time.

To use functions in a powerful way, you can pass values in a function to use them.

Here is an example of a function:

function add(){
    return 2 + 3
}

add()

This is a function declaration, the name of the function is add, and it was called after the function with add() . The result of the function will be 5.

Let's introduce parameters and arguments in the function.

How to Use Parameters and Arguments in a Function

Take a look at our function code now:

function add(x, y){
    return x + y
}

add(2, 3)

We have introduced x and y here and changed the location of the 2 and 3. x and y are the parameters while 2 and 3 are the arguments here.

A parameter is one of the variables in a function. And when a method is called, the arguments are the data you pass into the method's parameters.

When the function is called with add(2, 3) the arguments 2 and 3 are assigned to x and y, respectively. This means that in the function, x will be replaced with 2 and y will be replaced with 3.

If the function is called with a different argument, the same applies. Parameters are like placeholders for function arguments.

The Power of Arguments

We can use arguments more efficiently when we want to make functions more re-useable, or when we want to make calling functions inside another functions more powerful.

Here is an example:

function add(x, y){
    return x + y
}

function multiply(a, b, c){ // a = 1, b = 2, c = 3
    const num1 = add(a, b) // num1 = add(1, 2) = 3
    const num2 = add(b, c) // num2 = add(2, 3) = 5

    return num1 * num2 // 15
}

multiply(1, 2, 3)
// returns 15

The first function add() has two parameters, x and y. The function returns the addition of the two parameters.

The second function multiply() has three parameters: inside the function, two variables are declared in it, num1 and num2. num1 will store the value of the result of add(a, b), and num2 will store the value of the result of add(b, c). At the end the multiply function will return the value of num1 multiplied by num2.

multiply is called with three arguments which are 1, 2 and 3. add(a, b) will be add(1, 2) which will return 3. add(b, c) will be add(2, 3) which will return 5.

num1 will have the value of 3 while num2 will be 5. num1 * num2 will return 15.

Arguments are passed in the multiply function which are also used as arguments for the add function.

Conclusion

Using parameters and arguments can be confusing at times, especially if you are just learning them. But if you first properly learn what a function is and how it works, you will understand parameters and arguments easily.

Thanks for reading this article. If you enjoyed it, consider sharing it to help other developers.

You can reach me on Twitter, LinkedIn and GitHub.

Happy Learning.

Building projects is one of the core parts of being a developer. And Git and GitHub are essential tools you'll use when building projects with others.

But they can look complicated if you haven't used them before. So I wrote this article to simplify how Git and GitHub work.

Table of Contents

• What are Git and GitHub?
• Why should you learn Git and GitHub?
• Differences between Git and GitHub
• How to start using Git and GitHub
• Resources to learn Git and GitHub

What are Git and GitHub?

Git was developed in 2005 by Linus Torvalds as open source software for tracking changes in a distributed version control system.

Git is open source because its source code is made freely available for anyone to modify and use, aside from its creator. Open-source projects are built and maintained collectively by different developers in different locations.

Git track changes via a distributed version control system. This means that Git can track the state of different versions of your projects while you're developing them. It is distributed because you can access your code files from another computer – and so can other developers.

When you're building an open source project, you'll need a way to document or track your code. This helps make your work organized, and lets you keep track of the changes you've made. This is what Git lets you do.

But you also need a place to host your code – which makes controlling each version of your project easier and faster. This is where GitHub comes in.

GitHub is a "hub" (a place or platform) where Git users build software together. GitHub is also an hosting provider and version control platform you can use to collaborate on open source projects and share files. When you're using GitHub, you're working with Git beneath the hood.

Why Should You Learn Git and GitHub?

According to Techmonitor.ai, over 73 million developers use GitHub as of November 2021. And the GitHub community is set to hit 100 million users by 2025.

As you can see, millions of people all over the world use these tools, and the numbers just keep going up.

Because of this, more companies are requiring new hires to know how to use Git and GitHub. So if you're looking for a developer job, these are essential skills to have.

If you're not using Git and GitHub, it's clear – you should be!

Differences between Git and GitHub

Git is a version control system that manages and keeps track of your code. GitHub, on the other hand, is a service that let you host, share, and manage your code files on the internet.

GitHub uses Git underneath, and lets you manage your Git repositories or folders easily on its platform.

So Git is the actual version control system and GitHub is the platform where you host your code.

If you want to learn more about the differences between these two tools, you can read this tutorial.

How to Start Using Git and GitHub

Step 1 – Install Git

Git comes preinstalled in some Macs and Linux-based systems, but you can always check if you have Git installed in your machine by typing git version in your terminal. You can use the Command Prompt to do this.

As you can see above, I have Git version 2.31.1 installed on my Windows computer. If you don't have Git installed in your computer, you won't get a version.

You can download Git here and then select your operating system to download.

Follow the necessary installer guide until installation is complete. Open the command prompt and type git version to verify that Git was successfully installed.

Step 2 – Create a GitHub Account.

To create an account on GitHub, you will be asked for some personal information like name, confirm your email, set a username and password, and your account should be set up in minutes.

Create an account on GitHub.com here.

Step 3 – Connect your GitHub account to your Git account.

You'll do this from your terminal.

To set your Git username, type this in your terminal:

git config --global user.name "Segun Ajibola"

To confirm that you have set your Git username correctly, type this:

git config --global user.name

You should have "Segun Ajibola" as the output.

To set your Git email, type this in your terminal:

git config --global user.email "youremail@gmail.com"

To confirm that you have set your Git email correctly, type this:

git config --global user.email

You should have "youremail@gmail.com" as the output.

You will be asked to authenticate your GitHub account, so just sign in with the same email to confirm.

Step 4 – Create and edit your code files locally

Step 5 – Create a repository on GitHub

Click the + sign at the top right corner to create a new repository. Repositories are like your code folders online.

You will be prompted to this page:

Name your repository and give it a description (this is optional).

Click the "Create repository" button to create the repository. You will be prompted to this page:

Step 6 – Push your local code to GitHub

You can use the code editor built-in terminal to use Git to push your code to GitHub. Click ctrl + shift + ' to open the terminal in VSCode.

Input the commands below one after the other in your terminal. Press the Enter key to proceed after every input.

‌echo "# sample-code" >> README.md

git init

git add .

git commit -m "first commit"

git branch -M main

git remote add origin https://github.com/segunajibola/sample-code.git

git push -u origin main

Note that we have git add README.md in the repository on GitHub. But here we have git add ., which is to let Git add all our code files instead of the README.md file which will be created by echo "# sample-code" >> README.md. So if you have created other files in your local folder, you need to use git add . to add all files.

Take note that git remote add origin [https://github.com/segunajibola/sample-code.git](https://github.com/segunajibola/sample-code.git) will contain the link to your own repository and it will have have the name of your GitHub account.

Common Git Commands to Know

They are many Git commands you can use in the terminal, and that can get overwhelming. So I'd suggest focusing on some of the most popular ones first.

Here they are:

git init lets you initialize Git in your folder.

git add [Readme.md](https://readme.md/) lets you add the Readme file, while git add . lets you add all files in the present folder.

git commit stores the added files. Use -m for message followed by the actual message.

git branch creates a new branch which is a new version of the repository as it appears when added, and -M to move the name to main.

git remote add origin finally connects the local folder to the repository on GitHub. It is followed by the repository's link.

git push -u origin main pushes the code to GitHub. The -u flag creates a tracking reference for the branch, and origin main puts the code in the main branch.

Those are some of the main commands you'll use all the time. This is a beginner and non-technical guide to help you get started using Git and GitHub, so we won't go into too much more detail here.

The more you continue using GitHub, the more comfortable you'll get using these commands. The key is to start small and maintain your momentum.

It will eventually get easier as you build small projects and host them on GitHub using Git.

If you find it hard to use the terminal to navigate between folders, spend some time to practice with it. Again, it gets easier with time and use.

How to Customize Your GitHub Profile

Customizing your GitHub profile README helps you stand out from random GitHub users.

The README.md file helps you describe your GitHub profile, and you can use it to show what you're currently learning along with your skills and contributions.

The GitHub README.md uses markdown to format its content. It has an easy-to-learn syntax.

Here is a simple guide to create and customize your GitHub account.

Here is my GitHub profile's README.md file.

You can check out some other GitHub README.md personalized profiles here.

Resources to learn Git and GitHub

Here are some helpful courses and articles you can go through if you want to learn Git and GitHub in more detail:

1. Git and GitHub Tutorial – Version Control for Beginners
2. Basic Git Commands – How to Use Git in a Real Project
3. Git and GitHub for Beginners - Crash Course
4. An introduction to Git: what it is, and how to use it
5. About GitHub

Conclusion

If you have finished reading this, you might be feeling overwhelmed about Git and GitHub. Yes it's another big thing you need to learn in tech, but do not fret.

Remember that whenever you start learning something new, at first it can seem like you won't get the hang of it. But after some time and hard work, you'll become more comfortable.

It's the same with Git and GitHub too – if you use it a lot for a while, you will get comfortable with it.

Thanks for reading this article. If you enjoyed it, consider sharing it to help other developers.

You can reach me on Twitter, LinkedIn and GitHub.

Happy Learning.