DEV Community: Matheus Justin Hasda

How I Made My First Open Source Contribution: A Beginner’s Guide

Matheus Justin Hasda — Mon, 16 Jun 2025 00:47:27 +0000

When I first wanted to contribute to open source, I was excited but also overwhelmed — What project should I choose? How do I even start? What are the exact steps?

After some research, I found the perfect beginner-friendly project called First Contributions that guides new contributors through the entire process. It helped me understand the open source workflow and successfully submit my first pull request.

Here’s exactly how I did it, step by step:

Fork the Repository
The first step was to fork the repository. Forking means making a personal copy of the project on my own GitHub account. This allowed me to safely make changes without affecting the original project.

Clone the Forked Repo Locally
Next, I cloned the forked repository to my computer with the command:

https://github.com/firstcontributions/first-contributions.git

Create a New Branch
Before making changes, I created a new branch to keep my edits separate from the main branch. This is good practice in git workflows:

git checkout -b branch-name

git switch -c branch-name

Edit the Contributors.md File
Then, I opened the Contributors.md file and

[My Name](https://github.com/username) Hello World! This is my first contribution to open source!

added my name to the list like this. It felt great to see my name alongside other contributors!

Stage and Commit Changes
After saving the file, I staged and committed my changes:

git add Contributors.md
git commit -m "Add my Name to Contributors list"

Push the Branch to GitHub
I pushed my branch back to my fork on GitHub:

git push -u origin add-myname

Create a Pull Request
Finally, I went to my forked repo on GitHub and clicked the Compare & pull request button. I added a short description and submitted the pull request.

What I Learned and Why It Matters
This simple process taught me a lot:

How to use basic git commands and branches
The fork-clone-edit-pull request workflow that powers open source
Gained confidence to contribute to other projects

If you’re new to open source and want to start contributing, I highly recommend trying out the First Contributions project. It’s beginner-friendly and walks you through every step clearly.

If you’ve made your first open source contribution, or have tips to share, please comment below! Let’s help each other grow.

Happy coding! 🚀

VS Code Extensions I Use as a Front-End Developer (and Why They Help Me)

Matheus Justin Hasda — Thu, 12 Jun 2025 21:23:57 +0000

When I started front-end development, I faced many small but annoying problems — messy code, slow browser reloads, forgetting to rename HTML tags, and more.
Over time, I found some great VS Code extensions that fixed these issues and made my coding faster and easier.
Here are the extensions I use regularly, why I use them, and the problems they solved for me:

Live Server
Problem: I had to refresh the browser manually every time I made a change, which was slow and boring.
Why I use it: Live Server reloads the browser automatically whenever I save my code. This helps me see changes instantly without extra steps.
Now, I just right-click my index.html and choose “Open with Live Server” — easy and fast!

Extenstion: Live Server

Prettier – Code Formatter
Problem: My code was messy and not consistent. Sometimes the indentations and spaces were all over the place.
Why I use it: Prettier formats my code automatically and keeps everything neat. I turn on “Format on Save” so it fixes code style every time I save.
Now my code looks clean and professional, even when I’m in a hurry.

Extenstion: Prettier

Color Highlight
Problem: I couldn’t see colors visually when I typed hex or RGB codes in CSS.
Why I use it: This extension shows the actual color next to the code, so I can quickly check if the color looks right.
It makes designing easier without needing extra tools.

Extenstion: Color Highlight

HTML to CSS Autocomplete
Problem: When I wrote CSS classes, I often forgot or misspelled the class names I used in HTML.
Why I use it: This extension suggests CSS classes as I type in the CSS file based on the classes in my HTML files.
It saves time and reduces mistakes when writing CSS.

Extenstion: HTML to CSS Autocomplete

Auto Rename Tag
Problem: I would rename an opening HTML tag but forget to rename the closing tag, causing errors.
Why I use it: This extension automatically renames the matching closing tag when I edit the opening tag.
It saves me from many small but frustrating HTML bugs

Extenstion: Auto Rename Tag

Path Intellisense
Problem: I often forgot the exact file paths when importing images or components, leading to errors.
Why I use it: Path Intellisense suggests file paths inside the project while I type, so I don’t have to remember or guess.
Now, I avoid typos and broken links easily.

Extenstion: Path Intellisense

Bracket Pair Colorizer 2
Problem: When I had many nested brackets {}, (), or [], it was hard to know which one matched which.
Why I use it: This extension colors matching brackets with the same color, making it easy to understand nested code.
It helps me read and debug code faster without confusion.

Extenstion: Bracket Pair Colorizer 2

Thoughts
These are not just random tools — they are extensions that fixed real problems I had while learning front-end development.
If you want to improve your workflow and avoid the mistakes I made, try these out. Start with a few, and add more as you go.
And if you know any other helpful extensions, please share them with me! I’m always eager to learn.
Happy coding!

Fun Front-End Development Tricks for Beginners

Matheus Justin Hasda — Wed, 11 Jun 2025 23:32:16 +0000

Front-end development is all about building the parts of websites and apps that users see and interact with. If you’re just starting out, here are some cool tricks and tips that will make your learning journey easier and more enjoyable!

Use Browser DevTools Like a Pro
Your browser’s developer tools (DevTools) are your best friends as a front-end developer. Here’s what you can do:

Inspect elements: Right-click any part of a webpage and select “Inspect” to see the HTML and CSS behind it.
Live editing: Change CSS styles directly in DevTools and see the effect instantly.
Debug JavaScript: Use the Console tab to test snippets of JS code or find errors.

Try this: Open DevTools on your favorite website and play around with the styles!

Master the Power of CSS Flexbox
Flexbox helps you create flexible, responsive layouts easily without using complicated floats or positioning.

Use display: flex on a container.
Align items horizontally or vertically.
Easily create menus, grids, or center content.

Tip: Use Flexbox Froggy — a fun game to learn flexbox.

Use CSS Variables for Easy Theming
Instead of hardcoding colors and sizes everywhere, use CSS variables:

:root {
  --main-color: #3498db;
  --padding: 16px;
}

button {
  background-color: var(--main-color);
  padding: var(--padding);
}

This makes it easy to change your whole site’s theme by just tweaking variables!

Responsive Design with Media Queries
Your site should look great on phones, tablets, and desktops. Use media queries:

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

This changes styles when the screen is smaller than 600px.

Use Placeholder Content While Loading
To improve user experience, show placeholder boxes or loading animations before content loads. This helps users know something is happening.

Example: Use CSS animations with @keyframes to create shimmering placeholders.

Use Online Tools to Speed Up Your Work

CodePen or JSFiddle: Quickly test HTML/CSS/JS snippets online.
Can I use: Check browser support for CSS or JS features.
Google Fonts: Add beautiful fonts easily.

Bonus Tip: Keep Your Code Clean and Commented
Write neat code and add comments to explain tricky parts. It helps you and others understand your work later!

Final Words
Front-end development is super fun and creative. Try these tricks one by one and watch your skills grow. Happy coding!