Constructed as part of Code Institute's Milestone 1 Project: User-Centric Front-End Development module
Active link to the website portfolio
- Overview
- User Experience Design (UXD)
- Features
- Technologies Utilised
- Project bugs and solutions
- Testing
- Deployment
- Credits
As the first project into the Diploma, this represents the opportunity to demonstrate my technical knowledge and skills learnt within the Full Stack Website Development course, yet blending in some educational background in both aspects of project management and website development to construct a static front-end site with the use of HTML & CSS. Consideration is taken in encompassing all aspects of User Experience Design (UXD) that forms the core part of this development, incorporating the 5 planes methodology, ensuring the responsiveness of the website and utilising the languages, tools & technologies learnt within the module aforementioned.
The purpose into one of the four milestone projects is based on a firm decision, having considered some project ideas, to implement Code Institute's example of developing a professional website portfolio to initiate the transition into becoming a Full Stack Website Developer as I progress through the course. The focal motivation serves as a specific long yet well founded personal need and aligns towards my primary goal of accomplishing the desire into a career change through upskilling, to cater for the target audience in presenting information that is useful & relevant to the users which derives from the traditional form of a Curriculum Vitae, demonstrating functionality & accessibility to the users given that it is ingrained in law and in conclusion, reach out to potential prospective employers & recruiters to lead them in initiating contact.
As established above, the product is built consciously with the employers and recruiters in mind, specifically their business recruitment objectives to provide them the value in the ability to assess what I can offer overall as a candidate, professionally and personally through developing a website portfolio. The objective of this strategy is to market myself as a product and provide value through the lifecycle in the bulk construction of the project from conception to the development and testing stages prior to finally consider the deployment, whereby this operates as a responsive website using the approach of the mobile-first principle, that it's a fully functional source of information through the user's browser which conforms to conventions and elicits good user experience.
With this in mind, the primary focus is to project into the construction of a subtle and appealing design with an element of boldness into the professional portfolio that has potential to evolve. It would also encompass the learning principles and methodologies from the course, whilst utilising various resources to ensure it is user-friendly and well-structured, demonstrate the capabilities as a developer and provide context of their educational & employment background. The aim of this is to convey to prospective employers in assisting them to achieve their goal in the duration of their browsing experience to provide that value.
In the duration of the conception stage to plan out for this project, research was undertaken to establish ideas to consider from other portfolio websites to potentially include appropriate features, design and styling themes, especially making colours and images accessible on the basis of the current languages, tools and technologies yet within the level of capability. Through my volunteering knowledge and brief professional experience, I was able to factor in the user's viewpoint into some design and styling themes, structuring websites whilst placing an emphasis into accessibility so was aware of some conventions and principles yet further research was required to expand the knowledge into the advancement of website development a decade on. Through my professional experience, I identified that the target audience is going to be diverse, thus the requirement of the website portfolio is to cater for this wide net of opportunities.
- Employers and Recruiters
Both of these types of users operate as separate entities with their own processes relating to recruitment in that there are different approaches when it comes to browsing through the website portfolio, therefore the user experience needs to cater for this such as briefly assessing one's competency levels through the content and development of the coding into the website and also connecting via various professional relevant social media/collaborative means i.e. GitHub, LinkedIn, Facebook and Twitter etc. Therefore from their perspective whether they are a new or returning visitor to the website, these key points have been identified as follows:
a) Employer's Perspective
-
As a user of a prospective employer, it would be an incentive to experience the ability in browsing through a candidate's website portfolio to assimilate into the developer by grasping key relevant information in an engaging manner via the content as derived from a Curriculum Vitae, which can be obtainable in its traditional form through the website. The objective of it is to invite new and/or returning visitors to initiate their first contact with the developer which is dependent on the CV being easily shareable to potential employers and interview panel to assist them with the decision-making in recruiting that individual.
-
As an employer who is seeking for a candidate to connect with as a human being, within various roles of a Full Stack, Front-end or Back-end Website Developer, it would be of great value to have the ability to explore the website portfolio which is rendered correctly, especially with the mobile-first approach through the design methodology and principles. The outcome for the user would be to consciously comprehend and assess the developer's technical competencies/logical thinking in the development lifecycle or experiences through their own project works by way of GitHub or alternatively via a URL of their hosting ISP, which an active link is offered to demonstrate this.
-
As a user in wanting to employ a candidate, the value is greatly appreciated in identifying the confidence in the capability of skillfully coding the website, whilst expressing creativity that reflects the aesthetically appealing product that the individual has built and places an emphasis on accessibility.
b) Recruiter's Perspective
-
As a user of a recruiter, there is a continuous responsibility to efficiently identify from an accumulation of potential developers, to suggest to their portfolio of clients who will have various specific criteria that are determined from a range of companies/businesses whether small, medium or large. Therefore in effect, the responsive performance into the functionality of the website portfolio enables the great value in accessing useful information, is essential for a recommendation to a client to take effect.
-
As a recruiter, it is difficult to grasp the in-depth knowledge of the employer that determines whether the targeted candidates that is deemed suitable is a good match to the representative client's requirements therefore by obtaining a Curriculum Vitae which is widely recognised, it concisely outlines the skills of various candidates and assesses their employment & educational history.
-
As a user, we receive requests to fill positions on a temporary/contractual basis or identify talents from large firms therefore candidates will need to demonstrate with proof of their capability to ensure that the role is accomplished or sustained respectively.
c) Combined User's Perspectives
-
As a combination of users, there is the viewpoint that by browsing, the website portfolio provides the content which is expected to be rendered fluently, swiftly and responsively via accessing active navigational links and is achieved through means of a peripheral or alternatively through various assistive technologies.
-
As a user, a contributory factor in interviewing and recruiting the candidate is based upon assessing the background history into their education and employment, especially when the developer updates their website or GitHub with new examples of recent project work.
-
As a user, the ability to instantly establish the purpose of the website efficiently with ease through content which can determine effectively whether the candidate is worth pursuing.
-
As a user, there is a range of means in contacting the candidate through a form via the website, or alternative methods such as social media, email or telephone/mobile number provided via their Curriculum Vitae.
- Website Developer
As a trainee Full Stack Website Developer, I am solely aiming to fully contribute towards the project goals and strategy, endeavouring to secure the opportunity of employment within the industry of website development to increase my prospects of a fulfilling career, which I am passionate about. It is through my technical knowledge, skills and capability that I have an interest in comprehending the full aspects of how a website is developed through current languages, tools & technologies to make a difference in people's personal & professional lives through my coding ability.
The purpose of the Structure plane is to provide the aforementioned new or returning users within the Scope an enhanced view aesthetically of a Curriculum Vitae which can be sectioned out accordingly to various separate webpages in order to break up the content and utilise some of the website development experience as opposed to combining them all into one page. Also gut instinct tells me that with reference to the Structure illustration chart, I have identified that this website will be simple and linear with a view for it to be in the middle of the ball-park per se as I develop the website deeply in due course to create a great standard website portfolio.
In terms of the interaction design, I am conscious of the perspective in the importance of not overusing the behaviour of interactive elements, as this would overwhelm users when visiting the website portfolio, therefore the approach to this is that by implementing those that are of a subtle yet appropriate use of interaction, that would elicit a response that is positive and demonstrates good user experience. Also experience tells me that consistency in the design is crucial so this was at the forefront of the mind when approaching this project in that the layout elements e.g. header & footer, the theme colours and typography are exactly where they should be and styled respectively so that it is pleasing to the eye visually for every webpage a user visits. With these in mind, the following points defines what is to be included in the interaction design of the website portfolio:
-
When users hover over or focus on each of the navigational links, interactive elements such as the colour of both the text and underline will change and in addition, the underline will expand horizontally for a nice subtle touch recognising where the mouse cursor has been directed to.
-
In the Current Skills section when users first views this, as the webpage loads each of the three blocks will expand in size from half to full to grasp their attention of the capability into the languages, tools & technologies on offer.
-
Other interactive elements such as buttons and forms function as part of the user's expectations in that it visually indicates which input field they're typing into or that the buttons are active and will execute a state of change that would create a positive response as part of the user experience in the website portfolio.
-
Finally in the footer, interactive elements whereby once hovered over or focused on, the download icon will smoothly expand in size and Social icons such as GitHub & LinkedIn will expand in size and change in colour to encourage users to click on these links.
One advantage to this milestone project has enabled the benefit of having already established the site structure which is required as standard when undertaking the planning preparations to construct a website, and to this day as of September 2020, this is no different given that it relates to the organisational and navigational schemas within the course.
Originally, the site structure consisted of 7 webpages in total, however on reflection I soon realised that upon reviewing this that this needed to be amended for the purpose of the project and also from a content perspective that this should be reduced to 4 webpages thereby retaining the simplicity.
I had also identified as part of the information architecture that the website portfolio will be structured in the form of a simple yet basic hierarchy of webpages whereby 'Home' represents the top level and 'Projects', 'Profile' and 'Contact' will be of equal horizontal level at the bottom in a tree like structure and this is reflected in the site structure, therefore the below links in the next section represents the thought process into structuring the webpages through the software Balsamiq.
Below represents how a website will be structured as an information architecture in the form of a sitemap along with details for each of the webpages within the project and illustrates the logical movement into different sections:
- Home :- I plan to include a hero image with a brief introductory paragraph and a narrative perspective comprising of knowledge & experience in website development.
- Projects :- This will consist of mini-projects and examples that have been developed with active links to the live websites within the course to retain its simplicity.
- Profile :- Containing a hero image of my favourite hobby, a paragraph of professional background & experience and also current technological skills.
- Contact :- Quite simply this will have a hero image with a brief message and a contact form to initiate a call to action.
As part of the planning preparation into providing the skeleton of the project, which in layman terms is essentially a blueprint draft into the design, I had decided to utilise Code Institute's suggestion of the software Balsamiq to develop the wireframes into the website portfolio, which will include low & high fidelity mock-ups that will form the basis of how it will be constructed. The principle of mobile-first strategy is applied whereby the usage and traffic of smartphones exceeds the traditional laptop/desktop PC and each of these webpages will be scaled up considering various breakpoints apiece such as mobile, tablet, laptop and desktop PC to ensure that great user experience is in responsiveness of the website as well as the general design conventions within website development. With this in mind, the following developed wireframes at various breakpoints of xs, sm, md, lg & xl are:
Given that this plane is concerned with the navigational and interface design, consideration is taken to influence new/returning visitors by prolonging the experience as much as possible, through providing content that is specifically relevant and appropriate at various points throughout the experience. This results in giving users greater value into the website with the addition of conventions that focuses on the visual design of the navigation amongst others.
One of those conventions is that it will include a navigation bar to be positioned at the top in a fixed manner that is applicable at all breakpoints to accommodate for each device used which is then based on different screen resolutions in pixels. This would consist of a logo which is placed at the top left of the webpage in typical fashion and finally the styling of each navigational links that will be visible at most breakpoints with the exception of the smaller mobile view, whereby this will feature a hamburger menu to create the benefit of a responsive design as space is restricted due to screen resolutions.
Another convention is that the landing homepage is to lead new/returning visitors into the purpose of the website as they explore to other webpages with an explanation into the type of portfolio that is being conveyed and the differing expectations of both sides i.e. employers/recruiters vs the developer thus the outcome is to encourage these users in the direction of a call to action whereby it initiates that contact.
An aspect of website development which is one that I would consider as an essential convention is the visual hierarchy whereby the structure of the content is considered i.e. the most or least important, that is to be read and this is reflected in the navigation leading the users to various specific webpages.
Finally I have made use of both buttons and icons in sparse measures as I have identified that the usage of these are going to be low at a minimal as I felt it wouldn't appropriately relate to this specific project.
It is with acknowledgement that a balance has to be struck between the features and usefulness which also relates to the Skeleton plane to maximise the usability of the website therefore with this in mind, consideration has been given to ensure that the shape remains consistent throughout the webpages to avoid a sense of disorientation.
Upon the approach into the final fifth plane, I had already identified one benefit prior to the milestone 1 project in that the colour palette had already been envisaged and it was going to consist of it forming the basis into the feel of the design which reflected my personality whereby I had recognised that I wanted subtle yet contemporary colours of light blue, vibrant blue, dark grey and white.
Specifically the placement or utilisation of the colours are going to be as follows:
- #FFFFFF - White would be attributed to the separator of each navigational links, underlines each of the navigational links to make it more appealing and in addition is there for a reason as it will form the effect of the interactive feature. Also it attributes towards the background colour of the content and the headings, paragraph and subsequent to hovering over the icons within the footer section.
- #D8E9FE - Beau Blue which is going to be used in the header within the logo & navigational links section, the background colour of some contents such as the skills & projects features and the colour of the icons prior to it being hovered over.
- #3066BE - True Blue will be used as the font colour prior to hovering over the navigational links, the underlined colour which expands once the mouse cursor has hovered over the navigational link, the main headings within the contents, the buttons included in the carousel & contact form and also as the focal point of the footer as a background colour.
- D4D4D4 - Light Grey appears as the colour for the shadowed effect within the content to add extra appeal to key elements.
- #686868 - Dim Grey is to be applicable to the navigational links subsequent to hovering over, the subtitle within the content section.
These are illustrated in the colour palette as per below:
Source: Coolors
Within this project, only three fonts were used throughout the website as a whole which consisted of Caveat Brush being used for the navigational links, as a call to action within the hero images and as a sub-title. For the main title, Caveat was only used in the main section and footer of the website. Finally the Montserrat was used as the general font for the main content of the website. In the eventuality that for whatever reason that the font isn't imported into the styling of the website, a fallback has been considered to use Sans Serif.
From a visual aspect, imagery is known to be important to engage the user's attention into the website, which the background hero image conveys an sense of aesthetic modern yet energetic feel.
The navigation bar will be designed by utilising Bootstrap's navbar in a horizontal position as a fixed-top effect that will enable users to scroll down the webpage effortlessly ensuring that the logo and navigational links remain visible no matter how far down the content goes to contribute to the website portfolio being user friendly. These will be consistent across all webpages and are all active in functionality as convention dictates to ensure good UX is applied. I was satisfied with the design of the hamburger icon as this fitted nicely into the theme of the website. From tablet view and beyond, the only change I had applied was to increase the font size as I was aware that it would suit the design better if the font size on mobile view was smaller.
Also to add extra appeal usability to the navigation, I designed the links whereby a dark grey is applied indicating the current page that the new/returning visitors are browsing through and a more vibrant blue to indicate the available links to visit. I have also added a CSS trick whereby once you hover over the navigational links, the font colour changes to a dark grey colour and also the underline colour changes from white to a vibrant blue which this also expands in size horizontally into a neat feature.
Within the Skills section, I have utilised Bootstrap's grid to create 3 x sub-sections to separate each type of skill i.e. front-end, back-end and any miscellaneous yet relevant skills relating to website development. Again I have also implemented a neat feature within each of the rectangular shapes whereby once the landing page has loaded, these 3 sub-sections are smaller in size to begin with yet scales up as a CSS animation trick, in size as the seconds pass to direct the employer's & recruiter's attention.
This section will feature Bootstrap's Carousel to highlight the developer's best or recent project works in which an image is provided showing the website's responsiveness and will include a button to direct users to the URL of the project. It will also contain a section utilising Bootstrap's Card feature so as to exhibit the demonstration of all the previous developments as a portfolio whereby each project includes a synopsis such as an overview into the website, what languages, tools and technologies were used so that the new/returning visitors can grasp with recognition the purpose and capabilities, prior to visiting the external links provided.
Lastly this webpage will feature a customised format of Bootstrap's form with the aim of including a modal to imply a part functionality and confirmation that the submission button works rather than leaving it in an inactive state to elicit good user experience.
-
Balsamiq:- the software has been utilised that is related to the creation of wireframes as part of the preparational work into the duration of the design process through the website portfolio.
-
GitHub:- this is a collaborative tool which consists of a community of developers and has been used to store the coding of the project subsequent from being pushed via Git.
-
GitPod:- an online Integrated Development Environment (IDE) editor utilised to create files and code the website.
-
Git:- a form of versioning control by way of utilising the terminal within Gitpod to commit to Git, then subsequently push to GitHub.
-
Bootstrap v4.5.2:- this is a CSS framework which is used to assist with making the design responsive whilst complimentary with the styling of the website.
-
Google Fonts:- these were used to import the typography of the website into the stylesheet file and is utilised on all webpages.
-
Font Awesome:- a sparse amount of icons was added for the purpose of aesthetic appeal and UX design.
-
jQuery :- a brief bit of HTML coding has been applied to link with Bootstrap's navbar being responsive, which relates to the functionality of the hamburger menu component applicable in mobile view.
-
Popper :- a brief bit of HTML coding has been applied to link with Bootstrap's navbar being responsive, which relates to the functionality of the hamburger menu component applicable in mobile view.
-
JavaScript :- a brief bit of HTML coding has been applied to link with Bootstrap's navbar being responsive, which relates to the functionality of the hamburger menu component applicable in mobile view.
-
CSS3 :- this is the current standard that is used.
-
HTML5 :- this is the current standard that is used.
Obviously a website project is not without its technical bugs, (and no I'm not talking of the C19 kind, even though a virus exists within the technical world!) which requires the skill of implementing a problem-solving approach to reach to good fixable solutions. These consisted of:
-
The content wasn't rendered correctly between the navigational links and the hero images as it was being hidden under navbar due to Bootstrap's CSS styling of fixed-top. This presented me with a problem as I hadn't utilised the placement of navbars before let alone used the framework so I wasn't aware that it may be a known issue, therefore as a result of researching, I found a fix to resolve this through Stack Overflow which required setting the body class with the attribute of padding-top and setting a pixel unit at a couple of breakpoints using media query as I scaled up the navbar for laptop view onwards.
-
The logo image was overflowing the hamburger menu icon, meaning that it forced this to go below the logo as opposed to next to it as I had wireframed the design. After consulting with the Slack community, it was because the logo was set at 320px i.e. the logo size was too big to fit into mobile view and needed to be set at 200px maximum.
-
Within the Current Skills section I experienced a margin/padding issue to Bootstrap's grid whereby each progress bar had moved below the logo of various languages, tools & technologies that I was competent in, between mobile breakpoints at 320px to 380px (see first illustration). Also by the time the website was at 380px, there was no spacing between the end of the progress bar and the border of the sub-section (see second illustration).
Finally each sub-section wasn't being separated i.e. Front-End, Back-End & Miscellaneous which resulted in having to consult the Code Institute's tutors to assist me with this issue overall as it was quite a main challenge to overcome. It was eventually rectified by changing a col-11 to a col-10 that accounts for the progress bar column and this greatly resolved the spacing between the logo and the border of the sub-section.
Each of the below general technical testing has considered and been matched to the User Stories to the best of one's ability:
- Employers and Recruiters
a) Employer's Perspective
-
As a user of a prospective employer, it would be an incentive to experience the ability in browsing through a candidate's website portfolio to assimilate into the developer by grasping key relevant information in an engaging manner via the content as derived from a Curriculum Vitae, which can be obtainable in its traditional form through the website. The objective of it is to invite new and/or returning visitors to initiate their first contact with the developer which is dependent on the CV being easily shareable to potential employers and interview panel to assist them with the decision-making in recruiting that individual.
- The website has been designed with providing key relevant information into the knowledge, skills and experience which is sufficiently provided and does provide users with a traditional Curriculum Vitae that is available to download.
-
As an employer who is seeking for a candidate to connect with as a human being, within various roles of a Full Stack, Front-end or Back-end Website Developer, it would be of great value to have the ability to explore the website portfolio which is rendered correctly, especially with the mobile-first approach through the design methodology and principles. The outcome for the user would be to consciously comprehend and assess the developer's technical competencies/logical thinking in the development lifecycle or experiences through their own project works by way of GitHub or alternatively via a URL of their hosting ISP, which an active link is offered to demonstrate this.
- The design of the website demonstrates that this has been rendered correctly, especially with the mobile-first approach as illustrated below in the main testing section. It also conveys the developer's technical competencies/logical thinking by providing previous project work, especially prior to the Full Stack Web Developer course.
-
As a user in wanting to employ a candidate, the value is greatly appreciated in identifying the confidence in the capability of skillfully coding the website, whilst expressing creativity that reflects the aesthetically appealing product that the individual has built and places an emphasis on accessibility.
- Every thought has been implemented to express the confidence as much as possible and allowing that creativity to be conveyed to users which allows the website to be aesthetically pleasing.
b) Recruiter's Perspective
-
As a user of a recruiter, there is a continuous responsibility to efficiently identify from an accumulation of potential developers, to suggest to their portfolio of clients who will have various specific criteria that are determined from a range of companies/businesses whether small, medium or large. Therefore in effect, the responsive performance into the functionality of the website portfolio enables the great value in accessing useful information, is essential for a recommendation to a client to take effect.
- This is reflected in the testing section which demonstrates a great responsive performance.
-
As a recruiter, it is difficult to grasp the in-depth knowledge of the employer that determines whether the targeted candidates that is deemed suitable is a good match to the representative client's requirements therefore by obtaining a Curriculum Vitae which is widely recognised, it concisely outlines the skills of various candidates and assesses their employment & educational history.
- The skills is provided within the main homepage to allow employers/recruiters to assess the developer's competencies.
-
As a user, we receive requests to fill positions on a temporary/contractual basis or identify talents from large firms therefore candidates will need to demonstrate with proof of their capability to ensure that the role is accomplished or sustained respectively.
- Previous projects has been provided to accomplish this outcome.
c) Combined User's Perspectives
-
As a combination of users, there is the viewpoint that by browsing, the website portfolio provides the content which is expected to be rendered fluently, swiftly and responsively via accessing active navigational links and is achieved through means of a peripheral or alternatively through various assistive technologies.
- All navigational links allows the users to access the information required.
-
As a user, a contributory factor in interviewing and recruiting the candidate is based upon assessing the background history into their education and employment, especially when the developer updates their website or GitHub with new examples of recent project work.
- This has been provided through the Profile webpage and also a link to the GitHub has been provided.
-
As a user, the ability to instantly establish the purpose of the website efficiently with ease through content which can determine effectively whether the candidate is worth pursuing.
- Every thought has been considered to provide relevant and key content to users.
-
As a user, there is a range of means in contacting the candidate through a form via the website, or alternative methods such as social media, email or telephone/mobile number provided via their Curriculum Vitae.
- A contact form has been provided within the website and a section into the developer's social media is presented via the footer of the website.
-
Utilised the website Online-Spellcheck to ensure that spelling and grammar of the readme.md is correct.
-
Tested that the hyperlinked logo on each internal webpage leads users to the homepage.
-
Tested each navigational link items such as Home, Projects, Profile and Contact in a logical order & thoroughly on every webpage to ensure it is functioning correctly i.e. that it is not broken; and directing to the right webpage. Also when visiting a particular webpage, that the contrast colour within the navigational link signifies the existing webpage that the user is browsing through for good UX.
-
Tested the hamburger menu icon to ensure that the toggler functions and that each navigational link is positioned exactly like the wireframe design.
-
Tested the responsiveness of the website portfolio to ensure it reflects the design of the wireframe by utilising Google Chrome's Dev Tools to establish if the structure is rendered correctly from devices at mobile view in 320px scaling up to desktop PC view at a maximum of 1920px.
-
Tested by refreshing the homepage at the Skills section to be assured that when the webpage loads, each of the sub-sections expands from a smaller size into a set height & width using CSS animation.
-
Tested the Download CV icon to ensure that it expands when you hover over the icon to signify interaction and that when you click on it, a new secure tab is opened producing my Curriculum Vitae in an integrated Adobe Reader pdf file.
-
Tested icons related to Social Media whereby similar to hovering on the Download CV icon, it expands to give a sense of engagement to lure the new/returning visitor into viewing my GitHub profile & projects and also my LinkedIn account if they wish to connect with me via a new and secure way of opening a new tab.
-
Tested both the left and right arrow icons within the carousel in that it functions correctly to the next image slide.
-
Tested the button within the carousel to ensure that it leads the users to a new secure tab and that the correct website loads up which is related to the specific project worked on. As I clicked on the button I had realised that this didn't function as it was supposed to, therefore a quick fix was to apply some simply HTML code so that it can open up in a new tab as described by adding target="_blank" and rel="noopener".
-
Tested the indicators to ensure that the links directs users to a specific image within the carousel.
-
Tested by refreshing the Projects webpage at the section of the portfolio work to ensure that when the webpage loads, each of the sub-sections of specific projects undertaken expands from a smaller size into a set height & width using CSS animation.
-
Tested both the GitHub & external link icons to guide new/returning visitors to specific projects developed within the repository and also a live link to demonstrate the finished result of the website.
-
Tested all fields whereby once clicked into the input area, it highlights the specific data entry field to engage the user's attention what section is currently being filled in.
-
Tested the Submit button within the Contact webpage whereby all fields remained blank with no inputs to result in an error message conveying 'Please fill out this field' to validate all fields have been inputted prior to submission.
-
Tested by utilising the HTML Validator for each webpage of the website to ensure the coding quality is of a high standard. The result is split into two sub-sections below:
a) Errors
- Contact:- this flagged up 2 errors, the first was regarding an attribute not allowed on the input element in relation to the code aria-desscribedby="". I first thought it was simply because of an additional letter of 's' in the word described, however this did not eliminate the error therefore this was rectified by removing the attribute. The second was concerning the label and input whereby the value of the 'for' attribute of the 'label' element must be the ID of a non-hidden form control. This was rectified by ensuring that the for and id have matching names which is something that was suggested on Stack Overflow.
b) Warnings
-
Homepage:- this flagged up 3 warnings regarding a possible misuse of aria-label which they all relate into the use of Font Awesome icons.
-
Projects:- this flagged up 6 warnings regarding a possible misuse of aria-label which they all relate into the use of Font Awesome icons.
-
Profile:- this flagged up 3 warnings regarding a possible misuse of aria-label which they all relate into the use of Font Awesome icons.
-
Contact:- subsequent to rectifying the above error for this webpage, this flagged up 3 warnings regarding a possible misuse of aria-label which they all relate into the use of Font Awesome icons.
In addition and by relating to the above four webpages however, according to the link Font Awesome Accessibility this attribute is necessary for accessibilty reasons particularly as I have included a few focusable interactive elements within my footer.
- Tested by utilising the CSS Validator which resulted in an excellent feedback of no errors found as illustrated below.
-
Tested the colour palette to ensure of its accessibility via Accessible Colors and realised that I hadn't considered the emphasis of checking this prior to the development of the website. This was rectified by amending the colour scheme slightly as the contrast ratio was a bit low meaning it rendered it as a fail and also that I had considered this yet it required tweaking it by adjustment to ensure compliance. Also double checked on a11y after Accessible Colors which it passed with flying colours.
-
Executed the CSS coding via Autoprefixer whereby my original stylesheet is copied and the Autoprefixer's code is pasted into style.css to ensure cross browser compatibility in the styling of the website.
-
Tested by utilising Google's Mobile-Friendly Test into the responsiveness of the website to ensure that as mobile phones are prominent in our daily lives each webpage is rendered correctly to fit within these devices. The following webages have been tested:-
- Tested the performance of the website via Google's Lighthouse for mobile devices and the report suggested it was excellent as illustrated below:
Also this has been tested for desktop PC as well, again similarly to the result above:
- Tested the website in browsers such as Google Chrome via Android mobile phone and the website is very responsive. Also tested this on desktop PC through Google Chrome and again the website works well. In addition to this, it has also been tested on an iPhone 6 and iPad Pro (thanks to a developer within the Slack community for doing this) and feedback was "Looks really good, checked it on iPhone 6s and iPad Pro, didn’t notice anything wrong or out of place. Good job on responsiveness"
This project has been deployed on GitHub Pages with the following process:
- All code was written on Gitpod, an online IDE.
- The code was then pushed to GitHub where it is stored in my Repository.
- Under the settings section of the GitHub repository, scroll down to GitHub Pages section.
- Under 'Source' drop-down, the 'Master branch' was selected.
- Once selected, this publishes the project to GitHub Pages and displays the site's url.
- There is no difference between the deployed version and the development version.
- The code can be run locally through clone or download.
- You can do this by opening the repository, clicking on the green 'Code' button and selecting either 'clone or download'.
- The Clone option provides a url, which you can use on your desktop IDE.
- The Download ZIP option provides a link to download a ZIP file which can be unzipped on your local machine.
Most of the code was developed by the use of Bootstrap's library throughout the project for the purpose of ensuring the responsiveness of the website such as the Grid layout, components such as the Navbar, Carousel, Card and Forms.
Inspiration was taken of the underline by utilising pseudo styles in CSS via codepen so I cannot claim any credit for this.
Inspiration in developing the Current Skills section was taken from Daiden Sacha yet the code was purely one of my own.
All hero images were derived from as below in the next section and text contents is written by myself as a developer.
Main hero images taken from Pexels a free source stock image website Main icons taken from Font Awesome a free source icon website
-
I cannot even begin to express my wholehearted gratitude to the Slack Community at the Code Institute for their fabulous yet inspirational support in what has been a significantly challenging few months for me personally in the duration of the development of this website and I am forever grateful & in their debt. There has been too many people to name but I wish to express my thanks to the tutors Igor and a couple of others who have helped guide me to solutions and also to my mentor for he was able to do through my first milestone project.
-
Special thanks goes to the User Centric front-end development lead Jim Morel for his absolutely sterling work in providing a webinar to assist with Milestone 1 Project preparations, and has been so supportive throughout this journey, you are my man a legend! And also to Aukje van der Wal for her support in commencing the project when I had a confidence doubting moment of not knowing what to do and providing useful resources. To Matthew Lister when I was suffering from stress, he was there as a listening ear and lead me on the right path to pick myself up again. Finally to Ngiap who has helped keep my feet on the ground trying to recognise the importance of health & wellbeing in his messages. Apologies if I've missed off anybody, it was unintentional but they were the main people I felt I had to acknowledge in the milestone 1 journey.