I am an Emerging Media graduate student class of 2022 at the New Media Institute. Fun fact: I started learning how to rollerskate!
While creating this website, it really made me think about how I used to be a pro at this in middle school when Tumblr was popular. I would spend hours fixing up my blog and its theme -- adding sparkles to my mouse every time it moved, having faded images in the navigation bar, I even had a music player on my page that would play the playlist I picked. Unfortunately, after years of not practicing I have lost the knowledge to do all of that. This project has allowed me to revive that passion and learn/relearn elements that I should know and would be helpful for future designs. I was struggling with formatting and the styles sheet, but after reading a few websites I got the hang of it, and it became easy to find the issues I was having (usually due to a misplaced letter or punctuation). I am very proud of this website. It might not look as I wanted, but it is definitely something I am happy I got to do. In the future, I would like to learn more about how to edit the images (fades, hover, etc.) to make them look more aesthetically pleasing on the site.
I found this project much more easier than the first project. Mainly because we already had bootstrap themes available and already made this project so much easier to do. All I had to do was make edits on the specific elements I wanted to see. I gathered some of the color palette from a picture of Drake and input it into the theme. I also found fonts I wanted to use on Google Fonts, and it already had the links and whatnot that I could easily copy and paste into the theme. I did have trouble with the logo because I realized I needed a picture with a transparent background. It also couldn't be too big, because then it would shift the navigation bar. Overall, this was an easy project and I liked learning how to inspect specific elements to see what I could change and add to my own theme. I would like to explore more possibilities with editing bootstrap themes.
I enjoyed this unit and project. Having this theme, Storefront, readily available and editing it to my liking was fun. Using WordPress made making a website so much easier. I created a logo from Canva and used pictures I found on Unsplash and icons from Freepngimg. Before this class, I had played around with creating a blog on WordPress but never got far enough because I did not really know how to use it. Thanks to the walk-throughs and easy navigation, I was able to figure out the ins-and-outs and got better at keeping it organized. The previous units came hand-in-hand with creating this project. I learned how to use plugins like Stackable to create the homepage. It was really interesting to see how helpful installing plugins can be because using Stackable allowed me to make my homepage more interesting. I did have a hard time getting my CSS to work because the code within the blocks would not work properly, especially while I was in editing mode. I changed ended up changing the font color of the footer within the Advanced CSS. The hardest part was trying to get fonts installed because it would not show up on my page or it would not save right. However, instead of putting in CSS, I ended up finding a Free Google Fonts plugin that gave me access to a lot of fonts to choose from. I also struggled with the products not aligning right, but after some research I figured out I had to put a flex and align code within the CSS page. I hope to explore more widgets and plugins I can download to make websites more interesting.
Project 4 wasn’t so bad once I watched the tutorials for the challenges. For the project’s landing page, I used a bootstrap theme called Creative on Start Bootstrap. I changed the landing page’s header image into an arcade image from Unsplash by Carl Raw. When the user scrolls down, I wanted to add the directions and buttons to the games, Whack the Drake and Canvas Space, for convenience. I made sure to make the the two sections contrast each other by making them different colors.
The Whack a Mole was an easy JavaScript challenge to follow. Instead of having a mole, I wanted to include Drake, the rapper. I made the background and the icon from his Hotline Bling video. For the hole, I made him pop out from behind a Canadian flag to pay homage to where he is from. I used the font Fredoka One from Google Fonts to pull it all together. The hardest part of this challenge for me was getting my game to even start. I had compared it countless of times to the finish html to see what I did wrong. But after taking a break and coming back to it, I realized there were a few typos within my html and css code. After a few fixes, it finally started.
As for the Canvas Space challenge, this was a little bit harder for me. I had added directions onto the canvas itself and even added a header for the title of the game. I used the same font style to make it all cohesive. However, the part I struggled with was having a background image show up behind the canvas. I got the image off of Unsplash by Jeremy Thomas. I couldn’t figure out for the longest what I was doing wrong because the tutorial doesn’t really explain how to change the background image since the one in the tutorial took up the whole space. After hours and hours of trying, I realized I did not upload the image in the correct folder. I also was struggling with the canvas only sticking to the left, but after some looking into it I realized I had to make the left and right margins on auto so it would center correctly.
Overall, I didn’t mind this project. I learned how to change the hues when drawing during the Canvas Space, as well as changing the stroke type. For the Whack the Drake, I learned how to change the speeds of him peeping out, and how to create the scores. I liked that there were so many other challenges to try, and I might just take a chance on doing that for fun. One of the challenges I would like to try is the drum kit Javascript and maybe adding my own sounds to it.