Hello People! If you are an absolute beginner with Github and you heard about it recently, then this post is for you.

So, if you don't know what Github actually is, then let me tell you about it. Github is a place where you can manage your code, manage your projects and keep versions of your projects. So, Github has become important these days in industrial and personal uses.

In this post, you will come across uploading your code on github.

So, firstly, you need to install a program on your computer. This is to get access to all the awesome features of Github. Follow the Link to download Git. Configure the download as per you need. Then run the installer file.

Run the below file (downloaded right now, in you downloads folder to setup Git on your pc)

Note: Make sure all the things shown in the above picture are selected...

Now let me quickly tell you about Git. Git is the actual manager of your code. Github is just a website where your code is visible. As simple as this.

So, now if git is installed on your pc, you are ready to do awesome things with it.

Make your Github account and you are ready to go...

Terms used in this post: Repo (meaning, repository)

Duplicate (clone) any project on Github

Do you know that you can clone any project on github by using just one command on your pc. You can clone the directory and edit the code locally as you want.

To do this, first you need to go to the folder where you want to clone the project. Then right click there and click on Git bash here.

To clone the project, you need to have the url of the project on gihub.

For example, I want to clone my project TextUtyls, I have the url:

    https://github.com/TheShiveshNetwork/TextUtyls  

Now I will type in the terminal

    git clone https://github.com/TheShiveshNetwork/TextUtyls   

Boom! now the project has been cloned on your pc. You will see the directory of the project at the location you ran the command.

Upload your project to github

For this, you will first have to go to the github website. Now create a new repository by clicking on the + icon.

When your repo is created, follow the steps shown on the screen.

In this case, I consider that you already have made a project file, that you want to push to Github.

So, just go to the project directory you want and right click, open git bash.

Now follow the below steps

    git init   

This command will make a .git file in your directory that stores a record of your file locally. If you have enabled "show hidden files in your file explorer, then you can see the file.

Note: In case you come across a problem with managing the files on git, just delete the .git folder and reinitialize it, by running the above command.

The next step is to add all the files of your directory to git.

    git add .  

This command will add all the files to git.

After these two commands, you are all set.

Now commit the files

    git commit -m "first-commit"  

The name first-commit will be specified as the name of your commit, just ignore that for now.

Now add the reference of your repo on github.

Get the url of your repo and run the below command

    git remote add origin   

Paste your url after "origin" and then run the command...

Now just run the below two commands and your project will be uploaded to github.

    git branch -M main   

    git push -u origin main   

Now reload the page of your repo and you will see your code there.

Thanks for reading. Hope you liked the idea and project. Do comment down you opinions. Also, share this project with your friends and programmers.

 In this post, I am continuing the work of the Windows 11 website. We are going to make a better taskbar, add some app windows and add the side panel to control all the things.

In this post, we have worked on the dark mode of Windows with the specific color themes and make a similar kind of look.

Code

HTML part:

Now the basic things of your website are ready. But it will not look good and clean. So, to give it a look like Windows 11, we are going to use CSS.

CSS part:

The designs are ready. Isn't it look similar to the design of Windows 11? But still we have some work left. To make this page resposive. We need to add some JavaScript to it.

Note: To make the windows of apps look like they are opening and closing, we are going to play with the display and visibility of the objects in CSS using JS.

JS part:

Note: I have also used JQuery in the last two lines to display the MrDevKnown site inside the Macrohard Edge Window. You can skip that thing, since it is a simple HTML, CSS, JS tutorial.

Now, our Windows 11 themed Website is ready.

Output

Summary

In this article you learnt how you can make a Windows 11 themed web design. You learnt about some basics of HTML and CSS.