Git 417 - Final
Uploaded by
tygarnerGit 417 - Final
Uploaded by
tygarnerLEGAL
SEAFOODS
ONE PAGE
WEBSITE
FINAL
By: Tanisha Garner
GIT 417
PROJECT
REQUIREME
NTS Build a one-page
website that is 1280px
wide (fixed)
Include valid and
properly functional
HTML, CSS and
JavaScript (all in
separate files)
Include features such as Implement a light or
a Product Display, dark mode feature
Guessing Games and a
Contact Form
TARGET • The target audience of Legal Seafoods are families,
middle-aged folks, people who love seafood, and
AUDIENCE (more niched) wine enthusiast.
DEMOGRAPHICS
• Ages: 30 - 75
• Middle to high income
• Families
• Tourists
HOW WILL THIS SITE BE USEFUL TO MY
AUDIENCE ?
• People will visit this site to get a better
understanding of the history, mission and some of
our most prided dishes that we offer. They will also
be able to play a game to win a free lobster roll,
along with being able to contact us through our form.
BACKGROUND
• In this project my main goal was to create a one-page website for a mock-business, company
or brand of my choosing. Working in the service industry, I decided to create a mock one-
page website for Legal seafoods here in the New England area.
THE PROCESS
• I first started by creating some wireframes drawn by hand to get a visual representation of
the layout of each section and their elements. As I drew out each section from beginning to
completion, I thought about how to make each section fit in a visually appealing, yet simple
way.
BRAND • Founded in 1950 in Cambridge, Massachusetts (originally a fish
market).
• Known for fresh, high-quality seafood and New England
classics like clam chowder, lobster, and oysters.
• Operates over 20 locations, mainly in Massachusetts.
• Strict seafood standards – once partnered with the USDA to
inspect fish for safety and quality.
• Offers a mix of casual and upscale dining environments and
experiences.
• Committed to sustainability – avoids overfished or non-eco-
friendly seafood (e.g., discontinued Chilean sea bass).
• Features a robust wine program and curated pairings, catering to
food and wine lovers.
• Runs the Legal Net Rewards program that offering points,
discounts, and exclusive perks.
• Has a strong regional identity to the new England area while also
expanding that to a new and farthest location in Chicago, Illinois.
CONTENT
• Because I chose to create my project around a real
business, I gathered image content from their
website along with images on their social media
platforms to use in different sections of my page.
WIREFRAMES
HTML
• I wrote the HTML code for my website
based on the wireframe that I created. My
wireframe was a useful guide into
simplifying the structure of my page with
visual representations.
• I made sure to draw out lines where I knew I
wanted sections to start and end. I used
sections and divs to make it easy to later
code for CSS styling of the page. While
coding each section of my HTML, I made
sure to give all of my elements proper Ids
and classes.
CSS
• Using the Ids and Classes linked to
elements in my HTML file; I was able to
target certain elements and style them
based on the theme of the brand.
JAVASCRIPT
• After completing my HTML and CSS files for the layout and styling of the website, I now had
to include JavaScript to implement features in the product requirements.
• The first feature I implemented in JS was the Product Switcher Display. I made sure to
connect all proper Ids from button and product variables in my HTML and loop them through
to correspond a button to a dish. I made sure to add a function that only showcases one dish
and its description at a time.
• The second feature I implemented was the Form and making sure it validates. I did this by
creating an eventListener that only displays an error message is the user (guest) leaves an
input field blank or a radio button unselected. I prevented the form from submitting if all
input fields weren’t filled out with the proper information. If all information was filled out, the
user (guest) would receive “Thank you” message and the form inputs would clear, indicating
the message was “sent”.
REFLECTION
• If I had more time to complete this project, I would have perfected the site by adding a a
menu to the page. I also would have added a map that can show the different locations we
have in New England. I would implement JavaScript to make it clickable and show a pop up
of the information based on the location selected.
• I learned a lot about how design paired with the functionality that JavaScript provides. This
project has given me a better understanding of how they three languages work and how
they are woven together for a complete project.
• In the future I can improve on how to better connect between the languages and improve on
my knowledge of JavaScript to further condense and clean up my code.
