User Centric Front-End Development Milestone Project 1 -Online Portfolio

Table of Contents

1. Introduction
2. User Experience
3. Technologies and Deployment
4. Summary points of project
5. Testing
6. Credits

Introduction

A person who was completely new to coding before meeting with code institute a few months ago. My goal is to become the best version of myself in anything that I do which includes programming. I have an engineering background and have been studying engineering ever since I was seventeen. That's eight years of studying engineering, in that time I have managed to get a few diplomas in engineering and also a degree in Mechanical engineering however, I never actually thought to myslef "what actually is my plan?", to be honest I was just following the failed system of education this country has. A question comes up "why am i looking to change field or industry?"" the answer to that is because I have a dream of one day working for a top technology company like Apple, Google or Oracle etc. and also because the world is heading in a direction of technology. My goal is to complete this course to the best of my ability and then find my first junior developer role and then build an empire of skills and experience within me to get into a big tech company. My plan is also to stay with code instiute to further my knowlege in app development.

UX

This is my first ever website and I thought "what a good idea it would be to create my first website as an online portfolio". So this is a webpage that will showcase my skills, my education and my projects to future employers. This website will be updated regularly and improved always depending on the skill level that i'm at.

When you first enter the webpage you probabbly would be thinking "Why is there a gap between the NavBar and the About me section?". This was done so it will come out nice on all types of technology devices. Following on, I want to show the employer who I am by adding a picture and a few social links to get more info. Just under that as you gently scroll there is an about me section where i talk about myself a bit. Then comes the skills i have in terms of my coding languages, i used green, orange and red to signify the skill level that im at and gave each a percentage. This will give the employer a idea of what stage im currently at in terms of my programming level. Straight after there is the projects that i have acomplished and some that i hopefully will acomplish.

Technologies and Deployment

I basically used everything that was taught in the videos and nothing more. The following is what technologies were used and also will dicuss how i implemented them on making my very first webpage.

• HTML & CSS: I used these languages for the syling of my website.

• JavaScript & BootStrap: The navigation menu and the hover effects on the project was completed with the help of BootStrap. JavaScript wasn't used directly, what i mean by this is that the JavaScript i used came directly from me copying BootStrap and not me coding with JavaScript.

• GitHub: This is used to store my code in a safe place. The method is simple and easy.

  1. git add . or gitt add (file name) depending on what you want to send.
  2. git commit -m "intial code" (for example), within the speech marks i normally type what i needed to do and what i have completed to that point.
  3. git push is to send the files into the repository which is stored in the safe place on GitHub
  4. git status is to identify what changes have been made. https://github.com/Shazam1995/my-online-portfolio

• Gitpod: This is the platform i was intoduced to by Code Institue to code https://www.gitpod.io/

• Balsamiq: This gave me a good idea of how i wanted my webpage to look.

Summary Points of Project

After reviewing myself below are some key points of my success in completing the project, i feel the main two points were keeping thing simple by copying and pasting within my document and consitency within the document.

• I created the basic sturcture within the HTML document by using !TAB. I then copied the CDN links from BootStrap and created link tags within the head of the document and pasted in the appropriate place.

• I had a meeting with my mentor and we dicussed the layout of my document. I started with the NAVBAR and used BootStrap to help me with this.I wanted a scroling webpage because it will be easy to use. I then broke my HTML document into four sections which are my headings About, Skills, Projects, and Contacts.

• From watching a few youtube videos i got an idea of what an online porfolio should look like and started my About me section. I decided to create class=card and start styling it with what would look good. I kept the card class consistent througout the other sections which made it eaiser because i just copied and pasted.

• Each section had a ID class of its section name, first reason was so it would be easy to read and second was of course to syle the ID wthin the CSS document. I kept this consistent as well.

• Lastly I completed a footer which i got help with from BootStrap.

Testing

• There are three methods i used to test my webpage.

1. People: I know a few people that happen to be recruiters and at the top of their game. I sent them the link to my website and to ask them to play around with the page and tell me how they think it is. I hve also sent my webste on slack in the peer-review section, I have gotten replies about my grammer which i have fixed other than that i got a reply saying all the links seem to be working and its a nice website.
2. Computer/Laptop: I tested the webpage on an iMAC and Windows Desktop and both seem to have my website working perfectly well. I tryed the laptop that i have been coding on which is a small 11 inch HP Pavilion Laptop and seems to be working perfectly fine.
3. Phones/iPad: All the people i had sent it to where iPhone and Android users and all seems to be well there to.

Credits

Content

• The layout inspired me and is similar to the one in this youtube clip however the text is diffrent. https://www.youtube.com/watch?v=ngcRor6TQRw&t=2781s

• I got inpsired by the NAVBAR from BootStrap, however i changed the position. https://getbootstrap.com/docs/4.0/components/navbar/

• I got inspired by the footer from BootStrap https://mdbootstrap.com/docs/jquery/navigation/footer/