Skip to content
Critical Web Design Wiki

1.1 Hello, World!

Overview
Create a basic web page using Codepen.io.

Introduction to HTML, CSS, and JS

Section titled “Introduction to HTML, CSS, and JS”
Excerpt Exercise 1.1.1

HTML, CSS, and Javascript in a new codepen. Code playgrounds like https://codepen.io make it easy to test and share HTML, CSS, and Javascript in a “web environment.”

  1. In Chrome, go to https://codepen.io
  2. Click “Start Coding.” You will see an area where you can type HTML, CSS, and Javascript, as well as a preview window containing the outcome of your work.
  3. Type the following code into the HTML section. Codepen will automatically refresh the preview window to show your updates. HTML is the language that structures the content of web pages.
<h1>Hello, World!</h1>

HTML This diagram shows the structure of an HTML element, including the opening tag, content contained within, and the closing tag. Tags use predefined names between a less than and greater than sign.

  1. Type the following code into the CSS section. As you can see, CSS is the language that controls the presentation of web pages.
h1 {
  color: hotpink;
}
  1. Type the following code into the Javascript section. Javascript is the language used to control the behavior of web pages. You will need to click the console button to see the output from console.log().
console.log("Hello, World!");

  1. We will be using codepen.io throughout this book. Feel free to continue experimenting or look through their examples. It might also be a good idea to create a free account to save your work.

  2. Explore other examples to see the range of things one can do with a code playground.

    1. https://codepen.io/owenmundy/pen/QWzJKVz
    2. https://codepen.io/sfi0zy/pen/GRwEQjd
    3. https://codepen.io/Str3lla/pen/yLQLyzY
    4. https://codepen.io/isladjan/pen/abdyPBw
    5. https://codepen.io/tholman/pen/kvxQmA

Continue Exploring HTML

Section titled “Continue Exploring HTML”

HTML This diagram shows the required structure of an HTML document.

alt text An anchor tag with an href attribute. The attribute value can be wrapped in single or double quotes.

HTML The first line shows incorrect nesting (the <a> tag is closed before the <h2>). The second line shows the proper structure. The third shows how to use whitespace with nesting to make the code readable and easier to see if there are nesting problems.