CSS Study Progress Tracker and Roadmap Notion Template
Tags: webdev, beginners, css, html
Published: 2022-03-08 19:19:05

It's been a while since a posted anything because, you know, life gets in the way, **I got married**, and stuff 😂. But I didn't forget about what I `promise`, and I want to `resolve` it right now (wink, wink).

I have finished my **CSS study progress tracker Notion template** and I want to share it with you! Before continuing, if you haven't got the **HTML** version of this template, you can take a look at it [here](https://dev.to/colocodes/html-study-progress-tracker-notion-template-19h4).

## A quick look at the CSS study template

![CSS Study Template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0bxaivt9nen6rdixy5c.png)

In this Notion template, you will find a progress bar that automatically updates whenever you check a topic as completed, **73 CSS topics** classified in three difficulty levels (initial, medium and advanced) and divided into 19 topic groups (ranging from Animation to Layout and Responsive Web Design).

![CSS topics](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l3f6help6vklh54bdqaj.png)
 
Each topic has a link to an online source discussing it (usually Mozilla Development documentation), and space for you to take notes on it.

![CSS topic detail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3pdrc3xc2u1fckz42eg.png)
 
As always, feel free to modify this template and adapt it to your needs.

## How to use the template

Once more, I wanted to create a template that is easy to use and leave room for you to tweak it as you see fit. The steps to add a new topic (on top of the 73 already there), and mark it as completed once it has been studied is simple:

### Step 1: add a new topic
Add a new topic to the "CSS topics and roadmap" database (you can do this on any of the two pages of the template), choose the level, its group, and its order.

![Add a new topic](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qep1edise7apa95d70zj.png)
 
But most importantly, choose the corresponding related value in the "Related to Progress (Property)" (don't worry, there is only one). This will link this database with the progress bar tracker.

![Linking topic with progress bar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gy9a52uu4uqrzda270b.png)
 
### Step 2: add notes to the topic

Each of the 73 topics I have shared has a link to an [MDN](https://developer.mozilla.org/en-US/) page with explanations for that topic.

I encourage you to use this topic page to create your "repository" of notes about it.

### Step 3: making progress

Once you are happy with how much do you know about a certain topic, you can click the checkbox under the "Completed" column to mark the topic as learned. This will trigger an update on the progress bar, and it will grow accordingly, thus measuring your progress automatically.

![Making progress](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/efx3m5ht2h3rhvscj9bl.gif)

### Step 4: customisation

As I said before, you can customise the template as you like. Something I'll do is hide the "Completed" and "Goal" columns of the **Progress** section to make it more minimalistic.

![Customise](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/upq7i0png2gnh4uc7eb8.png)

## Getting the template

🤷‍♂️ - "This is all good and all, but Damian, where can I get the Notion template?"

😅 - Grab your mouse and smash this link: [download CSS Study Progress Tracker Notion Template](https://damiandemasi.gumroad.com/l/lzbyj) 

The template is totally free, but I present you with the option of paying any amount you like for it so I can keep investing my time and effort into creating this kind of content for you 😊.

## Final words

Please, let me know in the comments section what do you think about this template, as I would love to improve it. I'm also working on a **Role Playing Game (RPG) quest-based** template to keep us **motivated** during our learning progress, so consider subscribing to my newsletter to get a notification when it's out (and maybe some ideas about what you would like to include in it)!

Cheers!

---

🗞️ **NEWSLETTER -** _If you want to hear about my latest articles and interesting software development content, [subscribe to my newsletter](https://mailchi.mp/22b236f812b1/subscribe-to-newsletter)._

🐦 **TWITTER -** _Follow me on [Twitter](https://twitter.com/DamianDemasi)._


<a href="https://www.buymeacoffee.com/damiandemasi" target="_blank"><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1641530738382/Wt_2bHGsXK.png" alt="Buy Me A Coffee" style="height: 40px !important;"></a>