Studs was inspired by many factors. The main factor was the fact that every member of our team is a full-time student. We know how hard it could get to study, especially if we doesn’t take breaks. So, our team wanted to create this website in hopes of helping students with balancing their work-break schedule. Studs was also built because every single team member LOVES something known as “aesthetic vibes”. Lofi music, a girl sitting by the window, and a soft font all fall under the “aesthetic vibes” category. These elements help build a calming interface, which heavily helps with studying. Lastly, Studs was also inspired by timer apps! Although many students use timers to keep track of their schedule, it is not something that’s targeted towards studying. For example, the timer does not recognize if one is using it as an alarm to water their plants or if they are using it to keep track of their breaks. So, we decided to create a platform that is directly targeted towards studying. That way, the features that are added to our website are for the sole purpose of creating a better environment to study in.

What it does

The main function of our website is the study room. Once a student has entered the study room, the first thing they notice is the timer. This timer is designed to keep track of the minutes spent on studying. Once the student enters the room, the timer starts to countdown. Once it reaches 00:00, it will send a notification to the student letting them know that they have studied for a long time and should spend some time taking a break. In the study room, there is a notepad in the corner, which the student can use to jot down anything that requires to be noted. A student can use this notepad as a to-do list or simply write down their notes while studying. There are 3 other pages besides the study room: Home, About Us, and Credits. Home page is just meant to be an easy-to-use interface that provides a portal to the study room. The About Us page utilizes pictures and text to describe our fictional “backstory”. Lastly, the Credits page provides a list of all of the resources we used. Everything can be accessed via the navigation bar at the top of our the user’s screen.

How we built it

We built our website using HTML, CSS, and Javascript, and used Github to share our code with one another, as we were all working remotely. To communicate with one another, we decided to use Discord. Before the hackathon started, we also learned the basics of HTML and CSS. We sent screenshots, called for hours and messaged one another about our challenges and accomplishments. At the start of the hackathon, we collectively designed a very rough sketch of how we wanted our website to look like. Once we had a solid visual to follow, we divided our work between the three of us. For example, Rainbow first started working on the About Us page, Claire worked on the Study Room, and Helia worked on the Home Page. When one of us faced an issue, we would switch roles so we had a second pair of eyes looking at the issue. This helped us overcome many small challenges and optimize our time in the best way possible.

Challenges we ran into

This was our first time programming in HTML, CSS, and Javascript. Although we had prior knowledge of how the languages work and we knew about the basics, we still ran into some challenges. For example, we initially wanted to create a chatroom within our study room, so students could communicate with each other globally. Unfortunately, no matter how hard we tried, we were not able achieve our goal. But, we didn’t give up! As soon as we recognized the issue, we quickly compromised our plan and decided to convert our chatroom to a notepad. The notepad is a multi-functional feature, as students can use it to take notes, write a to-do list, write important questions to cover, etc.

Accomplishments that we're proud of

Accomplishments that we're proud of include learning HTML and CSS, while applying the knowledge at the same time, successfully creating a new website, using a live sever, applying images to a website, having functional buttons, and putting a lot of time and effort into this.

What we learned

We learned how to build a website from scratch, using only a source code editor, GitHub, and a live server extension. As first time HTML and CSS coders, we have learned the syntax and layout of how these languages work, as well as how they can be used together. We learned how to put elements on a website and how it gets edited for visual purposes, and possible functions. As well, we learned the usage of Javascript in a website and how it can be embedded in a website.

What's next for Studs.

Studs. plans on continuing to develop the website past the hackathon date. As mentioned before, one of the challenges we faced was creating a live chat box in the study room. Although we've converted the chat box to a task notepad, we are still planning to create a chat box using a live server. We also plan on adding buttons so the study room so users have more options for how long they want to work and take a break for. We were originally planning on adding more music and background options as well. However, the time constraint didn't allow us to add those features, so we are going to add those in the future as well.

Built With

Share this project: