Erika Ecker
@toolsandkit
Erika Ecker
[index.html]Home [about.html]About [products.html]Products [contact.html]Contact [gallery.html]Gallery
Outlook
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.
rom docx import Document
# Recreate the Word Document
doc = Document()
# Title Page
doc.add_heading("Kit and Set Tools Final Project", level=1)
# Introduction Section
doc.add_heading("Introduction", level=2)
doc.add_paragraph(
"Kit and Set Tools was founded with the mission of empowering DIY enthusiasts and young professionals "
"by providing high-quality... See more
# Recreate the Word Document
doc = Document()
# Title Page
doc.add_heading("Kit and Set Tools Final Project", level=1)
# Introduction Section
doc.add_heading("Introduction", level=2)
doc.add_paragraph(
"Kit and Set Tools was founded with the mission of empowering DIY enthusiasts and young professionals "
"by providing high-quality... See more
Outlook
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/
IT 270 Module 4 Activity
This document summarizes the completion of the Module 4 HTML Table and Form Concepts activity for the IT 270 course. The task involved creating an HTML table displaying a CBS primetime TV schedule and styling it using CSS. The completed work is integrated into the 'Kit and Set Tools' website.
HTML Code Snippet
<!DOCTYPE... See more
This document summarizes the completion of the Module 4 HTML Table and Form Concepts activity for the IT 270 course. The task involved creating an HTML table displaying a CBS primetime TV schedule and styling it using CSS. The completed work is integrated into the 'Kit and Set Tools' website.
HTML Code Snippet
<!DOCTYPE... See more
Sublime
<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>
W3Schools online HTML editor
w3schools.com
<div videoID=" video_id " width=" width " height=" height " theme=" theme (dark | light) " rel=" rel (1 | 0) " controls=" controls (1 | 0) " showinfo=" showinfo (1 | 0) " autoplay=" autoplay (0 | 1) " mute=" mute (0 | 1) " srcdoc=" srcdoc " loop=" loop (0 | 1) " loading=" loading (0 | 1) " data-start=" start " data-end=" end "></div>
Installation and configuration guide
from docx import Document
# Recreate the Word Document
doc = Document()
# Title Page
doc.add_heading("Kit and Set Tools Final Project", level=1)
# Introduction Section
doc.add_heading("Introduction", level=2)
doc.add_paragraph(
"Kit and Set Tools was founded with the mission of empowering DIY enthusiasts and young professionals "
"by providing high-quality... See more
# Recreate the Word Document
doc = Document()
# Title Page
doc.add_heading("Kit and Set Tools Final Project", level=1)
# Introduction Section
doc.add_heading("Introduction", level=2)
doc.add_paragraph(
"Kit and Set Tools was founded with the mission of empowering DIY enthusiasts and young professionals "
"by providing high-quality... See more
Outlook
# Section: Additional Image Integration
doc.add_heading("Additional Image Integration", level=2)
doc.add_paragraph(
"An additional image in GIF format has been integrated into the webpage. Below is the HTML code for embedding the image:"
)
doc.add_paragraph(
'<img src="animated_image.gif" alt="Animated Example" >',
)
# Section: Audio Integration
doc.... See more
doc.add_heading("Additional Image Integration", level=2)
doc.add_paragraph(
"An additional image in GIF format has been integrated into the webpage. Below is the HTML code for embedding the image:"
)
doc.add_paragraph(
'<img src="animated_image.gif" alt="Animated Example" >',
)
# Section: Audio Integration
doc.... See more
Outlook
<form action="submit_form.php" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="subject">Subject:</label>
<select id="subject" name="subject">
<o... See more
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="subject">Subject:</label>
<select id="subject" name="subject">
<o... See more