• Download or clone this repo
• cd into the downloaded directory
• run npm i
• Allow installation finish
• run npm start
• Open your web browser and navigate to http://localhost:8080

Please use CSS to make the elements located in the div with id=text to like the image below:

The html structure is done for you already. If you would like to add additional DOM elements, you can, but know that the image below was built using exactly the DOM structure that I have provided.

What you don't see from the image, is that the elements are responsive relative to its containing wrapper. Your implementation needs to be responsive as well so that the 5 images stay inline and shrink and grow as a unit.

The images need to be inline, and each be 1/5th of the wrapper. The inner border is 80% of its image size.

• Original challenge instructions have been included at http://localhost:8080/
• I created 5 different versions that provide a solution to this challenge.
  • VERSION 1: A CSS Friendly Approach. No Manipulation To The Orignal HTML Structure.
  • VERSION 2: Worried About Flexbox Support? Here's An Old School CSS Approach.
  • VERSION 3: T-Cells With LI Styles Feels Dirty. Changing Font Size Is A Better Solution.
  • VERSION 4: No CSS Voodoo Here, Just Classic Floats. Who Doesn't Love The Classics?
  • VERSION 5: Now Let's Have Some Fun. Pretend This Is Going Live. We'll Use Everything But The Kitchen Sink To Make It Production Ready!
• To view version 5, navigate to: http://localhost:8080/optimizedVer.html
• Version 5 uses the best front end practices to complete this challenge. This includes:
  • Vendor prefixes added for cross browser compatibilty support.
  • CSS and JavaScript files concatenated/uglyfied/minified to limit HTTP requests.
  • CSS file placed within head tag after calling in external fonts/icons. JavaScript file placed before closing body tag.
  • No jQuery necessary. All vanilla JavaScript here. IIFE with prototypical inheritance for speed, modularity, and no pollution of global namespace.
  • Animation wrangling with CSS3 for cross device support with performance boost.
  • Images optimized via ImageMagick (CLI) and resized for optimum performance across various screen displays.
  • Responsive image handling done via HTML srcset/sizes attributes. When it comes to determining what/when to download, the browser is king.
  • Lazy Loading of image assets. Handled via custom JavaScript. Light as a feather and complimented by CSS sizing units (vw, em).
  • All static assets (images, CSS, JavaScript) served via CDN.