To add more interest to the website JavaScript was going to be included to add animations at through the portfolio. From looking back at the final wire frame for the website the idea was to include a slideshow at the beginning of the site allowing for interest at the first user interaction with the site. As I have previous experience working with CSS animations to develop slideshows using pure CSS, I wanted to challenge myself to develop a slideshow using JavaScript, providing more options for animation styles and what elements could be animated.

After working on learning JavaScript for the past few weeks, my knowledge of the language has grown, although applying the knowledge which has been taken to the elements which were going to be styled was still very difficult for me. To aid the process of applying the JavaScript to the elements which were going to be styled, test images were used as the final images had not yet been developed and were placed into the HTML code inside two divs which would hold the content and also allow for styling to be applied to those specific elements along with the animation styling which could be applied using both JavaScript and CSS.

Once the HTML was developed the CSS was then moved onto which stated the dimensions of the container of which each of the images are contained within, allowing for the images to be constrained to a certain size to make it easier to work into the CSS grid. After defining the sizes and positions the animations were then defined within the CSS by selecting the inner div just containing the image and defining the type and duration time of animation.

Moving on with the animation, after defining the CSS the next step of the process was to add JavaScript, of which to start with I was confused as to how to layout the script which I wanted to define, so using sites including w3schools and code pen to view other examples of slideshows the layout was determined by defining the function and giving it a name which relates to that animation. After defining the function, the function was then entered by connecting to the actual element within the HTML and creating an array in which would show the slides over a period of time. After defining the array with the display being set to none a new array was created to state that if the number of slides is more than 0 than increase that number by one to the defined element (the image) to replace that side and show the new element which would be the new image. After this the time frames were defined to show that the images would be changed every five seconds, allowing the user time to view the image before it disappears.

Overall the development of this section of the site has been the most challenging element yet as I have never worked with JavaScript in this way before and it took a large amount of time working on the understanding of code and how to piece together each separate section to allow the code to work in turn with the HTML and CSS which had been created separately. With the use of many online tutorials and viewing other’s code online really aided the process of development, although  more research and practise with JavaScript will be needed to understand the language more than what I currently do.

Bibliography:

SitePoint. Pure CSS Image Slider. [ONLINE] Available at: https://codepen.io/SitePoint/pen/qiAyo. [Accessed 22 April 2019]

SvenGehring. SImple CSS Slider. [ONLINE] Available at: https://codepen.io/cybrox/pen/cyiJI. [Accessed 22 April 2019]

Tryit Editor v3.6. 2019. Tryit Editor v3.6. [ONLINE] Available at: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto. [Accessed 22 April 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 22 April 2019]

One of the main elements of the whole site was the navigation methods which would be used through the whole site as the design incorporated a burger menu design, another element of which I had never developed before and wanted to add to the design, allowing for the site to responsive and work on any device. As I had never worked on a burger menu before, a pure CSS burger menu was the desired option as it has been taking me a long time to learn and understand how to apply JavaScript, it might be easier to work on the burger menu using CSS.

To begin the development of the burger menu a large amount of research was put into how to create burger menus, not only the animation of the different lines but the animation of the navigation options coming across the screen. To understand this sites called sitepoint and sevenspark were used to underline the elements which needed to be included into the CSS of the burger menu, along with the layout of what the HTML should look like. Whilst researching into burger menus a pin on codePen was come accross, showing a burger menu which had been developed using only CSS. The code from this pin was taken into a brackets folder to look at the different elements and change them around to create a style which I was looking for. After looking through the code, the menu was changed from the left hand side to the right, along with changing the opacity, colours and options through the menu. The other elements which were changed on the menu were the font which has been used and finally the size of the menu pop up. Changing the size of the menu was the most challenging part of this section of development as I was having troubles defining which part of the code would change where the menu came out to and then which section took the menu away, but after much editing, the element the sizes were changed to allow for the menu to span across the whole of the screen.

After the burger menu had been created in a separate file, the code was then taken into the actual file of the website to see how it would work on the site. To begin with not all of the elements worked as some of the code which was already on the style sheet was clashing with the code which had been used on the navigation. To overcome this, all the variable names which had been used throughout the burger menu were changed and the code which was affecting the menu had their variable names changed as well, allowing for the menu to work alongside the other elements of the page. The final issue which was found with the navigation menu was that some of the elements on the page, including some images and the contact form were overlapping the menu as the user scrolled down the page, which was a massive issue. After researching into this, it was learnt that a z-index could be used to place content in front of other content, allowing for the navigation to be on a separate layer almost to all of the other elements on the page.

Overall the development of the burger menu has improved my skills within CSS and CSS animations along with connecting elements between HTML and CSS to develop separate moving objects which overlap others.

Bibliography:

How To Create a Menu Icon. 2019. How To Create a Menu Icon. [ONLINE] Available at: https://www.w3schools.com/howto/howto_css_menu_icon.asp. [Accessed 12 April 2019]

Jonathan Suh. 2019. Hamburgers by Jonathan Suh. [ONLINE] Available at: https://jonsuh.com/hamburgers/. [Accessed 12 April 2019]

Jelena Jovanovic. Pure CSS Sidebar Toggle Menu. [ONLINE] Available at: https://codepen.io/plavookac/pen/qomrMw. [Accessed 12 April 2019]

SevenSpark. 2019. Diagnosis: z-index (submenu hidden behind content) – UberMenu Troubleshooter Diagnosis. [ONLINE] Available at: https://sevenspark.com/diagnosis/z-index-submenu-hidden-behind-content. [Accessed 12 April 2019]

The SitePoint Forums. 2019. How Do I Bring The Dropdown Menu In Front Of Other Graphic? – HTML & CSS – The SitePoint Forums. [ONLINE] Available at: https://www.sitepoint.com/community/t/how-do-i-bring-the-dropdown-menu-in-front-of-other-graphic/5780. [Accessed 12 April 2019]

Through the design process of the website it was noticed that there would be a range of different elements which would need to be developed especially for the new portfolio. With the final wire frames being created, the separators which had been added into the wire frames needed to be created, along with the formatting of all the images that have been used in the site.

The first element to be developed were the red lines which were going to be used to divide the site into the different sections. Adobe illustrator was used to create these assets, with the pen tool and the fill option to create three sets of lines that are all different, as it would add more interest for the user. From here the different coloured backgrounds needed to be determined, allowing for each line to be the divider between colours, rather than having a straight line to differentiate between the different sections.

Once the separators had been developed, they were added to the site, with the next step being the development of the images and their formatting. The images which had been provided by the client were in the format of PDF, which would need to be changed to enable them to be displayed on the site. Each individual image was taken into Adobe Illustrator and then exported for websites as either a PNG or a JPEG file depending on the file, allowing for files with white space to still be seen on the web page. Whist working through formatting all of the images, three images were developed using an art board and then placing four images together, creating a trio of images which could be used on the slide show. These trio images were exported as PNG files, allowing for the space between the images to be transparent, so the background of the website can be seen behind.

Once all of the images had been exported to be suitable for the web, they were added onto the site and made responsive using their width styling to be 100%.

Bibliography:

Pinterest. 2019. Elementor Shape Divider – a fabulous new feature | Elementor drag and drop page builder plugin | Layout design, Web design tips, Interface design. [ONLINE] Available at: https://www.pinterest.co.uk/pin/213498838566731057/. [Accessed 3 April 2019]

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]