My online store is based on selling aesthetic stationery, limited to only four categories (stickers, prints, tapes, and pins). Most products are below $15, except for the pin bundle that encourages customers to buy all three pins at once for a better price. There is also free shipping on orders over $30!
I wanted to use a template because they all seemed very professional, but I felt that my ideas were limited when following a structure that’s already made. A problem that I experienced was creating separate CSS stylesheets for every HTML file because it was more convenient for me to go back and fix the formats on each page. However, problems came to existence when I added a navigation bar to a different page, I also had two navigation bars in different places. For instance, the login and shopping cart is on the top right corner and the products are in the black horizontal div. This took me hours to put together because the entire format messed up when I added a conditional statement to make the log out button only appear if the user is logged in, so I eventually placed the navigation bar as a script of HTML inside of its own div instead of as a separate js file (with the nav function in html) and that worked out well.
I’m proud of the login and logout button because the logout icon only shows up if the user is logged in. CSS was very frustrating because unlike anything else, I’m not told of the errors for the design process. Some errors are shown in the console or terminal, but there’s no such thing as an error in design as long as the syntax is correct (in regards to the visual appearance). When I created the conditional statement for the login/logout icons, the layout went berserk for each page and I didn’t know where the problem was located. Then, I realized that it wasn’t the position or inline-block, but the way my code was structured. I had to get rid of the nav bar design and had to redo the CSS (I had a copy of the original CSS) and began to realize that putting the navigation in HTML was most convenient for me. It was also best to have all the html files linked to one CSS, but I needed to separate the stylesheets for background purposes.
Then, I’m also proud of updating the quantities (putting the amount back and incrementing the quantity). This was most confusing to me and I also experienced a null error; however, going to Professor Port’s office hours helped me learn how to solve problems using the debugger.
I’m least happy with shopping cart because it’s very similar to the invoice. I would love to add an “x” button for users to delete the item and restructure the format overall. Another flaw was how I sent an invoice as an email, but the images did not show up because it could only be accessed through the images directory. If I were to redo the email, I would make it more appealing (similar to a poster).
This assignment required me to minimize my code instead of adding more all the time. I definitely learned the importance of quality over quantity from this assignment. Although there was new code, the majority was to take what I had before and decide whether it’s still necessary to keep it there.
First I would look for syntax errors or typos, then hints of where the problem is located according to the terminal or console. I definitely needed to work on doing more web search to address problems, I did that more for CSS. After not making progress for about an hour, I would contact Professor Port for help and we would communicate via email or Zoom.
What worked well for me was having the freedom to make my own choices, instead of strictly making the website a certain way. Even though we have requirements, the way we execute them is all in our hands. For instance, I had error messages display on the bottom of each textbox, while there was also the option to have a window alert. I had fun making progress in the layout and theme of my website from beginning to end. I noticed that I got tired of looking at my website over time and played around with the color palette website (https://coolors.co/e2dadb-dae2df-a2a7a5-6d696a-ffffff), I was very indecisive, but this was the fun part.
I believe catching up with the readings didn’t work well for me because I had worse time management this semester due to other workload. This led me to not being well prepared for the assignments, instead I would learn along the way. In terms of requirements, a rubric would be helpful (identical to what the TA uses to grade assignments), because I find that looking at the TA’s rubric is more organized since there are sections (requirements, code issues, and errors/UI).
I learned that planning ahead will save a lot of time and stress in the long-run. Since I didn’t use a template from the beginning, my website’s design and format was unorganized in terms of code because I only cared about how the design looked in front of my eyes. When adding a navigation bar, it’s best for the stylesheets to be synchronized or at least have the same heading structure and ID. Styling DIV boxes can be tricky because they’re technically invisible, so it’s helpful to imagine them as shoe boxes when there’s a div inside of a div. It’s still difficult to plan because I like experimenting for the method that works best, so it’s important to make copies of the original project before making changes.
If I could go back, I would sketch a design of my website including each button and each page would function. This would be the Assignment 3 Checkpoint, but I wish I did this at the very beginning to have my website mapped out. I always planned in my head, but that’s not very reliable.
I spent approximately 40% of my time thinking about how to do something. Although I was not organized and clear on how I wanted my website to function, I began to visualize more as I continued to attend Professor Port’s office hours. The Assignment 2 Checkpoint also required me to map out my website, and this illustration helped me get a better idea of what I was doing overall. This also goes for stylizing the website because removing or adding a certain item can impact the design.
I spent about 20% of my time writing code. Surprisingly, I deleted a lot of my old code and wrote very little new code for the project. At this point of the assignment, I’m just restructuring my website (such as making the shopping cart like the invoice, except with the ability to update the quantities).
I also spent 30% of my time testing and debugging the code because I was still unfamiliar with cookies and sessions. Sometimes my code would be correct, but I’m not actually getting the cookie at all. I owe a huge portion of this project to Professor Port, for helping me write code and teaching me to carefully plan before doing anything.
I worked on this project solo and reached out for guidance (almost on a daily basis). My goal is to definitely learn on my own, but I believe going for help has taught me that I could have done it myself if I had done more studying and clearly thought out the process. Although there were possibilities, speaking up for help was something I needed to do in order to learn as a beginner.