Web Design Case Study
This case study summarizes a Penn State web design final project focused on building a multi-page static website using HTML, CSS, JavaScript, navigation, image presentation, hover effects, product-style layouts, and user-facing site structure.
Content Type: Academic Web Design Project / Front-End Development Case Study
This case study is based on a Penn State web design course final project. It has been summarized for portfolio use to demonstrate front-end development, visual design, layout structure, and interactive web design concepts.
Overview#
Uphill Struggle Bicycles was a multi-page website project built for a web design course at Penn State.
The project focused on creating a fictional bicycle shop website with separate pages for the homepage, mountain bikes, city bikes, and an about page. The site used custom HTML, CSS, image assets, navigation, product tables, hover styling, and JavaScript-based interaction.
This project is important to include in my portfolio because it shows early hands-on experience building a complete website structure from scratch before creating this current Hugo-based professional portfolio.
Project Goals#
The goal of the project was to design and build a functional static website with:
- multiple linked pages
- a consistent navigation menu
- custom styling
- images and visual branding
- product-focused content sections
- responsive image behavior
- hover effects
- table-based product listings
- basic JavaScript interaction
- a polished visual theme
Site Structure#
The website included several main pages:
Home Page#
The home page introduced the fictional bicycle shop and highlighted both mountain bikes and city bikes.
It used large image sections, category links, background imagery, and promotional text to guide visitors toward the main product pages.
Mountain Bikes Page#
The mountain bikes page presented a product-style table with bike images, descriptions, and prices.
The page included image hover behavior and dynamic text changes to make the product section more interactive.
City Bikes Page#
The city bikes page followed a similar structure to the mountain bikes page, with a product table, bike images, pricing, hover behavior, and descriptive text.
About Us Page#
The about page included brand imagery, promotional content, a coupon-style list, and a flexbox-style image gallery using bike-related visuals.
Technologies Used#
The project used:
- HTML
- CSS
- JavaScript
- custom image assets
- multi-page static site structure
- CSS hover effects
- fixed navigation
- responsive image sizing
- product tables
- flexbox-style gallery layout
Design Features#
Several design features from this project are still useful in my current portfolio work.
Fixed Navigation#
The project used a fixed navigation bar so visitors could move between pages consistently.
This helped reinforce the importance of clear navigation and predictable site structure.
Image-Driven Layout#
The website used large bicycle images, background images, and visual category sections to make the site feel more like a real product-focused landing page.
Hover Effects#
The project used hover effects for navigation, image scaling, border changes, and visual feedback.
This helped make the site feel more interactive and less static.
JavaScript Interaction#
The product pages included JavaScript that changed product descriptions when users hovered over bike images.
This introduced basic DOM interaction and showed how JavaScript can make static pages feel more dynamic.
Gallery Layout#
The about page included a flexible image gallery layout, which helped demonstrate simple responsive layout thinking.
What This Project Demonstrates#
This project demonstrates hands-on experience with:
- building a multi-page static website
- organizing HTML pages and assets
- applying custom CSS across multiple pages
- creating consistent navigation
- using image assets effectively
- designing product-style sections
- adding hover-based visual feedback
- writing basic JavaScript for interaction
- thinking about visual hierarchy and user navigation
How This Influenced sudoRunner#
This earlier web design project influenced how I think about my current portfolio.
Ideas carried forward into sudoRunner include:
- clear navigation by category
- card-style content areas
- hover effects for interactive feedback
- visual hierarchy through headings and sections
- consistent styling across pages
- keeping the site easy for visitors to explore
- using design to support credibility, not distract from content
What I Would Improve Today#
If I rebuilt this project today, I would improve it by:
- using more semantic HTML structure
- improving accessibility labels and contrast
- making the layout more responsive across screen sizes
- replacing repeated navigation markup with reusable templates
- improving the visual consistency of product cards
- using modern CSS grid more heavily
- reducing placeholder text
- improving mobile navigation
- separating JavaScript into its own file
- optimizing images for faster loading
Portfolio Note#
This project is included as a front-end development and web design case study.
It is not intended to represent a production business website. Instead, it demonstrates hands-on academic experience with HTML, CSS, JavaScript, layout design, navigation, image presentation, and interactive web page behavior.