Design Challenge

Shirakawa-go is a popular destination for tourists travelling to Japan. However, information on the village is segregated and users find it troublesome to go through so many websites to collect the information that they need.

The website will aim to provide information in a straightforward layout whilst maximising ease of navigation. The website’s design will utilise common Japanese themes such as red and white from the Japanese flag, and will use curved edges to soften the aesthetic, creating a more comfortable user experience.

Coding

Through the use of grid layouts and flex-boxes, the CSS coding was intuitive and simple. HTML was also straightforward, with research and information collection consuming the most time in the process.  

The most difficult challenge that I faced was anchoring images in HTML to other sections on the website. Pictures on the "index.html", although responsive to mouse hovers, wasn’t able to navigate properly to subsequent pages. The problem was resolved through the help from the online coding forum, “Stack Overflow”. Valuable insights were also gained on how to restructure my code to better fit professional practice.  

HTML of the anchored image:

<a href="pages/about.html#gassho-houses">
             
    <img src="img/home/about/gassho_houses.png" alt="A Gassho home"/></a>
‍

HTML of the anchor point in the website:

<h2 id="gassho_houses">Gassho Houses</h2>