• Name
• Purpose
• UX
  • User stories
  • Structure
  • Design
• Limitations
• Features
  • Existing features
  • Features left to implement
• Technologies used
• Testing
• Deployment
  • Run project locally
• Credits
  • Code
  • Media
  • Acknowledgements

The project's name is Bianca Mihaela makeup artist Dublin and it was built using the knowledge gained within the course, for a family member living in Dublin that wants to increase their clients through an online presence.
The live website can be found here.

Bianca has been practicing makeup on various ocasions for different events, has a Facebook page for her business and the purpose of the website is to increase the number of clients that reach out to her. With this in mind, the website was created using the mobile first approach and is fully responsive.

1. As a potential client, I can easily and intuitively navigate across the website to find information;
2. As a potential client, I can easily find information about the artist's work;
3. As a potential client, I want to see video/photo about her work;
4. As a potential client/returning client, I can contact the owner to book an appointment;
5. As a potential client, I can sign up to a newsletter to get regular tips about makeup;
6. As a potential client, I can find and follow them on social media.

For easy navigation, each page will display the navigation menu (with navigation elements to the other pages) and footer (containing links helping to subscribe for a newsletter or giving the opportunity to follow on social media).

The Home Page will show a short video presenting the work of the artist, the purpose of the video being to catch user's attention and make them look further. It will also display information about the artist's work and material used as well as the important mention that she is also mobile.

The About Page will display the address, mobile number and email address toghether with a short presentation about the artist, what they do and why clients should chose them.

The Gallery Page will display a range of quality photos to highlight their work.

The Contact Page will offer the possibility of sending a message to the artist by filling in a form.

I wanted to represent as close as possible the colours of a makeup kit. Using Coolors colour scheme generator I have uploaded the logo image and chose Rose Dust as the main colour. This colour is also used for borders, buttons and highlighting links. Also, giving the nature of the project, I considered that introducing colours from the same palette on the nav menu will make a pleasant user experience. Header and Footer will have a Beige background. This colour will also be used for the modal background.

The Title and headers throughout the website will use the Raleway font family while the rest of the text will use Dosis font family.

Due to professional images and video not being available at this stage, I have used the free online resources available on Unsplash for photos and the video can be found on Coverr.

I have created wireframes for Desktop, tablet and mobile view for each Page.
Home Page

About Page

Gallery Page

Contact Page

Full-size wireframes can be accessed here:

• Home
• About
• Gallery
• Contact

Except the Modal imported from Bootstrap, the website has been built only with HTML and CSS, therefore it doesn't store data or send email requests.

• Call to action links on Home Page sending user to:
  • Modal for joining newsletter list.
  • Contact page to fill in and submit contact form.
• Call to action on About Page:
  • Clickable phone number for easier contact.
  • Clickable email address for faster email sending.
  • Link to Contact and Gallery Pages.
• Contact form on Contact Page with text area for event description.
• Call to action link in Footer sending to Modal for joining newsletter list.

The future release should focus on implementing a Booking button that will allow users to select a time slot and a date for their booking.

This project uses the following technologies:

• HTML5: for website's structure;
• Custom CSS: for styling the website;
• Bootstrap: for layout and styling;
• FontAwesome: for navigation and social-links icons;
• Google Fonts: to import the two font families used throughout the project;
• Git: used for version control;
• GitHub and GitPages: for hosting and deploying the website;
• Balsamiq: software used to create the wireframes;
• Coolors and Adobe Color: for colour picking and colour scheme;

While testing the following strategy should be approached:

• website is responsive on different screen sizes;
• navigation links takes user to the right page;
• clicking on logo picture takes user to the home page;
• links to external websites open in a new tab;
• internal links takes user to the right page;
• checking the required fields have been filled up before submitting the contact form;
• checking the email address has the right format both on the modal and contact form.

All HTML pages were checked using W3C HTML validator and no errors were found.
Also CSS was checked using W3C CSS validator and no errors were found while testing my stylesheet. Nevertheless, when testing by URL some errors appeared all Bootstrap related.
Website was also tested considering the user stories:

1. As a potential client, I can easily and intuitively navigate across the website to find information.

Website was tested and all navigation links work well.

2. As a potential client, I can easily find information about the artist's work.

Information about the artist's work can be found on Home Page and About Page.

3. As a potential client, I want to see video/photo about her work.

Gallery page loads the pictures and the video can be played/paused.

4. As a potential client/returning client, I can contact the owner to book an appointment.

Contact form has been tested and it requires all the fields to be filled before submitting.

5. As a potential client, I can sign up to a newsletter to get regular tips about makeup.

The links to the modal work and it requires an email address before submitting.

6. As a potential client, I can find and follow them on social media.

Links to social media open in a new tab.

When testing the following issues were found and fixed:

• Modal could be sent empty - fixed by adding the required attribute to email field;
• Contact form could be sent empty - fixed by adding the required attribute to all fields.

The project was started by creating a new repository on GitHub using the template provided by Code Institute. After this, the project was developed on GitPod, using git add, git commit and git push to commit changes to GitHub repository.
The project was deployed from GitHub using GitHub Pages following these steps:

• from Settings tab, scroll down to GitHub Pages;
• select master branch as the source and Save;
• follow the link generated to access the live website.

• Navigate to the GitHub Repository:
• Click the Code drop down menu.
• Either Download the ZIP file, unpackage locally and open with IDE (this route ends here) OR Copy Git URL from the HTTPS dialogue box.
• Open your IDE in a directory of your choice.
• Use the 'git clone' command in terminal followed by the copied git URL.
• A clone of the project will be created locally on your machine.

The solution for text breaking the email string on About Page was found on Css Tricks.

Media used in this project can be found at:

• Unsplash, for photos in Gallery section;
• Coverr, for video in Home section.

I have found inspiration for writing the README.md file in my peers' projects, Daisy-McG and Mr-Smyth.
Last but not least, special thanks to my mentor Spencer Barriball whose support was peerless!