My junior year at the University of North Carolina at Charlotte I took a course titled: Web-Based Application Design and Development. This course taught me from start to finish the basics of HTML, CSS, and frontend JavaScript. During the semester I worked on a project for class. The project was, simply put, to make a website from scratch for another student or someone from outside the University. My client wanted me to create a website for a product they were interested in making. The name of the website was Drop-Node and the name of the product was The Drop.
I went with a simple black and white color palate on the website. I also tried to minimize the amount of whitespace on the pages by adding images to help showcase the product. The home page was the first page I worked on. The home page needed to show the product from different angles as well as help explain what the product was. Below you can see a gif of the top of the home page where I utilized a jQuery plugin called bxslider. This plugin allowed me to make a constantly changing image carousel to help show the product from all angles. I added the images to the carousel using for loops and a json file. The json file held the images and their alternate titles for screen reader accessibility.
The next two pages that I made were the buy and make pages. The buy page had information about the specific hardware that was compatible with the product as well as a full list of parts. The make page had an embedded YouTube video demonstrating how to assemble the product.
The final page that I made was the FAQ page. This page was a lot of fun to make because I got to create an accordion using a jQuery plugin called accordion. I used the accordion to show all of the frequently asked questions and when a visitor to the site clicked on one of the questions it would reveal the answer to them. Also if another question was clicked the previous answer was hidden again. Below is a gif of the accordion in action.
I tried to make the website simple, but also interesting. I wanted to help convey the name of the product by using a jQuery plugin title animsition. This plugin allowed me to add the transition effect of the screen ‘dropping’ into frame. With the product being called The Drop I felt this transition effect would add a bit of flare to the website.
Overall this was a very enjoyable course. I learned a lot about website design and enjoyed every minute I spent creating this website. You can see all of the files used in making the Drop-Node website as well as the code on my GitHub, which is linked below.