Marketing Website - Refactoring for Accessibility Descripton In this assignment we are to produce a web-responsive porfolio page using HTML and CSS. The purpose of building an online porfolio page is to demosntrate your skill sets to future employers.
Acceptance Criteria
- When the page is loaded the page presents your name, a recent photo or avatar, and links to sections about you, your work, and how to contact you
- When one of the links in the navigation is clicked then the UI scrolls to the corresponding section
- When viewing the section about your work then the section contains titled images of your applications
- When presented with the your first application then that application's image should be larger in size than the others
- When images of the applications are clicked then the user is taken to that deployed application
- When the page is resized or viewed on various screens and devices then the layout is responsive and adapts to my viewport
Whats provided? For the task ahead we have been provided basic starter codes for HTML and CSS with gerneal styling to consider.
Installation In order to contribute to the task we must install Visual Studio Code. This will be the basis in which we will be able to create the html and CSS files. We would also need to intall an extention within Visual Studio Code to run and open a live server in the browser such as in 'chrome'. We will require a terminal/bash to create a repositary that will enable us to push the configured code base onto github. For this we will need to install Gitbash.
Process of Creating the portfolio To begin the profilio I used Figma a website which helped me create a wireframe of my soon to be porfolio. By doing so I was able to visualise and have a sense of structure to how I want the portfolio to look like.
HTML - Using Html we used a number of elements and attributes including div, nav, section, footer tags to set the scene to the page. This included attributes such a href to link pages to resumes and projects that had been done previously as well as functionality when something was selected in the nav bar it would seemlessly scroll down to the corresponding section of the portfolio. In the html a pdf document was also linked that would allow hiring managers to view a in-depth view of my experinces and background. A footer tag was created within the webpage to include the contact information and an email, github and linkedin were provided.
CSS - In order to provide styling a number of images where used to make the end porfolio apealing to the end user. Images were collected from google with relavance to projects that were completed and projects pending associating the images accordingly. A number of styling methods were used including flex and justify-content, this is to ensure the webpage was resposnive when the screen size was smaller. Adding in media query to make it compatible with mobile device where certain aspects of the styling was also changed. Styling was added across the html ensuing the nav bar was easy to read and would also respond when scrolling down to each diffrent section of the page. Further styling for font sizes, image displays background colour was also aspects that were executed in the codebase.
Reflection: As the second project that was undertook to create this portfolio I had struggled to grasp certain aspects such as the flex box. This task was quite diffcult as I wasn't able to achive the exact desired look but I belive I have completed this to a level which meets all the aceptance crtierias. I seeked help where and when required through ASKBSC and other tools such as youtube tutorials and I started to develop a better understaning for html as well as CSS elements and was able to apply this for for the portfolio project. My main learning point from this project is continuous practice and curiousity to learning from others visually showing me and explainig where I was able to pick up on things and why and how certain functions and elments are carried out. I was able to complete the project to a satisfactory level and to the best of my knowledge through this. I do understand that there may be possible improvements to my work that could be further looked into.
Resources https://www.w3schools.com/ https://htmlcheatsheet.com/ https://www.youtube.com/watch?v=fYq5PXgSsbE&ab_channel=WebDevSimplified
Credits Jung, Jessica & Andy (Instructer and TA from the bootcamp) AskBSC comminity members Licence I have chosen to go with the MIT licence as it allows people to do almost anything to the project to help improve the website further if required. It is also a simple and persmissive im compaiesion to other licences.