Scribd
Upload
5 views8 pages

Criterion C

The document outlines a detailed plan for creating a website called ProcrastiMate, aimed at helping students manage procrastination. It includes step-by-step tasks for developing various pages such as the homepage, about & resources, routine planner, and contacts, specifying time needed and resources required for each task. Additionally, it emphasizes design specifications and justifications for aesthetic choices throughout the website.

Uploaded by

jkundiswami
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
5 views8 pages

Criterion C

The document outlines a detailed plan for creating a website called ProcrastiMate, aimed at helping students manage procrastination. It includes step-by-step tasks for developing various pages such as the homepage, about & resources, routine planner, and contacts, specifying time needed and resources required for each task. Additionally, it emphasizes design specifications and justifications for aesthetic choices throughout the website.

Uploaded by

jkundiswami
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
You are on page 1/ 8

CRITERION C: CREATING THE SOLUTION

Strand i- Constructs a very detailed and logical plan, which describes the efficient use of time and resources,
sufficient for peers to be able to follow to create the product.

BASIC HTML REQUIREMENTS & THE INDEX.HTML (HOMEPAGE) (Refer to the Appendix for the
GANTT Chart)

Step Task Description Time Resources Required


no. Needed
1 Hone HTML Skills: Spend time revisiting HTML fundamentals. Practice structuring web 1.5 Hours Online resources: MDN
pages, using semantic tags such as <header>, <section>, <footer>, and embedding images and Web Docs, free HTML
links. Experiment with forms, buttons, and navigation structures to ensure competency in tutorials on W3Schools,
building a responsive website. YouTube and
Codecademy practice
modules.
2 File Management: Create a project folder named ProcrastiMate with a file as follows: 5min File Explorer
index.html, about.html, routineplanner.html, contact.html and a subfolder called assets. Ensure
that all of this is case-protected, and admin protected and ensure that it is always saved on the
laptop to ensure no progress is lost.
3 Create basic HTML structure: Start with a DOCTYPE declaration, add an <html> tag with 15 Visual Studio code,
lang="en", and include <head> for meta tags, title, and link external stylesheets like Bootstrap minutes Google Chrome
(cdn.jsdelivr.net/npm/[email protected]). Inside <body>, created a <header>, <section>, and
<footer>. This structure ensures clean organization.
4 Design the navigation bar (Navbar): Use Bootstrap's .navbar, .navbar-expand-lg, 40 Visual Studio code
and .navbar-dark classes to create a responsive top navigation bar. Add a blue background minutes
(#007bff) and make the text white (#ffffff). The navbar will include links to Home, About &
Resources, Routine Planner, and Contacts, along with an Instagram icon. Use <div
class="container"> to keep content centered.
5 Add a video background (Hero Section): Insert a <video> tag inside a <section 10 Visual Studio code
class="hero"> with attributes autoplay muted loop. The video (highway-loop.mp4) will be minutes
added inside the assets/ folder and linked within the <source> tag. The text overlay will be
placed inside a <div class="hero-content">, using a semi-transparent black background (rgba(0,
0, 0, 0.6)) and white text (#ffffff).
6 Implement Mood Checker Section: Create three <span> elements representing different 20 Visual Studio code,
moods (😊, 😐, 😢). Each emoji acts as a button that triggers a Bootstrap modal when clicked. minutes Modal JavaScript
The modals will contain custom images (hap.png, neu.png, sad.png) inside assets/img/. The
background of the modal is light gray (#f8f9fa), and the header text uses dark blue (#0056b3)
for contrast. Once the emojis are clicked a different modal appears for each of the different
emojis, it contains the custom images with motivational text.
7 Add the Motivation Carousel: Use Bootstrap’s carousel component inside a <section 50 Visual Studio code
class="content">. Insert three <div class="carousel-item"> elements, each containing an image minutes
(image1.jpg, image2.png, image3.jpg) stored inside assets/img/. The carousel buttons (prev and
next) will be styled with a white background (#ffffff) and blue arrows (#007bff) for visibility.
8 Style the "Why ProcrastiMate?" Section: A two-column layout will be created using 1 hour Visual Studio code,
Bootstrap's .d-flex and .align-items-center classes. The text will be wrapped inside a <div
class="text-content">, using a grayish-blue text color (#343a40) for readability. A <h2> tag will
be used for the section title, and <p> tags will be used for additional details, ensuring proper
spacing with .py-5.
9 Create the Footer Section: A <footer class="text-center text-white bg-dark py-3"> will be 20 Visual Studio code,
used to center the footer text and apply a dark gray background (#212529) with white text minutes
(#ffffff) for contrast. The footer will include a copyright message and designer credits for me.
10 Link JavaScript & Bootstrap Functionality: A <script> tag will be added at the end of 40 Visual Studio code,
<body> to link Bootstrap’s JavaScript library minutes
(https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js). A separate
script.js file will be linked for future custom JavaScript enhancements. No UI changes will
occur at this step.
11 Finalize CSS Styling: Custom styles for button hover effects, font sizes, and spacing 40 Visual Studio code,
adjustments will be added. A global body { font-family: 'Poppins', sans-serif; background- minutes
color: #f5f5f5; } will be defined to maintain consistency. The primary color scheme will
include Blue (#007bff), Dark Gray (#212529), and Light Gray (#f8f9fa).
PLAN FOR THE ABOUT & RESOURCES PAGE

Step Task Description Time Resources Required


no. Needed
1 Initialize HTML Boilerplate: A basic HTML structure will be written inside index.html, 10 Visual Studio Code
including the <head>, <body>, and essential meta tags for responsiveness. The page title will minutes
be set as ProcrastiMate Resources.
2 Link External Resources: Bootstrap will be integrated using a CDN for styling, and 15 Visual Studio Code
FontAwesome will be included for icons. Additionally, a styles.css file will be linked for minutes
custom styling.
3 Design the Navigation Bar: The navbar will be structured using Bootstrap’s navbar 30 Visual Studio Code
component. The background color will be set to blue (#1E73E8), with white (#FFFFFF) text. A minutes
custom "Play Music" button with a gradient background (#6A11CB → #2575FC) will be
added.
4 Add Hero Section with Background Video: A <video> tag will be used to autoplay a 45 Visual Studio Code
background video (highway-loop.mp4). A dark overlay (rgba(0, 0, 0, 0.706)) will be applied to minutes
improve text readability. The heading will be set to white (#FFFFFF).
5 Implement Scroll Icon: A custom scroll-down icon (scroll-icon.png) will be placed at the 30 Visual Studio Code
bottom of the hero section, linking to the resources section using data-scrollTo="resources". It minutes
will have a hover animation.
6 Create Resources Section: A <section> with the title Helpful Resources will be added. Inside, 30 Visual Studio Code,
two embedded YouTube videos will be displayed using <iframe> tags, contained within minutes CSS Bootstrap
Bootstrap cards.
7 Style Resource Cards: The resource cards will have a white (#FFFFFF) background, soft 5 minutes Visual Studio Code
shadows, and rounded borders (border-radius: 10px). They will be centered using display: flex;
justify-content: center;.
8 Develop Articles Section with Carousel: A Bootstrap carousel will be added to display three 20 Visual Studio Code
productivity-related articles. The active slide will have a dark blue (#1E3A5F) background with minutes
white (#FFFFFF) text.
9 Style Article Cards: Article cards inside the carousel will have a light grey (#F5F5F5) 10 Visual Studio Code
background, box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);, and an inner padding of 20px. minutes
10 Implement Play Music Feature: A <button> will be coded to toggle an <audio> element 40 Visual Studio Code
playing chill-music.mp3. JavaScript will be used to play or pause the audio on button click minutes
11 Enhance Play Music Button UI: The button will have a gradient background (#6A11CB → 30 Visual Studio Code
#2575FC) and a hover effect where brightness increases by 10%. A FontAwesome music icon minutes
will be added.
12 Improve Website Responsiveness: CSS media queries will be written to adjust the layout for 10 Visual Studio Code
mobile devices. The navigation bar will collapse into a hamburger menu, and the hero section minutes
text will be resized accordingly.
13 Add Footer Section: A dark (#212529) footer will be added, containing white (#FFFFFF) text 10 Visual Studio Code
and a copyright notice stating © 2025 ProcrastiMate. Designed by ***** ******* (this is my minutes
name)
PLAN FOR THE ROUTINE PLANNER PAGE
Step Task Description Time Resources Required
no. Needed
1 Set Up the HTML Structure: I will create the basic HTML file starting with <!DOCTYPE 30 Visual Studio Code
html> and include the necessary meta tags for responsiveness. I’ll add a <header> containing a minutes
Bootstrap-based navbar with a brand title, "ProcrastiMate," and links for Home, About, Routine
Planner, and Contacts. I will use Bootstrap classes for styling. The navbar background will be
set to #001f3f (dark blue), and the text color will be #FFFFFF (white).
2 Style the Page with CSS: I will link a styles.css file for custom styles and include Bootstrap’s 45 Visual Studio Code
CSS for grid layouts and components. I will add a hover effect on the navbar links, making minutes
them change to a lighter blue shade (#0056b3). I will also set up the text alignment, spacing,
and font-family across the site to ensure visual consistency.
3 Add the Planner Header Section: I will create a section with a heading and subheading for 20 Visual Studio Code
the planner introduction. I will use a background color of #003366 (deep blue) for contrast and minutes
white text (#FFFFFF). I will add two buttons: one for adding tasks (#007bff, blue) and another
for clearing tasks (#dc3545, red), styled with Bootstrap.
4 Create the Task List Section: I will set up a dynamic container with the id taskContainer 1 hour Visual Studio Code
inside a Bootstrap-styled container. I will add placeholders to display tasks added by the user or
show a message if no tasks exist. This section will include a white background (#FFFFFF) and
gray borders (#e0e0e0) for task items.
5 Implement the Task Modal: I will create a Bootstrap modal for adding new tasks. The modal 20 Visual Studio Code
will have input fields for the task date, task text, and description, styled using Bootstrap classes. minutes
The modal background will be white (#FFFFFF), and buttons will follow the primary and
secondary colors (#007bff for Save, #6c757d for Close).
6 Add the Instant Motivation Section: I will create a section with a button to display 40 Visual Studio Code
motivational quotes. The button will use the primary blue color (#007bff), and the displayed minutes
quote will have a bold font and centered alignment. The background for this section will be a
light blue (#f0f8ff) to provide a positive feel.
7 Create the Chatbot Modal: I will add a floating button (💬) to open a modal where users can 30 Visual Studio Code
send messages to themselves. The modal will include a text area and a “Send” button styled in minutes
green (#28a745). The modal background will be white (#FFFFFF), and a close icon will allow
users to hide it.
8 Integrate JavaScript for Task Functionality: I will implement JavaScript for task 1 hour Visual Studio Code
management. This will include adding tasks (stored in localStorage), displaying them
dynamically, toggling task descriptions, and deleting tasks. The loadTasks() function will
handle the rendering, while event listeners will manage user interactions like adding and
removing tasks.
9 Add Motivational Quotes Logic: I will write JavaScript to randomly display motivational 1 hour 30 Visual Studio Code
quotes when the “Get Motivation” button is clicked. The quotes array will store pre-defined minutes
quotes, and a random quote will be displayed in the section.
10 Build Email Simulation in Chatbot Modal: I will simulate an email-sending feature using 1 hour 30 Visual Studio Code
JavaScript in the chatbot modal. The function will display a confirmation message with a minutes
simulated delay to mimic email processing.
11 Finalize Design and Add Footer: I will add a footer with a dark background (#343a40) and 1 hour 30 Visual Studio Code
white text (#FFFFFF) containing copyright information and my name. I will ensure all spacing minutes
and alignment are consistent across the website.
PLAN FOR THE CONTACTS PAGE
Step Task Description Time Resources Required
no. Needed
1 Set Up the HTML Structure: I will structure the HTML page with a <header> for the 30 Visual Studio Code
navigation bar, a <section> for the contact form, and a <footer> for copyright information. The minutes
form fields will include input fields for name, email, phone number, and a text area for the
message. The modal for the confirmation message and the chatbot button/modal will also be
added.
2 Design Navbar with Bootstrap: I will style the navigation bar using Bootstrap classes. The 10 Visual Studio Code
background will be set to dark blue (#001f3f) with white text. I will ensure the navbar links minutes
align centrally using justify-content-center.
3 Create Contact Form Section: I will style the form using Bootstrap grid and utility classes. 25 Visual Studio Code
The form will have rounded corners, a light gray background (#f8f9fa), and spacing between minutes
fields using padding/margin utilities
4 Style the Contact Header: I will ensure the contact header has a gradient background, starting 30 Visual Studio Code
from #001f3f to #003366, with centered white text (#FFFFFF). I will include a heading and minutes
subheading for better clarity.
5 Implement Modal for Confirmation: I will create a modal that displays a thank-you message 30 Visual Studio Code
after the form is submitted. The modal will have a white background and a button to close it, minutes
styled with Bootstrap’s btn-primary.
6 Add Chatbot Button and Modal: I will create a floating chatbot button that opens a modal for 40 Visual Studio Code
users to send themselves messages. The button will be blue (#007bff) with white text, while the minutes
modal will use green for the "Send" button (#28a745).
7 Implement JavaScript for Modal Behavior: I will write JavaScript to handle the modal's 1 hour Visual Studio Code
open/close functionality and form submission. I will ensure the modal displays a confirmation
message when the form is successfully submitted.
8 Enhance Form Validation with JavaScript: I will add JavaScript validation to ensure all 20 Visual Studio Code
fields are completed correctly before submission. Error messages will be displayed for invalid minutes
fields
9 Finalize Footer Design: I will style the footer with a dark background (#343a40) and white 30 Visual Studio Code
text (#FFFFFF). It will include copyright information and my name, centered for a clean look. minutes
Homepage: (Footer remains same throughout)

About & Resources Page:


Routine Planner page:

Contact Us Page:
Strand i- Develop design specifications which clearly state the success criteria for the design of a solution
In this strand, I have developed design specifications for the website I will be creating for the solution of
procrastination of students in IBDP and my client.

Design Design Specification (Refer to Appendix 2.1 for the Justification


Aspect sources used for finding out specific design
specifications)
Aesthetics Homepage (Index.html) Homepage (Index.html)
1.1 Website Name along with Navbar: Bold white text 1.1 The clean white text ensures clarity and visibility
using a sans-serif font placed in the top-left corner. The against the blue background, while the modern sans-
hex colour for the text is #FFFFFF, ensuring clarity and serif font conveys professionalism.
visibility against the blue SVG background. Font style is 1.2 The geometric design and calming blue tones
modern and professional. create a visually appealing yet minimalist background,
1.2 Blue SVG Background: A geometric background avoiding distractions for the user.
with overlapping triangular shapes in shades of blue. 1.3 The bold text draws immediate attention to the
Primary colours used are #0077BE (base), #55A5D4, website’s purpose, while the high contrast against the
and #CCE7F5 for lighter accents. The design is blue background ensures readability.
minimalist to reduce visual clutter. 1.4 The green button is vibrant and stands out on the
1.3 Main Heading: Large, bold white text (#FFFFFF) page, prompting users to take action. White text
centred on the page. Font size is significantly larger than maintains visibility while ensuring a sleek look.
the subtext, ensuring it captures immediate attention. The 1.5 The white subheading text is clear and concise,
choice of white contrasts effectively with the blue positioned to support the main heading without
background. overpowering it.
1.4 Call to Action Button (Instagram): A bright green 1.6 The white text ensures high visibility, while the
rectangular button in the top-right corner with hex colour subtle grey hover effect adds interactivity and
#4CAF50. Features white text (#FFFFFF) to ensure enhances the user experience.
readability. The button is prominently placed for easy
navigation to social media. 2.1 The clean white text ensures clarity and visibility
1.5 Tagline Text: Subheading text in white (#FFFFFF), against the blue background, while the modern sans-
positioned below the main heading, explaining the serif font conveys professionalism.
purpose of the site in a clear and concise manner. The 2.2 Sans-serif fonts are professional and easy to read,
font size is smaller than the heading but large enough to especially on digital platforms. This style gives the
ensure readability. website a clean, modern, and approachable tone,
1.6 NavBar: Includes clickable options such as "Home," suitable for engaging a youthful audience. The
"About Us," "Routine Planner," and "Contacts." Text is hierarchy in font sizes ensures clarity.
white (#FFFFFF), and the hover effect changes the text 2.3 The high contrast between dark Gray and white
to a subtle shade of grey for interactivity. improves readability, particularly for long-form
content. Green is often associated with wellness and
Webpages 2,3,4 (About, Routine Planner, Blog): positivity, subtly reinforcing the site’s mission of
2.1 Website Name along with Navbar: Bold white text promoting better mental health.
using a sans-serif font placed in the top-left corner. The 2.4 A central hero section with clear typography
hex colour for the text is #FFFFFF, ensuring clarity and immediately grabs attention. The tagline provides an
visibility against the blue SVG background. Font style is opportunity to communicate the purpose of the
modern and professional. The Navbar Includes clickable website effectively. The blue background evokes a
options such as "Home," "About Us," "Routine Planner," sense of calm and focus, aligning with the themes of
and "Contacts." Text is white (#FFFFFF), and the hover wellness.
effect changes the text to a subtle shade of grey for 2.5 This button encourages users to connect with the
interactivity. project on social media, fostering community
2.2 Font Style: Sans-serif font used for headings, engagement. The bright green colour highlights the
subheadings, and body text. button and makes it easy to find, ensuring users take
2.3 Colour Scheme: Dark Text (#333333) with white notice and interact.
(#FFFFFF) background and green accents (#4CAF50). 2.6 The two-column structure creates a balanced
2.4 Hero Section (Main Heading and Tagline): The visual hierarchy, making it easier to scan and
hero section includes a bold white heading (#FFFFFF) understand content at a glance.
and tagline text, centred on the page, against a calming 2.7 Including an image that visually represents the
blue SVG background (#0077BE). intersection of wellness and technology fosters a sense
2.5 Call to Action Button (Instagram): A rectangular of innovation and reliability.
button placed in the top-right corner of the hero section, 2.8 Enhances usability by allowing quick navigation
coloured green (#4CAF50) with bold white text to the top, especially on pages with longer content.
(#FFFFFF) that reads "Follow Us on Instagram."
2.6 Content Layout: A two-column design with text on
the right and an image on the left that depicts wellness-
related themes and links to scientific or technical
innovation (e.g., a brain visualization, mental health
technology, or innovative wellness tools).
2.7 Boosting Wellness Image: A scientific and wellness-
focused image (e.g., a stylized neural network, a fitness
tracker, or meditation technology).
2.8 Footer and Scroll Button: A small, circular, green
button (#4CAF50) in the bottom-right corner that allows
users to scroll back to the top of the page.

Client 1.1 Client Description: The primary client is Client X, a Client X faces a unique combination of academic
high school student enrolled in IBDP1, who represents pressures, including managing Internal Assessments,
the larger demographic of IBDP students struggling with Extended Essay preparations, CAS commitments, and
procrastination. The solution will also benefit other high ToK work, which are common challenges for IBDP
school students in similar rigorous academic programs. students. The design is tailored to meet their specific
needs, addressing procrastination as it directly impacts
their academic performance and personal well-being.
By targeting this demographic, the solution aims to
address procrastination at its root, with strategies
applicable to real-world academic challenges.
Cost 1.1 Cost Description: The product will be entirely free Offering the product for free ensures equitable access,
for the end user. Students can freely access all features, particularly for students who may not have the
including time management tools, mindfulness exercises, financial means to pay for productivity or wellness
and resources for managing procrastination. tools. Accessibility is critical for ensuring that all
Development costs will be minimized using free or open- students, regardless of their financial background, can
source platforms for hosting and maintenance. Optional benefit from a solution designed to improve their time
donations or sponsorships may cover ongoing expenses. management and reduce stress.

Environment 1.1 Environment Description: The website is fully By being entirely web-based, the solution avoids the
online and accessible through digital devices, eliminating environmental impact associated with paper
the need for printed resources or physical distribution. production, printing, and shipping. It supports
sustainability by reducing waste and promoting an
eco-friendly alternative to traditional tools like
planners or books.
Size 1.1 Responsive Design: The website will be responsive, 1.1 This ensures accessibility and usability across all
adapting to various screen sizes, such as desktops devices, allowing students to use the website
(1920x1080 pixels), tablets (1024x768 pixels), and conveniently on the go. A responsive layout prevents
smartphones (375x667 pixels). content from appearing cluttered or inaccessible on
smaller devices, catering to the needs of students with
1.2 Header/Menu Dimensions: The header and varying tech access.
navigation menu will span approximately 1920 pixels in 1.2 The header size is optimized to ensure clarity and
width on desktops and reduce proportionally for smaller readability while not taking up too much vertical
screens, with a height of 50-60 pixels. space, leaving sufficient room for the main content.
This aligns with user needs by allowing key
1.3 Text Area Width: The text content area will cover navigation to remain visible but unobtrusive.
60-70% of the screen width on desktops, reducing 1.3 Optimized text area width improves readability by
proportionally on smaller devices, ensuring lines do not preventing text from stretching too wide on larger
exceed 80-100 characters. screens or being too cramped on smaller devices. This
design supports user focus and reduces eye strain,
1.4 Content Section Spacing: The vertical spacing which is crucial for maintaining engagement when
between sections will be around 50-60 pixels, and reading information about procrastination solutions.
margins will be 20-30 pixels on all sides. 1.4 Adequate spacing prevents the page from looking
cluttered and provides a smooth reading experience.
1.5 Button Size: Interactive buttons will have a Proper spacing ensures that the website’s layout
minimum size of 44x44 pixels (as recommended by web remains visually appealing, helping users focus on
accessibility standards). content related to managing procrastination rather
than being distracted by a chaotic design.
1.5 larger button sizes make the interface more user-
friendly, especially for touch-based devices. This
ensures students can easily navigate the website and
interact with features like planners, even on small
screens like smartphones.

Safety 1.1 Safe and Appropriate Language: The website 1.1 Suitable language ensures the website is
content will use language suitable for teenagers, avoiding appropriate for high school students and builds trust in
explicit, offensive, or inappropriate terms. the platform.
1.2 Appropriate Media Use: All images and videos 1.2 Using relevant media aligns with the website's
embedded on the website will be relevant to the topic of purpose and ensures a professional and comfortable
student well-being and mental health and will be free user experience.
from offensive or harmful content. 1.3 Trusted links protect users from security risks and
1.3 Secure Hyperlinks: All external links will redirect to reinforce the website's credibility.
verified, credible, and safe websites, free of malicious or
harmful content.

Function 1.1 Interactive Tools to Tackle Procrastination: The 1.1 These tools are designed to address the core issue
website will provide tools like a customizable routine- of procrastination for Client X and other IBDP
planner, and goal-setting features to help students students by enabling better time management and
structure their schedules and manage deadlines prioritization. For IBDP students, balancing Internal
effectively. Assessments (IAs), Extended Essays (EE), Theory of
Knowledge (ToK), and CAS is a significant challenge.
1.2 Mindfulness and Stress-Reduction Resources: The Customizable tools ensure students can adapt
platform will offer guided mindfulness exercises and strategies to their specific needs, reducing stress and
stress-relief techniques to help students manage anxiety improving efficiency.
associated with procrastination. 1.2 By incorporating mindfulness resources, the
website not only addresses the academic struggles
1.3 Accessible and Intuitive Interface: The website will caused by procrastination but also supports overall
feature an easy-to-navigate layout with minimal well-being. These resources help users break the cycle
distractions, focusing on helping students engage quickly of avoidance and emotional overwhelm, a common
and effectively. issue for IBDP students managing multiple deadlines
and high expectations.
1.3 A simple, distraction-free interface aligns with the
needs of students battling procrastination, as overly
complex designs can contribute to avoidance behavior.
This ensures the website remains a helpful tool rather
than becoming an additional source of procrastination.

Material 1.1 Laptop with Internet Access: I will use my personal 1.1 The laptop is essential for writing and testing the
laptop for all coding, testing, and deployment. code, while the internet is needed to access resources
and deploy the website.
1.2 Visual Studio Code (VS Code): My primary code 1.2 VS Code is a lightweight, efficient tool for writing
editor for the website development. and debugging HTML, CSS, and JavaScript.
1.3 These are core technologies for creating a
1.3 HTML, CSS, and JavaScript Knowledge: Skills I responsive and interactive website that addresses
will use to develop the website. Client X’s procrastination issues.
1.4 These tools are ideal for creating clean and
1.4 Optional Design Tools: Canva or Figma for creating professional visuals to enhance the user experience
visuals if needed. without extra costs.

You might also like