In order to creative interactive elements within a website; we need to know how to use HTML and CSS correctly. These further enhance our sites by developing scripts where appropriate. After learning about HTML previously, we know that we use this widget in order to add style sheets and script.
The first individual task was to make some web links that allow us to change the colour of text. For this example, we were given the code, it was just a case of getting used to adding the widget and the style guides. After adding the code into the HTML widget, it was clear to see that this had copied over to the site and was successful
The next task was something similar to the previous project but we had slightly more steps than just copying and pasting the code. We were given the codepen code using the following link (https://codepen.io/hw/pen/KKRzra) and began by creating a ‘<style>’ tag. We then pasted the CSS from the site and wrapped this style tag with ‘</style>’. Once this was added into the HTML widget, it was a case of adding the following text file underneath the script. This allowed us to successfully import an image carousel slider through code.
The next task was a more creative one with a lot more freedom. We had to use the site previously mentioned – codepen – to choose an example of an interactive element to attempt to embed into our elementor page. I wanted to look at an example that could be linked in the future to my final portfolio and could influence my campaign design. The one I chose was a 3-dimensional login design with an animated button. The code was very simple; I began by importing the CSS code into the HTML widget. After closing this with ‘</style>’, I moved on to adding in the HTML code underneath. This then imported the interactive element into the site which allowed the login screen to appear. The importing of the code was successful which you can see in the video below.
The final, main task from the session was to choose 5 Google Chrome Experiments that we could potentially use in a template web design. Google Chrome Experiments showcases the work by coders who are pushing the boundaries of technology which provide us with unique web experiences. The first example I chose was named ‘Virtual Crosswords’ by Romain Cazier. This experiment is a fun and interactive way to explore content from multiple Google art and culture categories. After you get the right answer on a clue, it enables you to discover more by introducing articles etc. If I was to include this on a campaigning website, it would act as an informative yet interactive way to introduce different topics about the issue. The coding is quite complicated therefore I would introduce the feature through app form which is available too. Below is a video recording of me using the experiment.
The second experiment I chose was ScreenHive which is also a Chrome app alongside some coding. I found this under the ‘Digital Wellbeing’ collection which pretty much explains itself. It consists of a display timer which demonstrates the prolonged period you have been using your phone for. This is a great addition to combat the current digital issue of increased amounts of screen time. A great quote from the description explains “watching the seconds tick acts as a constant reminder to use time in the most productive way.” If this was to be included into a site page, I think it would be a great way of promoting a campaign about reducing screen time especially within children and the upcoming generation. This would be great promotion for the app if they contacted certain campaigns to gain a wider audience. Personally, I have downloaded this app to help record and reduce my phone screen time focusing exclusively on useless apps. I have some screenshots from the app preview and a YouTube video exploring how this works.
The third Google Chrome Experiment I wanted to analyse is ‘sketch of three.js’. This experiment explores interactive sketches which add more creative elements into sites. The entire observation has multiple different options and images to choose from which allows a variety of elements to be used. The imagery is extremely artistic and could be added to anywhere on a page to explore campaigns. My favourite example is called ‘easy glitch’ which demonstrates the typography Practice Makes Perfect. This obviously uses a glitch effect relating to the obvious title of the experiment. The target audience is drawn in to these moving images and makes the entire page stand out. The ideal campaign for the use of these would be anything technological or making the viewer’s cyber-aware.

The next Chrome Experiment I chose to explore was Artfolio Art Gallery. This is essentially a virtual art gallery where creators can display their art online in a 3D gallery to demonstrate their work in a creative way to viewers. Personally, I think this is a unique way to show a creator’s portfolio and how this will envelope through an interactive way. This would not be an effective campaign element but would mainly see this through personal blogs who want to display their work in a way that employers may not have seen before. The coding is simple and can be easily added through the HTML widget on elementor. This could be an effective way for graduate students to share their final portfolios with the online world and would advantage their creative essence for employers to see.

The fifth and final Google Experiment I want to look at is Hopper the Penguin Explorer. It is an interactive element that allows a user to travel the world with a penguin guide. An added feature is being able to explore the route travelled from the map of the journey and can also be used in a variety of situations. My initial thought was to use this interactive map conjoined with a global warming campaign; it would allow the audience the view the ice caps and see realistically what is happening to the Earth without be able to physically be there. This could also be a cultural and fun way for children to learn about the globe and different countries in a way that would entertain them with Hopper showing them facts. There are numerous situations and site designs this could be used in and I like the variety of this Google Chrome Experiment.
Google Chrome experiments are a great way add a creative effect into a plain site and I will certainly be looking at including a few of these when it comes to building my campaign portfolio site.