/static-comp

Primary LanguageHTML

Static-Comp Project

Visit the deployed site here.

Table of Contents

Project Overview

The Turing School of Software and Design provided a static comp to replicate using HTML and CSS. The goal of the project was to build something that respected the integrity of the original comp's layout. Creative liberties were allowed with Text, Images & Icons, Fonts, and Color.

Replicated Comp:

May-29-2022 15-18-12

Original Comp:

Screen Shot 2022-05-26 at 9 43 35 PM

WireFrame

final-wireframe

Setup

  1. Fork this Repo
  2. Clone it down to your machine
  3. cd into the root of the project directory
  4. Run open index.html in your terminal

Accessibility

Accessibility was audited using Lighthouse.
Screen Shot 2022-10-04 at 12 20 40 PM

Technologies and Tools

  • HTML
  • CSS
  • Excalidraw
  • Git
  • GitHub
  • Agile workflow
  • Atom
  • MacOS Terminal
  • Google Chrome Dev-Tools

Project Reflections

Wins

  • Gained a better understanding of display flex
  • Used Google Icons for the first time
  • Learned how to use Google ColorPick Eyedropper extension

Challenges

  • Applying display flex to correct elements
  • Hovering effects on clickable elements

Roadmap

Future features could include:

  • Add ARIA roles to HTML to further improve screen-reader accessibility
  • Add responsive CSS for better device compatibility

Contributors

Amber Bodnar

Sources

A spec sheet for the project can be found here.