Work Life Balance (HTML, CSS & JS Challenge)

When 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.

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

Your Challenge:

Add three more slider controls, each with a ranging from 0 to 255, to pick an RGB colour code and apply this colour code to the colour of the font used to display the text “Work Life Balance”. You will have to click in the top right corner (“Edit on CodePen”) to be able to tweak this code.

---