I made a landing page prototype using Bootstrap to quickly create a responsive layout. I customized the look and feel of the default Bootstrap headers by adding a 1px black text-shadow to create a newsprint effect and mixed in the "Alice" Google Font to add variety and visual interest. I used CSS background properties to give the Jumbotron feature a professional appearance without any image editing software. I found a code snippet with some really cool spinning social sharing icons and figured out how to add in Pinterest (using ColorZilla's eyedropper tool to match the color). The result was a simple and pleasing design that could be used as a template for future projects. [I have some accessibility concerns with low color contrast though.]
I also wanted to experiment with easy-to-use Front-End tools for rapid results at hackathons where teams might lack Back-End specialists but still want to build a data-backed application and don't have a privacy concern. Therefore, I built and published a Google spreadsheet to use as a database/pseudoCMS and a JavaScript function to pull in data from the JSON feed that is automatically generated when a Google sheet is published. I plan to use this pattern in the future as it allows non-dev teammates (who nearly always know how to use a spreadsheet) to contribute data entry and research without touching the code and Front-End devs to avoid messing with an MVC framework for a simple project. Instead of setting up a test server or hosting or even opening one of my IDEs, I simply published it on CodePen.io. The main downside is a bar at the top of the page, but it is unobtrusive and could be eliminated by upgrading to the Pro version to unlock Presentation mode.
Log in or sign up for Devpost to join the conversation.