Keep Calm and Carry On Coding

Keep-Calm-And-Carry-On-CodingWhen your browser displays a webpage on screen it uses 3 different programming languages called HTML, CSS and JavaScript. We call the combination of these three languages “client-side web technologies”.

Each of the three language has its own syntax and purpose:

  • HTML uses <tags> and its purpose is to add content on the page such as text, pictures, and video clips.
  • CSS is used to customise the look and feel of the page by defining the position of each element on the page, defining the layout of the page as well as formatting text, pictures and other components on the page.
  • JavaScript is used to add user interaction to the page. JavaScript can be linked to HTML tags through various events such as the onClick event of a button.

Each of these languages are based on web standards defined by the World Wide Web Consortium W3C. As a consequence these languages are recognised by all the main web-browsers including Google Chrome, Microsoft Edge, Modzilla Firefox, Safari, etc. on various platforms (Windows, MacOs, Linux, Android etc.)

The Following codepen provides a clear demonstration of the syntax and purpose of HTML, CSS and JavaScript and shows how JavaScript can interact with various HTML tags.

On this codepen you can click the button located below the poster in order to change the text of the poster.

See the Pen dvvKLV by 101 Computing (@101Computing) on CodePen.

Your Challenge #1:


Add four more buttons to allow the user to change the background colour of the poster:

  • Blue Button: Change colour to: #3050D0
  • Yellow Button: Change colour to: #CEC110
  • Orange Button: Change colour to: #ED3300
  • Red Button: Change colour to: #DB0000

To do so you will need to:

  • Add some buttons below the poster
  • Ensure the <DIV> tag has an id attribute. e.g. id=”poster”
  • Create a new Javascript function called changeColour() and use the follwoing code
    document.getElementById("poster").style.backgroundColor = "#3050D0";

Your Challenge #2:


Add four more buttons to allow the icon used in the poster:

To do so you will need to:

  • Add some buttons below the poster
  • Ensure the <IMG> tag has an id attribute. e.g. id=”icon”
  • Create a new Javascript function called changeIcon() and use the follwoing code
    document.getElementById("icon").src = "https://www.101computing.net/wp/wp-content/uploads/html-icon.png";

Use your application to recreate the following three posters:


Keep-Calm-and-Learn-HTML
Keep-Calm-and-Learn-CSS
Keep-Calm-and-Learn-JavaScript

Did you like this challenge?

Click on a star to rate it!

Average rating 4.3 / 5. Vote count: 15

No votes so far! Be the first to rate this post.

As you found this challenge interesting...

Follow us on social media!

Tagged with: , ,