Bountiful Foods
Drinks and organic food!

🌐 Bountiful Foods 🌐


This is a personal web development project. All of the code was written in plain HTML, CSS, and vanilla JS, no frameworks were used.
All the media was designed and hand-crafted by me.

The company Bountiful Foods is based in Carlsbad, California. They specialize in selling organic foods and drinks. Their company grows throughout the California coast, where there are numerous food trucks and small businesses.
They serve a large number of clients, and their clientele is expanding daily.

The contents of each page of the website are described in detail here, along with the techniques I employed and the skills they showcase.

• The navigation menu which collapses into a "hamburger" button on smaller screens, displays my proficiency in responsive design and user experience optimization. The navigation links themselves, leading to different sections of the website, demonstrate my skill in creating functional and intuitive navigation.
  
• The footer presents contact information and copyright details neatly, reflecting my attention to detail and thoroughness in completing a webpage.
  

• The main content area provides valuable information about Carlsbad, including its attractions and characteristics. This indicates my capability to present content in an organized and visually appealing manner.
  
• The call-to-action section encourages users to explore the "Fresh" page, highlighting my understanding of user engagement techniques. The use of responsive images and the "Build my drink!" button demonstrate my knowledge in interactive design principles.
  
• The "You already built X drinks" section hints interactivity driven by JavaScript. This showcases my ability to incorporate dynamic content, store and manage using Localstorage user interactions.
  
• The weather section likely utilizes JavaScript to fetch data from a weather API, displaying real-time weather information for Carlsbad. This demonstrates my proficiency in integrating third-party APIs, manipulating JSON data, and presenting it in a user-friendly manner.
  

• The main content area, structured as a form, showcases my ability to design user interactions. The form's use of different input types (text, email, tel, textarea) demonstrates my familiarity with form elements and attributes.
  
• The ingredient section demonstrate dynamic behavior using select, and the instructions textarea that suggests interactivity driven by JavaScript and request from an API. This underlines my skills in creating dynamic user interfaces and handling user inputs.
  
• The form is designed properly, using intuitive visual effects for required fields, dividing each section into areas for better style, and following to best practices in form-filling. The button itself expresses the form's intent; it is not just a "submit" button.
  
• Nutriotional facts is displayed after entering all the necessary information. Depending on the fruits the user chose for the drink, the table will calculate various nutritional stats, showcasing my proficiency with calculations and the user-friendly presentation of information.
  

• The main content section display text to convey information about the company (company information, contact section), showing contact points and office hours. This reflects my capability to present vital content in an engaging and organized manner.
• A Google Maps iframe demonstrates my skill in integrating external content, in this case, an interactive map, into your webpage.