To begin the process of creating the site the main HTML and CSS needed to be developed as a background to go off, allowing for the site as a whole to be sketched out and then added to using JavaScript functionality and styling CSS to enhance the overall site. To begin this process the HTML was developed with all of the main elements being placed into the code, along with test images which would be replace with the real images nearing the end of completion of the site. The text and layout as a whole was all developed first to provide a basic site which could then be added to. Another element which was going to be included into the site was going to be the use of CSS grids, allowing for elements of the site to be placed in specific parts of the site, providing the opportunity for elements of the site to be styled and placed specifically.

The skill of CSS grids has not yet been learnt so through the process of online tutorials, videos and trail and error the us of CSS grids can be applied to the portfolio. As all of the HTML had been developed by this stage, adding the styling was the next stage. To begin this CSS grids was research and using site including developer mozilla the styling was researched into. It was noticed that many sites were promoting the use of adding grid rows and columns to the sites on each individual element, which after a while became confusing as I began forgetting which element had been assigned which row and columns and overall the whole process became very messy within the code as well as in the browser. From this another way of using CSS grids was researched into as styling each individual element became very confusing. From this the grid area method was discovered within a YouTube video by mmtuts describing a walk through of how to use CSS grids with the grid area styling. After watching the tutorial the method was tested using divs in the same process which had been used within the video, which turned out to be a much easier method than working with the individual elements.

From working through this video, it was then decided that this process would be applied to the portfolio website. This was done in the same way which can be seen in the video by placing each section into a div, assignment a grid area and then stating where each area would be placed within the grid. When working on the site the backgrounds were changed to bright colours, allowing for it to be clearly seen which section is being place where and if the different elements are actually within the grid.

In the image seen above, the grid can be clearly seen holding test images and content, allowing for it to be noticed when elements are overflowing or are not placed within any grid elements. Through the process of testing and changing the different assigned areas, it really helped to understand this process, and with the code being much cleaner using this method it made the whole process much easier to understand.

From learning this skill it has also been noted that grids can also be placed inside other grids, allowing for smaller elements to have grids of their own to hold elements as can be seen in the image above on the right hand side. With this knowledge the development of the CSS worked well and made the development of the placement of elements much easier.

Bibliography:

CSS-Tricks. 2019. A Complete Guide to Grid | CSS-Tricks . [ONLINE] Available at: https://css-tricks.com/snippets/css/complete-guide-grid/. [Accessed 3 April 2019]

CSS Grid Layout. 2019. CSS Grid Layout. [ONLINE] Available at: https://www.w3schools.com/css/css_grid.asp. [Accessed 31 May 2019]

MDN Web Docs. 2019. CSS Grid Layout – CSS: Cascading Style Sheets | MDN. [ONLINE] Available at: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout. [Accessed 3 April 2019]

YouTube. 2019. How to Create Website Layouts Using CSS Grid | Learn HTML and CSS | HTML Tutorial – YouTube. [ONLINE] Available at: https://www.youtube.com/watch?v=HgwCeNVPlo0&t=9s. [Accessed 3 April 2019]