In our first semester, we had trouble accessing all the sites, and it was confusing because there were so many sites that you needed to access and there were links all over the place. There is an app called ‘Faves’ which organises social media sites into a central hub, and the problem of too many social media sites, which their app solved, was similar to our problem. So we decided to do something more focused for students at the university. This led us to make a website by USyd students for Usyd students to help first years navigate the online maze that is USyd online.
What it does
It is a website that is a place where first year students can find out what common websites the University of Sydney uses for learning, and where to go to access them, as well as direct links to those websites. It also includes tips and tricks on how to best utilise each website. There is also a section on engineering, since we are engineering first-years.
How we built it
We started writing content for the different web pages that we needed to include, like Canvas, Sydney Student, etc, etc in a google doc. Then we researched how to build a simple website, and we started with a simple HTML file format and added in paragraphs of text. We then added in the links for the external websites. We then decided we wanted a nice header, so we researched how to do that and created a css file. Initially, we had tabs that went across the page with a line transition going under the text when you hovered over. (We spent quite a bit of time working that one out!) However, we decided we wanted dropdown menus, since we had split up the University websites into General and Engineering. This was hard to integrate, as the code for the transition clashed with the one for the dropdown menu. But after a bit of debugging, we got it to work. Throughout all of this was updating the general aesthetics of the site (deciding what colours, what fonts, the spacing. Then we started creating additional html files for our other webpages, and linking them together. We copied the header code into each file, and changed the content of each page. Then we decided to make it seem functional and aesthetic, so we added a search bar and a comment section. We then took screenshots of each website's logo, and added it into our website to show prospective students what they looked like. We also recorded a video/gif on how to access/use each website and embedded them into our web pages. We then made a logo for our website, and coded it into the frontpage with a parallax scrolling effect.
Challenges we ran into
Most of us had rarely touched html and css, or used it only years ago. But we just searched up how to use them and started with simple templates such as
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html>
From here After that a couple of us got the hang of it and one of us even started to research and write css code while referring to the above website. It also took a while to work out the finer details in css, which took a bulk of the time, and there was a problem with the header section, where the dropdown menu div clashed with the css line transition. However, we managed to resolve the issue. When we were recording the videos, it was a hassle to send them over to embed in the code, as they were quite big, but they eventually uploaded and we could use them. Github was also quite confusing to use, as we weren’t sure if uploading deleted the other person’s contribution to the code, and the branches were confusing. We solved it by designating 1 or 2 people to write the code, and the other 2 for content and presentation. This resolved the clashes in github.
Accomplishments that we're proud of
We built a website nearly from scratch when almost none of us had ever touched html or css. At almost every step where we added something new, or adjusted the CSS we were quite proud. In no particular order, here are some of our favourites; A working website! Dropdown menu with highlighting and line transitions Parallax scrolling effect for frontpage logo Comment section
What we learned
We learned a lot about how to build a webpage using html and css. Also we put into practice broader skills such as how to rapidly ideate and do an elevator pitch. Some HTML and CSS skills Meta charset-UTF8 to have the same content on both Chrome and Safari Div floats regarding images :: hover to hover! How to parallax image
We also learnt to not be afraid of making websites, since we managed to make a working one!
What's next for USyd Online Hub
Working out any copyright issues with having logos on the site and expanding the comments section to allow people to submit requests for website info to be added as USyd websites change.
With functionality like the comments box, users are able to request additional websites that they would like to be added to the site as well as suggestions on how to improve overall.
In future, our website can be altered to be specific to different faculties or different universities or even schools.