I’ve been having a lot of fun with one of the freeCodeCamp ziplines for the past few days. The project I’ve been working has been to create a random quote generator.
I love this type of project, as it allows for a lot of freedom to create the kind of thing that interests you. The instructions didn’t specify what kind of quotes should be used, but the example used inspirational quotes [blech! No thanks!] I’m not a big fan of that- it just doesn’t appeal to me. I thought about the kinds of quotes that do interest me, and using the logic that it would be quite easy to find lists of film quotes, I decided to make a Star Wars random quote generator.
Something I’ve been making a real effort with lately [though not at all really in my last project!] has been making things responsive. Because I considered this a fairly simple project, I decided to design this mobile-first. CodePen was a good place to do this because I could just adjust the window to a fairly small width while I was working on it, and see how it would appear on a smaller screen. I would never attempt to design for every different screen width- it would just be too much work to try to keep up with everything coming out. Instead I used one media query break-point, set at 500px wide. Below that, I used a unit that was new to me, ‘vw’, or viewport widths [learn more about that here,] for the text, and percentages for the widths of the divs. Above 500px I increased the margins on either side of the container div [so that it had a bit more room on either side], set a maximum width for the container, and set font-sizes [leaving the font sizes as vw could have resulted in giant buttons, depending on screen size!]
I enjoyed this project a lot more than I thought I would initially! I think a large part of that is probably to do with the freedom I had to create what I wanted to [while adhering to a basic idea] -that’s definitely a great way to keep me motivated. I’m curious to see what kinds of quote generators other freeCodeCampers have created, and I’d love to hear from anyone who’s done a similar project!