I recently started doing something new — writing a work log.

Some people call it a brag document, others call it a monthly reflection, but to me, it felt more like journaling my wins, bugs, lessons, and breakthroughs. And I have to say: I’m officially hooked.

✨ Why I Started This

I’ve always worked hard on coding projects — Tailwind, HTML, Sass, Next.js — but I never took the time to pause and document what I was building.

Until now.

Inspired by the idea of tracking progress like “mini sprints,” I decided to break my work down weekly and keep logs of everything I worked on. Not only did it help me stay organized, but it also gave me a sense of accomplishment I didn’t expect.

Here’s what I’ve been up to.

🚀 Current Work

Project: Tailwind CSS, Semantic HTML & Sass Practice

This week was all about diving deep into Sass (SCSS) and exploring how to make styles reusable and cleaner.

🔧 What I Worked On

Practiced Sass features through multiple files:
- @debug output logs (0-debug_log.scss)
- SCSS variables for color styling (1-color_variable.scss)
- Nested declarations (2-nested_tag.scss)
- Reusable margin mixins (8-mixin_margins.scss)
Installed Sass on Windows via npm install sass
Documented every step of the installation process in 0-installation-script
Debugged a failed install attempt for sass@3.7.4 and learned about version compatibility

📝 What I Achieved

Updated the project README to include:
- Windows-specific Sass installation
- My learning objectives
- Updated project folder structure
- All the new .scss files I created

💡 What I Learned

How mixins can reduce repetition
The difference between @debug and @warn
How useful a good README is (not just for others, but for myself!)

📅 Week of July 1st

Project: Tailwind CSS & Semantic HTML Practice

This project was all about responsive layouts and accessibility. I started with plain HTML5 and ramped up to a responsive UI with Tailwind utility classes.

👩🏽‍💻 What I Worked On

Set up Tailwind CSS via CLI
Created a custom tailwind.config.js, input.css, and compiled output.css
Built layouts using:
- Grid (grid-cols-3, nested grids)
- Flexbox (flex, lg:flex, w-1/3)
- Combined grid + flex for responsiveness
Designed a responsive image gallery (w-full, h-48, object-cover)
Wrote a semantic HTML blog using:
- <header>, <main>, <article>, <footer>
- ARIA roles and labels for accessibility

📌 Achievements

Documented the entire process in a detailed README
Practiced using Tailwind’s mobile-first responsive utilities
Reinforced the use of semantic tags for SEO and accessibility

Bonus Project: Next.js App – alx-listing-app

This isn't my first Next.js project, but it's the first one I’ve ever documented in a different way — outside of a README file. That made it feel a bit more official and reflective.

📦 What I Built

Attached assets from a Figma design to the public/assets folder
Encountered Tailwind config issues and resolved them by manually configuring the tailwind.config.js
Built and pushed key reusable components:
- Card.tsx and Button.tsx in components/common
- Defined interfaces (CardProps, ButtonProps) in interfaces/index.ts
- Created constants/index.ts for reusable data like API URLs

✅ Result: A clean, reusable codebase scaffolded for an ALX listing platform.

✅ Peer Review Participation

I also did two peer reviews as part of my learning journey:

🗓️ Wednesday, July 2nd
🗓️ Saturday, July 5th

It was insightful reviewing other people’s code — it sharpened my own eye for structure and best practices.

🌱 Final Thoughts

I can’t believe this was my first ever work log. Writing it out made me reflect, celebrate small wins, and actually feel how far I’ve come in just a short time.

If you’ve never written a work log before — I highly recommend it. Whether you call it a brag list, a learning journal, or a career journal, it’s such a powerful habit. And the best part? It becomes your proof of progress, even on days you feel stuck.

📝 Want to Start Your Own?

If you’re curious to begin your own brag doc or work log, here are some awesome templates to get started:

📄 Reuse the template from Gergely Orosz, founder of The Pragmatic Engineer newsletter:
👉 View the Google Doc template

📄 Copy the reflection template by Julia Evans, senior software engineer and blogger:
👉 Use her template here

✍🏽 Tracy Karanja
Frontend Developer | Tech Enthusiast | Lifelong Learner

💻 My First Work Log (Brag List!) — And Why I’m Hooked