ZOOM

Sample HTML, SCSS, JS front-end code by Cristyan Cadena

See demo: Small, medium and large banners | Source code: GitHub

Problem Definition

Create a responsive banner to be implemented on any platform, and can be used with any CSS framework. The banners should be responsive and must adjust to a full-width screen, sidebar section, or an article section. Banner must include icons on the small and medium sizes and an image on the large version.

Below a mockup created using Adobe XD.

Image description

Tools and Technology Used

  • WebStorm - Integrated development environment with the following configuration:
  • Ruby/Jekyll to manage content and to generate a static website
  • Node
  • Gulp-SCSS to process SCSS Babel/Gulp Babel-env/ to transpile modern E6 into ES2015
  • EsLint/SCSS-lint to develop JS and SCSS code with
    standards
  • GitHub Pages for hosting

  • HTML5 Validation: WC3 for markup, Wave for Accessibility, Chrome Audits for performance.

    Other tools I typically use during the front-end development process

  • Adobe Photoshop Lightroom - for image archiving and editing
  • Adobe AfterEffects / Lottie - to render SVG animations
  • Adobe XD - for wireframe design, mockup design, SVG image export
  • InVision App - for sharing and collecting feedback on UI
  • GitHub / GitLab - for version control and static website hosting
  • GoDaddy - DNS configuration
  • Browser-sync to deploy local servers and test on different browsers
  • Browser Stack to validate proper render on different target browsers

DELIVERABLES

Small, Medium and Large Banners with CTA.

  • After user scroll CTA moves to bring the user attention.
  • All the banners are responsive and could be place on any section of the page.
  • ALL the banners use the same html, however to apply format a “[data-size]” atribute needs to be added

  • E.g. for the small banner “<div class=”demo-banner” data-size=”small“>…</div>”

  • HTML and CSS GRID - for this project, I created a custom 24-col grid based on PURECSS. The deliverable, however, doesn’t depend on the grid framework, and it could be implemented using any CSS FRAMEWORK.

  • LazyLoad - to increase website performance
  • JS - custom JS animation to highlight the banner when banner is visible.

See source files

   

See Demo