Early Bird Family Farm
This responsive website was developed for a client in Langley, BC as our final BCIT group client project. The site showcases the client’s organic farm and products. Our team comprised of 4 members and we all contributed to different aspects of the project.
Tools:
Wordpress, HTML, CSS, PHP, Javascript. inDesign, GitHub, Sass
The Process
Our team first discussed requirements with the client. Once we had an idea of what was to be incorporated, we suggested a design for the site which was well received. Wireframes were developed using inDesign. GitHub and Sass were used by the team.
My tasks icluded:
Site Map
Functionality spreadsheet detailing the WordPress features we would be incorporating into the website.
'About Us' page
'Fresh Sheet' page
Help notes on the WordPress admin dashboard for the client.
Code Demo:
As part of the group project, each team had to present a Code Demo of a particular WordPress feature we thought would be useful to other teams. Our team was assigned the topic - How to eliminate some of the WYSIWYG editor buttons in the WordPress Dashboard WYSIWYG editor and ACF WYSIWYG editor buttons to make it ‘foolproof’ for the client. I volunteered to create a demo project and present the code demo to the class.
Typography
Navigation font: Poppins font weight: 400
Headings font: Poppins font-weight: 600
Body font: Lora
Color Palette
Responsive
Challenges and Learning
I found it a bit difficult initially working with GitHub. But after a few pushes and commits, things went smoothly.
The LightBox Gallery feature on the 'About Us' page was a bit tricky. I did a lot of research and went through many StackOverflow queries to get it right. I finally used the LightGallery javascript code and the gallery worked beautifully.
I had some issues with the 'Read More' feature. I tried to code it with Javascript but I had problems with determining the height of the text divs. So, I used the Wordpress Advanced Custom fields and with a little bit of PHP and JQuery scripting, got it to work.