New Media Production

Project 1

Screenshot of Project-one

In Project 1, I learned the basics of html and css. This project was so incredibly informative to what I am capable of once I take the initiative to act on my immense desire to learn. This is not the first time I learned how to code, however, it was a great refresher on the basics of coding and I also enjoyed seeing the differences between languages and how they can intertwine to affect each other!

One of the things that I struggled with was transferring my new knowledge of html and css coding that I learned on freecodecamp.com to my project that I made. The information on freecodecamp.com is a wonderful tool for individuals new or returning to learning code, however, the information is spread out throughout the lessons and it took me a little bit to find information and apply it. For example, I believe that the most time-consuming part of my project would be learning how to resize my images to automatically adjust to the screen width/size.

I am really proud of the fact that I learned html and css and applied that knowledge to build my own website and publicly host it with my original domain name. Along a similar line of thought, something I am proud of while designing my website is learning how to adjust my images. Some things about my design that I thoroughly like are that I included the "transform" element to allow the image to pop out when the user hovers their mouse over any image. In addition, I linked all the images to their respective sites, such as SZA's Ctrl album to the Spotify link of the Ctrl album. I am also very proud that I learned how to apply my newfound knowledge of the "hover" application to make the links in text form change color when the user hovers over them.

Going forward, I want to apply the knowledge that I learned from this project to streamline my coding experience while also making my abilities of coding html and css more efficient. I also want to use this knowledge and future knowledge that I will learn in this course to build my portfolio website that will document my creative work history.

Project Two

Panel One

Panel One Screenshot

After learning the fundamentals of html and CSS coding and how they interact with front-end web development, I learned the operations of bootstraps and how it can revolutionize primitive, hard-coding web development. I used the fundamentals of bootstraps in Project 2 Panel 1 to build a "Concert Informational Page" that talks about popular hip-hop concerts in the US. In Panel 1, I utilized SVG images for the first time to create the topography-map-looking background of the web page. With the in-depth learning of bootstraps that we went over in class, I was able to build this part of my project with a few obstacles. The main problem that I faced was implementing the timed infographic that appears at the top of the screen, and allowing the user to interact with the pop-up so when they click the "x" it closes the notification.

Panel Two

Panel Two Screenshot

While developing the second part of my project, Panel 2, I found that it was a great exercise in learning about themes that I can use in the future to gather website ideas, as well as a good exercise in reproducing the information on Panel 1 onto Panel 2 without changing the theme's CSS. It allowed me to understand the functions of themes better and gave me the chance to explore the possibilities of html that were present in the theme already. Learning about using an image as a still background with an overlay on it while still being able to scroll was one of my favorite parts of Panel 2.

Panel Three

Panel Three Screenshot

Similar to many of my peers in this class, Panel 3 was the most challenging and most rewarding part of Project 2. All of the main content for my website was already present, but styling the CSS on a separate file proved to be a worthwhile challenge. I had to figure out what the existing CSS operated, how it worked, and then I applied that knowledge to tailor Panel 3 stylistically to my tastes. A great example on Panel 3 would be the Social media Icons located on each concert description panel. It took time for me to locate where each icon was in the existing CSS file, understand how each element and its modifier affected what was on the page, and reflect it onto my custom CSS file to match my taste. Going forward, I look forward to learning how to navigate the file structure of themes easily and use the future skills we will learn in this class to increase efficiency while doing front-end web development.

Project Three

Commerce

Commerce Wordpress website

Learning about the interworkings of Wordpress has pushed my limits for time-management, tenacity, and focusing. This project was fun, interactive, and worthwhile to learn as I challenged myself to interwind my previous knowledge of CSS custimization and design optimization. Figuring out how to tailor Woocommerce to my site and learn how to navigate its plethora of products was a really valuable experience, and I will carry this expereince throughout my future and apply it to any websites I build or simply use the fundamentals I learned to teach others.

News

News Wordpress website

Similar to learning about the application of Wordpress to the Commerce site and selling things online, the dichotamy of learning the News site provided speciffic knowledge that I did not learn while building the Commerce site. While building this site, I specifically had challenges differenciating how to build a post and have it show up on multiple pages on my news site. In addition, I had an interesting time finding how to upload alternate text to all of my images and not just the individual picture.