Please Note: After adding an item to the cart, it will not redirect you to a cart page though it can be accessed via the navbar > cart symbol/image. Alongside that, I used the iPhone 12 Pro and iPad Pro dimensions for the responsive project requirement.
Project: I designed a very simplistic sales website using HTML/CSS & JS. The theme/brand I worked under was of furniture named Norbey & Flanigan. I used the colors light/brown to compliment the products and I won't dip my toes into color theory but I thought it meshed really well with the atmosphere. Keeping it simple, and clean, I added an animated mission statement above the background image to greet the users on who we are. I tried to make this website as welcoming and professional as I could without adding too many elements. As you transition to view the site on smaller devices, the mission statement will shorten and the navigational tabs and item descriptions will disappear. It's not perfect and I'm aware of that but I'll go over it throughout some time and improve on it as it pains me to leave it as is. Adding an item to your cart will do just that and you can verify that by viewing the cart on the navbar. Clicking the product image itself will open up a modal window with their product details as well as two buttons to add them to your cart or to continue shopping. If you happen to add them to the cart, you will be notified on the top of the modal window to confirm that it has been added to your cart. Of course, there is no proper authentication protocals set in place to validate these but I thought it was fun to create it using JavaScript. At the bottom, you'll notice the variety of links that you can click on redirecting you to nowhere else but the same page, a copyright notice and a very small social media slideshow which I thought was very intuitive as it saves a bit of space and looked appealing. The shopping cart page was kept very simple with only a title, section in a fixed height in case all items were added at once.
My challenges:
Precise alignment (whether it were divs or inline elements, it was tough. Having to do math and account for gaps/fillers/gutters between certain elements for a solid calculation was just a bit too complicated for me at times)
Responsiveness (...it was a long process. I thought to use Bootstrap but wanted to keep the tools/technologies within the scope of our course curriculum and even after many hours, I'm still not satisfied. I didn't style my css efficiently as it was a mission to navigate through)
Keeping my JavaScript short (I added event listeners to each individual item. I didn't like it as repeated code isn't common practice. I instead wanted to loop them within one event listener accounting for each item when clicked on to either add to cart or open the modal window but unfortunately after going over the MDN documentation, I just couldn't figure it out)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent