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, 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 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". 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
to like this
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
Push this commit
git checkout -b issue-17 then 'git add ' 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
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"!
Top comments (0)