This is my First Milestone Project - User Centric Frontend Development - for the Code Institute.
I have created a portfolio website for a film composer / record producer under the alias 'F!tz'.
The idea is to create a one-page scrolling site which quickly and effectively showcases the Owner's work and skill set with a simple and easy to use navigation and interactive elements.
You can view the live site here
-
-
Music Artists
-
Music Producers
-
Film Directors
-
Film Producers
-
Media Companies
-
Content Creators
-
-
-
-
As a First Time User, I want to identify if the site's owner will be suitable for my project.
-
As a First Time User, I want to be able to quickly and easily navigate the site to find suitable content.
-
As a First User, I want to be able to quickly and easily contact the site's Owner for a project.
-
-
-
As a Returning User, I want to find more information about the different services offered.
-
As a Returning User, I want to find out about more information about the site Owner's skills and experience.
-
As a Returning User, I want to find out what previous clients and co-workers think of the site's Owner.
-
-
-
As a Frequent User, I want to be able to keep up to date with the Owner's news and find out if he offers any special deals.
-
As a Frequent User, I want to check to see up to date photos of the Owner working on projects.
-
As a Frequent User, I want to have a section where I can follow the Owner's social media and other relevant websites.
-
-
-
The owner of this website is a freelance music composer / record producer who wants to attract clients and work on interesting projects.
-
-
As the Owner, I want Users to contact me for a project using the contact form.
-
As the Owner, I want to present my services and skills in the best of light.
-
As the Owner, I want to work on a variety of interesting projects.
-
As the Owner, I want Users to connect with me on social media and subscribe to my mailing list.
-
-
-
-
Users can see a full screen image of a musician playing the guitar which is the Owner's instrument of choice. They can also view some favourite quotes from the Owner to get a better sense of his personality and ethos.
-
Users can use the navbar to easily and quickly scroll through the site.
-
-
-
Users can see a brief summary of Owner's biography, experience and skill set.
-
Users can see a photo of the Owner working in the studio.
-
-
-
Users can view a selection of the Owner's best work in both film composition and record production.
-
Users can see list of big companies that the Owner has worked with.
-
Users can see a selection of reviews from the Owner's clients and colleagues.
-
-
-
Users can view a list of services provided by the Owner.
-
Users can find a short description of what's included in each service as well as the Owner's experience and skill set.
-
-
- Users can view a selection of photos of the Owner in the studio working including some well-known clients.
-
-
Users can contact the Owner using the site's contact form.
-
Users can opt in to be added to a mailing list to receive offers and news about the Owner and his services.
-
-
- Users can access the Owner's social media pages as well as his direct email and phone number if they prefer to not use the contact form.
-
-
The main colours used are charcoal, yellow, off-white and gray.
-
Charcoal is used for the background as it was requested by the site Owner.
-
Gray is used on foreground elements as it creates a nice contrast with charcoal.
-
Yellow is used for all of the titles and headings as it adds emphasis in contrast witht the charcoal.
-
Off-white is used for main text and subtitles as it makes it easily readable.
-
-
-
I have used Google Fonts to import the fonts for the website.
-
The fonts that I imported are Raleway and Lato and the weight is 400 (Regular).
-
The Raleway font is used for the headings of each page/section.
-
The Lato font is used for paragraphs and descriptions.
-
Sans Serif is used as the fallback font in case Raleway or Lato aren't being imported into the site correctly.
-
I am using fluid font sizes that grow together with the viewport width. This is achieved by using the clamp attribute and setting a fixed min and max size and a fluid desired size with the help of the viewport width unit (vw).
-
I have created 5 font sizes from XL to XS that are being shared by all the text elements in the site depending on their importance.
-
-
-
Most of the images were provided by the site's Owner.
-
I have used Unsplash to source some additional images for the landing page and services section. You can find more information on the Credit section.
-
-
- I have used fontawesome to source all the icons used thoughout the website.
-
-
Due to the simplicity and nature of the project, I decided to create a single-page scrolling website as it created a smoother user-experience with an easier and more effective navigation.
-
CSS grid was used to structure the website as it allowed me to easily place all the elements in the page and make them fully responsive without the use of bootstrap.
-
I originally created a 16-column grid, which works similar to Bootstrap but since the project is simple without too many elements, I decided to use the grid-template-areas attribute which is based on my wireframes' layout.
-
The Work and Services pages fully take advantage of the grid's autofit functionality as the containers are being added into the same row depending on the available size of the viewport width.
-
-
Responsive on all device sizes using media queries
-
Interactive and clickable elements on all pages
-
Alt Attributes and Aria-labels in order to improve accessibility
-
HTML Metadata in order to improve SEO
-
Brand Logo and Navigation Bar
-
Embedded audio and video for quick access to portfolio
-
Testimonials section
-
Animated Image Slider
-
Direct emails from contact form using EmailJS
-
Footer with useful links
-
Animated notification popup on form submission
-
Improved animations and effects on interactive elements
-
Improved accessibility controls
-
- VS Code was my IDE of choice for writing the HTML, CSS and JavaScript code.
-
- Google Fonts was used to import my fonts of choice into CSS for use throughout the website.
-
- Font Awesome was used to add icons to the website for aesthetic and UX purposes.
-
- Image Kit was used to store, optimize and serve all the site's images using CDN.
-
- Git was used to help me manage and keep track of my source code history.
-
- Sourcetree simplified and visualized my interaction with the Git repository.
-
- GitHub was used to store and manage the Git repository.
-
- Adobe XD was used to create the wireframes during the design and prototyping process.
-
- CDNJS was used to quickly import library files in my HTML document.
-
- Squoosh was used to convert, compress and resize my images.
-
- Chrome DevTools helped me debug issues that I've had during development. In addition, by using the inspection mode I could see how responsive my site was.
-
- W3C Validation Services were used to help me check if my HTML and CSS adheres to the standards. More details in the Testing section.
-
- Am I Responsive was used during my testing phase to check the responsiveness of my site.
-
Techsini Multi Device Mockup Generator
- Techsini Multi Device Mockup Generator was used during my testing phase to check the responsiveness of my site.
-
- CSS Minifier was used to minify my CSS file in order to improve loading speed and performance.
-
WAVE Web Accessibility Evaluation Tool
- WAVE Accessibility Evaluation Tool was used to help me make my content more accessible to Users with disabilities.
-
-
As a First Time User, I want to identify if the site's Owner will be suitable for my project.
- This has been achieved by showing a selection of the owners best work in a variety of projects as well as a list of companies the owner has worked with.
-
As a First Time User, I want to be able to quickly and easily navigate the site to find suitable content.
- This has been achieved by creating a navigation menu to quickly take you to all the sections of the site as well as a 'hot' button in the landing page to immediately take to both the portfolio of the owner.
-
As a First User, I want to be able to quickly and easily contact the site's Owner for a project.
- This has been achieved by adding a contact me page and a section in the navigation menu as well as a 'hot' button in the landing page to quickly take you there.
-
-
-
As a Returning User, I want to find more information about the different services offered.
- This has been achieved by adding a services page with detailed descriptions and images of each service provided by the owner.
-
As a Returning User, I want to find out about more information about the site Owner's skills and experience.
- This has been achieved by adding a bio page with a lot of information on the owner's skills and experience. Users can also visit the work section to hear a selection of his best work.
-
As a Returning User, I want to find out what previous clients and co-workers think of the site's Owner.
- This has been achieved by adding a reviews section with testimonials from happy clients and colleagues.
-
-
-
As a Frequent User, I want to be able to keep up to date with the Owner's news and find out if he offers any special deals.
- This has been achieved by adding a subscribe to mailing list checkbox when contacting the owner.
-
As a Frequent User, I want to check to see up to date photos of the Owner working on projects.
- This has been achieved by adding a gallery page with a carouself showing up to date photos of the owner working in the studio.
-
As a Frequent User, I want to have a section where I can follow the Owner's social media and other relevant websites.
- This has been achieved by adding a useful links section with the owner's social media and soundbetter profile in the footer of the page.
-
-
The website is compatible with most modern web browsers. For the best viewing experience, I recommend using Chrome, Firefox, Edge or Safari.
-
The worst viewing experience is on Internet Explorer. I decided to not include any vendor prefixes for IE because as I am using grid on all the sections, it made a significant increase to my CSS size and I did not want to compromise on the loading speed and performance. I also researched online and found out that most people, especially the target audience of this site do not use IE.
Since I haven't used Bootstrap, I have been constantly testing how responsive my website is by using Google Development Tools, Am I Responsive and Techsini Multi Device Mockup Generator
-
Throughout the development process, I have been consistently testing that all my pages work well on different screen sizes and devices.
-
This has helped me adjust the values on my font size variables so that my fonts are responsive and work well with all screen sizes.
-
This has helped me adjust the grid column parameters in my work, reviews and services sections so that all the nested elements respond and adapt to the screen size of the viewport.
-
This has helped me adjust the width and height of all my images.
-
This has helped me adjust the width and height of my buttons as their size is responsive depending on the screen width.
-
Overall, most of the elements on the website are responsive based on the screen size so being able to view how the site adapts depending on the screen has helped me make suitable decisions, which have improved the UX of the site.
-
During the testing phase, I have used Lighthouse to generate reports for both Desktop and Mobile. The reports showed better practices and syntantical fixes on my HTML and CSS, which in turn helped boost the performance, accessibility and UX of the site. You can view the final results below.
-
-
- During the testing phase, I ran further tests on my site's responsiveness using the Am I Responsive website. This has helped me identify some size-related inconsistencies that were not so visible with the Google Development Tools.
-
-
During my testing phase, I also ran further tests on my site's responsiveness using the Multi Device Website Mockup Generator on Techsini. I then compared my findings with the mockups from Am I Responsive.
-
I have also used their screenshot functionality to import a mockup of my site onto this README.
-
-
I made sure to validate my forms and ran suitable tests using different input scenarios. I can confirm that all of them behaved as expected.
-
I have tested that my required input attributes behaved as expected and warned users to fill the required fields.
-
I have tested that the submitted form is being sent to my email address containing all the information added by the user.
The W3C Markup Validator was used to validate every page of the website to ensure there were no syntax errors in my HTML. Although it returned no errors, it displayed a few warnings - 'Section lacks heading', however, the mentioned sections had suitable headings within child divs so I decided to filter them.
The W3C CSS Validator was used to validate every page of the website to ensure there were no syntax errors in my CSS. It displayed a few warnings in regards to my root variables being an unknown vendor extension as well as some of the vendor prefixes, however this was not a cause for concern.
The WAVE Web Accessibility Evaluation Tool was used to test the accessibility of my website. It identified missing ARIA-related attributes (especially in my navigation menu icon) that helped me improve the accessibility of the site for Users with disabilities. The final results, which you can view below indicate 1 error with my navigation manu label, which I couldn't fix.
-
The website was viewed and tested on a variety of devices such as Desktop, Laptop, iPad, and a variety of Android and iOs mobile phones.
-
A large amount of testing was done to ensure that all pages were linking correctly including the site's navigation menu.
-
Friends, family members and other Code Institute students were asked to review the site and documentation to point out any bugs, typos and/or user experience issues.
The project was stored on Github using the following steps.
-
I created an account on GitHub - My account
-
I used the suggested Code Institute Template - Code Institute Template
-
I created a public repository for my 1st Milestone project - Fitz Composer
The project was deployed to GitHub Pages using the following steps.
-
I logged in to Github and located the Github Repository
-
At the top of the Repository (not top of page), I clicked the "Settings" Button on the menu.
-
I Scrolled down the Settings page until you locate the "GitHub Pages" Section.
-
Under "Source", I clicked the dropdown called "None" and select "Master Branch".
-
I scrolled back down through the page to locate the now published site link in the "GitHub Pages" section.
The Github repository was cloned and stored locally on my machine using the following steps.
-
I cloned my Github Repository using HTTPS, under "Clone with HTTPS", and copied the link.
-
I opened SourceTree, opened a new tab and clicked on the Clone icon. I pasted the HTTPS link and added a local directory in my machine.
-
I opened VS Code, clicked on File/Open File and navigated to the local directory I had cloned my Github repository.
I have used the following images from Unsplash
-
-
I borrowed some code for my Hamburger Menu after watching this YouTube video by FollowAndrew
-
I then customized the code and adapted it to my needs.
-
-
-
I borrowed some code for making an overlay over my hero banner after watching this YouTube video by Traversy Media
-
I then customized the code and adapted it to my needs.
-
-
-
I borrowed some code for the image slider on my Gallery and Company Credits sections after watching this YouTube video by w3newbie
-
I then customized the code and adapted it to my needs.
-
-
I would like to thank Stuart Crang for helping me enrol on this course and guiding me on my first couple of weeks.
-
I would like to thank my mentor, Narender Singh for his support, guidance and design ideas.
-
I would like to thank the Code Institute for the well-thought-out curriculum and their amazing and super informative and helpful Slack community!
-
I would like to thank everyone at the Full Stack Developers WhatsApp group for their helpful input during my testing phase.