All of this is content for my Spring '24 NMIX4010 Web Development Class.

Exercises

• Lists
• Links
• Images
• Text Styling
• Background Image
• Div Tag Layouts
• Link Styling
• Bootstrap Grid Testing

Projects

• Project One
Show/Hide Reflection
I enjoyed working on this project, although it was quite a bit of work overall. Since I'm a huge gamer, I decided to theme my website around the series I have been playing a lot of recently. I hope that the detailed information and (in my eyes at least) cohesive web design helps people learn more about this series that I enjoy so much. There are a couple things in particular that I am very proud of. First, the overall color scheme of the website had a lot of thought put into it. I started by generating a color palette based on the background image of the site. Then, I thought carefully about which colors would work best for certain elements, in an effort to keep the site as readable as possible. In the end I think I put together a pretty good looking site, with easily readable gold text on a dark blue background. I was also proud of the background image itself, as I managed to avoid the issue of an improperly tiled background image by keeping the background image fixed and having the actual content of the page scroll on top of it. I think this works a lot better than simply repeating the background image across the page as a whole. I am also proud of the font choices I made for the page. I incorporated Google fonts to find a couple fonts that felt like they were in line with the content of my page, while still being easily readable. Since the fonts are provided through Google, there are no issues with font availability across devices (an issue I ran into earlier with one of the in-class exercises). I am not 100% happy with the site, however. Because of a few CSS rules I used in order to lay the site out properly on my own computer, the site is not responsive at all, and looks pretty terrible on mobile devices. I am hoping that getting into bootstrap and eventually WordPress will help me create sites that not only look better, but are more responsive and look consistent across a variety of devices.
• Project Two
Show/Hide Reflection
PANEL ONE: Panel One was a fun start. I really enjoyed learning how to navigate bootstrap and all of its components after doing just plain HTML for so long. Bootstrap is so much more versatile and easy to use compared to wrting in plain HTML. I don't even want to think about how long the website (even the simple version for panel one) would have taken to make in just normal HTML. Also thinking back to the previous project, it would have been MUCH faster to do in bootstrap. I spent multiple hours troubleshooting and trying to get the website formatted correctly how I wanted it, but it would have been maybe one hour tops if I did it with bootstrap. I will probably look at revisiting that website and seeing what I could turn it into using bootstrap.
PANEL TWO: Panel two was a bit tough to get off to a start on, mainly because I struggled to find a theme that I felt fit the content of my website and made sense with it. Once I did finally find a theme, I was initially a bit confused on how to go about adapting the content of my website to fit into the theme, especially since the theme had a lot more pages and sections than I actually needed for this website. However, once I got started shifting my content into the theme, I started to realize how powerful pre-made themes can be. Once I figured out where I wanted my content to fit into the theme, it was super simple to just copy and past the content into the theme. With relatively little effort, I had a website that served my purposes perfectly and (to me) looked pretty good. Of course, I wasn't entirely happy with it, mainly because although the layout of the theme is clean, the color scheme is a bit boring. That is the main thing I tried to address in panel three.
PANEL THREE: For panel three, the main thing I focused on changing up was the color scheme of the website. While the monochrome palette of the base theme looks clean, it doesn't look particularly interesting. I wanted my website to have a lot more color to it. To do this, I used the Coolors palette generator (best tool ever) to create a color palette based on the paint colors of my kit. I turned the frame color into the background, body color into the text color, and then used the red, gold, and blue as accent colors in various places across the website. I think this ended up working very well, and gave the website a lot more character while still keeping everything clean and easy to understand/navigate. I didn't make many changes to the basic layout of the theme, as I felt that it already served my purposes very well. I think the theme I chose works very well for the portfolio-type website that I was making, so I decided to keep the layout mostly the same. There is still one issue with my website that I wish I could have figured out how to fix. On the build page, the third paragraph is very long, and extends a good distance beyond the image it is paired with. I wish I could have figured out how to make this text wrap around and start running under the image instead of continuing down in a straight line, but bootstrap's .text-wrap class didn't have any effect no matter where I put it. I think the only solution would have been to create a new row under the image & text and put the overflowing text into that row, but I was worried that trying to do that would have ended up breaking more things than it fixed, so I ultimately decided to leave it alone.
• Project Three: Content Project Three: Commerce
Show/Hide Reflection
This project, and WordPress in general, was actually much more difficult than I expected it to be. Making the actual content and dealing with WordPress’ blocks was simple enough, but any deeper control than that felt like it was really hard for me to get. For the content site, I used WordPress’ Twenty-Fifteen theme, because it gave me better control of the visual side of the website. I had initially used their Twenty-Sixteen theme, but I ended up not liking the look of the theme, and found it extremely difficult to control any of the visual aspects of the site. Twenty-Fifteen gave me easy ways to change the color scheme of the site. I really tried to implement more custom CSS, but I found that, even using WordPress’ CSS editor, it was extremely difficult for me to find the right rules to do what I wanted to do. I think that ultimately, the theme did a good enough job at presenting my information in a clear and visually appealing way. I do hope to in the future explore more of WordPress’ CSS functions to make my sites look better. Commerce Site The commerce site went quite a bit easier than the content site did. I found that the tools provided by the WooCommerce plugin were incredibly easy to understand and use to present a shop that looks good. One challenge that I ran into was that if I set any “sale price” for an item, it would always show that price. There seemed to be no option to mark the item as on sale or not on sale. I’m not sure what causes this, but I’m going to look into it further, as I will probably be setting up a real online shop sometime in the future. Overall, I don’t think I’m as happy with this project as I was with my previous two. It was a lot harder to work around WordPress than I expected it to be. I’m going to continue practicing, and hopefully become more proficient at using WordPress in the ways that I need.
• JavaScript Jukebox
• Final Project
Show/Hide Reflection
For my final project, I decided to tone it down from my previous JavaScript project, and do something a bit simpler. I opted to use WordPress to create a site for my mother to host the lectures for the paralegal classes that she teaches. My decision was not made solely because it would be simpler than anything involving JavaScript; I also decided to go back to WordPress because I was not completely happy with the way the project from the WordPress unit in class turned out for me. I didn’t feel like I had truly grasped enough of WordPress’ potential back during that portion of the class. Returning to it now helped me find my way around it better, and I believe I created a much better website this time around. I started out by picking a theme, which I now understand is a much more important first step than I initially realized. When I started learning WordPress, I thought that my choice of theme would not matter too much, and any content I added to the site would just retroactively work with any theme. I learned pretty quickly from the first project that this is not exactly the case. Trying to switch between themes can lead to a lot of things breaking on your website, so this time I tried to make sure I had a fully functional (and nice-looking) theme before adding any content to the site. In this case, I was sure I wanted the site to have a prominent, easy to use search bar, so students looking for a specific lecture video can quickly find it. From there, it was mainly an issue of aesthetics, so I ended up picking a nice, professional looking theme (it also has a dark mode/light mode toggle, which I really like). From there, I began to find my way around WordPress much better than I had before. It did not take me very long to fill out the site with my mother’s lecture videos, and a nice, professional looking homepage. The site is currently only a proof of concept (i.e. it is not fully up to date with all of my mother’s lectures) but the best part about creating this site in WordPress is that it will allow her to pretty easily update the site to include more lecture and class content as time goes on, if she decides to learn how to use it. Overall I am much happier with the outcome of this project than I was with the initial WordPress project from the class. I feel like I have a much firmer grasp on how to create a good website using WordPress than I did before. I am glad I went to WordPress because in some ways it feels a bit more easily marketable than just raw coding skills are (WordPress is a brand that many people know, while not everyone really understands what HTML or CSS are).