In order to develop a site which is suitable for the target users, technical research was needed to understand the different qualities in which the site would need to display. As the site needs to progress my skills with the field of website development, there are a range of different skills which I would like to improve on whilst working through this assignment. Two of the skills which I really want to develop in this assignment are the advancements in the use of CSS grids, and the use of JavaScript to add animation effect and qualities to the site. As these aspects both require a large amount of research and understanding for each, I wanted to work on these developments on the side of working on the actual site. This way all of the HTML and the basic CSS could be developed before the functionality of these new skills could be introduced into the website.

To begin, the first new skill I wanted to improve was the use of CSS grids, as it can be applied to websites in so many ways and has become a new trend within website design of which I believe I should learn before going into industry. After looking through a wide range of different sites including w3schools and css-tricks the concept of CSS grids was still rather confusing, and even though the concept was testing using text within brackets and adding background colours to each element to test how they would look within a browser, the concept was not working and I was very confused as to why. From this I decided to look for online visual tutorials so that the code which was being produced could be seen and visually demonstrated how each section would work. YouTube was then referred to, and using this the most useful tutorial was found to progress my skills within CSS grids. A tutorial by mmtuts on the use of CSS grids and how to use them really explained the process very well and after testing the process alongside the video using divs and elements which are styled using the process seen in the video, it really showed me how to use CSS grids. After working through the video multiple times, I realised all of the different opportunities which CSS grids provides and how each individual element could also be styled within a grid with a grid of its own. Moving forward from this video, I attempted using CSS grids on a separate website which I had created last year during university. By separating the different sections of the site into divs, inside one large collective div which would be the grid they could be styled using grids, and given grid-areas, allowing for the elements to be styled in specific places within the grid, in an easier way then defining their specific grid row and column for each element.

After understanding the workings of CSS grids, I then moved onto learning more about the use of JavaScript within animation. To begin understanding JavaScript it had been a while since the language had been previously looked at, so I wanted to work from the beginning, allowing to go back through the different processes and theories within the language. To start this I have been reading through a book by Jon Duckett on JavaScript and JQuery  which starts from the beginning when learning how to use JavaScript. After reading through the first few chapters the book goes into detail about different functions and methods within JavaScript. Through this section of the book I learnt how to set and call functions, along with adding simple data into a function to produce an outcome. Creating and destructing objects were also passed over through the book, with the current section of the book that I am now working on being arrays. Overall the book has progressed my knowledge of the subject but I was still finding it difficult to apply this to specific elements of the site which I was looking to add the script to. So, YouTube was then turned to as I followed along tutorials to help progress my skills. By following the tutorials on YouTube the skills learnt to develop simple JavaScript to create different feedback to the user was obtained, allowing for user feedback to be created on the button within the portfolio site. Moving forward with this I would like to add more animation elements to the website to make it more interesting for the user, and to add more functionality to the site. As my knowledge progresses with this assignment I hope that the elements which I would like to be included will be able to get developed in time for the deadline of this assignment.

Bibliography:

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

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

How To JS Animate. 2019. How To JS Animate. [ONLINE] Available at: https://www.w3schools.com/howto/howto_js_animate.asp. [Accessed 20 March 2019]

JavaScript DOM Animate. 2019. JavaScript DOM Animate. [ONLINE] Available at: https://www.w3schools.com/js/js_htmldom_animate.asp. [Accessed 20 March 2019]

Jon, D., 2014. Javascript & Jquery. Wiley

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 20 March 2019]

YouTube. 2019. Creating Awesome UI’s that Animate Only On Scroll – YouTube. [ONLINE] Available at: https://www.youtube.com/watch?v=S18Wh9IELo0&t=560s. [Accessed 20 March 2019

YouTube. 2019. How To Animate On Scroll Using ScrollMagic – YouTube. [ONLINE] Available at: https://www.youtube.com/watch?v=Sxgn6z6yLsM&t=310s. [Accessed 20 March 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=1s. [Accessed 20 March 2019]

YouTube. 2019. JavaScript in 7 minutes | Create Interactive Websites | Code in 5 – YouTube. [ONLINE] Available at: https://www.youtube.com/watch?v=LFa9fnQGb3g. [Accessed 20 March 2019]