How to style your GitHub page, who said backend engineers can’t style again? 😋
Having a GitHub that seperates you from the rest is great. It allows recruiters to easily understand you, just like a CV and they are able to manoeuvre around your GitHub better.
I’m a software engineer, focusing heavily on back end development. I suffer with cluttering, not just my GitHub, but also my files. Even though I understand where everything is, someone else wouldn’t be able to manoeuvre around my files. I struggle daily with representing anything visually, so doing this allowed me to showcase my skills visually too. I think it turned out pretty great!
I will teach you how to create a repo, add images, add icons, add social media handles and much more!
Lets get started…
Create a GitHub repo under your GitHub username and add a README file:
The reason it is red is because I already have one created under my username ‘asiasharif’, as you can see github will tell you it’s a special repo and it will add a readme file. A mini template already done for you:
- Git clone the repo once it is made and pull the repo locally.
- Open it in an IDE — i prefer Visual Studio Code.
- Start editing the README file!
How to add links and images:
You can add a link to another page by following this code below— 💁🏽♀️
“Mentoring software engineering students with [Coding Black Females](https://codingblackfemales.com/) and [Black Girls In Tech](https://www.blackgirlsintech.org/”
Images — create a images folder in VS Code and add the relevant images in there and to make an image a link copy the code and alter it to the url you need:
<a href=”https://github.com/asiasharif/CodeFirstGirls-Nanodegree-Project"> <img src=”images/FilmNow.jpeg” width=”300px”> </a>
How to add Emojis and Language Icons:
How to add social media icons:
- Download the image icons that you’d like to use.
- Add it to your images folder.
- Implement a link within the image and you can style using CSS within the html:
<a href=”https://www.linkedin.com/in/asia-sharif-60616b150/"><img src=”images/linkedin.png” alt=”alternate text”width=”30px”></a>
How to add language stats:
Here’s my code if you want the same stat card as mine:
[](https://github.com/asiasharif)
Well that’s it…
I hope this helps you all style your GitHub pages how you’d like to style them! Don’t forget to tag me and show me your pages when it’s done! Excited to see everyones pages 😁
Feel free to connect with me on social media:
My inspiration came from…
