Giter VIP home page Giter VIP logo

welcome-to-cork-1's Introduction

Welcome To cork

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.

Features

The project has a number of different features, which are listed in more detail below:

Existing Features

  • Nav Bar

    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

    Nav Bar

    • 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.

Testing

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.

Validator Testing

  • 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)

Fixed Bugs:

  • 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.

Unfixed Bugs:

  • No unfixed bugs were found to remain in this project after testing.

Credits

Content

  • 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.

Media

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

welcome-to-cork-1's People

Contributors

aaronodonoghue96 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.