Welcome To Cork is a website about the city of Cork, which tells users a bit about the city, some things to do in Cork, and shows pictures of places to visit in Cork. It is targeted at tourists who are looking for an idea of where to go on their next holiday, and those who want to see what Cork has to offer.
Welcome To Cork will be useful to tourists to inform them about Cork, giving them a brief overview of different types of places to visit, such as historical sites, places of entertainment and culture, and restaurants. It may also be useful for people living in Cork to discover hidden gems within their own city, and gain a new appreciation for Cork.
The project has a number of different features, which are listed in more detail below:
-
Nav Bar
- The nav bar is located in the header at the top of all three pages, the Home page (index.html), the Pictures page (pictures.html) and the Things To Do page (thingstodo.html). It includes links to all three pages, and indicates the page you are currently on by underlining the link to it. On smaller screens, the links are hidden but will be displayed by clicking on the hamburger icon that appears in the upper right corner.
- This sections allows users to easily navigate the site without needing to use the browser's forward and back buttons.
-
Landing Image
- The landing image is displayed on the Home page (index.html), and depicts a view of Cork, looking onto Patrick Street. It shows the user what Cork looks like, giving them a good idea of what the site is about.
- This section introduces the user to Welcome To Cork with a photo of the city's main street, and gives the user a good impression of what to expect.
This project has been tested on the Chrome and Microsoft Edge browsers, and in both cases, no problems with display or rendering were found.
The Home page (index.html) has been tested on all screen resolutions available on Dev Tools, and in all cases, the main image displays correctly and is visible, the sections below in the info section display in the correct layout based on the screen size, and the red links at the bottom of the page display in line with the surrounding text in the sentence they are part of.
The Pictures page (pictures.html) has been tested on all screen resolutions available on Dev Tools, and in all cases, the images display in the correct layout, are visible, and the captions below them are visible.
The Things To Do page (thingstodo.html) has been tested on all screen resolutions available on Dev Tools, and in all cases, the screen displays correctly, the content is readable, and the form displays in the correct layout.
The nav bar has been confirmed to display correctly on both small screens and large screens using Dev Tools, showing the links on the right with the large screens, and showing the hamburger icon instead on small screens, which when clicked, toggles the display of links.
All of the above were also tested by manually resizing the browser window, which also allowed me to test that the nav bar will revert to displaying on the right when the screen is maximized after being reduced, and the links will be in the same place they started in.
- HTML
- No errors were returned when passing through the official W3C validator (all 3 pages, index.html, pictures.html and thingstodo.html, had their HTML content copied and pasted into the text area and then validated)
- CSS
- No errors were found when passing through the official (Jigsaw) validator (style.css has its CSS content copied and pasted into the text area and then validated)
-
Links in nav bar were displaying in standard blue/purple with underline and bullet points because CSS link was not updated to account for the fact style.css was moved to the css folder. The path is now updated in all pages, and the links are displaying correctly.
-
Some captions in pictures.html page were displaying in a different column to their image if the image was at the end of the column because the media queries used column-count to divide the grid into columns, which did not treat each div containing an image and its caption as a unit. This has been fixed by using flexbox to display the images (together with their captions), in rows instead of columns.
- No unfixed bugs were found to remain in this project after testing.
- The hamburger icon for the nav bar was taken from Font Awesome
- The CSS rule for the asterisk selector and the HTML form action in thingstodo.html leading to Code institute's form dump were taken from the Love Running project, and have both been also credited in the files where they appear respectively.
-
The main image, depicting a view of Cork, looking onto Patrick Street, is from Flickr https://www.flickr.com/photos/infomatique/7586289188, was taken by William Murphy, and is distributed under the ShareAlike license https://creativecommons.org/licenses/by-sa/2.0/. No changes were made to the image during the creation of the Welcome To Cork project.
-
Most of the photos in the gallery are royalty-free images from Dreamstime. Links to the image sources are below:
-
Barryscourt Castle https://www.dreamstime.com/stock-photo-barryscourt-castle-county-cork-ireland-located-eastern-southern-close-to-town-carrigtwohill-image87289998
-
Blackrock Castle https://www.dreamstime.com/blackrock-castle-observarory-cork-sunset-ireland-image182726780
-
University College Cork (UCC) https://www.dreamstime.com/long-hall-clock-tower-university-college-cork-ireland-horizontal-image241746832
The image of Cork Opera House is from Wikimedia Commons https://commons.wikimedia.org/wiki/File:Cork_Opera_House_%281%29,_1_Emmet_Place,_Cork_-_geograph.org.uk_-_2640543.jpg The image of Crawford Art Gallery is also from Wikimedia Commons https://commons.wikimedia.org/wiki/File:Crawford_Art_Gallery,_Cork,_Ireland.jpg The image of Cork City Gaol is from geograph.ie, was taken by Richard Fensome https://www.geograph.ie/photo/1239790, and is distributed under the Creative Commons licence