DigiKey Video Series

Web Design · Content Hubs · 2023–2025

Designing and coding video-series websites from page structure to final launch.

DigiKey Video Series — featured project work

I designed and built the web experiences for DigiKey’s original video series from start to finish. I organized the content, planned reusable page patterns, wrote the HTML and CSS, tested the layouts across screen sizes, and carried the work through to the final live pages for Factory Tomorrow, City Digital, and Farm Different.

Page design & content structure · HTML development · CSS & responsive development · Series hero art direction · Season navigation pattern · Episode list templates · Sponsor placement system · Cross-device testing

DigiKey’s original video series explore technology shaping manufacturing, cities, and agriculture. I took each web experience from organized content and layout decisions through hands-on HTML and CSS development, then into its final live form on digikey.com.

Each series contained multiple seasons, sponsors, summaries, and embedded episodes inside DigiKey’s existing site. I owned the web work from start to finish: deciding how the content should flow, designing the page system, building it in code, and refining the result until it was ready to launch.

I organized the experience around the questions a viewer would naturally ask: What is this series? Which season am I viewing? Who is involved? What should I watch next? That became a repeatable structure of introduction, season navigation, sponsor context, and episode modules that could grow without requiring a new layout every time.

I wrote the HTML that gives the page its structure—season tabs, sponsor-logo groups, text blocks, embedded video players, episode headings, and summaries. I used consistent class patterns so each new episode could be added predictably and the same foundation could support every series.

HTML development — sponsor grid, episode content, and embedded video structure

With the structure working, I wrote the CSS for typography, spacing, image treatment, content cards, logo grids, alternating rows, and calls to action. I also added breakpoints that change widths and stacking behavior for tablets and phones. The screenshots show the actual layout rules and reusable patterns I built—not a handoff to someone else.

CSS development — responsive product and featured-content layouts

CSS development — page foundations, content styling, and shared modules

CSS development — reusable logo, content-card, and alternating layout patterns

I checked how long summaries, sponsor combinations, image proportions, and growing episode lists behaved at different sizes. I adjusted the layout rather than forcing every page into one rigid composition, keeping the viewing experience consistent while allowing Factory Tomorrow, City Digital, and Farm Different to retain their own visual identities.

The finished pages are the result of the complete process: content organization, experience design, HTML structure, CSS styling, responsive refinement, and launch. Together they demonstrate how I approach web design as both a visual designer and a hands-on builder.

Farm Different — series hubView live ↗