A responsive website for a Late Night Venue based in Westport, Co. Mayo, Ireland. Please note that this venue doesn't exist, it was made up for project with Code Institute. Website features a home page with location, drinks menu, opening times and social links, contact page and a gallery. The primary goal of the website is to lead potential customers to making first contact with the venue by giving all necessary information, bring potential and existing costumers back to property by showing latest images from property and a contact page that will bring aditional sales.
For the buissness:
- To bring potential and existing costumers back to property.
- Provide high quality examples that costumers enjoy the venue.
- Drive sales in the form of first contact (via the contact page) that will then lead to reservations for celebrations and other occasions which will generate future sales.
- Excellent UX to keep potential clients on site long enough to fill out the contact form and make people advertise venue by "mouth to mouth" method.
For the customers:
- Find the location of the venue.
- Easily find a way to get in touch with the venue.
- Find out what are opening hours.
The ideal client for this business is:
- Minimum age of 18.
- Has disposable income.
- Speaks english (Native or as a second language).
Each page features a responsive navigation bar with conventional placing of logo and a navigation bar in the top right. Each page has a footer with copyright information and social media icons linking to respective social media pages.
The Home page features a hero image. On mobile and tablet devices a full screen static image is seen. After the special hero image there is a location, drinks menu and opening times.
The Gallery page is laid out in grid sistem. 3 to 4 images on desktop, 2 to 1 for tablets and 1 image per column for mobile devices' Each image is b
Note: The design choice for 2 columns wide gallery preview on mobile is to encourage users to click the thumbnail and view the image in full. Viewing the images in full is much preferred by the artist to looking at images restricted by margins and padding. The thumbnails are still large enough to be easily clickable on mobile.
Each can be clicked to open a fancybox window to view the artwork in detail, to move on to the next image, view the previous one, or return to the gallery page.
At the bottom of the gallery page the user is guided to choose from two call to action buttons: To view Pricing or learn How to Order. Again, the How to Order button is highlighted.
The Contact page features a contact form, which requests client name and email, and below that a box to leave a message.
The bottom of the form contains a Send Button
- Header Logo - Exists on every page and allows all users to easily recognise the business brand. Clicking the logo returns users to the home page as they would expect.
- Header Navigation Bar - Exists on every page and allows all users to easily navigate all the website's pages and find what they are looking for quickly.
- Footer Copyright Info - Exists on every page and protects business copyright.
- Footer Social Icons - Exist on every page and allows all users to access the social platforms that the artist uses.
- Call to Action Buttons - Exist on every page and guide potential clients through the process of viewing artwork, learning about pricing and the order process, and finally making first contact for their order.
- Promotional Video - Allows potential clients to connect with the artist, see her working in the studio and view some of her work. Creates connection and emotional response.
- About Page - Allows potential clients to connect with the artist without overloading them with information.
- Gallery Page - Allows all visitors to the website to view thumbnail images of the artist's work. Each thumbnail can be clicked to open an individual fancybox viewer.
- Fancybox Viewer - Allows potential clients on the Gallery page to view the artist's work in more detail, to move to the next image, previous image or return to the gallery.
- Pricing Tables - Allow potential clients to understand the pricing of custom artwork by structuring it in an logical way.
- How to Order Steps Guide - Allows potential clients to understand the steps involved in ordering their artwork.
- Contact Form - Allows potential clients to ask questions, and/or make the first step in their ordering process.
- Upload option on Contact form - Allows clients to upload a photograph they would like the artist to use for their custom portrait.
- GDPR compliant pop-up screen - Allows all new visitors to the website to approve or deny the processing of their personal data. Ensures the business complies with the EU data protection law. - Javascript Needed
- Add CAPTCHA to contact form - Allows business to protect the contact form from spam. - Javascript Needed
- contact form Send button change from Send to Processing and then when complete changes to Sent. - Javascript Needed
- FAQ page, table with FAQs and dropdown buttons to view answers - Gives potential clients easy to find answers to their common questions. - Javascript Needed for dropdown functionality. Simple FAQ page could be implemented now.
- Artists' blog - Allows new potential clients to discover the website through articles written by the artist establishing her as a thought leader. - Artist currently doesn't have time to write a blog.
- Option to choose the language of the website - As the artist's second language is Dutch, this would allow Dutch speaking visitors to the website to view it in their native language. - Budget not available for professional translation at the time.
- This project uses HTML and CSS programming languages.
- Cloud9 - This developer used Cloud9 for their IDE while building the website.
- BootstrapCDN
- The project uses Bootstrap4 to simplify the structure of the website and make the website responsive easily.
- The project also uses BootstrapCDN to provide icons from FontAwesome
- fancybox
- The project uses Fancybox for a gallery modal popup to view gallery images.
- Google Fonts
- The project uses Google fonts to style the website fonts.
- Vimeo
- The project used Vimeo to host the promotional video.
- jQuery
- The project uses jQuery to reference Javascript needed for the responsive navbar, Vimeo video and Fancybox gallery modal.
- Popper.js
- The project uses Popper,js reference Javascript needed for the responsive navbar.
- AutoPrefixer
- This project used AutoPrefixer to make sure the css code is valid for all browsers.
- All external images are stored and linked from a Wordpress Media library owned by the artist.
Testing information can be found in separate TESTING.md file
This project was developed using the Cloud9 IDE, committed to git and pushed to GitHub using the built in function within cloud9.
To deploy this page to GitHub Pages from its GitHub repository, the following steps were taken:
- Log into GitHub.
- From the list of repositories on the screen, select AJGreaves/portrait-artist.
- From the menu items near the top of the page, select Settings.
- Scroll down to the GitHub Pages section.
- Under Source click the drop-down menu labelled None and select Master Branch
- On selecting Master Branch the page is automatically refreshed, the website is now deployed.
- Scroll back down to the GitHub Pages section to retrieve the link to the deployed website.
At the moment of submitting this Milestone project the Development Branch and Master Branch are identical.
To clone this project into Gitpod you will need:
- A Github account. Create a Github account here
- Use the Chrome browser
Then follow these steps:
- Install the Gitpod Browser Extentions for Chrome
- After installation, restart the browser
- Log into Gitpod with your gitpod account.
- Navigate to the Project GitHub repository
- Click the green "Gitpod" button in the top right corner of the respository
- This will trigger a new gitpod workspace to be created from the code in github where you can work locally.
To work on the project code within a local IDE such as VSCode, Pycharm etc:
- Follow this link to the Project GitHub repository.
- Under the repository name, click "Clone or download".
- In the Clone with HTTPs section, copy the clone URL for the repository.
- In your local IDE open the terminal.
- Change the current working directory to the location where you want the cloned directory to be made.
- Type
git clone, and then paste the URL you copied in Step 3.
git clone https://github.com/USERNAME/REPOSITORY- Press Enter. Your local clone will be created.
Further reading and troubleshooting on cloning a repository from GitHub here.
- The text for the Home page and About page was created for Anna Gilhespy by Catriona Black.
- The text for the rest of the website was created by Anna Gilhespy and proof-read/edited by Catriona Black.
- All the photos used in this site were obtained from the artist - Anna Gilhespy.
- Professional photography on images about1.jpg and about3.jpg on the About page by Rudi Wells Photography and obtained from the artist - Anna Gilhespy.
- The video on this website was produced by Luke Davis and obtained from the artist - Anna Gilhespy.
- CSS code for shadows and hover responsiveness of gallery images was originally taken from Material Design Box Shadows| A Pen By Samuel Thornton and then edited.
- CSS code for overlays on index.html page originally taken from FullScreen YouTube Video Background In Pure CSS
- I received inspiration for this project from my own experience of building and maintaining a WordPress website for this business in the past years.
- My mentor Simen Daehlin guided me towards attempting the special responsive header on the Home page.
The content of this Website is for educational purposes only.
I am happy that you have come to look at my readme as an example of how to write a good one for your first Milestone project. You are welcome to learn how to structure and format your own readme from mine.
However, it is not ok to copy and paste large portions of it into your own project. Please remember to write your own readme yourself, rather than copying mine or someone elses.
Many thanks! Anna