Throughout this unit I learned a lot for someone that did not know anything about coding prior to this class starting. First, the class learned the basics of HTML, including things like setting up the HTML boilerplate, correctly formatting code, and incorporating lists, links, and images to our sites. As we went into further depth of HTML the second week of this unit, we looked at CSS and how to add style to our pages from an external stylesheet link. I did my best to showcase these new skills acquired throughout my project. I concentrated on staying attentive to file names and formatting throughout the entirety of the project, as well as making sure all text and images are easily visible and appealing to the eye. With inspiration from the class lesson that taught us how to build a nav bar, I was able to link together all three of the pages of my website via nav bar in order for the user to be able to always reach any other page from any given page. Furthermore, all CSS is in an external stylesheet.
This project was a little frustrating for me because it did not come out exactly as I had hoped it would. I pride myself in putting the extra effort in to make sure everything I do looks polished, but I struggled to do this through coding. It was difficult for me to code everything to look pretty as I honestly struggled to code the bare minimum. Once I got going though, things started to flow a bit more easily. I definitely felt proud of myself every time I made an error and was able to figure out how to fix it on my own. In the future, I hope to perfect this craft in order to reach my project's full potential visually. Regardless of my frustration with it not looking perfect, I really did my best to incorporate qualitative elements to the best of my ability. I spent a lot of time trying to find a font that matched the vibe of my website in order to keep a consistent aesthetic. After choosing one from Google Fonts, I uploaded it into my code and it really helped bring my project together. Furthermore, I really zoned in on overall aesthetics throughout the rest of the website as well in order to make it as visually appealling as I could, and consistent throughout all the pages.
Throughout this unit I was able to take my knowledge learned from the last unit and apply it here. Now that I am familiar with HTML and CSS, I was able to better understand this project and why everything in Bootstrap is the way that it is. For Panel 1, I learned how to add a navbar to my website from bootstrap as well as other components like a button, a photo carousel, and how to use a website's grid to make my site look more visually appealing. I also made light customizations to the Bootstrap elements through CSS like making my navigation bar and button blue to have that consistent color theme. In Panel 2, I learned how to thoughtfully select a theme that works best with what I had already made and would work for both mobile and desktop devices. I strictly only replaced components on the template with components I had already used, and did not add any custom CSS. In Panel 3, I learned how to inspect my site and make changes so that it more clearly matched my theme from Panel One. I did this by incorporating the blue color scheme from the navagation bar and button. Also in this panel, I extensively customized the Bootstrap and theme elements compared to the other panels in order to really personalize it compared to Panel 2 and make it look consistent and visually appealing. Throughout all panels, I used my knowledge on uploading Google fonts from last unit and incorporated a Google font that I believed fit well to each panel. Also on all 3 panels, I kept all CSS on external stylesheets linked to my index pages, as well as made sure each site was thoughtfully made with responsive images and optimized for mobile and desktop layouts. I made sure to follow best practices by thoughtfully naming files and keeping all HTML and CSS organized and easily accessible.
I really enjoyed this unit as it helped me solidify my understanding in HTML and CSS and how they work and take my websites to the next level. However, I did struggle with Panel 3 significantly more than the other two panels. When inspecting my site, I faced a lot of challenges with figuring out what CSS I needed to add and how to code it. Often times, my custom CSS was not overriding the CSS the site was already using so I had a hard time trying to fix that. I am proud of myself for getting everything in Panel 3 to work regardless, and I am proud of myself for incorporating qualitative elements in each panel. In panel 1, I really tried to be creative with the Bootstrap components by having regular text and text in grids right above one another so that there was a noticible difference in the site format. I also kept a coherant design by using my Google font for all paragraphs and making my navigation bar and button blue. In Panel 2, I thoughtfully chose a template to make sure it was a good quality and worked well with the components I had. In Panel 3, I was creative with custom.css and used that to push my site's asthetic and keep a coherent overall design by doing things like adding the blue gradient. In the future, I'd definitely like to explore more with Bootstrap as it really seems like it is an easy way to learn more about HTML and incpororate more complex components into your websites.
Throughout this unit I learned about different ways to customize and style a website beyond what we’ve learned in HTML and Bootstrap. First, I learned the basics of Wordpress. This included how the site works, how to browse different themes effectively, how to use widgets and plugins, and what widgets and plugins can be helpful to a site depending on its purpose. I found that the Twenty Twenty theme worked best for my content site, and the Storefront theme worked best for my commerce site. I also used the plugins WooCommerce and to best develop each sitel. From there, I learned how to create, format, and style a homepage, other pages and posts, a menu bar, various blocks, and more in Wordpress. All of these things were then incorporated into my content site and my commerce site, which became my news site and concert ticket storefront site. Within the news site and ticket site, I learned how to create story posts and products and how to display them on each site. After completing all of this, I learned how to add a little more of my own personalization by customizing the theme through CSS, and added a Google font to my additional CSS on each site. Furthermore, I learned how to add videos and animated story previews to the sites to display additional qualitative elements that may be seen on typical content and commerce sites.
A struggle I faced during this project was learning how Wordpress works on the more back-end side. For instance, after uploading a theme to each site some page designs were already created for me. At the same time, I had also created my own page designs myself. At the beginning of creating my sites, I had a difficult time understanding why my own designs weren’t displaying on the site and why the automatic page designs for the theme were displaying. However, after adjusting a few settings I learned how to get my page designs to display instead of the theme’s given page designs. Furthermore, I definitely had a learning curve for understanding what each block and widget accomplished. I struggled at the beginning to figure out what each widget was for, what it would display, and where it should go, but after using Wordpress for a bit I got the hang of it. I am proud of myself for trying to better understand how Wordpress works and not just figuring out how to add what I need to add and moving on. This better understanding of Wordpress definitely allowed me to further develop each of my sites. I am also proud of myself for learning how to incorporate my additional qualitative elements. I learned how to embed a video into each site as well as add a grid hover layout to my news story posts on my content site's homepage by using more widgets.
View My Third Project - Content
View My Third Project - Commerce
I built a website dedicated to the cooking community. I titled it “Snacks by the Season” and focused on specific snacks dedicated to each season. The idea of this website is that it is not just a place to find snack recipes and ideas, but also a community where people can communicate about cooking up their favorite snacks. This allowed me to develop different components of the site and really take it to the next level. The homepage has three menus, one at the head and footer that allows the user to switch between pages and one in the middle of the page that allows the user to browse recipes by their assigned season. The majority of the homepage is taken up by a sliding photo banner that showcases some of the recipes on the site. The homepage displays a highlighted recipe post as well as the rest of the recipe posts in a list. There is also a sidebar on every page that includes a search bar, a list that allows you to browse snacks by season, as well as view the most recent posts and the most recent comments. The “What’s Trending?” page in the menu includes trending snacks linked from Pinterest. The “How-To” page includes cooking videos linked from Youtube. The “Gallery” page displays all of the photos from all of the recipes in one area. Finally, the “Talk of the Town” page displays a comment section where people can communicate about what they are cooking and build this “Snacks by the Season” community. I also went in as an external user and left a few comments to see how it would look.
From building this site, I really learned how to use WordPress to its fullest potential. Compared to my previous two projects on WordPress, I have made significant strides. I learned how to incorporate more than one menu into a site, how to display photos in different ways, how to incorporate different text like captions, how to embed different components like videos and posts, how to personalize the site, and overall how to design the site in a professional and coherent manner. I still faced a couple challenges towards the beginning regarding basic WordPress knowledge. For each of the recipe posts I created I had a photo for each, then realized I needed to go back and add a featured photo for each to get them to display on the homepage, and then realized after doing all of this that the featured page automatically gets displayed so I had 2 duplicate photos within each post and had to go back and remove the photos. This was a bit frustrating to go back and fix a couple times for all 24 posts, but it all came back to my basic WordPress knowledge. Because of this challenge and a few other basic hiccups, I now definitely have a better understanding of more of the specifics of WordPress. I am very proud of how this site came out. I added a lot of additional components that made sense for the site like the links to Pinterest cooking posts, Youtube cooking videos, and community comment section. I also really tried to develop it as much as possible by adding comments and developing a lot of posts. Furthermore, I am really happy with how it looks. As mentioned before, compared to my other WordPress sites, this site looks tremendously better in terms of consistency, professionalism, and overall visual appearance.