HTML Workshop: CSS & JavaScript

Building on the first HTML workshop, this session introduced more complex uses of CSS, with animations, and some JavaScript to enable interaction.

I found setting up the index.html and style.css files relatively straightforward having done something similar in the previous workshop, and the script.js file worked similarly to the CSS file. In JavaScript, I created a function to change the background colour of the page when clicked.

With the CSS file, I changed the page background colour and text styling. Using a hover state, I animated the H1 text to increase in size on hover and change colour, and keyframes to make the body text slide in from the bottom when the page is first loaded.

The addition of JavaScript also enabled clicking the page background to change the page colour between blue and purple.

Posted on

in ,