GITHUB: How to create and merge branches using vscode.

Introduction

If you're starting out with web development, one of the first things you'll want to do is create an index.html file, set up a Git repository, and push your work to GitHub. This process allows you to track changes, collaborate with others, and showcase your work online.

In this blog post, I'll walk you through the step-by-step process of creating an index.html file in Visual Studio Code (VS Code) and uploading it to GitHub.

---

Set Up Your Project in VS Code

Before pushing anything to GitHub, we need to set up a project folder and create an index.html file.

Click on the file, a dropdown appears and click new window

Navigate to the search bar

CLICK on Ctrl+Shift+p to search

Navigate to your browser and sign in to your GitHub account

Click the new repository to create a repository

Give your repository a name, and add your description

Leave it in public

Check the box for Add a README file

Click on Create

After successful created your repository

Click the green button named [Code]

Copy the HTTPS URL

Navigate back to your Visual studio account.

Paste the URL you copied from GitHub in the VS search bar and click Enter.

Your file explorer will pop up.

Create a new folder for your repository or select a folder.

For this am selecting my document folder.

Click select as repository destination.

A pop up will appear, click on open.

Click on yes, i trust the authors.

Upon successful creation.

A README.md file is automatically created.

And also, you can find out the current branch your repository is on GitHub on the bottom left.

Move your cursor to the README.md and click the file button to create a new index.html file.

Write index.html within the box and click enter to create the the index file successfully.

Copy and paste your index.html code within the index.html terminal.

Click Ctrl+S to save your code.

Click on the source control button, and a blue pop-up appears within.

Click on the + sign to stage changes.

When you see a - sign, that means your stage changes have changed.

Type a message. Commit within the box above the Commit button….

For me, I will give mine as my index.html code.

Click Commit button to commit.

Click on sync changes to push your commit to origin/main on github account.

Navigate back to your GitHub account and confirm what you’ve pushed from VS Code

The code is pushed successfully

Navigate back to VS Code and create an index.css file using the same steps did for the index.html file.

Click the file button to create a new file.

Give the file an index.css name and click enter.

Paste your index.css code within the terminal.

Click Ctrl+S to save the code.

click on the source control button.

Type a commit message named my index.css code.

Click on the + sign to stage changes.

Click on commit.

Click on sync changes to push your commit.

Navigate back to your Git hub account to confirm what you’ve pushed from the VS Code.

Our index.css is successfully pushed.

Navigate back to vs code, Click on main at the down path of the VS Code.

An option will pop-up at the top search bar, Select create new branch.

Give the branch a name within the search bar (e.g i give mine “legend“) & click enter.

Success, your branch at the down path below the push branch button will change to “legend”.

Create a new file named index.css, following the same steps you used to create the index.html.

Stage changes & commit (e.g, new feature) and click on publish.

Now, we have 2 branches, the 1 branch with index.html and the 2 branch with index.css

Navigate back to your GitHub and check your new branch and index.css file.

Click on compare and pull request .

Create a pull request, & click on Merge pull request, and confirm the merge.

Go back to your repository & check both to see if they are successfully merged.

Click on the main branch to see all available branches.

Upon successful merging every file created within a branch will be available on both branches.

SUCCESS……

I hope you find my post helpful, and it can guide you through the process with no difficulties.

Join me on this cloud adventure and elevate your tech skills! Sign in to the Azure portal, follow my easy instructions, and unleash the power of being in the cloud.

Subscribe to my blog for more tech tips and tricks that will keep you ahead in the digital game. Your journey to mastering Cloud computing starts here!

🌟 Thank you for being a part of this incredible journey! Together, let's unlock new opportunities and make the most out of our digital experiences. Happy computing! 🌟