![cover-img](https://project-assets.showwcase.com/1420x/38867/1667991133171-GitHub%2520Profile%2520Readme.png?type=webp)
How to make an Awesome GitHub Profile
9 November, 2022
7
7
0
Contributors
What is a Portfolio?
How to Start?
![img](https://i.imgur.com/UtKFerk.png)
What is GitHub Profile Readme?
How to make the Profile Readme?
![img](https://i.imgur.com/iUfDKFt.png)
![img](https://i.imgur.com/IikvxCa.png)
![img](https://i.imgur.com/8KC8ZQr.png)
How to make my Profile Readme beautiful?
Learn MarkDown
Add Basic Sections
•
•
•
•
•
•
1.
2.
![img](https://i.imgur.com/Dtu5V4p.png)
How to align text or images the way I want?
align
HTML property to do so.![img](https://i.imgur.com/wMtJKSA.png)
h2
tag is having a align
property whose value is center
, this makes the quote come in the center. Then inside the h2
tag, there is a p
tag which is also having an align
property, but it is right
and therefore the text inside the p
tag is on the right
side. You can notice I have used an em
tag to make it italic.![img](https://i.imgur.com/8ZI081f.png)
How to change the size of an image?
img
tag for that. Just use the width
attribute to set a custom size like 200px
, 20%
, or something.![img](https://i.imgur.com/Ims1RZP.png)
width=”150px”
part.How to Add Cool Icons?
![img](https://i.imgur.com/bq86skX.png)
label
is not required, so you can leave it blank and write the Text you want on the Badge in the message
input. You can select your desired color from the color
dropdown. After that, click on the Make Badge
button and a new tab will be opened that will have your custom badge. To use this custom badge, simply copy the URL of the badge and use it as the source of an image, you may use MarkDown or HTML syntax for the image.![img](https://i.imgur.com/rSYhqPf.png)
src
attribute of an img
tag. Now that img
tag is inside an anchor
tag, which means that the image is a link, and whenever somebody clicks on that image, which is basically my custom badge, that person will be redirected to my Twitter Handle. (target=”_blank”
makes the link open in a new tab and not in the same tab)![img](https://i.imgur.com/iPSKcg6.png)
img
tags, each of them is inside an anchor
tag, and the whole stuff is again inside a paragraph
tag which is aligned in the center
, so all the badges are aligned in the center in the same row. (
is an HTML entity. It is a non-breaking space, it is a space that will not break into a new line. Two words separated by a non-breaking space will stick together and not break into a new line)src
attribute of img
tags, they have some custom properties. By default the custom badge looks pretty ugly, you may leave it like that if you want, but styling them enhances the look. To know how to style the badge, read the STYLES Section of Shields.io.![img](https://i.imgur.com/SVmaLUb.png)
How to Add Cool GitHub Stats?
Extra Tips
•
---
(3 dashes). It looks great. You can also use <hr>
HTML tag for this, an advantage of using the HTML tag is that you can change its width!•
id
to the heading. After that, you can create a link that has its URL as the id of that heading. For example, <a href=”#heading”> A Heading </a>
will send you to an element whose id
is heading
. To give an id to a heading → <h2 id=”heading”> This is the Heading </h2>
.•
•
•
•
Be Creative!
Summary
•
p
, h1
-h3
, span, and put the align
property inside it and give the desired value (left
, center
, or right
).•
img
tag and use the align property, but it will work only for left and right values. To center the image, you need to put the image inside another HTML tag like p
, h1
-h3
, or span
, and then put the align
property inside them with the center
value. This will center the image.•
img
tag and use the width
attribute to set a custom size.•
•
•
markdown
web
github
html5
developer
development