Joanna
Hughes

Bio

I am a front end developer currently working at Vitamix. I have been a web developer for 3 years, previously working at Budget Dumpster where I grew my strengths in advanced CSS, CMS development, custom design systems and accessibility. I love sharing my passion for coding through teaching and mentoring--especially other women. I volunteer regularly with Tech Elevator and the Center for Arts Inspired Learning, leading workshops for budding developers of all ages and experience levels.

Skills

Web Development

HTML5, CSS3, Sass, RWD, JavaScript, Gulp, CMS Development, Template languages (PHP (Twig and Blade), Liquid (Jekyll), Nunjucks (Node), Java (JSP and Django)), Git, Command Line

Design

Photoshop, Illustrator, Prototyping in Browser, Style Guide Creation, Proprietary Design Systems

User Experience

Wireframing, A/B Testing, Auditing for Accessibility, Cross-browser testing, Progressive Enhancement

SEO

Meta Data, schema markup, Twitter Cards and Facebook Open Graph, general SEO content best practices

Work Experience

Front End Developer I | Vitamix Corporation | Olmsted Falls OH

July 2018 - Present

  • Built a pattern library of cards built with CSS Grid to serve as the basis for a site-wide design system
  • Created a lightweight grid framework using CSS Grid to begin the phase out of our old grid system built on floats
  • Improved the accessibility of our checkout flow so that keyboard users could more easily make a transaction, subsequently helping the company avoid a costly lawsuit
  • Collaborated with back end devs, front end devs and business analysts to define our software development life cycle and implement an agile workflow
  • Continuously working to improve our legacy codebase and bring it up to modern standards in performance, CSS and JS

Front End Developer | Budget Dumpster | Westlake OH

May 2016 - July 2018

  • Collaborated with marketing and design teams to build fully responsive, dynamic websites for the company’s various brands using a combination of HTML, CSS, PHP and JavaScript as needed
  • Ensured that websites provided the optimal experience in all major desktop and mobile browsers, including IE 11 and Edge
  • Improved page speed scores by following best practices for compressing images, minifying files, and finding ways to use CSS only solutions for interactive elements
  • Implemented solutions to allow content writers to easily generate HTML modules via shortcode in our proprietary CMS
  • Worked on a complete overhaul of our stylesheets for Budget Dumpster and Dumpsters.com, moving us into a more scalable, organized Sass architecture
  • Created a grid layout system using Flexbox which eliminated our reliance on frameworks like Foundation/Bootstrap
  • Constantly worked to improve efficiencies in the code base and set front end standards and best practices

Junior Designer | Fathom: A Digital Marketing Agency | Valley View, OH

November 2013 – January 2016

  • Created a variety of digital assets using Adobe Photoshop and Illustrator including PPC display ads, PPC landing pages, infographics, social media graphics, whitepapers, and online guides
  • Created wireframe mockups based on user experience research for homepage and landing page redesigns
  • Collaborated with outside development teams to create a fully responsive website redesign for one of the agency's largest clients
  • Conducted user experience testing including heat-mapping, scroll test, and behavior flow analysis
  • Implemented A/B Tests in Visual Website Optimizer to compare effectiveness of control pages vs new designs

Mentoring & Presenting

Volunteer Instructor | Women Wine & (More) Web Design | Tech Elevator

December 2018

Co-created and lead a workshop to present foundational CSS and HTML concepts to women interested in front end development. During this workshop, my co-instructor and I expanded upon lessons presented in the first Women Wine & Web Design event, introducing participants to wireframing, semantic HTML, CSS foundations (the cascade, specificity and basic-to-intermediate selectors), multi-column layout techniques and an introduction to JavaScript.

Speaker | Combating Imposter Syndrome Through Mentoring | Cleveland Get WiTit Tech Conference

November 2018

Created and presented a talk on the way that women in tech often struggle to feel like they belong in the industry and how I’ve used mentoring to combat this feeling in my own career. My talk, which resonated with many conference attendees, covered the history and psychology of Imposter Syndrome, how it affects women in the tech industry, and why mentoring is so effective at combatting it.

Presenter | Moving Forward with Atomic Design Patterns & ES6 | Dumpsters.com

March 2018

Presented to a group of 30 peers on the creation and implementation of a Flexbox grid system for a brand awareness guide for Dumpsters.com. Using the CodePen platform, I took attendees through a working example of the grid, showing them how I used the Atomic Design methodology to identify repeatable patterns in the design, and then used Flexbox and Sass mixins to build a lightweight, fully responsive grid system for the project.

Volunteer Instructor & Mentor | HER Ideas in Motion | Center for Arts Inspired Learning

November 2017

Collaborated with a small group of front end developers to create a 3-day intro to HTML and CSS workshop for middle school aged girls. I led the instruction for the second day of the workshop, which focused on introducing the girls to CSS, walking them through creating inline styles, attaching an external stylesheet, and using classes and IDs to style elements on the page. I also volunteered as a mentor on the first and last day of the workshop to provide encouragement and guidance as they worked on their websites.

Volunteer Mentor | Women Wine & Web Design | Tech Elevator

April 2017

Women Wine & Web Design is a 1-day workshop that gives women who are exploring the possibility of a career in programming a crash course introduction to HTML and CSS. As a volunteer mentor, I worked one-on-one with the women, answering questions and helping troubleshoot problems with their code.