Below you'll find a few examples of real code that I've written for various projects.
Note that for each of these projects, I created a high-quality, responsive template that was then handed off to a developer to link up data end points and interactivity and launch in a production environment.
UAH Financial Aid Calculator
While working at UAH, I created a concept for a Financial Aid calculator to help potential students understand how much the Merit Tuition Scholarship could reduce their cost of attendance. After designing an initial concept, I created the concept in Codepen using production-ready HTML and CSS.
UAH Single Sign-On Redesign
UAH's IT department – upon upgrading the software behind UAH's SSO solution – needed a login page that conveyed the specific application a user was attempting to access while still showcasing a consistent, branded UI that would be recognizable and inspire confidence in the security of the page. I created a concept that did just that, while still working within the confines of the limited editing tools available through UAH's enterprise SSO solution.
hsv.beer
HSV.beer is an open-source project helping Rocket City residents and visitors find draft beer at the many excellent breweries, bars, and retailers in the Huntsville area. After finalizing the UI design for hsv.beer, I created a fully responsive template that eventually became the live website. A few delight mico-interactions to note: the subtle bubbles floating behind the logo, and the search icon that gracefully animates into a beer mug when users click on the search field.
CoWorking Night Flyer
Here, I took the original design of a weekly event flyer and faithfully recreated it as a responsive web page using HTML and CSS. Possibly the most challenging aspect was the extensive CSS work to make the flyer so beautifully responsive, not just across screen sizes but across mediums, so that the printed version didn't look like someone simply hit Ctrl+P on a webpage. Once the basic webpage was approved, it was handed off to a developer who used it as a template, with the page content populated by a user-friendly form.
Team Bug Tracker
To support developer awareness and communication during QA sprints (where the primary dev goal is to reduce the number of bugs) I used Chart.js to create a graph visualization of the day-to-day bug count. Our Dev Lead took this code and hooked it up to Jira end points and it's now displayed in daily standup meetings during QA sprints.