Hacktoberfest!! My first small contribution to Open Source
Published: 2020-10-12 17:15:44

##Getting start
2020 Hacktoberfest season! As an active learner and open source development student dreaming a future developer, I decided to fix some bugs or add new features to the projects on Github. I found great project in there like [Next.js](https://github.com/vercel/next.js), [Freetube](https://github.com/FreeTubeApp/FreeTube) and other more. I tried to do some commit to these huge projects, but it was too challenging for me. So I rather decided to pick up a relatively small project but still looking for help. 

Thankfully, [Pettnaut](https://github.com/pettnaut/frontend-code) needed some help from me to update the UI of this project. I have couple times of coding with React.js, so it was a great chance to start my first contribution. 

##Issue!
He wanted to update the header UI, specifically ["Fix Header styles"](https://github.com/pettnaut/frontend-code/issues/17). So I left a message that I would like to work on it. Couple minutes later, he kindly replies "why not? go ahead please!."

__He wanted this change__
![](https://user-images.githubusercontent.com/35740463/95132044-bf062480-0724-11eb-995e-ade1aeb44978.png)
__to like this__
![](https://user-images.githubusercontent.com/35740463/95133102-633c9b00-0726-11eb-8759-62fcc4755d55.png)


##Feature #1 _Change the background color for this one: #5D34AF_
The first change was super simple, all I needed to is changing the color of the background.
```
.header {
    background-color: blueviolet; // old  
    background-color: #5D34AF;   // new
```

##Feature #2 _Add Pettnaut's logo at the beginning._
It was little tricky, the project used react-bootrap, so I needed to read the documentation first. Also, when I added logo on the navbar, the each list was not horizontally align. So, I did this step by step. First I simply added logo to the navbar. 
```
import logo from '../../assests/logo.svg'
...
<Nav.Link className="item-logo" href="/home"><img alt="logo"
 className="mr-3" style={{maxHeight:'30px'}} 
 src={logo} />Pettnaut</Nav.Link>
```
Then, I removed the given padding for this Nav element. And give `text-align;` and `line-height;` to properly adjust the position. 
```
.nav-link {
    padding: 1.5rem 1rem !important; // removed
    color: #ffffff;
    height: 100%;
    text-align: center;
    line-height: 30px;
}
```
More info is [here](https://github.com/pettnaut/frontend-code/pull/19/commits/99457b8e70cbd4614e2b9a2f00e7c866384cab77)
##Push this commit
`git checkout -b issue-17` then 'git add <changed files>' `git commit -m "fixex issue-17 add logo change color"` made a commit.
After review the output and code again. I decided to make a [PR](https://github.com/pettnaut/frontend-code/pull/19)

After a day later, we merged this commit! That was my small but great experience in "first contribution to open source project"

##Next step
I will not be satisfied with this. I am going to participate hacktoberfest more! and try to learn a new stuff and make a great contribution to real world application in this season. 

I am looking for some great issue that I can handle, please let me know if there is "good-first-issue"!