Erika Ecker
@toolsandkit
Erika Ecker
<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 "><... See more
Installation and configuration guide
script type="text/javascript">
(tarteaucitron.job = tarteaucitron.job || []).push('youtube');
</script>
</body>
</html>
(tarteaucitron.job = tarteaucitron.job || []).push('youtube');
</script>
</body>
</html>
Installation and configuration guide
<script type="text/javascript">
(tarteaucitron.job = tarteaucitron.job || []).push('gcmadstorage');
</script>
</body>
</html>
(tarteaucitron.job = tarteaucitron.job || []).push('gcmadstorage');
</script>
</body>
</html>
Installation and configuration guide
<script type="text/javascript">
tarteaucitron.user.twitteruwtId = ' twitter_uwt_Id ';
(tarteaucitron.job = tarteaucitron.job || []).push('twitteruwt');
</script>
tarteaucitron.user.twitteruwtId = ' twitter_uwt_Id ';
(tarteaucitron.job = tarteaucitron.job || []).push('twitteruwt');
</script>
Installation and configuration guide
<script type="text/javascript">
tarteaucitron.user.adformpm = adformpm ;
(tarteaucitron.job = tarteaucitron.job || []).push('adform');
</script>
</body>
</html>
tarteaucitron.user.adformpm = adformpm ;
(tarteaucitron.job = tarteaucitron.job || []).push('adform');
</script>
</body>
</html>
Installation and configuration guide
<span class="tarteaucitronH1" role="heading" aria-level="1" id="dialogTitle">Gestion des cookies</span>
Homepage Code
Design Choices:
• Color Scheme : Soft neutrals with vibrant highlights for CTA buttons to keep the design welcoming and user-friendly.
• Navigation : Clear, simple navigation bar for ease of access to each page, including key sections like the products, about, and contact pages.
• Responsiveness : Mobile-friendly layout using flexible g... See more
Design Choices:
• Color Scheme : Soft neutrals with vibrant highlights for CTA buttons to keep the design welcoming and user-friendly.
• Navigation : Clear, simple navigation bar for ease of access to each page, including key sections like the products, about, and contact pages.
• Responsiveness : Mobile-friendly layout using flexible g... See more
Outlook
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
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 t... 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 t... 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/
View, organize, and share photos and videos with iCloud Photos on the web. Changes will sync across your devices with iCloud.
icloud.com<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kit and Set Tools</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f9f9f9;
}
h1 {
text-align: center;
color: #333;
}
table {
border-collapse: collapse;
margin: 20px auto;
width: 50%;
background-color: #fff;
}
th, td {
border: 1px solid #ccc;
text-align: center;
padding: 10px;
}
th {
background-color: #f0f0f0;
}
.bowl-format {
font-weight: bold;
color: #d9534f;
}
.form-container {
margin: 20px auto;
width: 50%;
background: #fff;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-container label {
display: block;
margin: 10px 0 5px;
}
.form-container input {
margin-bottom: 10px;
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.form-container button {
display: block;
width: 100%;
padding: 10px;
background-color: #5cb85c;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.form-container button:hover {
background-color: #4cae4c;
}
</style>
</head>
<body>
<h1>Kit and Set Tools</h1>
<!-- Table Section -->
<table>
<tr>
<th colspan="2">Rose and Combs</th>
</tr>
<tr>
<td class="bowl-format">Rose</td>
<td>Combs</td>
</tr>
</table>
<!-- Form Section -->
<div class="form-container">
<h2>Form Section</h2>
<form>
<!-- Tax