During the circuit breaker, a lot of school activities were cancelled, including all the services, all activities, all sport trainings and also all of the outdoor exercises. The school has encouraged us to be active do more exercises at home. I did, but to me now a day is filled with academics and intensive sport exercises. I don’t hate either of these, but following repetitive routines like this throughout the whole circuit breaker will obviously be quite boring. Fortunately, there was one activity that was still carrying on — the NYAA project.
NYAA stands for National Youth Achievement Award. In order to achieve the award at the end of the school year, we were required to spend a specific amount of time on both services and sport activities at school. At the same time, we will need to go on a 3-day expedition to Perth, Australia in March or April.
In order to get prepared for the expeditions, we practiced how to make a tent, how to use a compass, how to cook and what to do during emergencies. We did training at both lunch time and afterschool. We even prepared for a training weekend in which we would trek on the beaches of Singapore then stayed at school overnight in order to prepare for the situations in Australia. However, not long after the outbreak of COVID-19, I found this in my email inbox:
“Following on from the emails that you have received regarding the cancelation of all expeditions until August 2020, we hereby confirm that the Silver Training Weekend #2 (14th to 15th February) and NYAA Silver Expedition to Australia are both cancelled.“
I was feeling really disappointed when I read about this, but after all going to Australia was indeed quite risky. Looking back now, that was indeed a wise decision. It was amazing how the school made the decision so early and stopped us from packing for the expedition. This has saved me a lot of unnecessary time and effort.
So well, the expedition was cancelled, what about the award? Fortunately, the organisers of NYAA had came up with a solution — instead of doing the expedition, we could choose to do a project of any kind in our groups to achieve the award. After lots of discussions, we came up with a general plan.
In our project, we aim to raise awareness on illegal animal trade through art with a viable solution represented through a website which will include information such as, why, statistics and alternatives / ways to help to raise awareness on the issue.
There were 4 people in my groups; two were doing art, which was going to be a large oil painting, and I partnered up with a classmate and we planned make the website together. However, since my partner was applying for a high school in the United States and was busy working on the paperworks, I started on project first on my own.
As stated above, the website should include information, several pages for raising awareness of the issue, and also statistics. The informative pages should be quite easy as they are just static files with information that will rarely be updated. On the other hand, the statistics is much harder. What I had planned to do at first, was to make a python web crawler to crawl the information for 5 chosen animals that suffer the most from illegal animal trade from other websites, as well as some newest articles about the animals. Even though I knew the basics of Python, a python web crawler was a completely new thing to me. I frequently heard about it and vaguely knew what it could do, but I had absolutely no idea how to start coding it. At first, I was browsing on the web for tutorials and youtube videos and hoped that those could guide me through making the website.
Learning more and more about web crawling had made me realise that it would take a long time to learn about the concept and the basics of it, not to say putting it into my own project. I was not sure if I could finish the project before the deadline in June and I couldn’t even make a plan because I didn’t know how long it would take to learn web crawling. Eventually, with the help of mummy, I found a teacher who could teach me everything in a requirements document for the project I created earlier.
The teacher sent me a plan and a syllabus, I was so glad that I don’t have to worry about not finishing the project on time. Also, I found out that the teacher had decided to let me to code the frontend of the website by myself. I thought we would be focusing on backend coding and python web crawling, but since I have never done the frontend of a website on my own before, it was a great opportunity to have a try.
From my current plan, making website is roughly divided into the following processes:
- Design
- Front-end coding
- Back-end coding
Designing the website started with a wireframe, which was basically lines and text. At first, I had no idea how to do it, so I drew a box with a random size, representing the outline of the website, then fill in lines and text. Afterwards I learned that the desktop wireframe of the website must be 1440px wide. That was much wider than what I originally did, so then I changed all the lines and all the font sizes ?.
From this process, I found out how hard it was to design a website. Even though I did everything by drag and dropping in the app called “sketch”, it was still a challenge to design the elements as well as deciding the margins, paddings and heights of elements, where to put them. I enjoyed the process a lot though, seeing a website gradually formed and getting closer and closer to finishing the design.
This is all the pages I had designed, including a home page which includes the 5 species and a dropdown menu that will be triggered when “Species” in the navigation bar is clicked, 1 article page for all of the 5 species and a mobile phone design for all of the above.
When all of the wireframe were finished, I moved onto finding the images and colouring the website. Feel about the website with the screenshot below:
The article pages look like this:
For the drop down menu for the Species, I thought it would be quite boring if I merely create a simple menu with text like the one below, so therefore I browsed online for create menus, I took a look for the drop down menus of lots of famous websites, until I saw the one on National Geographic. Click on “Menu” in the navigation bar, I saw the wonderful menu. It was white text on a black background at first, but if you hover on one of the topics, the background gradually changes to an image.
Therefore I tried out something similar with my species dropdown menu. This is my design of it:
Above are the desktop design of the website. The website is meant to be responsive and the following are the designs for the mobile end.
This is mainly it for the design part of the website. It was quite a great start, and I will soon be working on the codes and the web crawler. These updates on the IAT project will be introduced in later posts.
