AngelHack Hackathon
AngelHack hosted a hackathon at Galvanize on the weekend of October 22, 2016 named Lady Problems. The theme was to increase female entrepreneurship by improving women's safety, health, culture or economic empowerment.
My team's solution focused on the economic empowerment aspect. According to the 2015 San Francisco Homeless Count Report, transitional age youth (TAY) between the ages of 18 - 24 are twice as likely to practice high-risk behaviors and struggle with mental health issues than their older, homeless peers. By training young women to repair phones, our team Chicks that Fix teaches them a skill set that is not only useful but transferable across the board, empowering them into self-sufficiency and preventing them from considering other avenues of income. Phones are a low barrier entry point into the world of technology. Fixing phones allows them to tinker with the hardware of a phone, giving them the confidence to consider more advanced technological challenges.
Our project therefore was to develop an informational website with instructions on how to get involved. Largely front-end heavy, a fellow coder and I rolled our sleeves up and prepared ourselves for heavy-duty HTML, CSS and Bootstrap action. The UX designer of our team used Zeplin to sketch a wireframe. Zeplin is an amazing collaboration tool for designers and developers, providing developers the exact CSS, images and textual content needed to replicate the wireframe.
In addition to learning about that incredible tool, I became better acquainted with Chrome's Developer Tools. When making changes to HTML/CSS via the Developer Tools, navigate first to the HTML element you are looking to manipulate. The DOM is displayed on the upper left hand screen of the developer toolbar. Once the appropriate DOM element is selected (indicated by a grey bar), look to the right-hand screen and click the 'Computed' tab. There, 'Filters' are displayed, getting into the granular details of that element.
Click on the Filter you want to change and a circle with a grey arrow will appear. Click on that circle and you will be taken back to the Styles tab.
Copy and paste that Style into your CSS and make the needed changes. For the example below, if I wanted to change the background image, I would copy and paste [app=seo], [app=blog] { into my CSS file, type background-image, insert an image url, and close that tag with }. Voila!
Our project can be viewed on Hackathon.io under the project name Chicks that Fix or via my Github.