WEB DESIGN

Various Snippets of Web Code and Pages

Objective: The following snippets of code are meant for studies and discovery. They’re drafts used to learn something new that will potentially be used in a production environment.

Approach: I start by building the page, or block of code that I’m learning and I’m mainly focused on the layout and behavior of said code. I house the drafts on a subdomain with my hosting account, that way I can quickly share the draft(s) with stakeholders and project owners for review and potential use.

Results: Overall knowledge base with HTML, CSS and JS increased along with drafts visible by anyone with the link for review. Majority of drafts went on to be used in production.

2016 BADGEPASS WEBSITE – HEADER NAV + HERO BANNER

This code was one of my very first forrays into web design after my initial studies, back in 2016. The task was to create a header nav along with a hero banner that would eventually hold a container with some text and a call to action.

Click image to view web page.

BADGEPASS ONE APPLICATION – SIDEBAR DRAFTS

Stakeholders wanted a visual mockup of a sidebar in the BadgePass ONE application to show hover effects and collapsible elements, but I decided an actual interactive draft would work even better. 3 different sidebars with different hover effects.

Click image to view web page.

STICKY POSITION + IMAGE CAROUSEL + BREADCRUMBS + TABS

Page that has 2 columns with a sticky positioned image carousel in the left column, breadcrumbs and tabs. This was drafted for a printer product page.

Click image to view web page.

GRID DISPLAY + VIDEO VIEWPORTS + CSS LINEAR GRADIENT

This was an exercise with Grid Display along with displaying a video properly in multiple viewports and the background-image:linear-gradient CSS property.

Click image to view web page.

NETSUITE CONTACT FORM

This was a draft for a contact form that had to be setup on a product called NetSuite that was redirected from a link on BadgePass’ website.

Click image to view web page.

OUTLOOK EMAIL TEMPLATE

Constant Contact is the product BadgePass uses to distribute emails, but there were talks to switch from Constant Contact to find a process that could tie into NetSuite. I was briefly tasked with drafting up a template that could be used by our marketing coordinator within MS Outlook.

Click image to view web page.