Question $1(70$ marks$)$

You are a web developer working for a local handyman named Max. Max is great at

fixing things around the house, but his current online presence is limited to a basic

business listing. He wants a user$-$friendly website to showcase his services, attract

new clients, and potentially allow for appointment scheduling.

Design and build a website for Max's handyman business using the following

technologies:

$$ HTML: Structure the website content. $($Do not use templates$)$

$$ CSS: Style the website for a clean and professional look. $($Do not use CSS

frameworks$)$

$$ JavaScript: Add interactive elements and basic functionality $($Contact form

validation$).$

$$ PHP: Add an appointment functionality. Appointment details should be saved

in a MySQL database.

$$ React: Create reusable components.

The website should include:

$$ A clear and informative homepage that introduces Max's services highlights

his experience and showcases positive customer testimonials.

$$ A dedicated "Services" page detailing Max's various handyman tasks $($e$.$g$.,$

plumbing, electrical work, furniture assembly$).$

$$ A user$-$friendly "Contact" page with a form for potential clients to reach out

and request a quote. Contact form details should be saved in a MySQL

database.

$$ A user$-$friendly "Appointment" page with a form for clients to book an

appointment. Appointment details should be saved in a MySQL database.

$$ Remember to consider user experience $($UX$)$ when designing the website.

Make sure it's easy for potential clients to navigate, find the information they

need, and contact Max for service.

Use your creativity and technical skills to build a website that will help Max's handyman

business thrive!

RubricCriteriaHTML Structure$(14$ Marks$)$Deduct $10$ marksfor usingtemplatesCSS Styling $(14$Marks$)$Deduct $10$ marksfor using CSSframeworks ortemplates$|$ JavaScriptFunctionality $($Marks$)$PHP and MySQL$(14$ marks$)$React ComponentUsage $(7$ Marks$)$Website Contentand Features $(14$Marks$)$Good $(10-8$ Marks$)$Fair $(7-5$ Marks$)$Clear HTML structure.Some inconsistencies in Frequent misuse of tags.Consistent use of appropriate tag usage. The code is Code is disorganised andHTML tags. $-$ Well$-$organized and somewhat organised. $(10-8$ difficult to follow. $(7-5$ Marks$)$maintainable code. $(14-11$ Marks$)-$ Clean and professional designwith consistent styles. $(14-11$Marks$)$Excellentdatabase$.$interactiveImplemented$-$Basic interactive elements$-$ Limited or no interactive$-$ No interactive elements orelements and form validation. and form validation areelementsBasic formfunctionality. Forms may notUsed JavaScript effectively to present. Some limitations functionality may be missing. $-$ work corectly. $(4-0$ Mark$)$enhance user experience. $(7-5$in JavaScript functionality. No advanced JavaScriptBoth appointment and contactdetails are saved in a MySQLdatabase$(14-11$ Marks$)$effectively utiliseseither appointment andstatements to connect to a MySQLContact details are saved ina MySQL database but notboth. $(10-8$ Marks$)$PHPare$8$ Marks$)$anddeveloped$.(14-11$ Marks$)$Mostly clean design with$-$ Functional design, but lacks$-$ Poorly styled website withsome inconsistencies. $(10-$ visual appeal. $(7-5$ Marks$)$presentHSYD$300-1-$Ju$-$Dec$2024-5$A$1-$RM$-$V$3-27052024$Limited use of advanced techniques were used. $(4-1$features. $(5-4$ Marks$)$Compelling and informative $-$ Mostly informative content,Marks$)$Marks$)$effectively utilises React It uses React components Limited use of React $-$No React components used ocomponents for reusability and to some extent but could be components or poorly not used effectively. $-$ Issuesmodularity. $(7-5$ Marks$)$improved$.$ Minor issues implemented. $-$ Code structurewith a basic understanding ofPoor $(4-0$ Mark$)$Poor use of HTMLInconsistent and incorrect tagusage. Code is messy andimpossible to understand. $(4-$aMark$)(4-1$ Marks$)$Limited and basic website$-$ Missing or irrelevant websitecontent. Some required content. $-$ Required sectionsrequired website sections clarity,Required sectionssections are missing or poorly not present or unusable. $(4-$ C$($Homepage$,$ Services, Contact$)$ are present but may lack developed. $(7-5$ Marks$)$visual clutter. $-$ Minimal useCSS. $(4-0$ Mark$)-$ application can connect to the no database connection $(0$database. However, data is not MarkHSYD$300-1-$Ju$-$Dec$2024-$SA$1-$RM$-$V$3-27052024$Marks$)$Marks$)$content about Max's services. $-$ All but could be improved forwith code structure. $(5-4$ shows a lack of understanding.React. $(1-0$ Mark$)$Mark$)$weldetails$.(10-8$ Marks$)$being saved in the database. $(7-5$ Marks$)$