FIFI is a site dedicated to French Bulldog related questions and a community in the dublin area for meetups.

The French Bulldog Dubin Club has been around for over 10 Years !!

However , only recently has the club gone to social media to grow its following and recruit some new memebers.

Users of this site who are interested in joining one of the meetups can do so by completing the sign-up form in the contact section.

You can view the Live Website Here.

1. Site Design
2. Wireframes
3. Features
4. Technologies Used
5. Testing
6. Deployment
7. Credits

• The approach I took designing this website was to display clear , concise text so the user could retain information.
• To do this I added 5 questions and answers on the homepage , some images , a video and a meetup location map.
• I chose 2 fonts when designing this site , Open+Sans and Monserrat , both taken from Google Fonts.
• The color scheme I went with during the design was rgb(66, 66, 66) for the Nav Bar and Footer with color: #fff (White) for the links. I also used a #00adb5 color for borders and active links.
• The Default font color was #000000 , However this was amended to rgb(66, 66, 66) to add more consistancy to the site.
• A Background Color of ##FAF9F6 was added.

• Please note.... Contact Page was changed after wireframes were created.
  
• The Cotact Page Layout and Items are not as per Original Wireframe.

• Main Logo

Located at the Top of the page, The French Bulldog Logo printed in black and white. The Logo also acts as a clickable link which will direct the user back to the homepage.

• Social Icons & Links

To the left of the Main Logo is 3 Social Links. Tik Tok , Instagram and Facebook. All 3 Links open in a new tab to the sites. The Instagram link , links directly to the Dublin French Bulldog Instagram Page.

• Main Navigation Menu

The Main Navigation consists of a navigation bar with 3 links. Home , Gallery and Contact. Each link will direct the user to a new page. The current active page link is highlighted in the navbar. When the user hovers of a different link , the link is highlighted also.

• Main Section

The Main Section answers one of the most commonly asked questions in relation to French Bulldogs.

*Why have French Bulldogs become so popular?

Alongside this questions is an image of a French Bulldog with a Big Smile on his face!

• Mid Section

The Mid Section aims to answer 4 French Bulldog Related Questions.

1. Why have French Bulldogs become so popular?
2. Should I buy a French Bulldog?
3. Are french bulldogs lazy?
4. Are french bulldogs easy to train?

There is also a center image of a French Bulldog.

• Footer

The Footer is located at the bottom of the page and displays the text ''Copyright 2021 Fifi the Frenchie''. This is not a legitimate copyright name , it is used for display purposes only.

There are 4 links in the footer , Contact, Donate, Help and FAQ , Privacy Policy. All 4 of these links take the user back to the homepage.

• Gallery

The Gallery page has a selection of 9 French Bulldog images. The purpose of this page is to show the user the many different colors and types of French Bulldogs , and to also give insight into the type of companion Frenchies are.

• Contact

The Contact link give the user the oppertunity to sign-up to become part of the French Bulldog meetup. The Contact for has 4 fields to be completed by the user.

1. First Name
2. Last Name
3. Email Address
4. Frenchies name

• Our Locations

This Section of the page provides the user with contact information for the Dublin and Galway Clubs.

It gives a contact number and an email contact.

The location of the meetup Maps are displayed on a google map location iframe.

• HTML5 was used for the HTML site markup
• CSS3 was used to style the HTML content
• Balsamiq was used to create the wireframes
• Am I Responsive was used to test the responsiveness of the site
• Pexels was used to download copyright free images
• Font Awesome was used for the site icons / social icons
• Google Fonts provided the fonts used on the site
• Google Chrome Developer tools was used to test site responsiveness and to test code
• Github was used as the repository hosting service
• Gitpod was used as the Code Editor for the site
• Animate was used for the animation
• W3C Markup and Jigsaw validation were used to validate the HTML and CSS used.

• Testing was completed on the following browsers.
  Google Chrome
  Microsoft Edge
  Firefox
  Safari

• When the webpage is opened on Mozilla Firefox, there is a layout issue with the HR (Horizontal Rule) It looks different than on Chrome and Edge.
• This Bug is still outstanding.

• HTML No Errors found when testing through the official W3C validator. 1 warning message (See below)

• CSS No Errors found when testing through the official Jigsaw validator.

• Accessibility

Webpage was run through Lighthouse in Chrome Devtools to test acessibility

The site was deployed to GitHub pages.

The steps to deploy are as follows:

• In the GitHub repository, navigate to the Settings tab
• Select the Pages sub-menu
• From the source section drop-down menu, select the Master Branch, and then hit save
• Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

The live link can be found here - (https://hluke93.github.io/ms1/)

• Content

The Code used in this website was written by the developer. The Code institute , Youtube and W3 Schools were used a guides.

• Media

The Images used on this webpage were taken from Pexels
The Animation for the Navbar and Social links was take from Animate
The Main Logo was created using Looka