Erika Ecker
@toolsandkit
Erika Ecker
@toolsandkit
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
Membership space
Kit and Set Tools Final Project
Introduction
Kit and Set Tools was founded with the mission of empowering DIY enthusiasts and young professionals by providing high-quality tools and resources necessary for their success. The website combines elements of e-commerce, education, community-building, and multimedia to create a multifunctional platform. Our vision is to enable creativity and entrepreneurship in DIY, contracting, and tool-based projects. We aim to empower young men starting their own businesses and young women excelling in handyman work by offering affordable resources and educational support.
Visual Layout of Website Pages
Homepage
The homepage features a welcoming banner with the company logo and a navigation bar leading to the main sections of the website. It highlights featured products, promotions, and a brief introduction to Kit and Set Tools.
Visual Mockup: [Insert Homepage Image Here]
About Page
The About page includes details about the company mission and values, contact information, and an overview of our services. It also features our email address, customer service phone number, and physical address.
Visual Mockup: [Insert About Page Image Here]
Products Page
The Products page lists tools for sale, each with a detailed description, price, and a payment button. A table organizes the product details for easy readability.
Visual Mockup: [Insert Products Page Image Here]
Contact/Community Page
This page includes a contact form for customers to reach out or place special orders. A discussion board allows contractors to promote their businesses and engage with the community.
Visual Mockup: [Insert Contact Page Image Here]
Gallery Page
The Gallery page showcases images of our products and services, highlighting the quality and diversity of our offerings.
Visual Mockup: [Insert Gallery Page Image Here]
Code Page
Below is a sample of the HTML and CSS code used to create the website pages.
<!DOCTYPE html> <html> <head> <title>Kit and Set Tools</title> <link rel='stylesheet' href='styles.css'> </head> <body> <h1>Welcome to Kit and Set Tools</h1> <p>Your one-stop shop for DIY tools and resources.</p> </body> </html>
CSS Sample: body { font-family: Arial, sans-serif; background-color: #f9f9f9; color: #333; }
Rationale and Analysis
The design choices for the website focus on usability, accessibility, and aesthetic appeal. Consistent navigation and styling ensure a seamless user experience. Multimedia elements, such as images and videos, enhance engagement, while forms and tables improve functionality and organization.
Opportunities for Growth
Given more time, we would integrate advanced tutorial workshops, international shipping options, and enhanced multimedia features, such as interactive videos and live-streamed DIY sessions.
Defense of Final Product
The final website aligns with the goals of the project by combining e-commerce, education, and community features. It is visually appealing, functionally robust, and addresses the needs of its target audience effectively.
References
W3Schools. (n.d.). HTML and CSS tutorials. Retrieved from https://www.w3schools.com/
Shay Howe. (n.d.). Learn to Code HTML & CSS. Retrieved from https://learn.shayhowe.com/
Kit and Set Tools was founded to empower DIY enthusiasts and young men starting their own businesses by providing high-quality tools and resources necessary for their success. Additionally, we aim to empower driven young women to excel in handyman work by offering them the necessary resources at affordable prices.
<iframe src="https://snhu-my.sharepoint.com/personal/erika_heater_snhu_edu/_layouts/15/Doc.aspx?sourcedoc={0ebfd2a8-cd1c-48f3-aa0e-3a85e6d931b4}&action=embedview&wdStartOn=1" width="476px" height="288px" frameborder="0">This is an embedded <a target="_blank" href="https://office.com">Microsoft Office</a> document, powered by <a target="_blank" href="https://office.com/webapps">Office</a>.</iframe>