R'Beauty is a make up artist based in Amsterdam, The Netherlands. She is a consumate professional, talented, reliable and enthusiastic about hairdressing and makeup. R'Beauty offers all of her services at her studio including hairstyles and makeup lessons, and also travels to clients through out The Netherlands as required.

R'Beauty works on beautiful weddings, commercial shoots, special occasions, corporate events and can always work with multiple clients as when needed.

Basically, the website is for my girlfriend. She's a student in The Netherlands and she does make up services as a part time job. Currently, her online presence is only on Instagram and on facebook. She feels that for her business to get proper exposure, she needs to have a website. So in essence, she needs a website in order to boost her online presence and also to have a web presence which hitherto, was missing. This project is going to provide the layout for her website when it gets hosted eventually. This project isn't just to be graded but the goal is fot it to be hosted and actually be the official website for my girlfriend.

I personally feel that by buildong a website for my girlfriend, it would boost her business image online and also attract more customers.

You can find the link to the wireframe here: Wireframe

• As a customer I want to be able to view a selection of various make up services.

• As as customer I would want to contact the makeup artist.

• As a potential customer and paying customer I want to see the address of the shop

• As a potential customer and paying customer I want to see the telephone contact of the shop

• As a potential customer and paying customer I want to contact the makeup artist

• As a potential customer, I would also want to know the price which can influence my decision.

• As a potential customer, I would want to see a portfolio/sample of previous make up services rendered.

• As a potential customer, I would love to read about the reviews of some customers who have used R'beauty services.

• As the make up artist, I want to know more about the makeup artist

• As the make up artist, I want to provide my social media links so that customers can follow my updates

• As the makeup artist, I want my logo on to be visible on my website

Here is basically the main page when a user clicks on R'beauty.com. This section should summarise either in words or details what the website is all about. The first intro to the website should tell what kind of website it is.

The services section shows the various kind of services offered by R'beauty. It will display using icons the services offered by R'beauty.

The portfolio section shows the previous works of the Makeup artist. Here you can see the different types of makeup styles that R'beauty has carried out.

In this section, the Makeup artist gives a brief overview of how the business started and it also gives an insight to the way the business is structured.

In this section, the various prices for the makeup services are listed.

In this section, feedback from customers are posted for potential customers to read. This section is meant to serve as a way of confirming how good the makeup artist is.

The contact section is meant for users who want to get in touch with the makeup artist.

In the future:

• The images in the portfolio section should be animated

• The icons in the services section should actually lead to another page

• There submit button should have a modal class so when clicked it brings out a pop-up

I used the following webistes to validate both my HTML and CSS files respectively.

• HTML-Validator

• CSS-validator

The HTML validation service helps check the validity of Web documents. When I used this service, it only brought out error messages for the form in the contact section. I have tried correcting the bugs but it doesn't seem to work. On the front end, the codes for the forms seems to be working very fine but on the other hand, the code seems to be working fine. Perhaps in future testing, I would find a way to solve it.

Also, the CSS validation service helps check Cascading Style Sheets (CSS). When I used this service, it reported no error. The testing went well and I am fully confident in the style sheet.

1. As a customer I want to be able to view a selection of various make up services. 1. When the customer arives on the webpage, he/she can see the navigation bar with several links. 2. Within the navigation link you can click on the services link and it will smoothly scrool to the services section on the page.

2. As as customer I would want to contact the makeup artist. 1. When the customer arives on the webpage, he/she can see the navigation bar with several links. 2. Within the navigation link you can click on the contact link and it will smoothly scrool to the contact section on the page. 3. The customer can fill the form and submit it.

3. As a potential customer and paying customer I want to see the address of the shop. 1. When the customer arives on the webpage, the customer can scroll down to the footer section. 2. In the footer section the customer can clearly see the address.

4. As a potential customer and paying customer I want to see the telephone contact of the shop. 1. When the customer arives on the webpage, the customer can scroll down to the footer section. 2. In the footer section the customer can clearly see the telephone number of the makeup artist.

5. As a potential customer, I want to know the price of the services rendered. 1. When the customer arives on the webpage, he/she can see the navigation bar with several links. 2. Within the navigation link you can click on the prices link and it will smoothly scrool to the price section on the page. 3. Here you see a table of prices for the different services rendered.

6. As a potential customer, I would want to see a portfolio of make up services . 1. When the customer arives on the webpage, he/she can see the navigation bar with several links. 2. Within the navigation link you can click on the portfolio link and it will smoothly scrool to the portfolio section on the page.

7. As a potential customer, I would love to read about the reviews of some customers who have used R'beauty services. 1. When the customer arives on the webpage, he/she can see the navigation bar with several links. 2. Within the navigation link you can click on the reviews link and it will smoothly scrool to the reviews section on the page. 3. Here you can see 3 specially picked out reviews from previous customers.

8. As a potential customer, I want to know more about the makeup artist 1. When the customer arives on the webpage, he/she can see the navigation bar with several links. 2. Within the navigation link you can click on the about link and it will smoothly scrool to the about section on the page. 3. Here the interested client can read more about the makeup artist.

9. As the make up artist, I want to provide my social media links so that customers can follow my updates 1. When the makeup artist arives on the webpage, the makeup artist can scroll down to the footer section. 2. In the footer section the makeup artist will see the social media links for the business.

10. As the makeup artist, I want my logo on to be visible on my website 1. When the makeup artist arives on the webpage, the makeup artist lookout for the navigation menu 2. In the navigation menu the makeup artist will see the logo for the business.

1. Navigation bar 1. Go to the Home Page from a desktop. 2. Inspect all links, icons, background and content in the navigation menu to ensure they are appearing correctly on the page. 3. Move the cusor to the top-right section of the navigation bar, hover over each link and verify that the hover affects are working (i.e. background color changes to brown, font color to #964433). 4. Change the screen size to mobile view to ensure that the navigation bar is responsive and all the in line links are packed into the toggler icon. 5. Check that the toggler icon is properly styled and at the right position. 6. To test the smooth scroll and also to verify that the links are working do the following: 1. Click on "Home" link and verify that it stays on the Home page 2. Click on "services" link and verify that it scrolls smoothly to the services section. 3. Click on "portfolio" link and verify that it scrolls smoothly to the portfolio section. 4. Click on "about" link and verify that it scrolls smoothly to the about section. 5. Click on "prices" link and verify that it scrolls smoothly to the prices section. 6. Click on "contact" link and verify that it scrolls smoothly to the contact section. 7. Repeat this same steps on a mobile view

2. Services section 1. Scroll down to the services section or click on the services link in the navigation bar on a desktop view. 2. check the services heading is bold and centrally alligned in the container 3. Inspect the icons are properly placed within their columns and they are centrally alligned. 4. Check that the text under the icon is properly placed. 5. Ensure that the icons section occupies the full width of the container and not the services container. 6. Check the padding of the Heading 7. Repeat this same steps on a mobile view

3. Portfolio section 1. Scroll down to the portfolio section or click on the services link in the navigation bar on a desktop view. 2. check the portfolio heading is bold and centrally alligned in the container 3. check the images are properly placed within their columns and they are properly alligned. 4. Check the padding of the images 5. Repeat this same steps on a mobile view

4. About section 1. Scroll down to the about section or click on the about link in the navigation bar on a desktop view. 2. check the about heading is bold and centrally alligned in the container 3. check that the content in the about section are alligned properly 4. Check the padding of the images 5. Repeat this same steps on a mobile view

5. Prices section 1. Scroll down to the prices section or click on the prices link in the navigation bar on a desktop view. 2. check the prices heading is bold and centrally alligned in the container 3. check that the table in the prices section is is in line with the theme of the website. 4. Repeat this same steps on a mobile view

6. Reviews section 1. Scroll down to the reviews section or click on the reviews link in the navigation bar on a desktop view. 2. check the reviews heading is bold and centrally alligned in the container 3. check that the content in the about section are alligned properly 4. Repeat this same steps on a mobile view

7. Contact section 1. Scroll down to the contact section or click on the contact link in the navigation bar on a desktop view. 2. check the contact heading is bold and centrally alligned in the container 3. Try to submit the empty form and verify that an error message about the required fields appears 4. Try to submit the form with an invalid email address and verify that a relevant error message appears 5. Repeat this same steps on a mobile view

8. Footer 1. Scroll down to the footer section. 2. check that the background color is in line with the theme of the website 3. check that the content in the about section are alligned properly 4. Check the padding of the of the contents 5. Repeat this same steps on a mobile view

The website worked perfectly on other screen sizes and there was no issue with responsiveness.

1. The background image in the mobile view is too big. I have tried changing it but there not enough time to find a solution
2. When reduced to mobile view the responsiveness a times doesn't work until when refreshed. I do not know what causes this to happen.

1. Log into GitHub.
2. Select the repository related to this project: ayotundeakinsola/first-milestone-project.
3. In the menu click on settings and scroll down to the GitHub Pages section.
4. From the "Source" dropdown menu, select "Master Branch" and click "Save"
5. A pop-up message "Your site is ready to be published at https://username.github.io/Bootstrap/" will appear under Github Pages
6. The page will automatically refresh and the website is now deployed.
7. Once your website launches you can retest it to ensure that all the sections on the pages are working as stated in the testing section

1. On GitHub, navigate to the main page of the repository.
2. Under the repository name, click Clone or download.
3. In the Clone with HTTPs section, click to copy the clone URL for the repository.
4. Open Git Bash.
5. Type git clone, and then paste the URL you copied in Step 2.
6. Press Enter. Your local clone will be created.

• The text in the About section was provided by the Makeup Arstist.

• The text in the price section was gotten from: judyartofmakeup

• The text in the reviews section was provided by 3 different customers.

• The form in the contact section was made using bootstrap forms.

• The image in the home section was provided by the make up artist.

• The makeup icon in the services section was made by Surang from: Flaticon

• The hairstyle icon in the services section was made by dinosoftlabs: Flaticon

• The diploma icon in the services section was made by Smashicons from: Flaticon

• The images in the Portfolio section was gotten from: Melaninwonder

I received inspiration for this project from this website: judyartofmakeup