Wines of Italy: Learning HTML, CSS, JavaScript

 
 
 

Overview:

This case study navigates through the early stages of development, where I meticulously learned the foundations of web development, understanding the intricacies of HTML to structure the website, CSS to stylize its presentation, and JavaScript to imbue it with interactive elements. The journey of learning and implementing these coding languages intertwines seamlessly with my exploration of the vast spectrum of Italian wines, from the prestigious Chiantis to the elegant Barolos.

Through this captivating exploration, I hope to encourage and empower others to embrace challenges, seize opportunities for growth, and embark on their own extraordinary journeys of self-improvement. Ultimately, this case study illuminates how the fusion of learning, technical proficiency, and the enchantment of Italian wines can yield a truly remarkable digital creation.

 
 
 

The Challenge:

Design and develop a responsive website including the following components:

  • well-structured, accessible HTML in compliance with XHTML 5 standards

  • well-structured, accessible CSS to create visually appealing web styles and incorporate CSS2 and CSS3

  • use external libraries for animations

  • leverage Javascript to incorporate dynamic elements

  • use external data sources to embed within the site

Time to complete: 6 months

 

The Solution:

An educational website about Italian regions, their wines and food pairings where I incorporated the following:

  • HTML - sections, divs, lists, headings, paragraphs, forms, tables, links, images, buttons, and labels

  • CSS - text-align, absolute and relative positioning, z-index, rounded corners, text animations, visual animations, different opacity levels, pseudo-classes and use of nth or child n, flex boxes

  • External Libraries - jQuery for an animated image carousel plugin and an animated burger menu for tablet and phone sizes

  • Javascript - dynamic search bar, form validator, interactive map SVG with tooltip on hover and map colour change on click

  • External Data Sources - embedded Twitter, Facebook and Linkedin social media shares on blog posts, dynamic Twitter feed on the homepage, Pinterest board of different Italian regions

 
 
 

Research & Mapping:

  • Through in-depth research, I delved into the diverse Italian regions and meticulously explored the distinctive varieties of wine produced within each region. Additionally, I explored the art of food pairing, identifying exceptional culinary combinations to complement the wines. - See all the research here

  • With a keen eye for organization and user experience, I strategically crafted a comprehensive site map to outline the optimal structure of my coding website. By carefully considering the various sections, features, and functionalities, I ensured intuitive and seamless navigation for visitors.

 
 
 
 

Site Design Proposal:

Drawing upon my extensive knowledge of design principles, I present a meticulously curated site design proposal. By blending aesthetically pleasing elements with a user-centric approach, this proposal aims to provide an engaging and enriching experience for wine lovers.

 
 
 

Learning Resources:

The following resources were used to learn the different coding languages to help me put my website together.

 
 
 
 
 

Challenges:

Learning different coding languages did not go without its fair share of challenges and errors! Below I’ve outlined some of the main issues I faced while constructing my website!

 
 

Nesting Flex-boxes:

I kept targeting the wrong areas. This required multiple tests and reviews to ensure I was targeting the correct areas.

 
 

Sticky Footer:

I had initially set this to be fixed at the bottom of the page but when the device size changed, the footer moved to the middle of the page. To solve this problem I reviewed a few web developer forums and found that if I grouped all my content into a container and set the viewport to 100vh then placed the footer underneath it would stick to the bottom of the page regardless of the device size. I also experienced an issue with centring the footer with a maximum width of 100%, the footer kept displaying a gap beneath. I didn’t realize at the time that the body tag had auto margins and padding which were causing the issue. Once I set them both to 0, the footer worked.  

 
 

Dynamic Burger Menu:

I leveraged code from a youtube tutorial by Developedbyed to create an animated burger menu for tablet and mobile devices. The animated menu is supposed to take over the entire screen when the burger is clicked with access to the search function and the burger menu items only. My content elements that had a position of absolute would mask on top of the sliding navigation menu. I was required to amend the z-index values of my burger menu, search icon, and active navigation in order to prevent unwanted elements from being displayed to solve the issue.

 
 

Search Bar:

Time to strategize how to format the search function using jQuery took a significant amount of time. I had originally coded the search functionality using Javascript but later realized it could be simplified using jQuery. See the comparison below:

 
 
 
 
 

Dynamic Colour Change on Map Selected Region:

Connecting the colour change to correspond with the regional page was also a very large challenge that I faced. I couldn’t figure out how to dynamically add a class to style an SVG path. This is something that I tested during my designing phase because I wasn’t sure if I could make it possible. I found that if I used .contentDocument to get the region name and use .classList.add(‘active’), I was able to successfully add this style dynamically. Although this worked wonderfully in theory, I also learned the hard way that .contentDocument does not work when previewing your files in the browser. It only works when the file is hosted on a server. I was initially very confused because I wasn’t seeing any errors in the console, yet nothing was happening. Once I hosted it on a server, it worked and I can’t even put into words how happy this made me feel! 

Dynamic Tooltip on Map:

I didn't realize how different SVG code was from HTML so I had to conduct significant research and faced some serious struggles with getting the tooltip to work. For example, I thought I could use the <title> element to stylize the tooltip however it was not possible to manipulate it with CSS or JavaScript. Once I discovered the proper element to use was the <text> element, the tooltip would often be partially displayed behind map elements. I thought adding a z-index would solve the trick but unfortunately, that also failed. I later realized my issue was that I had embedded tooltips within each path and in order for the tooltip to display it had to be outside of the paths at the end of the document. 

 
 
 

Code:

Feel free to review my code repository with notes on GitHub here

Reflection:

During the process of building a website using self-taught skills in HTML, CSS, and JavaScript, I encountered various challenges and gained valuable insights. Reflecting on this experience, there are a few key points that stand out:

  1. Difficulty with SVG manipulation: Out of all the challenges I faced, working with SVG (Scalable Vector Graphics) manipulation was particularly challenging, especially as a beginner. This experience taught me the importance of recognizing the complexity of certain features or technologies before attempting to incorporate them into a project. In the future, I would ensure I have a better understanding of SVG or seek additional resources to enhance my skills before utilizing it extensively.

  2. Scope management: Another aspect I realized was that the scope of my website was too large considering the time constraints I had. This resulted in having to limit the number of pathways or features I could implement effectively. It's important to be mindful of project scope and consider realistic timelines when planning and designing a website. Going forward, I would focus on prioritizing essential features and creating a more manageable scope to ensure a better balance between time constraints and project objectives.

  3. Growth mindset and seeking further learning opportunities: Building a website with self-taught skills demonstrates the power of self-motivation and a growth mindset. Recognizing the areas where I struggled and seeking opportunities for improvement is crucial. Engaging in online tutorials, seeking guidance from experienced developers, or joining web development communities can provide valuable resources and support for my continuous learning journey.

Overall, this case study of building a website with self-taught HTML, CSS, and JavaScript allowed me to gain practical experience, learn from challenges, and identify areas for growth. It highlighted the importance of managing project scope effectively, recognizing the complexity of certain features, and continuously seeking learning opportunities to enhance my skills. Through reflection and adaptation, I can further refine my abilities and create more successful projects in the future!