The project I have decided to build is a portfolio for myself. As I do not have any projects at this moment on time, I will use random sites which I like for their interactivity and styles to be has placeholders until I can use my own projects to add to the site.
- Went to GitHub projects, and added a new board with 8 items in the todo section with. They have acceptance criteria and tasks in each item. Prioristised each items in order of importance to build the site.
- Next I am starting to work on the wireframe. I have attempted using Balsamiq but we haven't been trained enough on the making a wireframe especially using Balsamiq, so spoke to my mentor and he has advised me to sketch and take an image of the sketch to add it to my project's Readme file, if I cannot use the Balsamiq to get the desired result, I will sketch the wireframe and take a photo of it to add it.
- Completed wireframes on Balsamiq. I did a wireframe for mobile phone, Tablet, and Laptop/ computer.
Here is the link for the project's Github Project Board
- With the planning phase of the project complete, it is now time to move on to the coding of the site.
- Logged in to Github.
- Entered Repositories.
- Navigated to Milestone-project-1 repository.
- Next went to Settings.
- In settings on the left hand side of the menu under Pages.
- Changed source to "Deploy from Branch" and then in the Branch section, selected "Main" branch and folder "/root". Then saved and the site was published (See link below.).
Here is the link for the project's live website Chris Campbell | Web designer
- I have use the code institute template for this project.
- Added Heroku and mongoDB8.
- Added HTML5's index, confirmation, contact, and project.
- Added Bootstrap5.
- Added a personal favicon's
- Added CSS3.
- Added font awesome6.
- Git committed " added htmls index, contact, confirmation, and project with bootstrap, favicon, css, as well as font awesome."
- Worked on adding items to GitHub project board.
- Git committed " Completed github project board and updated readme file. "
- added wireframes to the images folder.
- Git committed " Added wireframes from Balsamiq. "
- Addded the wireframes to the readme file.
- Git committed " Added wireframes to readme. "
- Added navbar to index.html with personal logo.
- Git committed " Added navbar to index.html with personal logo."
- Added a carousel to the main section class as influnces of the index.html.
- Git committed " Added carousel to influnces section in index.html. "
- Changed photos for influnce carousel, as was unhappy with original choices.
- Added credits for each photo on carousel from [1] to [18].
- Git comitted " Added credits for each photo on carousel. "
- Change the readme file to as didn't like the way it presented.
- Git committed " Changed the readme file for a better look. "
- Git committed " Updated readme file to change look. "
- Change ref numbers for credits as the still did not look right.
- Git committed " Changed numbers for credits. "
- Tidy up code on carousel.
- Git committed " Tidying up carousel and test styles. "
- Styled navbar.
- git committed " Styled navbar. "
- Added photo and credit 19 for hero image.
- Styled header on css.
- Added heading and paragraph to influnces carousel.
- Added header to contact, project and confirmation html's.
- Git committed " Styled header, added header to other html's and finished the influences carousel section go the homepage. "
- Added form to the contact.html and connected the confirmation.html when the form is sumbitted.
- Git committed " Added form, which each field required to be filled in, to contact.html and it is connects to the confirmation. html when it has been submitted. "
- Deployed project, which is now online.
- Added bootstrap cards to project.html.
- Git committed " Added cards to project.html. "
- Git committed " Added photos and credits for project.html. "
- Added photos to the project.html.
- Git committed " Added photos to project.html. "
- Added headings to footer of index.html.
- Git committed " Added headings to index.html's footer. "
- Added contact details and font awesome picture for social media and the relevant link to the footer.
- Git committed " Added contacts details and social media links to footer. "
- Changed saturation of the hero image.
- Added custom buttons to all html's.
- Git committed " Added custom buttons. "
- Added footer to project.html, contact.html, confirmation.html and started to style project cards.
- Git committed " Added footer to other html's and started style project cards. "
- Migrated file to vscode due change of code institutes change of IDE.
- Git committed " Migrated project file to vscode. "
- Git committed " Started styling carousel on index.html. "
- Git committed " Testing styles to improve website. "
- Git committed " Test images sizes as vscode won't open from port. "
- GIt committed " Test images sizes as vscode won't open from port pt2. "
- Git committed " Test images sizes as vscode won't open from port pt3. "
- Git committed " Test images sizes as vscode won't open from port pt4. "
- Git committed " Test images sizes as vscode won't open from port pt5. "
- Git committed " Changed images for carousel. "
- Added calendar and book now button to home page.
- Git committed " Added calendar and button to homepage. "
- Git committed " Added credit for calendar. "
- Git committed " Added link to calendar button. "
- Changing card styling to fit website goals.
- Git committed " Changed card styles. "
- Adjusting card style to look better on website.
- Git committed " Adjusted card styles 1. "
- Removed active link on confirmation.html.
- Tested contact.html and test location of button.
- Git committed " Adjust confirmation.html. "
- Change size of cards on project.html.
- Git committed " Adjusted cards on project.html. "
- Changed disclaimer color from red to yellow on footer to standout better.
- Git committed " Changed color on disclaimer. "
- Added bug and issue section on readme file.
- Git committed " Added bug/ issues section to readme file. "
- Added coming soon section to the confirmation.html.
- Git committed " Added coming soon to confirmation.html. "
- Updated coming soon on confirmation.html.
- Git commit " Updated coming soon on confirmation.html. "
- Changed code on confirmation.html for better look.
- Git commit " Changed code on confirmation.html for better look. "
- Used to Squoosh to optimise all the images used on index.html and project.html
- Git committed " Optimised images to cut loading issues. "
- Removed google calendar, due to third party issues on google chrome from index.html and replaced with button link to calendly instead.
- Git committed " Removed google calendar, then replace with calendly button instead. "
- Checked that all links connected to images.
- Git committed " Rechecked the image links. "
- Updated readme file with lighthouse checks and images of screenshots.
- Git committed " Update readme file with lighthouse checks. "
- Optimised images did not look right so reverted them to originals.
- Git committed " Swapped 3 optimised images back to originals, due clarity issues. "
- Relinked orginal images to project.html.
- Git committed " Relinked orginal images to project.html. "
- Reran Lighthouse after reverting to orginal images.
- Git committed " Reran Lighthouse after image change. "
- Validated and fixed issues for all html's and css.
- Git committed " Validation complete. "
- Fixed issue rechecked as performance was not was should be.
- Git committed " Fixed issue rechecked. "
- Checked all outside links went to a new page.
- Git committed " Outside link open new page. "
- Used https://coolors.co/ to change the website color palette.
- Git committed " Changed color palette in style.css. "
- Added a readme-image file folder in assets, removed unresponsive buttons from carousel to make it autoplaying, added black background for carousel captions so the text is easier to read, and added _blank to Calendly button.
- Git commit " Added readme-images folder, added background for captions and remove buttons on carousel. "
- Added link and image of the project's Github project board.
- Git committed " Added link and image of the project's Github project board. "
- Added headings for testing and deployments in the readme file.
- Git committed " Added headings for testing and deployments in the readme file. "
- Added id to carousel captions.
- Git committed " Added id to carousel captions. "
- Removed carousel css and added style to index.html.
- Git committed " Removed carousel css and added style to index.html. "
- Added black background to one carousel image for test and then added to all carousel images.
- Git committed " Added background to all carousel images captions. "
- Added deployment section to the readme file with site links and images.
- Git committed " Added deployment section to the readme file. "
- Added testing section to the readme file.
- Git committed " Added testing section to the readme file. "
- Added tour of final website to readme file.
- Git committed " Added tour of final website to readme file. "
- Completed readme file and added future of the website.
- Git committed " Completed readme file. "
- Went over the readme file and checked for issues or mistakes, then fixed them.
- Git committed " Double checked Readme file. "
- Added youtube video to projects.html.
- Git committed " Added youtube video to projects.html. "
- Changed height and width of youtube video.
- Git committed " Changed height and width of youtube video. "
- Reverted size of video.
- Git committed " Reverted size of video. "
- Remove video due to google new policy on 3rd party cookies.
- Git committed " Remove video due to google new policy on 3rd party cookies. "
- Readded button back on carousel to see if the are responsive again.
- Git committed " Readded button back on carousel to see if the are responsive again. "
- Removed the buttons from carousel as they are still non responsive.
- Due to google third party cookie policy, I can't complete craiteria 1.6: Design the site to allow the user to initiate and control actions such as pop-ups and playing of audio/video. As the best practice score is serverally decreased.
- Git committed " Removed the buttons from carousel as they are still non responsive. "
- Issue with hero image, so had to check the relative path to fix problem.
- Git committed " Issue with hero image, so had to check the relative path to fix problem. "
- Hero image was having issues so reverted to old image.
- Git committed " Hero image was having issues so reverted to old image. "
- Readded video after spoken to mentor about the issue of third party cookies policy."
- Git committed " Readded youtube video section. "
- Added readme on youtube video.
- Git committed " Added readme on youtube video. "
- Added incognito mode run lighthouse.
- Git committed " Added incognito mode run lighthouse. "
During the building of the website there has been issues crept up, the first such issue was with the carousel and the images placed inside it, on the index.html. The images in the carousel were not the same size, and made the carousel unkempted. I tried using CSS and Bootstrap to adjust the images sizes to be uniformed throughout the carousel, the results did not look the way it needed to be. The only option I had was to edit every image to be the same size individually to 768x432px. Once done the carousel performed the way required.
The second known issue was the on the project.html, the card were different sizes and changing the sizes via CSS and changing the images sizes, made the issue worse with the cards being mashed on top of each other or sizes were different. Certain image sizes made the cards unable to be all the size I had envisioned to be. I had to make the choice of getting the cards the same size that I wanted or lose the quality of certain images and make them unreadable. So I adapted the cards to be bigger but all the same size. Making them all uniformed.
I have ran index.html through Lighthouse on devtools.
The first big issue was the images took to long to load on the page. So on devtools recommendation I used Squoosh app to optimise all images for the website to make it run more efficiently.
Rerun Lighthouse to see any improvement.
The second issue was that the google calendar which google chrome had issue with the "third party cookies". Therefore I removed the calendar and put a button link to calendly instead. Giving it a better score on Lighthouse.
Next I ran Lighthouse on project.html, which showed the score was good.
Then I ran Lighthouse on contact.html, which showed the score was good too.
Finally I ran Lighthouse on confirmation.html, which also showed a good score.
The optimised images on project.html for 3 images made them unreadable so return to orginal images and reran Lighthouse and the for performance went down but still in green.
Using website https://validator.w3.org/ to valid the HTML's of my website.
First to validate was index.html. As you can see no issue to the code according to the validator.
Second to validate was project.html. There were two issues to fix.
In the image above show the issues, which were located and fixed, then revalidated.
Next to validate was contact.html. There was only one issue to fix.
The issue from the image above was fixed and revalidation was done.
Last to valid was confirmation.html. There were four issues to fix.
All issues from the image above was fixed and revalidation complete.
All issues are fixed and validation complete.
To comply with the criteria 1.6 of the milestone project, I tried to put a youtube video on my project.html but due to google's third party cookies policy, it brought my best practice score to 74.
The only option was to remove the video to revert the best practice score back to the score of 96 for best practices.
Spoke to my mentor and he advised to run the website in incognito mode to bypass the policy.
So readded the video and rerun lighthouse in incognito mode.
Using website https://jigsaw.w3.org/css-validator/ to the CSS of my website.
Validated CSS with no issues to be fixed.
Even though it gave me no issues to fix. I did give me three warnings shown in the image below.
Validation complete.
-
Testing the navibar on all pages, the Favicon image takes you to the beginning of the home page as well as Home icon. The project icon takes to the Project page and the contact icon takes you to the Contact page.
-
The carousel automatically plays through the images.
-
On the availibility section, the Book now button takes you to the contact pages and the Calendly button opens a new page to the Calendly website
-
On the footer of all pages, the social media icons opens up a new page, taking you to the website of the corresponding social media Icon.
-
On the Project page, each button, on each card opens a new page and takes you to the relevant website of each card.
-
On the contact page, the contact form must be completed before the form can be sent. Then once sent, it opens to the confirmation page.
-
On the confirmation page, the "Return to the Homepage!" button, takes you back to the beginning of the home page.
Here is a tour of the website, and all it's features.
The view as you enter website. Also known as the top of the Homepage.
- The custom Favicon image is a link, which when clicked on returns back to the start of the Homepage. The header follows as you scroll down, so pressing it will return you to the top of the Homepage.
- The Navigation section of the navbar, shows the names of the other pages which is freely able to access by pressing them as they are link to each different pages. Each link is hightlighted dependant on which page you are currently on.
- The hero image is where the name of the website and brief introduction of myself is located.
- The influnces section where there is a brief description is followed by an autoplaying carousel with multiple images with captions of the media that has influnced my interest into web design.
- The availibility section is where you can use the book now button which takes you to the contact page.
Or you can use the Calendly button, which opens a new page to the Calendly website.
- The footer section is where the contact details, and social media links. Each social media links opens a new page to the corresponding social media website.
The view as you enter the Project page.
- The custom Favicon image is a link, which when clicked on returns back to the start of the Homepage. The header follows as you scroll down, so pressing it will return you to the top of the Homepage.
- The Navigation section of the navbar, shows the names of the other pages which is freely able to access by pressing them as they are link to each different pages. Each link is hightlighted dependant on which page you are currently on.
- The past projects section is where I would put my previous website built. As I don't have any of website that I have built, I choose website I like the design of, and have used quite regularly.
- Each card has an image representing the website, heading, brief description and button which opens a new page to the corresponding website.
- The dream collabs section is where I put companies that I would like to collab with or work for.
- The Day in the live of a Google UK employee with office tour section has a video from youtube with controls.
- The footer section is where the contact details, and social media links. Each social media links opens a new page to the corresponding social media website.
The view when entering the Contact page.
- The custom Favicon image is a link, which when clicked on returns back to the start of the Homepage. The header follows as you scroll down, so pressing it will return you to the top of the Homepage.
- The Navigation section of the navbar, shows the names of the other pages which is freely able to access by pressing them as they are link to each different pages. Each link is hightlighted dependant on which page you are currently on.
- The contact form needs to be completed fully by the user is taken to the confirmation page. If the form is missing fields then it prompts you to fill in missing field.
- The footer section is where the contact details, and social media links. Each social media links opens a new page to the corresponding social media website.
This is the view, when entering the Confirmation page. This page can only be reached after filling the contact form on the contact page.
- The custom Favicon image is a link, which when clicked on returns back to the start of the Homepage. The header follows as you scroll down, so pressing it will return you to the top of the Homepage.
- The Navigation section of the navbar, shows the names of the other pages which is freely able to access by pressing them as they are link to each different pages. Each link is hightlighted dependant on which page you are currently on.
- The congratulations section confirms that the contact form has been completed and has a button, which returns to the Homepage.
- The coming soon section shows upcoming, possible updates of website.
- The footer section is where the contact details, and social media links. Each social media links opens a new page to the corresponding social media website.
As shown on the the confirmation page, in the coming soon section are potential upcoming updates when I am more established.
-
A newsletter, to inform followers of news relating to web design, be industry news or upcoming projects that I'm involved in.
-
Testimonals/ reviews, to show potenial clients, previous clients experiences with my work.
- Process used from CI Boardwalk Games, and CI Dev Portfolio.
- Template for website used from Code-Institute-Org.
- HTML and CSS code help from W3Schools, and WHATWG.
- Bootstrap code help from Bootstrap.
- Gudiance taken from article on Stack Overflow
- Color palette taken from Coolors.
- Photo 18r67gzglojskjpg.webp was taken from website https://gizmodo.com/how-does-the-original-tron-live-up-to-our-nerdstalgia-5700796 [1].
- Photo 545667-mgm4-71a02ef5d8394af83a9bc3b16b7ef2be.webp was taken from website https://www.mentalfloss.com/article/545667/facts-about-wargames [2].
- Photo back-to-the-future=ending.avif was taken from website https://screenrant.com/back-future-movie-behind-scenes-facts-marty-mcfly-doc-brown-delorean/ [3].
- Photo borg_cube_tractors_enterprise-d.avif was taken from website https://www.syfy.com/syfy-wire/best-star-trek-next-generation-episodes-ranked [4].
- Photo fullwidth.6a84e222.jpg was taken from website https://thedissolve.com/features/movie-of-the-week/413-robocop-forum-satire-violence-and-state-of-the-art/ [5].
- Photo genshin.webp was taken from website https://www.siliconera.com/genshin-impact-lands-a-blow-in-its-opening-cutscene/ [6].
- Photo guilty_crown-03-shu-souta-void-weapon-chest-light-genome.webp taken from website https://simplybinge.com/2014/02/dividebyzer0s-anime-review-guilty-crown/ [7].
- Photo images1.jpg was taken from website https://thevanguardsite.wordpress.com/2015/10/04/sword-art-online-aincrad/ [8].
- Photo intro-1638915310.webp was taken from website https://www.slashfilm.com/680507/this-genius-invention-made-2001-a-space-odysseys-most-complex-scene-possible/ [9].
- Photo knight-rider-michael-knight-david-hasselhoff-1014x570.jpg was taken from website https://www.tvinsider.com/1061349/knight-rider-kitt-car-behind-the-scenes-40th-anniversary/ [10].
- Photo main-qimg-089e00605c394e0ec05b8a66fe65bb01.webp was taken from website https://www.quora.com/How-popular-is-the-the-anime-Psycho-Pass [11].
- Photo sephiroth-surrounded-by-fire-in-ff7.avif was taken from website https://www.thegamer.com/final-fantasy-7-original-game-ending-explained/ [12].
- Photo short-circuit-splash-800x450.jpg was taken from website https://www.mikeymo.nl/movies/reviews/short-circuit [13].
- Photo Star-Wars-Episode-4-A-New-Hope-768x432.jpg was taken from website https://www.scifinow.co.uk/news/top-10-best-star-wars-a-new-hope-moments/ [14].
- Phot0 the-matrix-subway-fight.avif was taken from website https://collider.com/best-matrix-action-scenes-ranked/ [15].
- Photo the-terminator-1984.jpg was taken from website https://onceuponatimeininfinitespace.wordpress.com/2011/07/01/escapist-friday-the-terminator-1984/ [16].
- Photo V5kN2ubX5wwUyPK3KRGcP3-970-80.jpg was taken from website https://www.space.com/transformer-movies-in-order [17].
- Photo znyUfG.webp was taken from website https://marinasauce.wordpress.com/2024/01/10/winter-2024-taste-test-solo-leveling/ [18].
- Photo pexels-danny-meneses-340146-943096.jpg was taken from website https://www.pexels.com/photo/photo-of-turned-on-laptop-computer-943096/ [19].
- Photo AlltheAnimeLogo_Blue.avif was taken from website https://www.alltheanime.com/ [20].
- Photo anime-on-line-logo-1551186655.jpg was taken from website https://www.anime-on-line.com/ [21].
- Photo fanhome_Logo.jpg was taken from website https://www.prnewswire.com/news-releases/fanhome-brings-marvels-iron-man-models-and-other-popular-collections-to-the-united-states-for-the-first-time-301304433.html [22].
- Photo 37677.png was taken from website https://www.accessnewswire.com/newsroom/en/computers-technology-and-internet/game8co-a-rapidly-growing-media-site-launches-game-news-review-services-746945 [23].
- Photo hachette-fascicule-partwork.webp was taken from website https://www.hachette.com/en/partworks-publishers/ [24].
- Photo logo2.png was taken from website https://siberianhuskyclub.org.uk/ [25].
- Photo Single_Variety_Co._Logo.webp was taken from website https://www.singlevariety.co.uk/ [26].
- Photo 20210427124412thegamecollectionlogo19.png was taken from website https://exactconnections.com/media/the-game-collection [27].
- Photo Amazon_2024.svg.png was taken from website https://en.m.wikipedia.org/wiki/Amazon_(company) [28].
- Photo images.jpg was taken from website https://www.bandainamcostudios.com/en/recruit/career [29].
- Photo Google_2015_logo.svg.png taken from website https://en.wikipedia.org/wiki/Google_logo [30].
- Photo Grab_(application)_logo.svg.png was taken from website https://en.wikipedia.org/wiki/Grab_Holdings [31].
- Photo HoYoverse_logo_PNG (2).png was taken from website https://logos-world.net/imageup/HoYoverse_17022023/HoYoverse_logo_PNG%20(2).png [32].
- Photo Meta_Platforms_Inc._logo.svg.png was taken from website https://en.m.wikipedia.org/wiki/Meta_Platforms [33].
- Photo PassApp.png was taken from website https://passapptaxis.com/ [34].
- Photo Square_Enix_logo.svg.png was taken from website https://en.m.wikipedia.org/wiki/Square_Enix [35].
- Youtube video taken from https://youtu.be/ngcjFi1KBOo?si=BZCZmCWRYHgnVaUM [36].
.png){kind=link}