I am looking to create this website to showcase a fictional tropical island resort with classes and activities designed for Pokémon and their trainers.
The goal is to create a visually engaging and appealing platform that captures the essence of a tropical getaway for Pokémon and Pokémon enthusiasts, which allows customers to get a feel for the resort, viewing the various activities the island has to offer, seeing and learning about the trainers, and booking suites/enrolling their Pokémon in classes.
View live website here (Hosted on GitHub pages)
The main objectives of the Pokémon Island Resort website are:
- Showcase the Resort: Present a vibrant, engaging overview of the fictional island resort, highlighting its unique features, activities, and accommodations for both Pokémon and their trainers.
- Enhance User Engagement: Create an interactive and visually appealing experience that encourages users to explore the site, learn about the trainers, and discover the variety of classes and suites available.
- Facilitate Booking Requests and Enquiries: Provide clear, accessible forms for users to enquire to book suites, enroll Pokémon in classes, or contact the resort, ensuring a smooth and user-friendly process.
- Promote Accessibility and Responsiveness: Ensure the website is fully responsive and accessible across all devices and screen sizes, offering an optimal experience for every visitor.
- Build Trust and Credibility: Use professional design, clear navigation, and transparent information to build user confidence in the resort and its offerings.
These objectives should guide the design, content, and functionality of the website to deliver a memorable and effective user experience.
The website is designed to have a fun, playful feel, aiming to get potential visitors excited about everything the island has to offer. The overall aesthetic draws inspiration from tropical resorts and the vibrant world of Pokémon, using bright, cheerful colours and whimsical design elements throughout.
A key part of the design is the use of text bubbles - these are partially transparent with curved, chunky coloured borders that help them stand out against the background. On larger screens, images are also framed with the same thick, coloured borders, creating a cohesive look. The layout is intentionally dynamic: as you scroll down the page, the text bubbles and images alternate from left to right, giving the site a playful, quirky, and engaging flow that encourages exploration.
To further enhance the lively and playful atmosphere, I incorporated a variety of colourful images. These visuals not only make the site more visually appealing but also help communicate the resort's unique offerings and the sense of adventure awaiting visitors. The combination of bold typography, vibrant colour palette, and interactive elements (like dropdown menus and responsive layouts) ensures that the site feels welcoming and accessible to users of all ages, especially Pokémon fans and trainers looking for a fun getaway with their Pokémon.
Overall, every design choice - from the fonts and colours to the arrangement of content was made to capture the essence of a tropical Pokémon paradise, making the website both inviting and memorable.
A typical customer for the Pokémon Island Resort is:
- A Pokémon owner or trainer
- Young and free spirited/eager for adventure
- Someone who enjoys travelling and exploring new destinations
- Enthusiastic about trying new and unique experiences and activities
-
As a new visitor:
- I want to quickly find out if the island has the activities and amenities I'm interested in, and feel assured that my stay will give me everything I'm looking for.
-
As a first-time user:
- I want the website to be easy to navigate, with a clear layout and intuitive links between pages, so I can move seamlessly through the site and find what I need without confusion and plan my trip effectively.
-
As a Pokémon trainer:
- I want to easily discover classes tailored to my Pokémon's type and abilities, and find trainers with the right expertise to help them master their moves, develop new skills and reach their full potential.
-
As a guest or potential guest looking to contact or request to book:
- I want to feel assured that my message or booking request has been received and will be responded to.
-
As a past visitor:
- I want to easily share everything I have experienced at the resort with friends and family, including trainers I've met and activities/classes my Pokémon and I have taken part in.
Click for wireframe images of Home Page
| Home Page on larger screens (laptops & larger): | Home Page on smaller screens (mobile & tablet): |
|---|---|
 |
 |
| I removed some of the extra text bubbles that will be on the finished website so that the image isn't too long |
Changes I made to this page
I decided to change the 'Island Features' title to 'Our Activities' instead to be more exciting and engaging for potential customers. The term 'Island Features' felt a bit generic and didn't fully capture the fun, adventurous spirit I wanted to convey. By renaming it to 'Our Activities', the section immediately communicates that there are a variety of things to do at the resort, inviting visitors to imagine themselves taking part in these experiences.
I also changed the section title from 'Our Trainers and Pokémon' to just 'Our Trainers' to streamline the layout and make it more concise. Instead of listing both trainers and Pokémon together, I opted to highlight the trainers in the main section, and then specify which Pokémon are involved in each class within the relevant text bubbles.
I also decided to add a 'Contact Us' button to the left of the navbar menu, as thought this would be better to be more immediately visible for users of the website, and then decided to change the navbar menu button names so they were shorter and more concise (from 'About Us' to 'Home', 'Our Trainers' to 'Trainers' and 'Contact Us' to 'Contact'), taking less room and balancing better with the longer buttons on the right side 'Book a Room' and 'Book a Class'.
Click for wireframe images of Rooms Page
| Rooms Page on large screens (laptop & larger): | Rooms Page on smaller screens (mobile & tablet): |
|---|---|
 |
 |
Changes I made to this page
Later, I decided to change the name of this page from 'Rooms' to 'Suites', as I felt having apartments and chalets, etc. would give a more luxurious feel than simply having rooms to book.
I also decided to simplify this page to keep the images inside the boxes at both screen sizes, instead of popping out to be at the side, like I have in my Home and Classes pages, as I was only using 1 image per room, so it worked better at all screen sizes.
Changes to both this page and the Classes Page
I decided to change the titles in the Rooms and Classes pages, instead of having both a page title in the navbar and on the main page to the navbar page title only showing at smaller screens, and switching to a larger title bubble at larger screens, so that the titles weren't duplicated and made best use of the available screen space.
I also changed the navbar button options in these pages to reduce the 2/3 dropdown buttons on the left side of the navbar (was 'About Us' & 'Our Trainers', then 'Home', 'Trainers' and 'Contact') to just 1 normal 'Back to Home' button, and also changed the other page button on the right side to be a normal button instead of a dropdown button, leaving only dropdown buttons for the active page, which made navigating simpler and cleaner.
Click for wireframe images of Classes Page
| Classes Page on large screens (laptop & larger): | Classes Page on smaller screens (mobile & tablet): |
|---|---|
 |
 |
Click for wireframe images of Success Page
| Success Page on large screens (laptop & larger): | Success Page on smaller screens (mobile & tablet): |
|---|---|
 |
 |
Click for wireframe images of 404 Page
| 404 Page on large screens (laptop & larger): | 404 Page on smaller screens (mobile & tablet): |
|---|---|
 |
 |
I wanted to pick a playful and tropical font with a seaside feel for my headings, so I used Google Fonts to explore options. Using their preview tool, I tested the phrase "Pokémon Island Resort" - the main site title - to ensure it looked just right, especially the (é) character, which appeared odd in some fonts. I ultimately chose Skranji because it perfectly captures the exotic, tropical, and beachy vibe I wanted, and even has a hint of bamboo reminiscent of island shacks.
For paragraph text, I wanted a simple, clear, and unfussy font that would complement 'Skranji' without competing for attention. Again using Google Fonts, I browsed sans-serif options and selected Roboto for its versatility and readability across devices. Its straightforward design and spacious lettering make it easy to read, even in longer paragraphs.
| Header Font | Paragraph Font |
|---|---|
 |
 |
Images and Colours
I wanted the website's colour scheme to evoke a welcoming and relaxing island holiday feeling, so I decided on a background in either a sandy tone or a blue sea colour.
I also liked the idea of having a background image, so I began by searching on some of the free image websites for a suitable image that would set the tone for the site. After browsing through a few options, I found a background image on Freepik that felt like it perfectly matched the tropical vibe I envisioned. I instantly loved the colours in this image (and how well they worked together) - from the golden sand background colour, the vibrant green of the palm leaves, and the range of other colours in the smaller details such as the shells and footprints - and decided to make a colour palette from these to use throughout the website for consistency.
To be able to use each of these specific colours from the image throughout the website, I used ColorZilla, which is a Chrome extension that allows you to select specific colours from a webpage using a dropper tool, to get the specific hex code/rgb code directly from any online image. I added many different colours, then refined my choices by previewing them on the site to ensure they complemented each other and provided good contrast.
For the Header and Footer, I wanted to evoke the feel of a 'bamboo beach shack', so I searched for images featuring horizontally aligned bamboo.
I eventually found a bamboo image that fit the look I wanted, but its original colors didn't quite match my chosen palette, so I decided to create a semi-transparent colored overlay using one of the palette colors extracted from the background image over the top of the bamboo background image by changing the hex code to an rgba code, where I can manipulate the opacity, and adding it as a background to another div I added on top. This allowed the bamboo texture to remain visible while ensuring the overall color scheme stayed consistent. The overlay also improves the readability of button text and titles against the background.
Images of Navbar before and after adding the coloured semi-transparent overlay
*click to view*
Favicon
The favicon for this site is a small palm tree icon, chosen to reflect the tropical island theme of the resort. It appears in the browser tab and bookmarks, helping users quickly identify the site. The favicon was sourced from IconArchive and is free to use under an open source license. Its playful design complements the overall branding and adds a professional touch to the website.
For future maintainability, I defined each colour as a CSS variable (e.g., var(--colour-name)). This approach made it easy to update the palette later if needed - changing a single variable would update the colour everywhere it was used. This was especially helpful when testing text contrast for accessibility, as I did end up changing the colour I had selected for the paragraph text when testing against the background colour of the text 'bubbles', so that it would pass all of the tests in the WebAIM Contrast Checker Test as it didn't originally.
I also used a couple of colours outside of this colour palette, one which was a shade in between 2 of the colours from my colour palette, and one which is a lighter version of the original - in places where the original colours didn't look quite right (either too light or too dark).
I used a Color Blender tool to find a colour between my --primary-sand and --secondary-sand colours by inputting their 2 hex codes - producing the perfect middle tone which I named --tertiary-sand.
Click for Image of Color Blender showing the two colours I inputted to find midpoint colour
The only colour (in the Colour Palette) not picked from the background image was the dark brown shade #674A18, originally #84644B, which I chose because all of the other colours (apart from the leaf colour) were too pale to stand out against a pale sandy background (which I used as a background for all blocks of text), and it still matches the aesthetic nicely, but doesn't compete for attention from any of the more important headers, that I want the attention to initially be drawn to.
For this reason I kept the headings (Skranji) as more colourful, in a brighter green/golden sandy colour depending on the background shade, e.g. the bolder leaf colour on a paler background and the lighter sand colour on a darker background, so that the contrast is enough to be read easily.
I tested the colours using WebAIM Contrast Checker Test, and amended the colours slightly later on so that I would pass tests that I'd failed with the previous colour. This is where I show the Contrast Test Outcomes in the Testing section.
I added aria-labels to all links on the website and ensured that even sections without a header had a hidden visibility header which made it clear what the section was for.
Ensures the website is accessible and visually appealing on all devices, including mobile, tablet, and desktop.
This includes:
- A hero image that switches from landscape to portrait when shrinking from laptop to mobile/tablet screen size.
- Text 'bubbles' that change order and location transitioning from different screen sizes, with images which go from being inside the floating text bubbles, to outside, next to the text, in their own "bubbles" and also change order and visibility depending in the screen size.
| Hero Image on smaller screens (mobile & tablet): | Hero Image on large screens (laptop & larger): |
|---|---|
 |
 |
Examples of how images change depending on screen size to match the text box height:
| Small screen sizes (tablet & mobile) - showing 1 image inside the text box | Medium screen sizes (small laptop) - now with 4 images to the side of the text box |
 |
 |
| Large screen sizes (laptop) - now with 3 images to the side of the text box | XL screen sizes (monitor/TV) - now with 2 images to the side of the text box |
 |
 |
The paragraphs inside the text box and images are all inside a Bootstrap flexbox, which adjusts to the screen size. If gaps are needed, they are evenly distributed, so there are never any large unsightly gaps, no matter the viewing dimensions."
This has links to all of the main pages and is always fixed to the top, so is accessible from anywhere in the website. It has links to all of the pages (with exception to the Success and 404 pages) - see full list
Below is an interactive feature to show you the buttons in the navbar and dropdown options of each (tap the arrow to see dropdown options):
Home - (Dropdown arrow only shows when on Home Page, on other pages the button changes to 'Back to Home')
- Our Activities- Our Trainers
- Message Us
Trainers - (Entire button with dropdown arrow only shows when on Home Page)
- Trainer Kiawe- Trainer Mallow
- Trainer Lana
Contact - (Entire button with dropdown arrow only shows when on Home Page)
- Message Us- Book a Class
- Book a Suite
- Social Media
Book a Suite - (Dropdown arrow only shows when on Suites Page)
- Sea View Penthouse- Mountain View Apartment
- Garden View Chalet
- Arena View Apartment
- Book Now!
Book a Class - (Dropdown arrow only shows when on Classes Page)
- Flying Skills- Surfing & Water Skills
- Beach & Dune Riding
- Fire Breathing & Fire Skills
- Snorkeling & Deep Sea Diving
- Book Now!
Larger Screen (Full Sized) Navbar:
Larger Screen (Full Sized) Navbar: with open Dropdown Menu:
| Smaller Screen (Collapsed) Navbar: | Open Smaller Screen (Collapsed) Navbar: |
|---|---|
 |
 |
This has links to social media, and is shown at the bottom of each page, although not fixed in place over the content like the Navbar is
| Larger Screen Footer: | Smaller Screen Footer: |
|---|---|
 |
 |
I added no break spaces ( ) to the end of all paragraphs between the last 2 (sometimes 3 if short) words so there aren't ever any 'orphan' words, no matter the screen size - which makes blocks of text look a lot better always.
| Before | After |
 |
 |
Instead of adding margins/padding/gaps to individual elements using Bootstrap classes, like I was doing at the start, I decided to instead add these to my custom style.css stylesheet, so that these would be automatically passed down or I could add multiple changes with a simple custom class instead.
Instead of having lots of different classes that applied specific spacing, that were the same on multiple elements, I decided to add spacing like this to a new CSS class or onto as an element rule in my stylesheet.
<div class="my-5 mt-2 px-4 pb-2 pt-0">The new class: .floating-section below I used for spacing all for my text bubbles and images:
.floating-section {
gap: 10px;
padding: 24px;
}Images showing the spacing applied due to the above class, such as padding (in green) and gaps (in purple):
 |
 |
I also added spacing to the body,main and section elements. This image shows some of the rules I added to some of these elements:
main {
gap: 10px;
}
section {
margin: 0 20px;
padding: 10px 0;
width: 99%;
}| Before | After |
|---|---|
 |
 |
The spacing was particularly helpful to space the content and add padding inside and in between the multiple text bubbles, to ensure nothing got too cramped and make sure everything stays consistent, no matter the screen size.
Note: Pages/sections marked with * can be accessed through the navbar buttons or their dropdown menu options
Home Page* - Highlights the resort's unique offerings and provides a welcoming introduction.
Featuring:
- A fun and colourful Hero Image with small floating 'Welcome' text bubble.
- Different Navbar options depending on the screen size.
- A responsive Hero image that changes orientation at different sizes to fill the screen (portrait for mobile/tablet and landscape for laptop and larger screens).
-
An Activities Section* with responsive floating text bubbles and images which multiply to up to 3 depending on the height of the text bubble, or appear inside the text bubbles at mobile and tablet screen sizes.
- The image below shows a way to jump to this section from anywhere on the Home page - an open 'Our Activities' dropdown menu option from opening the 'Home' dropdown menu in the navbar, which is being hovered over so the colour has inverted.
- An Our Trainers Section* with group image, and then individual images, descriptions, and links to their classes, which are fully responsive, and the images also multiply to up to 3, or appear inside the text bubbles at different screen sizes.
- You can get to this section of the Home page by clicking the 'Trainers' button, or selecting the 'Our Trainers' option in the Home dropdown menu.
- As you can see on the largest screen in the image below, when the 'Trainers' button is hovered over, there is a hover effect that changes the colouring/background, like in the dropdown menus.
-
A Contact Form* to get in touch, with an adjustable message box, which links to the Success/Thank You Page when correctly submitted.
- This image shows one of the dropdown menu options that directs to the contact form from the 'Contact' split button dropdown menu.
(you can also use the Contact button or 'Send Us a Message' option in the Contact dropdown menu)
- This image shows one of the dropdown menu options that directs to the contact form from the 'Contact' split button dropdown menu.
- All pages are also responsive so that the center content won't stretch too large on XXL Screens.
Suites Page* - Lists the suites, complete with descriptions and images, and also has a booking request form.
Featuring:
-
A large bubble Page Title which disappears and is instead incorporated into the navbar on smaller screen sizes.
-
4 Suite Options* with images, descriptions, and a 'Book Now' button, which links directly down to the suite Booking Enquiry Form at the bottom of the page.
- As you can see in the image below, as the Suites page is the current page, the 'Book a Suite' button is underlined on the navbar button so that it is clear to the user at a glance which page they are on, and also the dropdown menu arrow has appeared beside it.
-
A Suite Booking Enquiry Form* with dropdown menu to pick a suite to enquire about, which link to the Success/Thank You Page when correctly submitted.
- The image below shows the open dropdown menu from the 'Book a Suite' split button, with the 'Book Now' option being hovered over.
Classes Page* - Lists the classes, complete with descriptions, images and trainers teaching the classes and has a booking request form.
Featuring:
- A large bubble Page Title which disappears and is instead incorporated into the navbar on smaller screen sizes.
- 5 Class Options* which are all fully responsive, so the image is inside the description box in a mobile/tablet screen, and then on larger screens the images pop out of the text box and appear beside, increasing/decreasing from 1 to 4 depending on the screen size, to match the height of the description bubble. As well as related images, these all have titles, descriptions, which trainer/trainers that will take the class (including a link to the specific trainer on the main home page), and a 'Book Now' button, which links directly down to the Booking Form at the bottom of the page.
-
A Class Booking Form* with dropdown menu to pick a suite to enquire about, which redirects to the Success/Thank You Page when correctly submitted.
- The image below shows the open dropdown menu from the 'Book a Class' split button, with the 'Book Now' option being hovered over.
Success/Thank You Page – Confirms successful form submission and offers links to explore more of the website.
Featuring:
- A large bubble "Thank You" Page Title, which disappears and is instead incorporated into the navbar on smaller screen sizes.
- A friendly "Thank You" message to the user, with links to other places on the website that they can look at.
- An image (or two at XXL screen sizes) of all of the Trainers/Team.
After making these mockup images, I changed the image on mobile screen sizes to appear at the top of the text instead of at the bottom.
404 Page - A custom error page with links to help users return to the main sections of the site.
Featuring:
- A large bubble Page Title which disappears and is instead incorporated into the navbar on smaller screen sizes.
- Links back to different pages in a fun and playful paragraph of text.
- An image (or two at XXL screen sizes) of the Trainers/Team.
After making these mockup images, I changed the image on mobile screen sizes to appear at the top of the text instead of at the bottom.
Warning Message that I fixed
I had 3 of these warnings, for the 2 continued sections that I needed to split due to the background image being too zoomed in otherwise ('Our Activities' and 'Our Trainers'). I added an id to each section to make it clear for screen readers and accessibility, and also added a hidden header for extra clarity and so there were no errors or warnings in the tests.
<!-- Our Activities Section continued -->
<section id="activities-continued">
<!-- This section continues from the previous section, so it has no visible title -->
<h2 class="visually-hidden">Our Activities Continued</h2><section id="hero" class="hero m-0 p-0">
<h2 class="visually-hidden">Hero Image</h2>After correcting the above Warning message, these are the test results from my W3C HTML Validator Tests:
| Home Page | Suites Page |
|---|---|
 |
 |
| Classes Page | Success Page | 404 Page |
|---|---|---|
 |
 |
 |
The CSS stylesheet passes the CSS Validation Service.
There were some warnings which are due to using CSS variables and imported stylesheets from Bootstrap, which aren't anything to worry about.
*click to see warning messages*
When testing my website with Lighthouse, I encountered an issue, which I fixed (fixed scores below) which affected the 'Best Practices' score, as shown below:
Click for old test results
This was due to h1 elements being used within a section element, so by changing all the h2s to h3s and h1s in my sections to h2s, this fixed the issue, giving me the scores below for each of the pages:
Home Page:
Suites Page:
Classes Page:
Success Page:
404 Page:
False Contrast Errors
Issue The only contrast errors were caused by the visually hidden headers I had added during the W3C HTML Validation test just above, which I discovered when inspecting the code shown below:
Solution I got around these errors by adding a colour to these headers by adding a colour to the headings in the HTML using the style attribute.
<section id="hero" class="hero m-0 p-0">
<h2 class="visually-hidden" style="color: black;">Hero Image</h2>After I added the code to fix these 'errors', these were my test results:
There were no Errors or Contrast Errors in the Home Page.
 |
 |
The Alerts above are due to the links to the Suites page at the bottom of the Activity text bubbles, as the link is on the word "here", which the testing tool isn't sure if will be clear to users. However, I believe this is clear enough as it is clearly specified in the words before the link.
The other Alerts were due to the links being to the same place at the bottom of each text box, which was also intentional and doesn't cause a problem.
There were no Errors or Contrast Errors in the Suites Page.
The Alerts in this page were again only caused by 'redundant'/duplicate links from the 'Book Now' buttons at the bottom of each Suite description, which takes you to the booking enquiry form at the bottom of the page, which I am happy with and will leave as it is.
 |
 |
There were no Errors or Contrast Errors in the Classes Page.
Fixed 'Possible Heading' Alerts
There were some 'Possible Heading' Alerts on this page, which I amended by changing some of the paragraphs (p tags) with the .lead class to h3 size headers with the .lead class instead.
Before:
<p class="lead mb-1">with Trainer Lana</p>After:
<h4 class="lead mb-1">with Trainer Lana</h4>There were also 'Suspicious Link Text' Alerts from the links on the word "here" again, but it is explained in the words before, so I am happy to leave that as it is.
The 'Redundant Link' Alert again is only caused by duplicate links from the 'Book Now' buttons at the bottom of each Suite description, which takes you to the booking enquiry form at the bottom of the page, which again, I am happy with and will leave as it is.
 |
 |
There were no Errors, Contrast Errors or Alerts in the Success Page.
There were no Errors, Contrast Errors or Alerts in the 404 Page.
I changed the original dark brown colour I had chosen for my paragraph text colour after testing from #84644B to #674A18 due to the original colour not passing all of the contrast checker tests on the WebAIM Contrast Checker website, and I wanted my website to be as accessible as possible for all users.
Below is an image of the new, slightly darker brown colour passing all of the tests on this website:
WebAIM Contrast Checker link showing the 2 colours I compared
*click to original colour that didn't pass contrast tests*
| Original text colour which didn't pass the AAA test: | Original Colour Palette before testing: |
|---|---|
 |
 |
| Test Area | What I'm Testing | Did it Pass? |
|---|---|---|
| Navigation Links | Do all links navigate to the correct page/section? | Yes |
| Navigation Links | Do all buttons lead to the intended destination? | Yes |
| Forms | Does all the validation work, so the form can't be submitted without all required fields filled and with valid/the correct characters? | Yes |
| Forms | Once submitted does it navigate to the success.html page? |
Yes |
| External Links (Social Media Icons) | Do they all lead to the intended website? | Yes |
| External Links (Social Media Icons) | Do they open in a new tab? | Yes |
| Responsive Design | Does the website adapt as intended at all screen sizes? | Yes |
| Responsive Design | Does the burger menu work as it should, including closing when a link has been clicked? | Yes |
Issue & Solution:
Issue: As part of the course material, I installed a code refactoring extension called 'Prettier' in VS Code, but had issues with this adding unnecessary closing tags (/>) to all of the self-closing elements, such as meta and img.
These were added every time I formatted my pages, and resulted in errors in the W3C Testing stage, wasting time with having to remove each time I formatted.
Solution: I uninstalled this extension and opted to use the default formatter, which worked a lot better.
Issue & Solution:
Issue: When I had added the bamboo background image to the header section, I noticed the navbar from Bootstrap I had added within this had it's own white colour background, which stopped the image being shown as a background for the whole thing, even if I tried to change it to transparent using my CSS stylesheet.
Solution: I checked using Devtools and noticed that the background colour was being set my a bootstrap scss file, and that this was set as !important; so would override any background I added. Looking further I spotted it was being added because of the .bg-body-tertiary class, so once I removed this, the background image covered the whole title & nav section, including the navbar.
Issue & Solution:
Issue: I was unable to colour the burger icon of the icon that I got from Bootstrap's navbar code, or the dropdown split button arrow icons.
Solution: I inspected with Chrome DevTools and saw that the bootstrap burger icon was an image so I wouldn't be able to change the colour of that, so I decided to change the icon to a Font Awesome icon instead, which I know are customisable/colourable as text is. I also did the same with the small arrows in the split buttons that are used to open the button's dropdown menu, so that I could colour them all consistently.
Steps:
At first I made a class with the chosen colour called .text-sand which I added as a class to the span element which also had a .navbar-toggler-icon class.
I then got rid of the .navbar-toggler-icon class which was creating the image, and added my chosen Font Awesome icon code inside the span.
I checked this worked, and it did, then tried moving all the classes to the newly added i element from Font Awesome instead to see if I still needed the span, and after checking, this still worked, so I removed the redundant span element.
| This is now the output on the website: | After border has been added: |
|---|---|
 |
 |
Later Change:
Later on I decided to change the .text-sand class to instead target all i elements which are a child of the .navbar class, which reduced and tidied the code and would make it easier to keep the colouring consistent if adding any more icons to the navbar in future.
The CSS code used to style the navbar icons:
/* Navbar Arrows and Burger Icon */
.navbar i {
color: var(--primary-sand);
}
/* Navbar Burger Icon */
.burger-icon {
border: solid 4px var(--primary-sand);
margin-bottom: 0.5rem;
padding: 0.25rem 0.75rem;
}Issue & Solution:
Issue: When customising the navbar from bootstrap, I changed the font/button border/hover colours, which meant the active page colour wasn't visible anymore, but I still wanted users to be able to see clearly from a glance which page they were on just from looking at the navbar.
Solution: I decided to add in my own effect, by adding an underline to the button text of the current page button.
I experimented with adding an underline using border-bottom: 4px solid var(--primary-sand); and text-decoration: underline;, and although I liked the border-bottom effect, this didn't work with the buttons, as they already had a full border, so I decided to go for the underline option.
border-bottom: 4px solid var(--primary-sand);text-decoration: underline;
text-decoration-thickness: 3px;Before:
I found it didn't look quite right as the underline was a little too close to the text, but after some research online I discovered there was a way to lower the underline by adding text-underline-position: under; - which after checking - I felt this worked perfectly for what I was going for, so this is the code I decided to implement for the final project
.navbar .btn.active {
text-decoration: underline;
text-decoration-thickness: 3px;
text-underline-position: under;
}After:
Issue & Solution:
Issue: Because of the burger icon being to the right of the same navbar section that the page title appears in on smaller screens (mobile and tablet), the title wasn't appearing properly centralised as it was being pushed too far to the left.
Solution: I fixed this by adding padding to the left of the page title which matched the width of the burger icon, centralising it correctly to match the title above.
I added a class to the page title, and added padding-left of the same width of the burger icon.
| Page Title too far to the left: | Page title centralised with left-padding added: |
|---|---|
 |
 |
.page-title {
padding-left: 28.4px;
}This also had to be amended to match the burger icon's new width on a larger screen, as I added padding to the x-axis at the mobile to tablet breakpoint. I checked the width of the burger icon at each breakpoint using Chrome DevTools (shown below).
| Smaller burger icon without extra padding in the x-axis: | Smaller burger icon with extra padding in the x-axis: |
|---|---|
 |
 |
@media (max-width: 426px) {
.page-title {
padding-left: 36px;
}
/* Burger Icon (makes smaller) */
.burger-icon {
padding: 0 0.5rem 0.15rem 0.5rem;
}
}Issue & Solution:
Issue: When the right dropdown menu is opened, some of the menu text is cut off by the edge of the screen. This occurs because the dropdown button is positioned close to the screen edge, and the menu options are too long to fit within the visible area. By default, Bootstrap dropdown menus are left-aligned. If a dropdown is near the right edge and the menu options are lengthy, the menu will overflow and appear clipped, making some text not fully visible.
Solution: After consulting the Bootstrap documentation, I discovered that adding the .dropdown-menu-end class to the same element as dropdown-menu changes the alignment of the dropdown menu to the right, instead of the default left alignment. This prevents the menu from being cut off at the edge of the screen. I applied this fix only to the two rightmost navbar dropdown menus, while keeping the left-side dropdowns left-aligned. This approach maintains visual consistency across the navbar and avoids potential overflow issues on either side.
Later, I also updated the navbar alignment to better match the rest of the site's layout by changing the class .container-fluid to .container in the navbar, which added more space between the buttons and edges of the screen and helped the navbar appear more consistent with the more centralised page content.
Issue & Solution:
**Issue:** The background image was becoming overly stretched due to the tall page content - particularly on mobile devices where stacked boxes increased the overall height. As a result, the image appeared excessively zoomed in and pixelated, diminishing its visual quality. |
 |
Solution: I resolved this issue by splitting the content into separate sections, and adding the background image to each section, instead of having all of the content in one giant section with just one background image.
I found that having around two of the text boxes in each worked well on all screen sizes, so none were too tall for the image, eliminating the need to change the amount of sections depending on screen sizes, which I did consider, but would have added a lot more code and been more complex than necessary.
Issue & Solution:
Issue: After I decided to add universal gaps and spacing between all items in my text bubbles (I added gap: 20px; to the .row class), I noticed that some of the bootstrap flexbox items weren't appearing correctly, for example. the input boxes in my forms didn't appear side by side anymore, even though the column sizes didn't add up to more than 12.
Solution: To fix this issue I changed the column size numbers (eg. .col-6) to numbers that added up to 11 instead of 12 per row, to account for the added gap, so instead of 2 .col-6s in a row I changed it to .col-6 and .col-5 or 2 .col-5s. This fixed the issue, and after altering the other text boxes to match these new sizes, the forms looked great again.
Issue & Solution:
Issue: When the burger icon is open, the split buttons within this weren't reacting well, expanding the menu strangely when dropdown menu open. The dropdown menu that opens when clicking the arrow didn't open over the other menu options/buttons, it pushed them all down.
Solution: I decided to change these buttons to just normal navbar links when the screen is small enough to use the burger icon, as the border on the buttons didn't look as good to me when stacked vertically in an open burger menu, and the padding around made it taller than it needed to be too. I refined the options down to only the most important, instead of all buttons and dropdown menu options, so that the stacked list wasn't too long, and also ensured the were centralised.
| Before | Before (with open split button dropdown menu) | After |
|---|---|---|
 |
 |
 |
How I did this: To do this I added a new navbar unordered list with the links I wanted to show instead, and I changed the visibility to only appear when on the smaller screen sizes, and edited the split buttons to only show on larger screen sizes, when the burger icon isn't visible.
d-none d-lg-blockI added this to the left and right div elements containing my current split nav buttons in the navbar. This means display-none and display-large-block, which stops it being visible until it gets to a 'large' or larger screen, which is the breakpoint that the navbar menu switches from having links in a burger menu, to being buttons.
d-block d-lg-noneI added this to the ul container for new links that I wanted to show when clicking on the burger icon at smaller screens.
Issue & Solution:
Issue: I had an issue with items in the navbar not disappearing/appearing at the chosen breakpoints I had set.
I originally set some items in the navbar (such as the page title in the navbar and main section or buttons) to appear/disappear using a media query class which matched the specified breakpoint on Bootstrap for lg, as shown in the code below:
@media (max-width: 992px) {
.main-page-title {
display: none;
}
}
However, I couldn't get everything to work as I wanted - there was always one exact screen size where elements wouldn't behave properly. Even when adjusting the breakpoint by 1px up or down, something would fail to appear or disappear as expected.
The image below shows both page titles being visible - when 1 of them should be hidden if the other one visible.
Solution: The issue stemmed from the navbar switching to a burger icon at the lg breakpoint, while other elements controlled by CSS media queries didn't always sync perfectly, resulting in a mismatch at a specific screen width.
So I decided not to mix bootstrap breakpoints and media query breakpoints, changing the .disappear-tablet class to a pre-set class designed by Bootstrap to hide/reveal elements - .d-none .d-lg-block - which worked, and meant everything appeared/disappeared as it should.
Issue & Solution:
Issue: At certain screen sizes, the text box was either too long or too short compared to the adjacent images, causing unwanted gaps, either between images or within the text box.
Solution: I solved this problem by setting some of the images to appear/disappear depending on the size of the screen, using bootstrap classes added to the image element.
class="img-fluid floating-section d-none d-lg-block d-xl-none"I also added space between images with d-flex flex-column justify-content-evenly so that the gap was dispersed between each image vertically, making any gaps appear less, rather than showing up more obviously at the bottom.
I then did the same to the titles, paragraphs and buttons in the text bubbles by also adding d-flex flex-column justify-content-evenly to all article elements which contain the headers and paragraphs so that the content is aligned correctly vertically, with even gaps throughout, rather than another unsightly gap at the bottom if the box is too big.
 |
Text box gaps after |
I chose justify-content-evenly instead of center, as it worked better to spread the items better, leaving less gaps, and then by adding/removing images at certain screen sizes I made it so that there were never any noticeable gaps, no matter the screen size.
justify-content-start is the default, but as you can see from this Bootstrap image below, it means content is bunched together (at the top in this case as I has changed the flex direction to column)
Justify Content explanation on Bootstrap
The following steps outline how I created my project and cloned it locally from GitHub. You can use equivalent tools, apps, or platforms based on your own device or preferences.
GitHub
-
Firstly, I made a new repository in GitHub from the code institute template, with my chosen name for my project, which is
pokemon-island-resort- I ensured that this was in snake case.
-
I then copied the GitHub repository URL from the top of the page, as shown below.
File Explorer
- Once I had made a new repository, in 'File Explorer' on my local Windows device, I then navigated to the folder I wanted my project to be in, and right clicked to 'Open in Terminal'.
Terminal
- Then, after making sure I was still in the correct folder, I typed
git clone [link copied and pasted from GitHub address bar]into the Terminal.
- This is what it should look like if this has worked correctly.
- Now a new folder will have been added to your 'File Explorer' which is linked to the GitHub repository.
VS Code
- Next, I opened the new project folder in my chosen IDE (in my case this is VS Code) and pushed to GitHub to ensure the connection had been made.
Then I set up the initial project structure:
-
I created the main html page:
index.html, and created theassetsfolder which I added acssfolder and animagesfolder inside. -
I added a
style.cssstylesheet inside thecssfolder and linked it to myindex.htmlfile, testing that the link had worked. -
I integrated Bootstrap and Font Awesome by linking them into my
index.html, and also imported my chosen Google Fonts to thestyle.cssstylesheet by adding the import URL to the top. -
In my custom CSS file (
style.css), I defined the color palette and font styles as CSS variables to ensure consistent branding and design. -
After verifying that all dependencies and styles were correctly linked, I staged, committed, and pushed these initial changes to the GitHub repository.
- I used GitHub to store and manage the source code for this project and track changes.
- I used VS Code as my IDE to code and develop this website and to push to GitHub.
- I used this to find and create an import URL so that I could use by 2 chosen fonts - Skranji (Designed by Neapolitan) and Roboto (Designed by Christian Robertson, Paratype, & Font Bureau).
- I used Font Awesome to add icons to the website so that they could be coloured to match my design, specifically in the navbar (for the burger icon and dropdown menu arrows) and for the social media links in the footer.
- I used Bootstrap to design my navbar, add split buttons in navbar, and as a flexbox/grid in my navbar, main content and forms.
- I used Google to research features, troubleshoot issues, and find solutions for implementing various aspects of the website.
- I used Notion to write up ideas, to do lists/issues that needed fixing, and paste screenshots, images and their links, etc.
- I used ColorZilla to extract precise color codes from images and web pages, allowing me to accurately match and apply colors throughout the website for a consistent design.
- I used Color Blender to find a colour between my background and highlight colours using their hex codes.
- I used Balsamiq to make my wireframes.
- I used this website for page background image and Bamboo background used in Header and Footer.
*click to view image*
Freepik - Tropical Summer Design
*click to view image*
- I used this website to find my favicon.
*click to view image*
All Pokémon-related images used in this project, including screenshots from the games and anime, are the property of their respective copyright holders. These include:
- Game Freak and Nintendo for main series game screenshots.
- The Pokémon Company for overall franchise rights.
- OLM, Inc. (and other relevant animation studios) for anime screenshots and artwork.
- Toho for movie-related images.
These images are used here for educational and illustrative purposes only. Full credit and copyright remain with the original creators and rights holders.
I would like to thank the team at Code Institute, the members of the Slack community, my tutor Tom and my mentor Spencer for all of their help and support throughout this course and project.
- Implement interactive maps to help users navigate the resort.
- Include a gallery page to showcase more images of the resort and its amenities.
- Add user accounts for booking management and personalized experiences.
- Integrate a real-time booking calendar for suite and class availability.
- Add reviews and testimonials from guests and trainers.
- Implement multilingual support for international visitors.
- Integrate a newsletter signup for updates and promotions.
- Home Button - (Dropdown arrow only shows when on Home page, on Classes and Suites pages, the button changes to Back to Home)
- Dropdown Option 1 - Our Activities
- Dropdown Option 2 - Our Trainers
- Dropdown Option 3 - Message Us
- Trainers - (Entire button with dropdown arrow only shows when on Home page)
- Dropdown Option 1 - Trainer Kiawe
- Dropdown Option 2 - Trainer Mallow
- Dropdown Option 3 - Trainer Lana
- Contact - (Entire button with dropdown arrow only shows when on Home page)
- Dropdown Option 1 - Message Us
- Dropdown Option 2 - Book a Class
- Dropdown Option 3 - Book a Suite
- Dropdown Option 4 - Social Media
- Book a Suite - (Dropdown arrow only shows when on Suites page)
- Dropdown Option 1 - Sea View Penthouse
- Dropdown Option 2 - Mountain View Apartment
- Dropdown Option 3 - Garden View Chalet
- Dropdown Option 4 - Arena View Apartment
- Dropdown Option 5 - Book Now!
- Book a Class - (Dropdown arrow only shows when on Classes page)
- Dropdown Option 1 - Flying Skills
- Dropdown Option 2 - Surfing & Water Skills
- Dropdown Option 3 - Beach & Dune Riding
- Dropdown Option 4 - Fire Breathing & Fire Skills
- Dropdown Option 5 - Snorkeling & Deep Sea Diving
- Dropdown Option 6 - Book Now!