GitHub Octocat
found a bug/improvement?
Saltar al contenido principal
15 min read web development 23/11/2020

Git and GitHub: What Are They and How to Make a Beautiful GitHub Profile?

Learn what Git and GitHub are, their importance and how to create an attractive GitHub profile with badges, statistics and Markdown.

Hello world 👋 my name is Francisco, fcoterroba on the Internet and today I’m bringing you a post where I’m going to talk and we’re going to end up making, step by step, a beautiful readme on our GitHub profile! 🤩

If you don’t even know what GitHub is, don’t worry! Here you’re going to learn about the importance of GitHub, the philosophy, what it’s for and much more! Knowing how to use Git and its derivatives like GitHub, GitLab, etc. They are the cornerstone of any self-respecting programmer today! 👨‍💻

Before getting into the subject, although I’ll explain what it is later, I recommend you visit a post I uploaded more than a month ago, where I explain many of the most used computer terms in our daily lives. Since, in this post, you’ll see words that probably won’t sound familiar to you. 🤯 You can read the post here.

I also want to remind you that a few months ago I uploaded a video to my YouTube channel, very interesting, focused on home automation. Specifically, we connected, configured, and installed a smart light bulb 💡 with which you can change its color, turn it off, turn it on, and much more simply by using your mobile phone and/or voice assistants like Google, Alexa, etc. 👇🏻

Before we begin, I have to thank several people who have helped me, directly or indirectly, to make the leap to GitHub and even more to create such a beautiful profile as the one you’re going to see very soon! 👇

Also thank @RomaDev94 for the help to make this post!

Don’t you know what GitHub is?

Surely, if you don’t know what GitHub is or all the presentation I’ve made before has sounded like Chinese 👲, don’t worry, I’m going to try to explain it to you in detail!

Before wanting to know what GitHub is, you need to know what Git is.

Git is a version control software designed by Linus Torvalds (yes, that man who created the Linux kernel), designed for efficiency and reliability in maintaining application versions when they have a large number of source code files.

It’s cross-platform and is written in several languages, including C, Perl, Tcl, Python, etc.

After all, in case the dense explanation hasn’t helped you, Git is a program (or technology) that lives in the search to be the most used version control system in the world.

When you work as a programmer, whether in a small, medium or large company, you’re going to use Git since, you’re not going to be alone, you’ll be surrounded by other programmers who, like you, have a goal to reach, whether it’s a deadline, module, package, etc.

Imagine now, combining 3, 5 or 20 different programs that each programmer is programming at that moment. It would be chaos, right? 🤯

Well, Git came with that problem, making simplicity its weapon, managing to unify this tedious problem.

I’m not here to keep lecturing you much more but if this interests you, I recommend watching the following two videos about Git and GitHub.

I swear we’re starting now…

Only, before starting, I want us to do a quick exercise and think (or put it in the comments), which of the two images you’ll see below seem more striking or at least would make you stop to read carefully:

GitHub profile comparison

A or B?

Do you now understand the importance of having a beautiful profile on such an important social network for programmers as GitHub?

Now yes, let’s begin 👇

Let’s start by creating the GitHub repository that will be established as a profile, for this we must create a new repository with your profile name and very important, add a README file.

Create profile repository on GitHub

Before starting to edit the file, I personally recommend that you do two things. One of them is to make a mental sketch or draw on a sheet or computer program, how you want your profile to look. You shouldn’t improvise on these things.

The second is that this part of GitHub is written in markdown, a lightweight markup language created by John Gruber that tries to achieve maximum readability and ease of publication both in its input and output form, drawing inspiration from many existing conventions for marking email messages using plain text.

If you don’t know how to use MarkDown I encourage you to do your first tests before starting to make this part. I leave you the definitive guide in Spanish and a video to expand even more 👇

Perhaps this goes by trends, I don’t know, but what has been commonly seen lately are badges (colorful boxes to show the technologies or certifications one has), and statistics.

For the first I leave you Badgen, Shields.io and a repository to practically copy and paste. Author: Ileriayo

For the second I leave you the repository where it’s explained and examples are shown to the letter! Author: anuraghazra

I’m going to leave my complete code below and then an image. I hope it serves as inspiration! 🤩

# Hi! I'm Fran! 👋🏻

Hola! my fullname is Francisco Juan Terroba Sánchez (fcoterroba on Internet)

I was born in 99 and right now I'm living in Malaga, Spain.

## Official Education 👨🏻‍🎓

2015-2017 | F.P.B. Informática y Telecomunicaciones. IES Belén, Málaga

2017-2019 | C.F.G.M. Sistemas Microinformáticos y Redes. IES Portada Alta, Málaga

2019-2021 | C.F.G.S. Desarrollo de Aplicaciones Web. IES Aguadulce, Almería

## Languages and Technologies 👨🏻‍💻

[Technology badges - HTML5, CSS3, JavaScript, Python, C, C++, C#, Java, PHP, Swift, Go, Markdown, React Native, Bootstrap, Django, Flask, GitHub, Azure, DigitalOcean, Firebase, Apache, MySQL, Raspberry Pi]

## Unofficial Education 🤓

2018: [Google Activate course badges]

2019: [Udemy and LinkedIn course badges]

2020: [Udemy and Código Facilito course badges]

## Statistics 🧐

![GitHub Stats](https://github-readme-stats.vercel.app/api?username=fcoterroba)

![Top Languages](https://github-readme-stats.vercel.app/api/top-langs/?username=fcoterroba&layout=compact)

## Look at me! 👀

[Social media badges - Website, Instagram, Twitch, Twitter, YouTube, LinkedIn, Stack Overflow]

Complete GitHub profile

I hope you liked today’s post, guys! Leave me in the comments what you thought of this design touch we’ve given to probably the most important social network in the world of programmers and also tell me what you’d like to see on the website! Tell me what posts or about what languages you’d like to read!

I also hope you have a great week and we’ll see you here soon! Greetings and remember to follow me on social networks like Twitter, Facebook, Instagram and LinkedIn. 🤟🏻