[2 Nights | 6 Sights Home Page] https://michele-c.github.io/2-NIGHTS-6-SIGHTS/

The business was founded in 2019 by a local entreprenur. There was a niche in the market for insider local knowledge about where to really visit when in County Clare. It takes the stress out of trying to decide what to see and do in such a limited time.

The real and "not well" known treasures of Co Clare are part of the iterery.

We have built an impressive website in order to create a strong online presence and promote this fabulous new business. The site is colourful and easy to use. There are plenty of appealing visuals which increases dwell time on the site. We have linked up the partners own website so that the client can find out even more about the six sights - we have nine suggestion. We provide three diverse suggestions for the following 3 categories: "Must See", "Must Try", "Must Stay". For example, stay in dromoland for a night and then enjoy the outdoors glamping in Doolin. Also we have provided a suitcase ( to do list). Just click on the button to add the item to your list for today. Once you have the sight visited you can click on the item on your list and it will disappear.

The website provides:

• An attractive visually appealing site that will catch the browsers attention when them come across it.

• The use of suitable colours, typograph, imagery across all sections to make browsing the various must do, must try etc. clear for the users.

• We get straight to it. The list is there. The information is there. Just sign up and your away.

• The suggestions go from high end to low, fish to chocolate. For the user it is clear that they will experience a varied and rounded experience in Co Clare.

• The site drives traffic to the websites of the suggested venues.

• The site allows you to create your own "TO DO" list with the suggested sights

• The site is not overly burdened with words. They appear if you want to READ ON.

• Ultimately – the site will promote this business and the other visitor attractions in Clare.

Who this website is for?

• As a new user I want to google mini breaks in Co Clare and find this website easily.

• As a new user I want the site to load fast and easily on all performs from desk top to mobile.

• As a new user I want visually appealing site with a clear structure, plenty of images and buttons to click to reveal more info.

• As a new user I want to be able to navigate easily through the site.

• As a new user I want to be able to visit the websites of the suggested places.

• As a new user I want a short synopsis of the attraction without actually having to visit their site.

• As a new user I want the fun of adding the sights to my imaginery suitcase

• As a new user I want to be able to see the locations on google map and were they are in the county.

• As a new user I need to be able to find the "Sign Up" form easily.

• As a new user I need to be able to check out their social media presence.

• As a new user I want to be able to find the phone number and email easily.

• As an existing user I would like to be able to find the phone number and email of the business easily.

• As an existing user I would like to go back in each day to a clear to do list. Not one that is cluttered with the previous list.

• As an existing user I need to be able to check out their social media presence.

• As an existing user I need to find the phone number simply.

• As a returning user I would like to be able to find the phone number and email of the business easily.

• As a returning user I would like to be able to access the websites of the featured suggestions.

• As a returning user I need to be able to check out their social media presence.

From the project goals the following features were included in the scope of the project.

1. Colours were carefully selected and a small pallet of colourful and fun colours were used.

They include:

   1. #7a8181
   2. #908fdf
   3. #dc3545
   4. #ffffff
   5. #f8ab06

Complementary images were sourced from Google Images.

2. The fonts used are Fairplay and fall back is san - serif.

3. The index.html is split up into sections - each section is unique from the other but still complements one another. The landing page has a full width background image with a modal and a call to action to sign up button. This section clearly explains what the site is about.

4. The Navigation bar and the footer bar is uniform in colour. They are both generous in height which gives a spacous feel. There are three drop down menus on the nav bar and an index.html linked image on teh very left. The suitcase is linked to the list section of the page.

5. The "Must See" Section suggests 3 must see sights in Co Clare. The images are linked to the offical website and the 3 buttons beside the image brings you "home" to the landing page, "Read on" - reveals a snippet of info and which label on the google maps it corresponds to. The suit case button allows you to add it to the suitcase list below.

6. The "Must Try" section suggests 3 must things (foodwise) to try. The images are linked to the offical website and the 3 buttons beside the image brings you "home" to the landing page, "Read on" - reveals a snippet of info and which label on the google maps it corresponds to. The suit case button allows you to add it to the suitcase list below.

7. The "Must Stay" section suggests 3 diverse place to stay from Dromoland to glamping in Doolin. The images are linked to the offical website and the 3 buttons beside the image brings you "home" to the landing page, "Read on" - reveals a snippet of info and which label on the google maps it corresponds to. The suit case button allows you to add it to the suitcase list below.

8. Googlemaps is set up with clusters and when you zoom in the 9 locations are labeled A to I. The READON info tells you which pointer corresponds to the attraction.

9. Your suitcase section lists the items that you selected. It also allows to to remove them by clicking on them.

10. Footer section has contact details and media links wired up.

The site is one document split into various sections which are clearly defined. There is navigation bar with dropdown list, telephone and linked up suitcase. The images are linked to the offical website and the 3 buttons beside the image brings you "home" to the landing page, "Read on" - reveals a snippet of info and which label on the google maps it corresponds to. The suit case button allows you to add it to the suitcase list below.

Thanks to Bootstrap this site is responsive to different sized device.

PDF of all wireframes for this project

The look and feel of the website should be one of fun, color, interest and upmost professionalism. The colour and themes are complementary and complementary throughout. Its clear and easy to find what information you need from the website.

The technologies used were

• HTML5
• CSS3
• Bootstrap
• Javascript
• jQuery
• GoogleMap API

• Google Fonts: to import the font-family : Playfair wght = 400;600
• Font Awesome (v5.6.3). Icons on website.
• Git for version control.
• GitHub is the repository for all projects.
• Microsoft picture manager to edit the images
• W3Cschools
• W3C Validators HTML5 CSS3 (Jigsaw) and Wave Web assessibility evaluation tool.

PDF of all wireframes for this project

• Throughout the writing and styling of the document I ran Devtools from google crome each and every time in an effort to make sure my website was responsive across all devices.

• The code was put through W3C Validators for HTML and CSS3 with no issues found.

• Every inch of the website was checked - all the links and interactive buttons and click were check numberous times.

Feed back from friends and family I asked to test the site was as follows:

• That the site was easy to use.

• Interesting and nicely interactive.

• It was easy to get back to the home page by clicking on the home buttons throughout the site.

• It was easy to find the social media links at the bottom of every page

• It was nice to read a snippet about the attractions.

• The signup here form was eye catching and simple to fill out.

• Different type of devices were used and the user found that the site was managable on mobiles & tables also.

• The phone number for the business was clear to see on each page and every device.

One example of testing went as follows:

Test: To make sure the "Suitcase button" is working correctly.

1. Log on to the website.
2. Click on the suitcase buttom beside any of the "must see", "must try" "must Stay" and when you check your suit case the attraction is listed. When you click on the item in the list it removes it.

3 The test that the form is behaving correctly is that we miss a field and the page says its require and won't move on until it is filled in correctly.

1. On extra Small devices I found the model went up under the nav bar so i had to use the class="d-none d-sm-block" to hide a particular paragraph. I use this tactic throughout where needed on the smalled devices.

2. I had a problem with the height of the section - it just was not rendering correctly and so by using VH instead of px or % it fixed this bug.

3. The google map would not appear - it just flashed! I gave a min-height to its div and this fixed the problem. I

GitHub Pages was used to deploy this website.

• From your broswer log into GitHub with you login account.
• Locate the specific project's GitHub Repository. It will be in a list on your left hand side.
• In the repository, click on the Settings tab at the top right hand corner of the middle panel. It has a cog wheel beside it.
• After clicking on settings scroll down about halfway where it says GitHub Pages.
• Select "master branch" from the drop-down under Source, then click save. It'll then give a URL, which is the live deployment page to use. (note it may take a couple minutes and a hard refresh Ctrl+F5 to fully load your project the first time)
• Then go back to the top, click Code tab to go back to the main repository, and at the very top to the very right there's a place to paste the live deployment link. You are live!
• Your readme file will be located under it.

To run the code locally do the following:

When you clone a repository, you copy the repository from GitHub to your local machine.

• Log onto github.
• Go to the main page of the repository.
• Over the list of files, click on the word Code.
• We want to clone the repository using HTTPS so click on HTTPS and copy the link provided.
• In your own IDE open GIT bash.
• Change to the directory where you want the clone directory and files to go into.
• In the terminal type in "git clone" and paste in the URL that you just copied form Github.
• Hit enter and you have your local clone.

• All photos came from google images.

1. I acknowledge Google! An absolute Life Saver.
2. Get Coding childrens book - explained a lot of things to me in a basic way. Fabulous!
3. Of course Matt Rudge - watch him like a hawk and implemented a lot of the WHISKEY DROP into my site. It just suited.
4. The https://visithumboldt.com/ was an inspiration to me.