QUESTION

The objective of this assignment is to get real world experience with building web sites.
Build the following web site called – Brewery FX Web Site. When you finish the assignment make sure all your html code and your css code is formatted to look well organized and please upload a zip file of ALL files in the folder for your solution, see in class notes on how to do this.. Also before you submit please format all the html and css files source code and save, then Zip up the Entire folder to submit. Make a folder called “images” to store all images used in this web site. Make sub folders in the images folder for BeerSigns, BeerCans, BeerBottles, BeerCoasters, BeerTrays, Beer Labels, and HomeImages. Make a folder called “CSS” for all css files. Build your own css files based upon the css files you have seen in previous assignments. Do Not use inline style commands as is prevalent in Word Press web pages. The owner of the web site wants people to email him pix and descriptions of collectibles that they want to sell. Also the collectibles that are on the site are for sale.
You can view this site to see how it works currently:
The actual web site is http://www.breweryfx.com/ Links to an external site..

SOLUTION

🟥 Struggling with where to start this assignment? Follow this guide to tackle your assignment easily!

📘 Step-by-Step Guide: How to Build the Brewery FX Web Site

✅ 1. Folder and File Structure (Before You Code)

Start by creating an organized folder structure:

✅ 2. Create HTML Pages (Minimum 4 Recommended)

Use semantic HTML5 to build the following basic pages:

index.html — Homepage with welcome message and featured images
collectibles.html — List of available beer collectibles with images and descriptions
contact.html — Email form to submit items for sale (include file upload field)
about.html — History or background of Brewery FX

HTML Tips:

Use <header>, <nav>, <main>, <section>, <footer>
Add meaningful <alt> text to all images
Link to external CSS only (no inline styles)

✅ 3. Build Your CSS File

In /CSS/style.css, define:

Layout (header, nav bar, content area, footer)
Typography (fonts, sizes, colors)
Image display (gallery styling for collectibles)
Responsive layout (use media queries if desired)

Example:

✅ 4. Collect and Place Images

Use placeholder images if needed
Place them in their correct subfolders under /images/
Reference images with relative paths:
src="images/BeerSigns/sign1.jpg"

✅ 5. Add a Contact Form (on contact.html)

Use a simple <form> with:

html

<form action="mailto:example@breweryfx.com" method="post" enctype="text/plain">

  <label for="name">Name:</label><br>

  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label><br>

  <input type="email" id="email" name="email"><br><br>
  <label for="description">Item Description:</label><br>

  <textarea id="description" name="description"></textarea><br><br>
  <label for="file">Upload Image:</label><br>

  <input type="file" id="file" name="file"><br><br>

<input type="submit" value="Send"> </form>

✅ 6. Final Steps Before Submitting

Format all your HTML and CSS code (use VS Code Format Document or a beautifier tool)
Test all links and image paths
Validate your HTML/CSS via W3C Validator
Make sure the website is fully navigable
Zip the entire “BreweryFX” folder, including:
- All HTML files
- CSS/ folder with styles
- images/ folder with subfolders
Submit as per your course instructions

🧑‍🏫 Tutor’s Tip:

Don’t just “copy” the layout of the real site—think about usability and clarity. Make sure:

Navigation is clear
Items are easy to browse
It works well on desktop and mobile (basic responsiveness is a big plus!)

Once you’re ready, I can help you:

Review your HTML or CSS
Improve layout or form structure
Add JavaScript (if needed later)
Optimize images or accessibility

📁 When you’re ready, upload your zip file here for a review!

building a fully functional website for Brewery FX