First Milestone Project: User-Centric Frontend Development - Code Institute
Welcome to my first Milestone project. The following demonstration of my capabilities concerning this site is to help showcase my ongoing progress as a coder and a brief glimpse into the typical styles I would adhere to based on my current skillset and experience. At this juncture my intended audience are for prospective Employers, Recruiters and Collaborators within Front End Web development. Now at the early stages of my developemnt, I realise that I have limited show of live projects so I have included some links to pesuedo-sites or lessions that I have learned along the way to help you get a better understanding of where I am coming from! So the point is that I am ever evolving as a web developer, this position will inevitably change in due course as my skillset and experience increases over time.
Moving on I've designed and built this website to deliberately focus on standard navigation across entire site to promote a simple look and feel with a 'pop' of colour here and there.
The pages allow the intended user to focus on the market strategy for presenting information briefly as they don't have to choose to scroll through endless body text. They might just see that I can trust this guy to get my projects out the door in a dependable fashion.
-
-
- As an Employer || I want to easily understand the main purpose of the site and learn more about the individuals experience plus by accessing recent projects they might have and also to be able to see a CV to form an impression of the persons character.
- As a Recruiter || I want to be able to easily navigate throughout the site to share information with my peers, and to find content like a downloadable CV or some ind of demonstration of talent.
- As a Collaborator || I want to look for testimonials to understand what their users think of them and see if they are trusted. I also want to locate their social media links to see their followings on social media to determine how trusted and known they are.
-
- As an Employer || I want to drill deeper and source their problem solving capabilities.
- As a Recruiter || I want to find the best way to get in contact with the organisation with any questions I may have.
- As a Collaborator || I see what kind of improvements could be made everywhere, my past projects may be revitalized they can get access to my git repos for more learning.
-
- As an Employer || I want to check to see if your evolving and if you're interested in how to inprove things for others
- As a Recruiter || I want to check to see if there are any new blog posts.
- As a Collaborator || I would like inspiration and an openess to different ways of looking at the world and would engage on that basis
-
I want to make the website that is easily understood or done so; presenting no difficulty. The visual communication is quick and to the point, collaborators can pause at any point and be lead by the sites journey, and if they don't have too much time on their hands,
then they can easily jump to the end where they aren't overburdened by too much call to action, it's about the simplicity of information presented. The site flows simultaneousley across four pages
So I preferred to use .col-3 at most points throughout the site because I found it was nice to work with avoiding scaling issues and flexible enough for mobile responsiveness.
I used centered text and visual aids to navigate the user through their experience when using the site. From another aspect I tried to use the imagery
to evokes my interest in architecture, industrial design and the arts through the ages and the enviromnment around us provides which help provide a visual landscape.
The logo has been created by myself. My navigational elements are fixed and visual links ease in and out on the top of the viewport throughout. There is an optional modal on the about.html page that reveals more detaiked information
Each page is srollable, providing 'eye comfort' and revealing a large but modest footer providing access to my personal details. This information is consistent through each page.
-
-
- I have used primary colours accross the sight the heading colours are Blue and the secondary colours are Orange, Green & Purple.
-
- The Mitr & Roboto fonts are the main font used throughout the whole website with Sans Serif as the fallback font in case for any reason the font isn't being imported into the site correctly. I used Mitr as it is a sans serif styled font and it has a friendly feel iwhich I wanted to bring out in the site design layout, whilst Roboto is known for being an easy to read font and rythmic according to 'Google Fonts both are all relevant to readability, legibility, and overall texture in programming so I deemed them appropriate to use on this website.
-
- I have selected imagery to evoke a sense of spatial distribution within a given environment. The large, background images are architectual in nature and is designed to give a visual impact where the image colour schemes contrast or compliment the navigational elements and components on the website.
-
My site has a modern, clean look and feel, using several background images on individual pages to create a "treat" throughout the website I use plenty of colours for my icons, fonts and other elements.
-
Responsive on all device sizes
-
Interactive elements
Most of the Features within my Portfolio are using the Bootstrap Front-end Component Libary I have also used Animate.css which is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
My intention is to add my own live projects for my partners in business.
-
- Bootstrap was used to assist with the responsiveness and styling of the website.
-
- Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
-
- Google fonts were used to import the 'Titillium Web' font into the style.css file which is used on all pages throughout the project.
-
- Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
-
- jQuery came with Bootstrap to make the navbar responsive but was also used for the smooth scroll function in JavaScript.
-
- Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
-
- GitHub is used to store the projects code after being pushed from Git.
-
- Photoshop was used to create the logo, resizing images and editing photos for the website.
-
- Balsamiq was used to create the wireframes during the design process.
I have tested my portfolio using Chromes developer tools, and Browserstack The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project. As the site is under development their are currently 28 syntax issues that will be corrected in due course
-
-
As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about the person.
- Upon entering the site, users are met with a solid deep bl ue navigation bar to go to explore a choice of three other pages. Beneath the nav bar the user is impacted by a dynamic full width background image that bears my full animated name and job title. The user can click simultaneously switch between arrow and job title once clicked on scrolls down to the lower extremities of the page.
- Once there the user will quickly understand the purpose of the website which really is pre marketing a call to action, considering me as a potential employee, candidate or collaborator.
- The user is free to scroll back up or back down the page to the footer, to see the details on how to stay in touch with me or choose to delve deeper into the website if still interested. With a handy 'back to the top' feature to save excessive scrolling.
-
As a First Time Visitor, I want to be able to easily be able to navigate throughout the site to find content.
- The site has been designed to aid the user in making simple traditional choices when navigating around the site and the use of catchy imagery has been chosen to maintain interest, throughout their journey. Each nav bar item is featured to keep the user engaged as much as possible with delayed hover/time effect. The logo in the top right hand corner is non desript and it's purpose is to lead the user to the homepage when on other pages of the site.
- In keeping with the home page style of presentation, I have kept the style very basic and honest with alot of white-space with symbolism. The idea behind this is to help the user push through the site as quickly as possible, only focussing in on what is necessary at the time of reading. I have therefore minimized my profile to a modal button where again the user can breifly access it or stay interested.
- When the user clicks on the Skills Page, they are met with more bold inviting images and quote to keep the user further engaged. Purpose being that it may help the user to focus on the content and information they were seeking. The use of the carousel is to further confirm the skillset on offer by me as a Front end web developer and how I would rate myself.
- The user will be spending most of their time on this page, I have added a portfolio dropdown nav-item here so the user can see further examples of my learning of differing web development presentations. On the final Contact Page the user can easily scroll down to a section where they have an option to get in touch with me
-
As a First Time Visitor, I want to look for testimonials to understand what their users think of them and see if they are trusted. I also want to locate their social media links to see their following on social media to determine how trusted and known they are.
- Once the new visitor has read the About Us and What We Do text, they will notice the Why We are Loved So Much section.
- The user can also scroll to the bottom of any page on the site to locate social media links in the footer.
- At the bottom of the Contact Us page, the user is told underneath the form, that alternatively they can contact the organisation on social media links below which highlights the links to them.
-
-
-
As a Returning Visitor, I want to find the new programming challenges or hackathons.
- This is in development but links to blog sites on the 'Say Hello page was intended for this purpose.
- As the purpose of the site goals are not consistent at this early stage nevertheless will be introduced in the future.
-
As a Returning Visitor, I want to find the best way to get in contact with the organisation with any questions I may have.
- The navigation bar has an opportnity to contact me with a 'Call to action' as a Nav-item link to the Contact Page.
- The visitor can then fill out a form on the page or are told that alternatively they can message the organisation on social media.
- The footer contains links to the organisations Facebook, Twitter Reddit, Google, YouTube and Pinterest page as well as the organization's email.
- Whichever link they click, it will be open up in a new tab to ensure the user can easily get back to the website.
- The personal information section is set up to autofill
-
As a Returning Visitor, I want to find the Facebook Group link so that I can join and interact with others in the community.
- The Facebook Page can be found at the footer of every page and will open a new tab for the user and more information can be found on the Facebook page.
-
-
-
As a Frequent User, I want to check to see if there are any newly added challenges or hackathons.
- The user can use search components in the navigation bar to look for challenges
-
As a Frequent User, I want to check to see if there are any new blog posts.
- The user would already be comfortable with the website layout and can easily click the blog link
-
- The Website was tested on Google Chrome, Internet Explorer, Microsoft Edge and Safari browsers.
- The website was viewed on a variety of devices such as Desktop, Laptop, iphone6 iPhone7, iPhone 8 iPhoneX, iPad, iPad Pro and Pixel 2XL
- A large amount of testing was done to ensure that all pages were linking correctly.
- Friends and family members were asked to review the site and documentation to point out any bugs and/or user experience issues.
- On some mobile devices the landing page background image appears to not fluidly stretch across the extremities of the navigation bar.
- A white gap can be seen down the sides of the landing page and navigation bar as a result looks wider
- Last link in Navbar can appear relatively obscure or pushed sidways out of view when when screen sizes are rendered for Moto G4, Galaxy S5 and Pixel 2.
- On Microsoft Edge and Internet Explorer Browsers....
The project was deployed to GitHub Pages using the following steps...
- 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.
- Alternatively Click Here for a GIF demonstrating the process starting from Step 2.
- 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.
By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
- You should now have a copy of the original repository in your GitHub account.
- Log in to GitHub and locate the GitHub Repository
- Under the repository name, click "Clone or download".
- To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
- Open Git Bash
- Change the current working directory to the location where you want the cloned directory to be made.
- Type
git clone, and then paste the URL you copied in Step 3.
$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
- Press Enter. Your local clone will be created.
$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.
Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.
-
The full-screen hero image code came from this Google Images Back End Server post
-
Bootstrap4: Bootstrap Library used throughout the project mainly to make site responsive using the Bootstrap Grid System.
-
Animate.css : For intro annimation on Landing page
-
Clever Techie : For useful video tutorials discussing and demontrating Responsive Nav Bar with Bootstraps
-
Buckie Roberts (The New Boston) : For useful video tutorials discussing and demontrating Bootstraps tips and tricks
-
Drew Ryan : Took inspiration from building a Responsive Bootstrap Website Tutorial with Full Screen Landing Page
-
Lawrence McDaniel : Inspired by this absolute Legend of a Web developer
-
Stackoverflow) : Change bootstrap navbar collapse breakpoint without using LESS
-
Perishable Press : Killer Collection of CSS Resets
-
Stock Adobe : Took inspiration from Stock of Architural type Imagery
-
Google Images For Landing page I took inspiration from google images of how mainframe servers have changed over the years
-
Snook : Font sizing with rem
-
Stock Adobe : Took inspiration from Stock of Architural type Imagery
-
Awwwards : Took inspiration from 'self proclained' The awards of design, creativity and innovation on the internet
-
Hacker News : Took inspiration from a paraphrased quote by Joe Armstrong
-
The Code Institute Took inspiration from a series of Code Institute Tutorials - This was one of my favorites.
-
All content was written by Joseph Roberts.
-
Psychological properties of colours text in the README.md was found here
- All Images were created by the Joseph Roberts.
-
My Mentor Gerard McBride for continuous helpful feedback.
-
Tutor support at Code Institute for their support.
-
The Code Institute Slack community for their ongoing support.
-
I would also like to say a special thanks to Brian O'Grady, Programme Director & Matt Rudge a Senior Product Developer at The Code Institute for their teaching .