For the final project, I worked on increasing the functionality and design of my COMM 211 online course. As most teachers know, LMSs typically leave a lot to be desired. We use Blackboard and it is certainly one of those LMSs. Although Blackboard has several handy features like an integrated gradebook for assignments, it is limited in what we can do design-wise. My goal for this project was to create a more aesthetically pleasing course webpage while maintaining some of the core features of my COMM 211 class.
Overview
I chose to do the “Publication-style CMS Mastery” option. I used the Astra theme, but decided not to use any of the starter templates. When you go to my page, you will be brought to the homepage. In the menu, you will also see that I have created “Modules,” “Discussion,” and “Assignments” sections. I used some of the text that I typically include on Blackboard, but everything else is new. The website currently has content that you would expect for the first days of class.
Each page has content, but some are developed more than others. If you go to “Assignments” then “Syllabus Quiz,” you will see one of the plugins I added for this project. For the quiz, I used the HD Quiz plugin. It allowed me to create a simple multiple-choice quiz, set a timer, and decide how I wanted to show the results. I decided to add some Bitmojis to the results which was a trend I kept throughout my website. The plugin provided me with a shortcode and I added it to the “Syllabus Quiz” page.
Next, I created a discussion board using the wpForo plugin. This plugin took a little more time, but I think the front-end experience is pretty simple. I set up the forum so that the Fall 2021 was the parent and four threads fell under it. I played with other settings to give the forum a simple design that I felt students would be able to figure out. I also added the BuddyPress plugin so that people could register for the forum and track their activity on the forum.
I added some custom CSS (which I finally figured out a little better), and tried to make the website as responsive as I could. I updated the buttons to have hover effects, made anchor links, updated fonts. I added a “top of page” button using “WPFront Scroll Top” mostly because I hate scrolling back to the top of a long page. I also figured out how to save Bitmojis (might have gone a little overboard) and how to use the “touch keyboard” on my PC to include emojis. I know that those aren’t coding, but that was something fun I learned during this process. Of course, I also customized my pages using the “Customize” feature to update colors, buttons, menus, etc. Finally, I included little things like internal and external links, a “mailto:” function for my email in the footer, and added my (not so eloquently made) banner for the class.
Struggles & Triumphs
CSS has been difficult for me through this class and this project was no different. For the longest figure out why my font wouldn’t change, how to fix the size of the text, and how to make the website more responsive to smaller screens. I felt like I was doing everything right, but nothing was changing. Eventually, I remembered the “cascading” part of CSS and reorganized the rules. It’s still not perfect though. I never figured out how to get rid of the “wpadminbar” from blocking the header on a smaller screen. I tried this: @media screen and (max-width: 800px) {.nojq {display: none;} and @media screen and (max-width: 800px) {#wpadminbar {display: none;} and a couple other ways to no avail. I didn’t figure out how to solve my calendar problem.
I’m proud of how I set up both of the main plugins I used, especially the discussion board. It looks how I would expect a discussion board to look which is definitely not how it started out. I’m more proud of figuring out those CSS issues though. The website definitely looks more inviting than anything I could have put together on Blackboard. I incorporated things I learned from the almost all of the lessons we went over.
