Project One Reflection
For Project One, I learned literally all the skills I had to use. I had no prior coding knowledge at all (unless you count tweaking Myspace layouts back in the day). Specifically, I learned how to link webpages together, organize a webpage, include pictures and videos, and style webpages using CSS. I got frustrated for a while trying to change the font color on the second page (Why Rampage Ollie). I’m still not 100% sure that I coded it correctly, but it works now!
I’m proud of the color palette and fonts for my project one webpages. I think they look nice and are accessible to readers. I learned how to include emojis on my webpages and style the font in different ways. I initially had the file paths a little wrong, and I’m happy that I was able to stare at the screen for a little bit then figure it out. I put a YouTube video on my second page that actually works, so that’s nice. Finally, I made a list for my third page which seemed appropriate. In the future, I would like to get better at tables. I tried for a minute last night to make one, but it just wasn’t intuitive for me. I think I’ll come back to it later. I also want to play around with the location of my nav links so that maybe they’re at the top in a banner situation.
Project Two Reflection
I learned more skills with CSS, but had several frustrating moments. Media queries are definitely trickier than I anticipated, but I had fun playing around with it. The biggest thing I learned with this project is how to use the “Inspect” tool to my benefit. Especially with the HTML, I feel more comfortable looking for things that need updated/fixed with “Inspect” then changing it in my own code. CSS is still throwing me for a loop, but I think that once I finish more FCC lessons, it’ll get better. Again, I liked the fonts and colors I chose. I feel like they are aesthetically pleasing especially with the photos I chose and the overall theme. I linked external websites at the bottom which was a fun way to plug my favorite local places (even if some of them are Facebook pages). I want to get more comfortable with formatting containers and understanding how responsiveness works in different situations.
Project Three Reflection
Project three was a challenge. It might have been because I didn’t sit down all at once to work through starting the store and working on the project, but I felt like I missed some important concepts that would have helped. Overall I was introduced to WordPress and WooCommerce which was exciting to play with. I faced some challenges, but I am also proud of some of the elements I included.
I feel like I never really got the hang of customizing the pages to be my own. I don’t think I utilized the “Additional CSS” well. I added in some elements that did not work, and I never really figured out why. For example, I could not figure out how to make all the fonts to change- like the “Home” at the top of the homepage. I tried to add background colors that didn’t work. There were just some parts of the theme that I know could have been customized, but every time I tried, nothing happened. I think I may have put the elements in the wrong order (or maybe I just wasn’t adding them to the html). Lastly, I just don’t feel like I am creative enough to visualize a page from scratch.
There were some aspects I was proud of! I used the Storefront theme. The homepage, to me, looked like a real website that I would trust buying products from. I added the “MailPoet” plugin and even customized an email that would be sent to anyone who subscribed to my store. I added a footer widget to link back to all the pages. I also added an “About Us” page that used a couple different block features.
I would really like to understand CSS better. I feel like I need to go back to that. Also, I am a little confused about my folder setup now. I don’t have anything on my local drive’s “project-three” folder except for the imgages I used for the store website. Should I have something equivalent to an “index” file in my project-three folder, or is it just supposed to be in the cPanel? I’m confused.
Project Four Reflection
Project Four was probably the most enjoyable project so far! I learned more (or at least felt comfortable with) using CSS and I got to apply skills from the FCC JavaScript lessons. The JavaScript challenges were fun and pretty straightforward. Between the FCC lessons and JavaScript30 challenges, I learned how to manipulate webpages to carry out more complex tasks to make my pages more interesting. When I was going through the FCC lessons, it all seemed so abstract. I literally had no idea what I was doing. I was just plugging away. The JavaScript30 guy was very helpful in showing how things happened in real time, and I liked that he made mistakes so that we can catch those things too.
The main struggle I faced was still a CSS issue. The margins or borders or something on my “Activity Two” webpage are off. Specifically, they’re too big. I played around with some numbers and settings, but couldn’t figure out how to make my canvas small enough to fit the screen properly. Even as I was typing this reflection, I thought of another thing to try but it didn’t work either. đ Other than that, I really didn’t face too many issues. Honestly, my biggest struggle was trying to be creative. As you can tell, it’s not my strong suit. If I could go back again and restart the project, I would make it more fun by having better ideas, but as incorporating more into the CSS for each page. Speaking of CSS stylesheets, I have a stylesheet for each webpage which might be unnecessary, but it made the most sense to me. I always feel like I’m using the same “class” or “id” for things which makes things get changed when I don’t want them to. Lastly, I should have put more energy into making sure my webpages were responsive. I will work on that in the future.
I tried out a few things with this project. I changed the fonts to Chivo and Overpass on all webpages, and kept the color scheme consistent. I added images into the header sections of each page too. I completed the “Sticky Nav” challenge and incorporated it onto each webpage. For the homepage, I used some of the html from the “Sticky Nav” challenge. I changed the images and made them links to the activities. For Activity One, I changed the colors of the “drum kit” activity (and changed the noises to animal sounds). I also added a multiple choice question to answer the challenge prompt. I had to try a few different codes before I got the question to work properly, but I think it’s a nice touch. For Activity Two, I played with the canvas function code some. I changed the lineJoin and lineCap settings, but ultimately decided to leave them round. I opted for one consisent width because I thought it would be easier to draw things that way. I used “lighten” for the global composite operation because I liked the way it looked. I added a table to the page to list animal options for people to draw.
I am finally getting a better understanding of margins, padding, borders, etc., but I still want to get better at the overall layout and design of my webpages. I want to learn more about the different possibilities with JavaScript too, especially just learning how to better utilize functions.
Final Project Reflection
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.
