This is Anusha

I create responsive websites.

Blog

How I use GitHub Project Boards to Organize My Projects

 

There are many things GitHub Projects can do, but currently I think I only use the basic functions GitHub Projects can offer. I’ll update how to use them if I get to try them later. Here is my GitHub project boards.

 

Why and Preparations

Since my first attempt to make my Taiwan Hikes didn’t work out well, I’ve decided to start it all over again. I’ve spent more than 3 months, painfully and slowly, and it took me a while to decide to start from scratch again. It's disheartening to ditch the one you’ve been working so long, but I also have to admit that the layout and structure are not to my liking anymore. Therefore, I've decided to give Taiwan Hikes an overhaul, from the page layout, code structure, to using much a simpler development environment.

GitHub project boards

1. Set up the goals and purposes for your projects

I enjoy hiking a lot and hiking is the thing I still keep after I decide to spend my time learning how to code. I was also doing some small coding projects, but most of them ended up in the project cemetery.

One day, I came across some English websites about hiking adventures in Taiwan and realized that some major domain names about Taiwan hiking or adventures were already taken. It was not surprising that those are being taken, but what surprised me was those were not taken by local people but by people from other countries. There is nothing wrong with it, and this shows that Taiwan’s nature is appreciated by people around the world. But as a Taiwanese and an avid hiker, this made me feel disappointed. Then suddenly, an idea struck me: why don’t I make a website to promote hiking in Taiwan by using my coding skills? And I am determined to make this website live.

2. Decide sitemap, layout designs and ask Twitter for help

I’m no designer and trying to design a decent website layout is so difficult. The thing I learn from making my own personal website is to find the templates you like and try to customize to suit your needs. I didn’t do it this way for my first version of Taiwan Hikes, and I just put whatever I thought was good and those I learned from tutorials together. There are still some good features from my first one, but I want a really simple layout as much as I can this time.

Figma

After some research, I found the one I like and I start doing the layout. I use Figma to do the layout markup. Thanks to a Twitter friend, Joeylene, I got to know this wonderful tool and learn how to use it, which makes making layouts so easy. With Figma, you can do more about designing the wireframe and collaboration with other people, but I haven’t fully understood how to take advantage of Figma’s wireframe functions, so I skip this step for now, hoping I won’t regret too much later. Then, I post the drafted layouts on Twitter to ask what people think about my previous and new layouts. Some people still like the first one from the UI’s point of view. So, I modified my layouts again and combine some from the first version with the current ones. Thank you, Twitter fam!

3. Break down the project sections and document them on your GitHub project board

Making a website, including designing the layout, writing the content, etc., is a daunting task. When I first started, it took me a while to get started because I didn’t know how. I still don’t know how, but it seems it takes a little bit less time for me to pull things together for the second version. Here is the process I'm doing for the overhaul of this project. Please note that this is just how I do it after the layouts are done, and it suits my current situations. I definitely will refine the process for the future projects.

GitHub project boards
1) Learn basic Markdown

Markdown is relatively easy to learn compared to other programming languages. I don’t think you have to memorize those. If you forget something, just Google it or come here to check.

2) Add functions/interactions after the layouts are done

I first put those things down on papers. Then I put those on Office Word (or Google Docs if you prefer) and sort out things I want the website to have now and later. For example, I’d like to have a quiz about the country size comparisons, but this feature is not the first priority so it can wait. There are some crazy ideas I want to put on Taiwan Hikes, but I don’t want to overwhelm myself. The thing I learn is to focus on the most important thing, which is to get this website presentable as soon as possible.

3) Set up the website structure in columns and cards on the project board

Go to your repository, check the menu and you will see Projects. Project boards on GitHub use Kanbans, just like Trello, to manage your projects. There are several template options for you to set up a project board. You can check here for more details. I don’t use Trello so I can’t compare those two tools. It doesn’t matter which one you use or prefer. I think the main point is you have a tool or something as simple as papers to help you monitor and manage your projects, and keep things going smoothly as possible. Since I use GitHub a lot and project boards there come quite handy for me to check from time to time.

I designate the first column as Site Structure, where I put sitemap, basic elements through those pages, and a simple structure on cards under this column as reminders. Then I make several columns for those pages, like Homepage, About, Trips, etc. For each page, I break up each page’s features/elements/sections furthermore and put them on each card. Based on my previous experience, I got lost and changed the structure a lot, which was a bad idea. It felt like I spent forever on writing the code for the homepage and it made me feel defeated.

GitHub project boards

I think putting the sitemap is important because it can remind myself of how many pages I have to work on. It may seem a lot in the first place, but after you break down those sections and you will realize most of them are repeated elements and the most important things other than those is to create the content, which is a different story related to marketing, SEO, etc.

4) Set up a To Do List for each page

After the homepage sections are broken down, it’s much easier to organize what you have to do with the rest of the pages. I only put unique features on each page on the To Do List columns. The To Do List for each page seems much smaller and I have to admit that I am a little suspicious that I might miss something out. But the good thing about using tools like GitHub project boards is you can always put something back if you forgot them. However, I have to refrain myself from adding new features like those mistakes I made last time.

GitHub project boards

4. Start coding and tracking your progress

Once the planning and preparation are done, you can start coding. There are some default columns like In Progress and Done on project boards for you to track. You can always customize your those to meet your needs. Currently, I’m working on my Homepage, so I drag it from To Do List to In Progress column. I am the only person who is doing this project, and I don’t use some GitHub Projects functions like Issues, etc., so far. If you work with a team, perhaps you can explore more about how much project boards on GitHub can help you.

To sum up, it is important and helpful to break down your projects into smaller ones, visualize them, and continue to track your progress. Happy coding.