Case Study: JK-Cakes
I built a responsive small business website using HTML, CSS, and JavaScript. The project highlights DOM manipulation, clean coding practices, and core web development fundamentals. It’s designed to be both functional and easy to maintain.
Javascript
CSS
HTML
Goals
- Leverage Javascript for loop rendering and DOM manipulation
- Effective use CSS to create a stylized page from a Figma Design to promote a product
- Create and use functions in Javascript, handling scope and page efficiency
Challenges and Skills developed:
Taking a design first approach to sizing and layout
As a developer, it's easy to get lost in the code, but for this page, visual consistency and style were key. Ensuring the product rendering remained unified across menu interactions and responsive on all devices was essential, especially for mobile users. To enhance the user experience, I used conditional classes to clearly indicate selected products, clickable elements, and active menus.
Responsive elements and conditional rendering of elements based on viewport size
While responsive pages are always relevant in Frontend development, product pages specifically emphasize a need for responsive styling. Products are often purchased on mobile devices and in this page, it was vital that the style and clarity of the product were not lost as the viewport size changed
Conditional application of styling and element rendering
To provide a better user interface, it was essential for the user to understand which product is selected, what is clickable, and which menu is currently being displayed. This require conditional class application.
Future project development:
Implement a full-scale shop for the articles that can be order
By adding a complete e-commerce system, the ordering and organization of the page could be greatly improved. Through adding features such as a direct contact form for larger orders, a shopping cart, and bundled products the user could directly organize orders through the website. Furthermore, if the page added a sign-in function, payment methods, reoccurring orders, standing orders, and other functionality could greatly improve the page for the user and business.
Bind the shop articles to a backend database
By linking the page to a product database, the page owner could update the products that are sold. The storage of the products, pricing, and descriptions would lighten the processing demands of rendering. It would provide greater flexibility in the page and allow it be updated from the business directly