About

This is my final project for the Code First Girls Web Development Kickstarter course.

I built a responsive website using HTML, CSS, and JavaScript. The site has a page which talks about the benefits of plants on mental health, and also has a page which shows a variety of beginner-friendly plants which can be filtered according to their various needs.

View Live Site

Project Requirements

Must Have:

• At least 2 HTML pages and one external CSS file
• Consistent navbar on all pages
• Styled well
• All links working
• Basic user interaction (ex: hover, submit form, action on click)

Nice to Have:

• Mobile-responsive website
• Effective use of classes and IDs
• JavaScript used to enable user interaction

What Went Well

1. The JavaScript sorting function was a lot easier to write than I thought it would be, I'm really proud of that!
2. I'm really happy with the overall design and colour scheme.
3. I managed to create lots of reusable layouts, elements, and classes, so styling some things became quite quick towards the end.

Where I Struggled

1. Getting the mobile nav menu to work took me forever, and it still doesn't look quite as I intended it to. I'd like to have the same frosted-glass effect on the mobile nav as is on the desktop nav, but the backdrop-filter property wasn't playing nice with the expanding menu. I settled for an opaque nav menu for now.
2. The accordion menus were a real challenge as I wasn't quite sure how to approach them, and wanted to avoid using the built-in <details><summary> HTML element. I watched several tutorials of different methods, but none of them were working quite as I wanted for some reason or another. Eventually I meshed together bits from a couple different tutorials to make something I was happy with.

What I Learned

1. How to create a side-sliding mobile nav menu that opens on click
2. Implementing event listeners
3. Using JavaScript to add an 'active' class to various components on click
4. Using JavaScript to filter items on user interaction
5. Using a forEach loop to add event listeners to several elements with minimal code
6. Creating an accordion menu with JavaScript to toggle each item open and closed
7. Using the aria-controls element for accessibility

Continued Development / Still To Do

• Add the aria-expanded attribute on the accordion items and mobile nav for increased accessibility, to be toggled with JS
• Add an 'About' page with more details about the project and a form
• Do futher research into the content to improve the site copy and make it more personal and engaging
• Add an 'active' class to the current page to aid with visual navigation
• Fix primary buttons on the homepage (currently doing some weird things when tabbing through because it's a button wrapped in an anchor tag)
• Fix mobile nav so it doesn't briefly pop out when screen shrinks
• Check which CSS properties need -webkit- prefixes and add those in where needed

Sources

• Illustrations from DrawKit
• Plant photos from Patch Plants
• Icons from FontAwesome

Course Completion Certificate

With this project, I won joint first place in the final project competition and was awarded a 'Highly Commended' certificate! 🎉