3 min read

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:

random_quote_generator

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.

Buttons

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.

Layout

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.

WIP

You can see the pen at the bottom of the page. It looks weird because it is a work in progress.

http://codepen.io/twhite96/pen/aZmrXO

  1. Pun not intended ↩︎
    2. 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: random_quote_generator 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.

    Buttons

    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.

    Layout

    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.

    WIP

    You can see the pen at the bottom of the page. It looks weird because it is a work in progress. http://codepen.io/twhite96/pen/aZmrXO
    1. Pun not intended ↩︎