Skip to content
A site showing how to do a variety of front-end features
CSS HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Hot Dog Code Challenge

Here's a fun hot dog themed site built as a code challenge that uses a variety of my front-end skills. I was given an image and asked to build a site based off of it.

The site is straight html coded using html5 semantic tags. The layout is primarily in Flexbox with responsive design to work aross viewports.

Features of the site

  • Responsive design
  • Nav bar collapses into pure CSS dropdown for mobile viewing
  • Inline SVG icons for Instagram logo and Hot Dog logo for fastest loading
  • CSS Variables used throughout design
  • "Dark mode" using the CSS variables to reverse interface colors
  • Animated hover styles for main navigation
  • BEM naming convention for all styles
  • Images and content reorder to remain in the correct order (Image, content, image, content) on mobile but staggered on desktop
  • Responsive type that grows/shrinks according to the viewport size
  • Using web font "Open Sans" to match original comp image
  • CSS written in SCSS with mixins for responsive type and breakpoints
  • SASS compilation done through Gulp

To view live demo

View the live demo of the site at:

To view locally

  • Download or clone the repo locally
  • In the command line, navigate to that folder and type $ npm install
  • After the installation is complete, type $ gulp serve. This will start the development server and load the page

About me

I'm a front-end web developer specializing in React and Drupal. I have a diverse background in both technical and creative areas that gives me a unique perspective on my work bridging the gap between pure designers and technical developers. I have experience in UX design, interface design, Drupal theming, React development, and just a lot of writing HTML and CSS. For more about me and more examples of my work, check out my website at:

You can’t perform that action at this time.