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!

Résumé Draft Assignment
This is the first assignment in a two-part résumé assignment. For this assignment, the goal is to create an initial draft of your résumé. Watch the Fundamentals of a Resume Video (17 minutes) in Week 7 Step 2 and create a draft of your résumé to include your education with an anticipated graduation date, in demand skills (transferable skills from other positions) and experience. Utilize the following resources inside the Course Files, Career Services Resume Folder Resources to help you complete this assignment:
Résumé Evaluation Checklist
Fundamentals of a Résumé Healthcare Version
Health Services Job Search Guide
Résumé Guide_MBC_HIT_HSM
Résumé Sample
Career Services Flyer
HireDeVry 2.0 Guide
Upload your résumé draft to complete this assignment. (The second part of this assignment will be due in a later course where you will target your résumé to a specific job opportunity.)

Category: Code

building a fully functional website for Brewery FX