Advanced Web Development Case Study
Fall 2022
When starting this project, I had already worked with HTML and CSS. However, JavaScript was a whole new concept for me.
JavaScript was a very challenging concept for me to understand. I spent many hours trying to understand it and when I finally got the hang of it — it all began making sense!
By understanding these programming languages in conjunction, I was able to create extraordinary projects that I would have never imagined myself being able to create.
The feeling of building something from scratch is a feeling I cannot explain. This course made me feel very excited to learn and to use my creativity.
Below are some of my favorite projects:
Rotten Ranks Final Project
A website that shows the best of the best films all in one place
Group Project — Fall 2022
Project Overview: The goal for this project was to draw from what we learned in Advanced Web Development and create something new. The main component of this project was being able to incorporate JavaScript. In order to create this, we followed a tutorial and then added various components to make it “ours.”
The Challenge: The main challenge for this project was being able to incorporate enough JavaScript. As I mentioned before, I struggled with JavaScript quite a bit. However, I do enjoy that challenge and my goal is always to produce a project I am proud of. When working on this project, I made sure to put myself in the perspective of a user and customize areas of the website that users would most likely take a look at when browsing through it.
The Solution: My partner and I worked together on this specific project. We browsed through various tutorials online until we found one that we loved but felt we could make better. After following the tutorial, we analyzed the website and talked about how we could make it better — and more interactive! I decided that I wanted to animate the title, “Rotten Ranks.” I did not like how it was just a standstill. I decided to play around with the title of the website and watch multiple tutorials to try to create something I liked. After many tutorials and ideas, I finally decided to create an animation that made the words fade in, one by one. I changed to font and color to a theme that fits our website as well. Now, when visiting the website, the title fades in! I felt that adding this feature added more creativity to the webpage.
Another section I decided to dive into was customizing the navigation bar. I went in with CSS in order to add some movement and color. I also created a fun animation effect when hovering over each word. Before this, I attempted to add JavaScript to this (in conjunction with CSS) however, I kept breaking the code. I wanted the size of the wording to increase when being hovered. However, I decided to create a similar effect (with CSS) by having the dark-green bubble increase when hovered.
navigation bar before/after:
I also decided to add two more features using CSS/HTML. I added a light green background to the left navigation bar to match the top nav bar. I did not make them exactly the same because I felt like having an animation in that area, took away from the main icon. On the other hand, I also added a feature to each of the headers for each slider. When hovering over the header, you will notice a line with a linear gradient. I decided to make this a hover effect to not take away from the webpage when first visiting it. The color combination I chose for the underline was based on the two shades of green used throughout.
left navigation bar:
linear-gradient under headers:
Moving on to the sliders, we decided to include ten movies in each slider. On each of these movies, we added a short summary of the movie along with a green button reading “watch.” When that button is clicked, it redirects the user to YouTube followed by a trailer of the movie. Adding this link may seem like something simple, however, my partner and I communicated about having a way for our users to find out more about each movie and finally came up with the idea to link a trailer!
Now for the actual slider feature. As I mentioned previously, we did follow a tutorial for this project — however, it was more of a work along type of tutorial. We have worked and created sliders in Web Development so this felt kind of like, a test. It was very fun to create the slider considering we had created them before.
Moving on to the top right corner, the humorous part! My partner and I were brainstorming on what else we could add to this project to customize it. I jokingly said, “we should make this webpage, our professor's profile!” and laughed it off. However, my partner thought it was a brilliant idea! We knew this could make our professor chuckle when grading our profile — what a great way to make finals week a bit silly!
There is also a feature that will turn the page into light mode — just like Apple devices!
Results: Overall, this project was very fun. I enjoyed having regular conversations with my partner in order to better our project. I also realized that there is SO much you can do with JavaScript — which makes it super interesting! As a whole, I am very happy with our end result. It challenged my skills while keeping the process enjoyable. Not only did it improve my coding skills but it also improved my collaboration skills.
Jamboree Jukebox
My favorites in a jukebox
Fall 2022
Project Overview: The directions for this project were very broad. We were told to create a jukebox, have fun, and use any music we wanted. Reading these directions was both negative and positive. I loved that there were not many directions — allowing us to be creative. However, not having many directions was also a challenge because I really had little information on what to create. To complete this project I used a combination of HTML, CSS, and JavaScript on VSCode.
The Challenge: The main challenge for me when working on this project was being unsure of where to start. It was the first time, in my educational journey, that I was not given any direction at all. It challenged me to use creative thinking completely in order to complete this assignment. Another challenge was incorporating music into VSCode. I had many trials and errors being able to do this.
The Solution: In order to feel more comfortable, I completed about two different tutorials on the internet. I did this because I wanted to see how exactly everything was working for each music player. However, prior to this, I did spend time trying to create one on my own. On the other hand, I was able to incorporate music into VSCode by trying various things and seeing where I was going wrong. I do feel confident using music in VSCode now and I do plan on doing so later on.
Results: Overall, I was able to get through the challenges and create a jukebox I really loved. This assignment was by far the most challenging in this course but it also had the best outcome. When first starting this project, I felt like I was never going to complete it successfully and was actually very fearful of doing a poor job. However, with the time and dedication I spent, I was able to prove myself wrong. The Jamboree Jukebox was definitely one of the projects that I was showing off by sending the link to friends and family. I also posted it on social media because I was SO proud! This struggle I had with this project showed me that everything is capable — no matter how difficult it may seem at first.
Other projects I completed in this course:
