Final Project Reflection (Hocott's Garden Center Website)
For my final, I developed a website for Hocott's Garden Center, an eclectic local business. I enjoy tending plants and I'm drawn to the beauty of nature, so I naturally gravitated towards gardening-related activities. I thought of Hocott's since I've visited them before and decided to check out their online presence, which wasn't bad but it needed some improvement. I enjoyed curating content for the site, but I was careful not to get sidetracked. It was easy to find tons of images and use ChatGPT to generate the copy.
The intended audience is gardening lovers, people with outdoor spaces, eco-conscious consumers, and even local businesses eyeing the landscaping services. They're visiting the website to find out about store hours, location, contact info, and what type of plants are available.
The purpose of the website is to:
- increase visibility from online traffic
- promote landscaping services
- build a distinct brand identity
- educate customers
- facilitate in-store visits
I had a hard time getting a handle on the development process after creating my wireframes. Once I finally got into it, I remembered the concepts I learned this semester like CSS grid and using media queries. It really helped reinforce the entire process. It's too bad that I had to struggle so much with self-doubt in the beginning but I'm proud that I got with it and created a solid website that meets the assignment's technical requirements.
Addressing Feedback
For my website feedback, I reached out to three individuals with diverse perspectives: a coworker, my fiance, and a classmate. Each person provided valuable insights and suggestions.
My coworker noted the website seemed more geared toward landscaping services than a garden center. To address this, I added more store plant images and CTA's to visit the store. If I have time I'm going to add a prominent section on the home page with store information above the fold. In my V2 update, I plan to expand product details and enhance the grid layout with additional images. I'd also like to bring in an image slider. I tried pulling in my slick.js demo from 1310, but I ran into some issues and ran out of time.
My classmate recommended I adjust the spacing of my services section on my homepage since it was spaced out far on desktop, so I applied a max-width property. He also recommended that I incorporate social media icons to make the footer look more polished and get more experience using SVGs.
My fiance Isaac gave me the best most thorough list of things to improve. I was able to get address a few pressing things, but I'm linking the lists for tablet/mobile and desktop notes here for myself to revisit. One of the biggest issues he brought up was my "submit" button missing on my contact forms. I realized it was because I had a height set on the iframe that cut off the bottom. I instead added an ID of content to the parent container and then added a CSS selector to set the height.
From Doubt to Design
Developing the Hocott's Garden Center website has been both challenging and rewarding, emphasizing the iterative nature of web development and the importance of persevering! If I had to do this process over again, I would start earlier to get the most out of this learning experience. It's a shame that I wasted time doubting myself and procrastinating, but I'm glad I was able to finish strong and I appreciate your help getting started. I definitely feel more comfortable sketching and using Figma for wireframing, breaking down my projects into design sprints, and managing my files in a VS code environment. I am a web developer! (Just a fledgling, but man I'm flying!🐤)
3342 Course Reflection
The Information Technology department has been a game-changer for me! Pursuing these web classes for my professional development has been incredibly rewarding, both professionally and personally.
Looking back on this course, I've come a long way in understanding mobile-web design and modern development approaches. I found myself wrestling with the process and struggling to get over some internal anxiety at times, the journey has been invaluable! Now, I can confidently navigate through the web development process and communicate what I need from clients.
This semester I've taken it a step further by using the Inspector tool for troubleshooting and experimentation. Initially, navigating through code and identifying issues felt daunting, but with practice, I've gained confidence in using this tool effectively. It's made the CSS styling process so much easier! I've also been able to use the inspector to test different screen sizes, and it's helped me get a better understanding of how to use and test my CSS media queries.
Embracing new tools and techniques, in general, has been pivotal in my journey as a web developer, and I'm excited to continue expanding my skills and knowledge in this dynamic field.
Areas for Improvement
- Refine My HTML Boilerplate Template and Workflow
- Embrace the "messy middle" and experiment!
- Master Rapid Prototyping with Bootstrap
- Cultivate My Developer Mindset and Give Grace to Myself
- Deepen Understanding of Mobile-First Approach & Get in More Practice
You know I enjoy coding HTML and I want my boilerplate to be just so, but I haven't finessed it totally. My goal is to regularly update and customize it as I gain new skills and preferences. I don't like having a lot of code that I don't understand. It adds to the overwhelm, so I'd like to dig into the HTML Boilerplate documentation more to ease my anxiety and better understand the extra files and the CSS media queries and helper classes. This brings me to my second area of improvement.
It's okay to make mistakes! I'm trying to get more comfortable embracing imperfection in the coding process to facilitate learning. I think this has contributed to me getting hung up and having trouble getting started on my web projects.
I struggled with changing my ways of coding to implement Bootstrap. I understand the concept of using the Bootstrap classes to implement their external stylesheet, but it got overwhelming with all the documentation. I wish I would have given myself more time to play with it and ask questions in class. I know it's a powerful framework, so I would like to get more familiar with it. I do of course use the Bootstrap breakpoints as references for my media queries. I just need to start leveraging their layouts to see how they're set up.
Having a positive mindset is so important in our line of work, and I'm realizing that even more so now. I started getting over the sense of not fitting in, but negative self-talk still remains a challenge. I committed myself to the journey, striking a balance between perseverance and self-acceptance, but it can be difficult. I need to continue to develop a positive mindset that embraces challenges. Most importantly, I need to practice patience and resilience when facing technical issues, so that way I can troubleshoot effectively without becoming discouraged.
Mobile-first is a lot more challenging but I prefer it because it is more of a "content-first" approach. I like the idea of being forced to prioritize content for the small screen first. This helped reinforce everything I know as an empathetic web professional, that CONTENT IS THE MOST IMPORTANT PART OF THE SITE! It's what people are coming for. Learning about this approach also helped me see exactly where I could currently fit into a web development team as a specialized front-end dev that helps consult the clients, massage content, and focus on the usability and accessibility of the content.
I also appreciate how the mobile-first approach forces you to deal with the more challenging design decisions up front and allows us to write less CSS. Adopting this approach is helping me stick with a process so I can make it easier on my self later on--something I wasn't great at doing.
I hope to continue these skills over the summer working on a Hocott's V2 site, and then this fall through the IT Technical Certification Program. Thanks for the great class!