FCC Random Quote Generator | Tiffany R. White Blog

FCC Random Quote Generator

Reading time: 3 mins

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 ↩︎

Share

No Ads. No Sponsored Content. Ever.

I've decided that I no longer want to have sponsored posts on this blog. I also, though as tempting as it may sound, don't want ads; even if I got big enough for Carbon ads I don't want them. I want to post free, engaging content for beginning/junior devs. This means that I won't have Setapp posts or affiliates on this blog, though I will keep them on the Uses page. If you enjoy the content, buy me a coffee. Just click the button below.




Webmentions 0

No webmentions were found.

Newsletter