Web Development

NMIX 4110: New Media Production

In Web Development, I learned about many different kinds of software used to build and operate websites. We practiced different coding languages on FreeCodeCamp, and we completed projects on HTML and CSS, Bootstrap, and WordPress. We had to create a website using the specified coding language or software for each project.

The first project taught me how to use HTML and CSS to build a website. The site looked rough, considering I couldn’t organize it the way I wanted with the basic knowledge of the coding languages I had at the time, but it was a wonderful way to get comfortable with the language.

The second project was essentially an upgraded version of the first project because we still had to use HTML and CSS, but we could use Bootstrap this time. I grew comfortable using Bootstrap to help me make my website look the way I wanted it to. I learned how to use a template to kick off the site and then make changes to the template to make it my own.

The third project helped me learn how to use WordPress to build a site, which is very different from the HTML and CSS I previously used. This project required me to get to know WordPress by building a news site and a commerce site using WooCommerce. I had to figure out how everything connected and worked together within site. I learned how to organize my page, add widgets, install plugins, and so much more, but I know I only scratched the surface of the full potential of how helpful WordPress is capable of being.

I am making another commerce site using WordPress and a WooCommerce plugin for my final project. But this time, I made a functioning website for my friend. This project took what I learned in project three and applied those skills further. This site is a functioning commerce site, so I had to show my friend how she could operate it after the site was fully completed. I also needed to learn how to activate WooCommerce so she could make money from selling her products off the site. This final assignment was a fun way to apply my skills from this class to a real situation while helping my friend take her new art business to the next level.

Overall, this course taught me some valuable skills in web development. I’ve found that I really enjoy building websites, especially using HTML, CSS, and Bootstrap. I’m a very meticulous person, and I love problem-solving, so building a site using those tools really scratches that itch in my brain. It’s so satisfying to see a bunch of symbols I typed out turn into something interactive on my site. Hopefully, I will be able to continue using these skills in the future because I had such a great time using them in this class!

Featured Projects

Final Project: Freelance Website

Making this site was quite a learning experience, to say the least. For my final project, I decided to make a commerce website for my friend Tatum’s painting business. She started selling paintings off of an Instagram page she runs, but when I approached her with the idea of making her an official website, she was thrilled. I sat with her and set up a new Reclaim Hosting account, a new domain, a new WordPress Plugin, and a WooCommerce plugin.

Through building this commerce website for a client, I learned how pivotal it is for you to check in with your client to make sure they have verified their email because sometimes they will not do it on their own and cause the website to be temporarily suspended. I learned how to set up a functioning payment plan through WooCommerce, which was exciting because before I only knew how to use it for its widgets. I did make good use of the widgets here, though, styling the main menu with the paintings she wanted to highlight alongside pictures of custom paintings she did in the past to inspire customers to order their own. I also installed a Contact Form plugin for customers to fill out and submit these requests.

I also learned a little more about WordPress in general, like how to upload a logo and a title in the logo category. I realized that in order to upload the logo next to the title, I needed to insert the title into the logo I was trying to upload, which I did with Photoshop. I also designed the logo myself! I used Photoshop to trace one of her custom paintings she sent me and then colored it to make it look like her. I wanted it to simultaneously match her art style but also show who the artist is, and I think that was a great way to do it. I also made a simpler version of the logo by exporting a separate project from Photoshop of just the button her logo is wearing. It’s a T and P combined and a little heart next to it. I set that as the site’s icon.

I did a lot of messing around with the color palette of the site because I wanted it to look at least somewhat professional, but I also wanted it to match the cute and colorful energy that Tatum and her art give off. I settled on a pastel palette because I think light colors look sleek, but then I did a cute confetti background to make it bright and fun. I added a white filter over it though so it wouldn’t distract from the site’s content. I also messed around with the CSS of the site a lot in order to make all of the buttons and popups match the color theme of the site. I changed the font too because I liked the one I found on Google Fonts better.

I had a friend look over the site to see if everything was organized in a way that made sense, and she suggested that I put “Paintings” and “Custom Painting Request” as a dropdown under “Shop” on the navbar, which I thought was a great idea. Previously, I had the “Cart” and “Checkout” options there because I was trying to de-clutter the menu, but that suggestion made much more sense.

My Top Spotify Artists Site

This is the final result for our HTML and CSS plus Bootstrap project, and I am quite proud of it. I had the most difficulty changing the theme template to make it look original, but it paid off. The site is colored to look like Spotify, it includes links to all of the artists I mention, and it’s organized cohesively and practically. If you are looking for some new music to get into, I have some great suggestions listed here if you want to check them out.

I struggled at first to change the css of this page, but when I learned how to use the Inspect tool properly, things became MUCH easier. My troubleshooting skills skyrocketed as I learned how to take code from the Inspect tool and paste it directly into Visual Studio Code for me to alter. Changing the colors of all my content to match the theme I wanted to have took an incredibly long time. I inspected each element that wasn’t to-theme and changed each color. I couldn’t figure out how to change the color of buttons and links for the longest time when you hovered over them, but after scouring the internet and DMing on Slack, I figured out how to streamline my inspection to only show CSS for “:hover” content. My life became a lot easier after that. It also took a lot of googling to figure out how to keep my grid images from stretching with the screen width, but I got that figured out eventually, too. I thought about changing my content structure, but I honestly liked the way it was already arranged in panel 2. It’s organized, easy to navigate, and aesthetically pleasing. There’s not much more you could ask of a website to be. After producing all three panels, I feel very comfortable with Bootstrap and the beauty of that Inspection tool. I felt so proud every time I made a troubleshooting breakthrough; it made me feel like a true coder.

News Site: My Hot Takes

This was the News site portion of our third project, and I had a lot of fun making it. You may be noticing a music theme in my projects at this point. How astute of you! Music plays a huge role in my life, so it felt right for me to make it the focus of my assignments. I got to find/write articles about all of my favorite artists for this one. I highlighted the many talents of Donald Glover (Childish Gambino), dove into all of Tyler, the Creator’s creative projects, and recognized the number of things Soulja Boy claims to have been the first to do. I also designed a logo for the site and re-colored it using custom CSS to make it look more aesthetic than the harsh reds and yellows the theme used to sport before I fixed it.

While building this news site, I familiarized myself with all WordPress has to offer. It made it much easier to seamlessly and aesthetically add videos, links, and text boxes to my website without needing to do a lot of additional CSS. The main thing I struggled with was learning how everything connected within WordPress. I wasn’t sure what posts were automatically linked to which pages and which ones I needed to connect myself. Also, figuring out my way around the WordPress website was challenging in itself. I was so proud when I figured out how to edit specific CSS to change the colors of things that wouldn’t change when simply editing the theme. I was also proud of myself when I figured out how to resize and crop my logo (that I designed myself) within WordPress, so I didn’t have to do that on an application on my computer. In the future, I want to move past the familiar phase with WordPress and start to feel comfortable and confident with the tool. I want to dive deeper into the tools I may have missed while creating this first web page.

css.php