code-institute-submissions / usercentricfrontendproject-1 Goto Github PK

As a First Time Visitor, I want to understand what the website can offer me.
As a First Time Visitor, I want to learn about the site admin, their relevant experience and be able to relate to them on a human level.
As a First Time Visitor, I want to easily navigate each section of the website without the need to use the browser forward/back buttons.
As a first time visitor, I want to know where to go if I choose to purchase any products/ services.

As a Returning Visitor, I want to avoid repeating the content I have already seen/ used and directly navigate to the relevant area.
As a Returning Visitor, I want to be able to communicate directly with the site admin to give feedback and enquire about the services offered.
As a Returning Visitor, I want to access relevant social media to stay involved.

Frequent User Goals
    As a Frequent User, I want to access additional learning content to increase my understanding of the topics covered.
    As a Frequent User, I want to access more creative content from the site admin to give myself newer creative ideas.
    As a Frequent User, I want to sign up to the newsletter to keep abreast of updates and further my relevant knowledge.

The main colours used blue for headings, and neutral colours such as black, white and grey for an understated visual effect

The Lobster (Google) font is the main font used throughout the whole website for h1, h2 and h3 elements, while Open Sans is used for any other text elements, and also as a back up if the primary font does not load on the site. Lobster is a handwritten-style font which gives the site a more relaxed and informal style, and is less sterile and corporate than many typical font types.

    Imagery
        Imagery is important. The images contained within the site are all relevant to the software and creative content that potential users could access and gives an immersive feel.

Wireframes

Responsive on all device sizes

Interactive elements - audio relevant to admin and user objectives 

HTML5
CSS3

Bootstrap 4.4.1:
    Bootstrap was used to assist with the responsiveness and styling of the website (namely use of the grid model).
Hover.css:
    Hover.css was used on the navigation bar to give the effect of piano keys being pressed.
Google Fonts:
    Google fonts were used to import the 'Lobster' and 'Open Sans' fonts into the style.css file which, between them, cover all text elements on all pages throughout the project.
Font Awesome:
    Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
jQuery:
    jQuery came with Bootstrap to make the navbar responsive but was also used for the smooth scroll function in JavaScript.
Git
    Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
GitHub:
    GitHub is used to store the projects code after being pushed from Git.

W3C Markup Validator - [Results 'about me'](documentation/about-me-validation.png)
W3C Markup Validator - [Results 'contact'](documentation/contact-validation.png)
W3C Markup Validator - [Results 'design'](documentation/design-validation.png)
W3C Markup Validator - [Results 'dj'](documentation/dj-validation.png)
W3C Markup Validator - [Results 'home'](documentation/home-validation.png)
W3C Markup Validator - [Results 'production'](documentation/production-validation.png)


    *note: errors in the markup validator on came from external code for the soundcloud and mixcloud players - these players were fully functional on the actual site

W3C CSS Validator -[Results](documentation/css-validation.png)

Log in to GitHub and locate the GitHub Repository
At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
Scroll down the Settings page until you locate the "GitHub Pages" Section.
Under "Source", click the dropdown called "None" and select "Master Branch".
The page will automatically refresh.
Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

All content was written by the developer except for the code to embed the Soundcloud and Mixcloud players, which link to original creative content by the developer.

All Images and Audio elements were created by the developer.

My Mentor for continuous helpful feedback.

Tutor support at Code Institute for their support.