Welcome,

This is my very first Milestone Project. I will be building a four-page Personal Profile Website aimed at diverse users, such as recruiters and potential clients; in order to showcase my newly acquired skill in the following:

• HTML5
• CSS3
• Bootstrap 4 framework

As we may already know, Bootstrap is one of the world’s most popular framework for building responsive, mobile-first sites.

I will be incorporating Bootstrap as the base structure in order to help me easily achieve one of the most important requirements of this project; responsive mobile-first design. I will then be tweaking the Bootstrap framework used in my HTML5 code, by styling them with CSS3 in order to achieve my desired outcome.

Thank you and enjoy the ride. 🚀

This project is created to meet the needs of prospective employers and clients. Below are a couple of User Stories.

• 'As a prospective employer, I want to be able to view your profile, any portfolio, download your CV and have some information about you and your personality so as to help accelerate our selection process and contact you.'

• 'As a potential client, on visiting your site, I want to be convinced that I can trust your work and judgement, so I would like to see at least a previous project and/or view your skills and experiences. Finally, it would be great to easily contact you via the site.'

• 'As a budding full stack developer, I wanted a personal profile website to showcase what I am able to do to potential clients and employers.'

In order to meet the requirements of the users, I decided to begin by brainstorming on what to do and how to go about it. I then started with a rough sketch of what I would like to create (picture evidence attached, please see <>Code section under 'Initialsketch'). After this, I created the wireframe design of the website on Balsamiq (pdf file attached, please see <>Code section) before starting on the actual website construction. I had an initial idea as seen in the sketches. However, after my first meeting with my Mentor, he helped me to have a real think about my idea and suggested I visit other sites for inspiration. I took his advice on board, of which I am very grateful for. Visiting other sites really helped me to have a better idea and largely influenced my final decision and I am pleased with the outcome so far.

1. Home Page: This page allows a user access to information about me. That is, my skills, competences and interests. Here, the user will read briefly about who I am and have a glimpse of my personality.

They are also able to navigate easily to other pages on the site, including external links to my social media pages; Facebook, Linkedin and Instagram should they wish to know more. These are located in the footer of all pages.

2. CV Page: Here, the user will have access to information about relevant trainings I had undergone, including my work experiences. These information are uniquely presented and displayed on a timeline for a user-friendly experience.

Also included is a download link where a user can easily download a full version of my CV for easier access. Just as on the Home page, they can easily navigate to other pages on the site without having to click on the back or forward browser arrows but through the navbar. They also have access to my social media pages from here.

3. Portfolio Page: The portfolio page is aimed at showcasing projects I had worked or will be working on, so as to prove my competences. Users will be able to click on two different images that are linked to external sites. They can also navigate to other pages on the site including to my social media pages.

Please Note: The websites presently showcased on my portfolio age are not my actual work, they are random sites from the internet as examples of my future aspirations as I progress on the course.

4. Contact Page: On here, the user have access to a form which can be filled and submitted to contact me should they have a question or wish to work with me. The form had been set such that the information entered must be accurate before it can be submitted. If not filled, they will get a pop up message. Also, upon sending their message, a message will show up confirming that their message had been received and that they will be contacted.

Just as other pages, they can easily navigate to other pages and to my social media sites.

i. For my Home and CV pages, I look forward to adding more skills, competences and experiences on my timeline as I progress on the course. For Home page, I hope to add a few recent pictures to help represent my personality.

ii. For my portfolio page, I hope to upload in the nearest future, my own personal projects in place of the ones presently there as examples. My aim for the page is to have a gallery of projects I have worked on.

iii. For my contact page, I plan to link the form to an actual email address so I can receive messages from users.

iv. On all pages, I would like to include more information in the footer of my site such as additional navigation to other pages on the site, a copyrighted signature, and more social links.

I would also like to add some animations and effects so as to bring the site more alive and make it more interesting for a better and more robust user experience. As I progress, I would like to have a blog page and a gallery.

The following technologies were used to achieve the requirements of this project:

• Bootstrap
  • This was used as the base structure to achieve a responsive site.
• CSS3
  • CSS3 was used to tweak the bootstrap framework to my desired outcome.
• HTML5
  • HTML5 was used as the markup language to structure and present my website on the Web.
• Javascript
  • I used this just to achieve the modal which helps give feedback to the user after form submission.

For my testings, I carried out the following:

• Responsiveness Testing

1. During construction, I regularly test the site against its Responsiveness by clicking on Inspect to view the developer tool.
2. I then check the layout by clicking on the Ipad, the Iphone and select other devices to view.
3. I also adjusted the pane to view the point at which the design changes to a mobile, tablet, laptop or desktop view.
4. This process helped me to adjust my media queries easily, in order to achieve my desired outcome.
5. In the mobile view, the Navigation burger bar was tested for all pages and they all work as expected.

• To view Navbar menu in mobile view, I clicked on the burger bar and the Navbar appears after the Name and Title (Dorcas Olomofe - Fullstack Developer).

• Pages Testing

1. For the Home Page, I carried out the following tests on all devices (Mobile, tablet, laptop, desktop):

• I clicked on the Avatar logo to ensure it links to the Home Page.
• I then tested the Nav Bar links; "Home", "C.V", "Portfolio" and "Contact". They all work with no broken links.
• I also tested them by using the browser back and forward arrows and they all work perfectly.
• To test the Social Links, I clicked on each of them and they took me to the expected sites and opened these in a new window as expected so my site remained opened in the main window.

2. For the C.V Page, I carried out the following tests on all devices (Mobile, tablet, laptop, desktop):

• I clicked on the Avatar logo to ensure it links to the Home Page.
• I then tested the Nav Bar links; "Home", "C.V", "Portfolio" and "Contact". They all work with no broken links.
• I also tested them by using the browser back and forward arrows and they all work perfectly.
• I tested the download link button and it works as expected. It opened a new browser displaying my CV
• To test the Social Links, I clicked on each of them and they took me to the expected sites and opened these in a new window as expected so my site remained opened in the main window.

3. For the Portfolio Page, I carried out the following tests on all devices (Mobile, tablet, laptop, desktop):

• I clicked on the Avatar logo to ensure it links to the Home Page.
• I then tested the Nav Bar link; "Home", "C.V", "Portfolio" and "Contact". They all work with no broken links.
• I also tested them by using the browser back and forward arrows and they all work perfectly.
• I tested the project images' thumbnails and the sites were opened in a new window as expected. I initially had a challenge with this page as the images were not displaying, it was only displaying the alt attribute. However, I was able to fix the issue after asking questions on how to fix it from a friend who is a developer.
• To test the Social Links, I clicked on each of them and they took me to the expected sites and opened these in a new window as expected and my site remained opened in the main window.

4. For the Contact Page, I carried out the following tests on all devices (Mobile, tablet, laptop, desktop):

• I clicked on the Avatar logo to ensure it links to the Home Page.

• I then tested the Nav Bar links; "Home", "C.V", "Portfolio" and "Contact". They all work with no broken links.

• I also tested them by using the browser back and forward arrows and they all work perfectly.

• I tested the contact form and send button by doing the following:

  • I tried to submit the empty form and verify that an error message about the required fields appears, it did.
  • I tried to submit the form with an invalid email address and verify that a relevant error message appears, it did.
  • I tried to submit the form with all inputs valid and verify that a modal success message appears, it did. I initially had an issue with the success message appearing. It appears and disappears so quickly. I discussed this issue with my Mentor who guided me on how to resolve te issue by using Javascript.

• To test the Social Links, I clicked on each of them and they took me to the expected sites and opened these in a new window as expected so my site remained opened in the main window.

• UX Testing

  • To validate the user experience, I asked a friend and two family members to help. They were told the user stories and asked to act as a potential client or employer so as to help give an unbias and accurate feedback.
  1. They were to try using all the links, buttons and the contact form. For the contact form, they were to test its functionality with this process:
  • Go to the "Contact" page
  • Try to submit the empty form and verify that an error message about the required fields appears.
  • Try to submit the form with an invalid email address and verify that a relevant error message appears.
  • Try to submit the form with all inputs valid and verify that a success message appears.
  2. They all came back with different feedbacks as follows:
  • They collectively observed the disappearing success message prior to fixing it.
  • Two of then commented on the CV font, that it was not readable, so I decided to put a fullstop between the C and the V to make it C.V instead of the initial CV.
  • They commented on the download button that it would be good to have a label, so I decided to add "Download" on hover.
  • They pointed out some grammatical errors of which I did my best to correct.
  • They pointed out the broken image links, of which I was able to successfully fix.
  • Overall, they were happy with the layout, colour scheme, portfolio, responsiveness and easy access to the required information.
  • Viewing on different sizes and browsers were also positive as expected.They were able to navigate easily.
  • They commented that it was really easy to use.

• HTML5 Testing

1. For my HTML5 code testing, I visited The W3C Markup Validation Service
2. I chose Validate by Direct Input option, copied and pasted my HTML codes in the available pane and clicked *Check
3. I then got a message stating, "Document checking completed. No errors or warnings to show". (Please refer to <>Code section for sample evidence). This process was done for each of the pages.

• CSS3 and Browsers Testing

1. For my CSS3 code testing, I visited The W3C CSS Validation Service - Jigsaw
2. I chose Validate by Direct Input option, copied and pasted my CSS codes in the available pane and clicked *Check
3. I then got a message stating, "Sorry! We found the following errors (4)". There were also warnings which were browser compatibilty related (Please refer to <>Code section above for sample evidence).
4. To solve the errors, I went into my CSS code and changed the font-weight to 100 after a research on w3schools (Please see reference). However, I did nothing to the warnings as I did not have any issues opening or viewing the site on the different browsers that I used namely: Internet Explorer, Mozilla Firefox, Google Chrome, Safari and other different mobile browsers, namely, Android and iOS. On all of these platforms, I had a spick-and-span experience.
5. I then copied my code and pasted it in to be validated and got the message "Congratulations! No errors found" (Evidence attached in the <>Code section above).

• JavaScript Testing
  • To ensure the JavaScript codes are working, I carried out the test as done on the contact form and send button. (Please see testing under Contact Page above)

To deploy my site, I made use of the GitHub hosting platform; GitHub Pages following this process:

1. I logged into GitHub.
2. Under repositories, from the list of projects, I clicked on Dorcas-Amoo/ms1-project then Settings.
3. Under Settings, I scrolled down to GitHub Pages.
4. From GitHub Pages, under Source, I clicked on the dropdown arrow button and selected master branch from the list.
5. Then on top of the GitHub Pages section, it states the following:

• Your site is published at https://dorcas-amoo.github.io/ms1-project/

To run my code locally, I followed this process:

1. From [GitHub](https://github.com/, I clicked on the "Clone/Download" button.
2. Then I choose "Download Zip" (The download starts).
3. After the download is complete, I open the zip folder by double clicking to access my created pages.
4. The pages (index, cv, portfolio and contact) then launches on my chosen browser. Please note: To view all pages, you may have to double-click to open then from the explorer individually.

To run my code using Gitpod, I follow this process:

1. I ensure I am logged into my Gitpod Workspaces (Not click on the Gitpod button on GitHub as this opens a new workspace).
2. I start my Dorcas-Amoo/ms1-project - master workspace and wait for it to initialize.
3. Once opened, I click on the page file I want to access from my list of files from the left pane.
4. In the terminal pane, I then type in the following: python3 -m http.server and press enter on the keyboard.
5. A dialogue box pops up stating 'A service is available on port 8000' with three buttons option; 'Make Public', 'Open Preview' and 'Open Browser'. I always choose the 'Open Browser' option.
6. The browser should then be displayed. If not, there should be an option to click stating 'Try again'. Clicking it should open the browser.

Please Note: In the browser bar, it generates this example address: https://8000-dc577278-3d21-42a3-bc02-7aad56761c3f.ws-eu01.gitpod.io/

I carried out an extensive research as this project had been a challenging yet enjoyable one. It had been a productive learning curve too. Please see below, links to sites that contributed to the success of the entire project at every turn. Thank you.

• Bootstrap

  • BootstrapCDN: [https://getbootstrap.com/docs/4.3/getting-started/download/] [https://www.bootstrapcdn.com/]
  • Grid System: [https://getbootstrap.com/docs/4.0/layout/grid/]
  • Layout: [https://getbootstrap.com/docs/4.0/layout/overview/]
  • NavBar: [https://getbootstrap.com/docs/4.4/components/navbar/]
  • Modal: [https://getbootstrap.com/docs/4.4/components/modal/]
  • Images: [https://getbootstrap.com/docs/4.4/content/images/]

• Google Fonts

  • Cookie Font: [https://fonts.google.com/specimen/Cookie?query=cooki]

• Stackoverflow

  • Aria Attributes: [https://stackoverflow.com/questions/31107040/whats-the-difference-between-html-hidden-and-aria-hidden-attributes]
  • Bootstrap Grid: [https://stackoverflow.com/questions/24175998/meaning-of-numbers-in-col-md-4-col-xs-1-col-lg-2-in-bootstrap]
  • Footer: [https://stackoverflow.com/questions/19055796/bootstrap-3-floating-footer/19060972]
  • NavBar: [https://stackoverflow.com/questions/31152850/implementing-navigation-drawer-bootstrap]

• W3Schools

  • Word-Spacing: [https://www.w3schools.com/cssref/pr_text_word-spacing.asp]
  • Pixel vs Em: [https://www.w3schools.com/tags/ref_pxtoemconversion.asp]
  • Transition: [https://www.w3schools.com/cssref/css3_pr_transition-property.asp]
  • MediaQueries: [https://www.w3schools.com/css/css_rwd_mediaqueries.asp]
  • MediaQueries: [https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp]
  • Overflow: [https://www.w3schools.com/cssref/css3_pr_overflow-x.asp]
  • Font-Weight: [https://www.w3schools.com/cssref/pr_font_weight.asp]

• Tutorials

  • Code Institute for HTML, CSS, Bootstrap & UX: [https://courses.codeinstitute.net/program/FullstackWebDeveloper]
  • Kevin Powell for Responsive Navigation Bar: [https://www.youtube.com/watch?v=8QKOaTYvYUA]
  • Coding Passive Income for Modal: [https://www.youtube.com/watch?v=cCxcxRw9j_s]
  • Steve Griffith for GitHub README: [https://www.youtube.com/watch?v=eJojC3lSkwg&t=209s]

• Others

  • [https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#lines]
  • [https://fontawesome.com/]
  • [https://fontawesome.com/icons?d=gallery]

Images on the Portfolio page and for my Wireframes were from the following:

• Madies
• Rino & Pelle
• Balsamiq

I got inspiration for my project from the following:

• Code Instute's Project Rosie
• Devon Stank
• Jim

Many thanks to my Mentor Dick Vlaanderen for his guidance and support. Also to my friend and family who helped to test the usability and gave valuable feedbacks to assist in tackling some relevant issues.

Thank you to the Code Institute Team!

Finally, thank you for visiting! 😄