PROJECT 1: ARTISANAL HAND-CRAFTED WEBSITE
Throughout this project, I developed new skills and navigated various challenges. Building this website allowed me to solidify my understanding of HTML and CSS, as well as become more familiar with their syntax and structure. I learned techniques such as overlaying text on images, as demonstrated above, and explored advanced CSS styling. While some obstacles were resolved by fixing simple typos, others required extensive research and troubleshooting. Working with the CSS box model was particularly challenging, but it significantly advanced my understanding of web design principles.
One feature I am especially proud of is the image scroll, which I implemented after researching and some trial and error. It provided an aesthetically pleasing way to display my photos. Additionally, selecting and applying a cohesive color palette was an enjoyable process. This project is deeply personal, as it highlights a sport that has greatly impacted me both physically and mentally.
Looking ahead, I aim to enhance my web development skills by creating more engaging and interactive websites. I also aspire to undertake more meaningful and personal projects that resonate with my interests and passions. This experience has been incredibly rewarding, and I look forward to continuing my growth in this field.
PROJECT 2: BOOTSTRAP TRIPTYCH
PANEL ONE
Creating the first panel was an enjoyable and rewarding experience. It gave me the opportunity to apply my new Bootstrap skills, especially my understanding of the grid system. Learning about the grid system was scarier than it actually doing it. One challenge I faced was personalizing this panel. Since many of the elements were pre-designed, it was difficult to fully incorporate my own style and creativity. Creating the first project from scratch felt more personal and allowed for greater customization. Despite this, I am proud of how the panel turned out. It’s fully responsive and adapts to the user. A feature I particularly enjoyed working on was the interactive button where Charlie and Beni pop up. It was both fun to create and adds a playful element to the design. Moving forward, I would like to explore more advanced applications of the grid system beyond its use for organizing pictures and text.
PANEL TWO
Panel two was straightforward to implement, since I was able to use an online template that was basically fully functional. This experience taught me how to be efficient, particularly in identifying and changing the necessary elements in a piece of code. For example, I practiced accurately inputting pathways when replacing images, which improved my attention to detail and familiarity with code structures. Although I didn’t edit the template, I am proud of the site’s visual appeal and functionality. The moving picture, progress bars, and portfolio section were very impressive features. In the future, I would like to learn how to code similar elements from scratch to deepen my understanding of web development skills.
PANEL THREE
Panel three was the most challenging part of this project. However, it equipped me with important skills, such as identifying how specific sections of the site correspond to code in both the HTML and CSS files. I also used my styling knowledge by incorporating features like Google Fonts, which enhanced the overall design. A big challenged I faced was pinpointing certain elements within the site. At times, the code didn’t seem to match the site and using the inspect element feature only added to the confusion. Nevertheless, I am proud of overcoming these obstacles and successfully troubleshooting the issues. I’m very pleased with how I personalized the site while maintaining a consistent design style from panel two, which I originally really liked. By using a color palette generator, I customized elements like buttons and progress bars to align with my new design. Moving forward, I aim to improve my ability to identify and modify site components more efficiently, as I know this skill will be important in future projects.
PROJECT 3: WORDPRESS VARIETY PACK
CONTENT SITE
Creating my content site allowed me to acquire several new skills and deepen my understanding of web design. I learned how to rearrange blocks and adjust their styles to create a more balanced and visually appealing layout. Additionally, I explored more advanced features, such as changing my theme to “Marsh Blog” and installing a plugin called Photo Gallery by 10Web to display of my pictures in an aesthetic fashion.
While I thoroughly enjoyed this process, I encountered a few challenges, particularly with the additional CSS. Using the Inspect element to identify specific elements often resulted in long class names with multiple words, leaving me unsure which to call to. This required significant trial and error, as I experimented with different class names until something worked. Another challenge was selecting the right theme. Since I wanted my blog to have a clean and minimal design, it took time to find one that aligned with my vision.
Despite these struggles, I’m proud of how the additional CSS transformed my site. I customized elements like changing text colors from bright red to muted green and styling words to behave differently when hovered over or active. I was able to elevate the site’s overall quality by embedding videos, images, and various blocks seamlessly within my blog posts.
One feature I’m especially proud of is the HTML widget I added to the homepage. It displays the words “Allez,” “Gamba,” and “Gaja” moving from right to left. These are all ways of saying “Come on!” in French, Japanese, and Korean, respectively. This is a phrase climbers often use to encourage one another, and including them added a meaningful and personal touch to the site.
This project was incredibly rewarding, and I am proud of the final result. It reflects my passion for climbing and the effort I put into its design. Moving forward, I aim to refine my CSS skills and become more efficient at targeting the correct classes. WordPress templates serve as a solid foundation, however, additional CSS truly allows for personalized and impactful designs to be produced.
COMMERCE SITE
While creating my commerce site, I enhanced my skills in rearranging blocks and editing their individual styles. I also deepened my understanding of working with the site editor rather than the page editor. For this project, I chose to stick with the “Twenty Twenty-Four” theme and utilized the WooCommerce plugin’s search bar to allow users to search for products directly from the header.
One challenge I faced was maintaining creativity within the already advanced WooCommerce setup. While the plugin provided a strong foundation, it limited my customization options to colors, images, and fonts. Another challenge was changing the background color behind the quote on my homepage. It was particularly tricky and required adding “!important” to the CSS code for the change to take place. I also struggled with incorporating Google Fonts; although I chose “Quicksand” as my preferred font, it reverted to the backup Serif font in the final design.
Despite these challenges, I am proud of how my homepage turned out. I enjoyed using columns to combine media and text blocks to showcase my products effectively. I linked product images and names to their respective product pages, creating a seamless user experience. Using the WooCommerce plugin, I featured a sale section under the “featured category” function. Additionally, I added a gallery to individual product pages to allow users to view multiple images.
One feature I’m particularly proud of is the WooCommerce search bar plugin integration. Instead of placing it at the top of my homepage, I customized its placement within the header, which required trial and error but ultimately worked as planned.
Creating this commerce site was a rewarding challenge that pushed me to think critically about how to further personalize and enhance a framework that was already developed. In the future, I plan to continue improving my CSS skills to unlock even greater customization possibilities.
FINAL PROJECT
FINAL PROJECT REFLECTION
For my final project, I chose to build upon my third project, as it was the one I was most proud of. Not only did it contain elements that added to the user experience, but also revolved around a theme that reflected my passion. Throughout this process, I gained more knowledge on how to utilize the WordPress elements beyond what I had learned in the third project. I also learned how to be more efficient in coding my additional CSS. Although I faced challenges in identifying the correct classes and ids for certain elements, it took me a lot less time for this project.
To elevate this project further, I added a “My Experience” tab. While I was proud of the third project’s outcome, I wanted to make it even more personal and engaging. Incorporating certain elements from my first project into the final felt like a full-circle moment, allowing me to include personal aspects from earlier work with the improvements I’ve made along the way. This section includes details about my climbing journey, training routines, and personal shoe reviews, adding a meaningful and unique touch to the blog.
For the “My Experience” tab, I used the Photo Gallery by 10Web plugin to create a visually appealing collage of my climbing. Most of the pictures were taken at my hometown gym, Adrenaline, while others were taken at a gym in Athens. To enhance the user experience, I also used WordPress blocks to add a gallery showcasing other well-known climbing gyms in Georgia. Fun fact: I’m somewhere in the picture for Adrenaline! To make the gallery more interactive, I added links both below and within the images, allowing users to go to each gym’s site. Additionally, I implemented the WPForms plugin to enable users to interact with me. Setting up the form wasn’t difficult, however, I did run into issues with the upload process, which required a few attempts to resolve.
For the “My Training” tab, my goal was to visually represent my training routine for both the user and myself. I wanted to give readers a feel for how often I train and the specific activities I do. Making this tab was both challenging and rewarding. One of the main difficulties was implementing a functional calendar. Initially, I tried using WordPress’s calendar widget, but it didn’t support uploading events. After that, I tried to embed a Google Calendar, but that also didn’t work. Ultimately, I installed a plugin called The Events Calendar. After a few bumps, I learned how to successfully upload my workout events to the calendar. I gave mEach event was given a title, time, date, and a category of either “gym” or “climb.” With that, I included a quick explanation of why my workouts and climbing sessions tend to be longer. I emphasized the intentionality behind my training and provided examples of exercises through text and embedded YouTube videos. This allowed me to share both the structure and reasoning behind my strict routine. Seeing the final results of this page was very rewarding on both a personal and academic level. I was exciting to see my vision come to life on the screen, but it also felt meaningful to visually reflect on how far I’ve progressed in my training journey.
Creating the “My Shoe Reviews” page was my favorite part of this project. My climbing shoes represent more than just equipment. They embody the hard work and time I’ve dedicated to improving at this sport. Every rip, hole, chalk mark, scratch, and loosened piece of glue tells the story of every climbing session I’ve had and what I’ve accomplished in them. Although I’ve only owned three pairs of shoes so far, discussing their qualities and sharing my experiences with them was very enlightening. To tell this story, I utilized the Photo Gallery by 10Web to display my shoes in a professional manner. I paid attention to detail by arranging the shoes in consistent poses for each photo. While I could not upload a picture of my La Sportiva Finales since they’re back home, I tried my best to maintain the same style for that gallery as well. To enhance engagement, I also included buttons linking directly to the product site for each shoe, allowing users interested to purchase the shoes themselves.
