Table of contents
- Why create a developer website?
- TL;DR
- Step 1: Create GitHub Repository
- Step 2: Setup Project Structure
- Step 3: Create the HTML layout
- Now Add Widgets…
- Step 4: Add Summary Widget
- Step 5: Add the Activity Widget
- Step 6: Add the Skills Chart Widget
- Step 7: Add the Portfolio Widget
- Step 8: Add the Work Experience & Education Widgets
- Step 9: Deploy To Netlify
- Your shiny, new developer website
Why create a developer website?
Do you know that feeling when you have to leave the “personal website” input field blank on a form? For many developers creating a personal website is a hard task. There might be several reasons, “I have no time for it”, “I am a backend developer”, “I am still junior, I have nothing to write on my website”. In other words, this is an area where you might need help or automation, or both.
Good news: it’s actually one of the ways you can use CodersRank. Our goal is to help you establish your presence a professional. So we created this simple guide to walk you through the steps.
How about creating a website that’s free and automatically updates itself with your new projects and accomplishments via widgets? Sounds good, right? What if I said that it will take less than 60 minutes to create it (15 mins if you’re advanced)?
Not bad!
You will only need a Github, Netlify and a CodersRank developer account to follow along the tutorial.
TL;DR
Step 1: Create GitHub Repository
Firstly, we need to create new repository on GitHub.

I called my repo “personal-website-with-widgets“.
After this is done, we need to clone it locally. Open the terminal and type:
$ git clone https://github.com/GITHUB_USERNAME/REPO_NAME.git
In my case it was
$ git clone https://github.com/nolimits4web/personal-website-with-widgets.git
This command will clone repository to personal-website-with-widgets
folder.
Step 2: Setup Project Structure
Next, when we clone a repository locally, we need to setup a website structure. Create the following files and folders in the repository folder:
personal-website-with-widgets/
public/
i/
index.html
main.css
where:
public/
– main folder for our website contenti/
– folder for storing images (profile photo, social icons)index.html
– HTML content of our websitemain.css
– our website’s stylesheet
Step 3: Create the HTML layout
I have a pretty simple web page structure in mind so it should contain the following:
- header – main information about me with my photo, name and social links
- widgets – CodersRank widgets with my coding stats, portfolio, work experience and education
Let’s create the appropriate HTML layout.
In our public/index.html
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vladimir Kharlampidi - Front-end Developer</title>
<!-- Link our CSS stylesheet -->
<link rel="stylesheet" href="main.css">
</head>
<body>
<main>
<header>
<!-- Header content with avatar and basic info -->
</header>
<section>
<h2>My Coding Activity & Stats</h2>
<!-- Summary widget -->
<!-- Activity widget -->
<!-- Skills chart widget -->
</section>
<section>
<h2>Recent Projects</h2>
<!-- Portfolio widget -->
</section>
<section>
<h2>Work Experience & Education</h2>
<!-- Work experience widget -->
<!-- Education widget -->
</section>
<footer>
<!-- Generic footer copy -->
</footer>
</main>
</body>
</html>
Now Add Widgets…
It is time to integrate the widgets. We already wrote about our 6 new widgets but in this post, I will walk you through the setup step-by-step.
Right now, after I added my header and footer code with some basic styles added to main.css
the website looks like this:

Step 4: Add Summary Widget
First, we start with the Summary widget:

This widget contains your profile photo, name, worldwide ranks and rank badges.
To integrate the widget we need to:
- add script with widget web component to our page (right before closing
</body>
tag:)
<body>
<!-- ... -->
<script src="https://unpkg.com/@codersrank/summary/codersrank-summary.min.js"></script>
</body>
- add widget HTML tag to your page with our CodersRank username:
<codersrank-summary username="nolimits4web"></codersrank-summary>
And this is what we have:

Not very impressive, and this doesn’t really fit into our design concept. Thankfully it is possible to customize CodersRank widgets.
Because i already have my profile photo and name in website header, we need to remove the header from widget:
<codersrank-summary
username="nolimits4web"
show-header="false"
></codersrank-summary>
And we need to use CSS Variables (CSS Custom Properties) to apply custom styles to widget. For example, we can add the following styles to our main.css
stylesheet:
codersrank-summary {
--bg-color: transparent;
--badge-bg-color: #161616;
--badge-text-color: #fff;
--badges-padding: 0px;
--badge-padding: 8px;
--badge-margin: 16px;
--badge-border-radius: 8px;
--badge-rank-font-size: 16px;
--badge-technology-font-size: 18px;
--badge-location-font-size: 16px;
--badge-icon-size: 32px;
--badge-border: 1px solid rgba(0, 0, 0, 0.1);
--badge-box-shadow: none;
}
Now we have much better look that fits perfectly into our design:

Step 5: Add the Activity Widget
Next one is the Activity widget:

Yes, it looks almost the same as the activity chart on your GitHub profile, but unlike the GitHub activity chart, the CodersRank activity chart also counts GitLab activities, commits to private repositories and StackOverflow activity.
To integrate the Activity widget we need to:
- add script with widget web component to our page (right before closing
</body>
tag:)
<body>
<!-- ... -->
<script src="https://unpkg.com/@codersrank/activity/codersrank-activity.min.js"></script>
</body>
- add widget HTML tag to our page with our CodersRank username:
<codersrank-activity username="nolimits4web" legend="false" labels tooltip step="5" ></codersrank-activity>
With extra attributes we:
- disabled legend below the width (
Less ... More
) - enabled chart labels (months and day of the weeks labels)
- enabled tooltip
- set
step
to5
, which is number of activities for division by colors
This is what it looks like:

Some CSS magic:
codersrank-activity {
padding: 8px;
border-radius: 8px;
background: #161616;
--bg-color-0: #111;
--bg-color-1: rgba(var(--theme-color-rgb), 0.25);
--bg-color-2: rgba(var(--theme-color-rgb), 0.5);
--bg-color-3: rgba(var(--theme-color-rgb), 0.75);
--bg-color-4: rgba(var(--theme-color-rgb), 1);
--label-text-color: rgba(255, 255, 255, 0.54);
}
And here we go:

Step 6: Add the Skills Chart Widget
Next one is the Skills Chart widget:

This chart shows how your scores have grown over the past few years, broken down by programming language.
Similarly as with other widgets, to integrate the Skills Chart widget we need to:
- add script with widget web component to our page (right before closing
</body>
tag:)
<body>
<!-- ... -->
<script src="https://unpkg.com/@codersrank/skills-chart/codersrank-skills-chart.min.js"></script>
</body>
- add widget HTML tag to our page with our CodersRank username:
<codersrank-skills-chart
username="nolimits4web"
labels
tooltip
skills="JavaScript,CSS,Less,Vue,Svelte,TypeScript,CSS,HTML"
svg-width="1120"
svg-height="400"
></codersrank-skills-chart>
With extra attributes we:
- enabled chart labels (chart axis with dates)
- enabled tooltip
- specified
skills
we want to display on the chart - set generated svg render width and height to fit better into our design
In addition, a bit of extra CSS:
codersrank-skills-chart {
--label-text-color: rgba(255, 255, 255, 0.54);
--chart-bg-color: #161616;
--chart-border-radius: 8px;
--axis-bg-color: transparent;
--label-font-size: 12px;
}
And the result:

Step 7: Add the Portfolio Widget
To showcase the projects I am working on or proud of, I will use the Portfolio widget.

Integrate the Portfolio widget:
- add script with widget web component to our page (right before closing
</body>
tag:)
<body>
<!-- ... -->
<script src="https://unpkg.com/@codersrank/portfolio/codersrank-portfolio.min.js"></script>
</body>
- add widget HTML tag to our page with our CodersRank username:
<codersrank-portfolio
username="nolimits4web"
grid
company="false"
></codersrank-portfolio>
With extra attributes we:
- enabled grid layout
- disable displaying company name in portfolio item
And this is what we initially get:

Some extra styles to match our design and colors:
codersrank-portfolio {
--grid-columns: 2;
--item-bg-color: #161616;
--item-border-radius: 8px;
--item-spacing: 16px;
--item-padding: 16px;
--logo-size: 64px;
--tag-bg-color: rgba(255,255,255,0.075);
--link-text-color: var(--theme-color);
--link-bg-color: rgba(255,255,255,0.1);
--link-hover-bg-color: rgba(255,255,255,0.125);
--link-active-bg-color: rgba(255,255,255,0.075);
--link-border-radius: 8px;
--link-padding: 4px 8px;
--link-text-transform: none;
--link-font-weight: 500;
--link-margin: 8px;
}
Now it looks much better:

Step 8: Add the Work Experience & Education Widgets
Finally, we can add the following widgets to complete our developer website:

and Education widget

As with other widgets, integrate the Portfolio widget first:
- add script with widget web component to our page (right before closing
</body>
tag:)
<body>
<!-- ... -->
<script src="https://unpkg.com/@codersrank/work-experience/codersrank-work-experience.min.js"></script>
<script src="https://unpkg.com/@codersrank/education/codersrank-education.min.js"></script>
</body>
- add widget HTML tag to our page with our CodersRank username:
<codersrank-work-experience
username="nolimits4web"
logos
></codersrank-work-experience>
<codersrank-education
username="nolimits4web"
></codersrank-education>
A pinch of CSS styles:
codersrank-work-experience,
codersrank-education {
--item-bg-color: #161616;
--item-border-radius: 8px;
--item-spacing: 16px;
--item-padding: 16px;
--logo-size: 64px;
--tag-bg-color: rgba(255,255,255,0.075);
}
And here we go:

Step 9: Deploy To Netlify
Our website is ready and it is time to deploy it.
As our website is fully static and doesn’t require any build pipeline, it can be deployed to absolutely any server that can serve static files.
In my case i will deploy it to Netlify. It has great free plan and can automatically deploy from GitHub, exactly what we need.
Firstly, we need to push our local website to GitHub. In terminal (in local repository folder) run the following:
- Commit change we made
$ git commit . -m "My website"
- Send them to GitHub
$ git push
Next, we need to create an account on Netlify (if you don’t have it yet).

After that (when you logged in), there is a “New site from Git” button in your dashboard:

On next screen choose to deploy from GitHub:

It will prompt you to authorize Netlify on Github and move to the next screen where you need to choose the repository to deploy from:

It will open deploy settings. In “Publish directory” we need to type our website folder – public
. And click on “Deploy site” button.

After that it will create a project, deploy it and show the live link:

And here comes our website live at personal-website-with-widgets.netlify.app.
It’s mobile-friendly (which is something tech recruiters check when reviewing your portfolio) and the widgets will take care of all the info updates while you sleep.

Your shiny, new developer website
In conclusion, it is really easy and fast to create a personal developer website with CodersRank widgets. Such a website can serve as a personal portfolio, or a good fit as online CV for job seekers.
If you don’t want to go through the whole tutorial from scratch, you can start by forking my personal-website-with-widgets repo and just customizing it.
If the amount of data or appearance of widgets is not enough for you, you can go with totally custom solution using official public CodersRank API.
2 Comments
Nice Job. It helped publish my first personal website. It’s not much yet, but I plan to enhance it in various ways. Next task is to use the CodersRank APIS so that I can fully customize it. Have a look: http://www.kleanthismitsioulis.com
Great post. I really enjoyed reading this. I’ll make sure to share with my friends.