code-institute-submissions / user-centric-frontend-dev-milestone-project Goto Github PK

Will Penrose Autobiography Website

In this project I have created a website in which someone can learn about me as a person and my life story.

The idea for this project came from people always asking about my disability and I was getting tired of explaining it all the time so by doing a project based around me I can point them to my website if they want to find out more about me.

UX

As I have stated before, this project is focused towards anyone that wishes to find out about me as a person and perhaps to find out more about Cerebral Palsy in general.

I feel as though I have made my project easy to understand and use so that anyone that comes to my website can easily find their way around and not get lost with too many menus and options, along with a consistent colour pallet so that everything flows and makes sense when you look at it and are navigating.

User Stories

• As a person that doesn’t really know that much about Will I am hoping to find out more about him on a personal level using the website that he has created and directed me to in order to find out more about him and his life. • I am someone that wishes to use this website to learn more about Will’s disability and how he copes with it in his day to day life and any challenges that he faces as a result of having CP.

(All wireframes and mock-ups are supplied in the project file called “Wireframes”)

Features

1. Having a Collapsible Navbar allows for a much-improved viewing experience when using a mobile device.
2. Linking to an external contact form on a separate page means that the user will not lose their place and be able to come back to the website should they wish to do so.
3. Using separate pages (rather than one long scrollable page) for each section of the website was a good choice because it allows for all users to skip to a particular page if they know where the information that they are looking for is located.
4. Not using sidebars allows for a more elegant flow to the website and allows for different sections such as: Navbar, Main Content for the page and Footer.

In the future I wish to add another page with an interactive dynamic timeline of my life rather than just a static page, this allows for greater user interaction and a more pleasant time for that user rather than just a static webpage with just text.

Technologies Used

• Bootstrap

In order to a create the desired look and feel for the website that I was going for, I decided to use the Bootstrap Framework in order to help me with getting a working prototype up and running quick but also to help with the Mobile First design that I was looking to achieve.

• Font Awesome

Font Awesome was used to supply any icons used throughout the project, (Including but not limited to the Social links can be found in the Footer at the bottom of the page.)

Testing

During the conception phase of my website, I spent sometime creating basic wireframes just with pen and paper in order to see how the ideas in my head would roughly look when brought into the real world, unfortunately those wireframes were not coming out as I had imagined them and so they were swiftly abandoned and then I moved on to the wireframes that you see inside the project repository.

I believe that I have been able to provide my users with a pleasant experience that is easy to understand and use.

Because I have tried to implement a Mobile First approach, I tried to make the project as mobile friendly as I could, hence why I have used a collapsible Navbar on mobile screen sizes, this is to free up some screen real estate and be able to fit more of the main content of the page on to the mobile screen to begin with, rather than having that space be taken up by a none collapsed Navbar.

With the Footer section I decided to stack the three sections on top of each other as it made more sense because they are at the bottom of the page and having them collapse may have been confusing for the users of my page.

With the Mobile First design, having the contact form open on a new page made a lot of sense also because it meant that users would be able to return to the main page when they wished and it would not create any strange posing of the message and reduce the likely hood of the website crashing due to the contact form trying to re-send.

During my testing, I came across a bug that I have been unable to resolve, this bug relates to the collapsible Navbar, I have been unable to get the navbar to re-open when clicking on it when in a mobile screen size, the only way I have been able to get the navbar to re-open is to enlarge the screen size, once that happens the navbar items re-appear.

Even after consulting a YouTube video on creating a collapsible navbar using Bootstrap 4 I was unable to resolve the issue, but I do intend to come back to this bug and fix it.

Another bug I found was to do with the Contact form, when it came to trying to style the Contact page, I was unable to get it to style how I wanted even my writing my own CSS and applying my own class names to it, so for the moment It is still just a bare bones contact page.

Deployment

I have used GitHub Pages in order to publish this project.

In order to run my code locally you must use a development workspace such as AWS Cloud9, download the repository from GitHub and then open up the project using your chosen development environment.

Credits

I used this YouTube video to try and help with my collapsible Navbar bug:

https://www.youtube.com/watch?v=L0uNai3XyKQ&t=186s Anything that I did not understand using the Bootstrap Framework, I used the Bootstrap 4 Documentation in order to try and explain it along with this YouTube video to help with understanding the Grid System a little better:

https://www.youtube.com/watch?v=qmPmwdshCMw&t=982s https://getbootstrap.com/docs/4.4/getting-started/introduction/

I also used W3Schools in order to explain the uses of some of the HTML tags such as amongst others.

https://www.w3schools.com/default.asp

ALL CONTENT AND MEDIA IS MY OWN