I finished the algorithm scripting at Free Code Camp on June 19th and started the Random Quote Generator on the 20th.
I have been working diligently for a few days on it. Usually we are instructed to use the Bootstrap CSS framework. When I went searching for an API I found Chris Coyer from CSS Tricks Quotes on Design API site and was enamored with the design and decided I wanted to do the same thing.
So I mocked it up in Sketch:
I needed to really think about how to write the CSS and code for this design. I am still working on that. I have traversed the web in search of layout advice and CSS tricks 1 to move the bottom quotes to the left and at the bottom.
Originally, when I built the HTML, I had both the quotes at the top right. I kept forgetting that the
<div></div> tags can place elements, nest elements, etc in the places you want them to go.
So I placed the ending quotes below the Tweet This button.
I want to either emboss the buttons or create a drop shadow to cue the user into it being a button and not just some random text. I know it says Tweet This but people like my mom have a hard time understanding that the Login button on her bank app is actually tappable and that’s how she logs in. So I need to give visuals cues that will allow the user to intuit this.
Still working on an adequate layout. I don’t want to totally rip off Chris’s site but the design is so fresh that I want to at least rip off some of the components.
I’ve gone into Chrome’s Dev Tools and poked around on his site and have gotten a feeling of how to build it.
You can see the pen at the bottom of the page. It looks weird because it is a work in progress.
- Pun not intended ↩︎