In this assignment we are to produce a web-responsive porfolio page using Bootstrap. The purpose of building an online porfolio page is to demosntrate your skill sets to future employers. On completion of the inital porfolio using only HTML and CSS, we now look at how we can utilise Bootsrap and its componets to effectively apply in our codebase to further elvate the website. More importantly we use bootstrap in this exercise to make the webpage responsive and minmize the use of media queries.
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. We will also require to use the documentation on the bootstrap website to maximise the exisiting code to implement to the portolio we have previously designed.
Process of Creating the portfolio We can revert to our previous porfolio that was designed using only HTML and CSS. To begin we duplicated this file and created a new repo into github so we can continue to commit changes and keep track of the activity. As part of the Acceptance Criteria we are expected to change the nav bar using bootstrap to ensure this will become web-responsive when we hit certain break-points. This will mean the website can be viewed on diffrent screen sizes, from laptops, tablets and mobile devices. We accesed the bootstrap documentation and copied the most approate nav bar available. https://getbootstrap.com/docs/5.3/components/navbar/#nav
Moving to the hero/About section we applied a jumbotron https://getbootstrap.com/docs/5.3/examples/jumbotron/
We continued to meet the acceptance criteria to further elobarte on the web-responsiveness by creating a grid system. This feature was implemented within the sections tag; where the projects are displayed. https://getbootstrap.com/docs/5.3/layout/grid/#grid-options
The footer section was didnt need to much changing as we had applied the hover effect previouly across the links. All other links have the use of Bootstrap within where when hovered it either underlines or changes in colour on the text/hyperlinks.
Reflection: As the third project this felt alot more relatable and starting to grasp aspects of code whilst continually learning. Due to time constraints the bootstrap porfolio is not to the standard I expect it to be and will be revisioning this across a later date in time. This is in regards to the layout/ postion of the images in the projects sections. I belive I have completed this to challenge to fullfill all the acceptance criteria in some aspect. 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 the use of bootstrap and was able to apply this for for the portfolio project. 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.youtube.com/watch?v=uw6ICPFVJzs&ab_channel=NetNinja https://www.w3schools.com/ https://getbootstrap.com/
Credits Instructer and TA's 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.