Intro to Web Development

This course will guide you through creating your first website.


Every website you visit is built using three core technologies that work together:

  1. HTML: The Structure

    • HTML (HyperText Markup Language) is the skeleton of every webpage. It provides the structure and content.

  2. CSS: The Style

    • CSS (Cascading Style Sheets) makes websites look good. It controls the visual presentation.

  3. JavaScript: The Behavior

    • JavaScript adds interactivity and dynamic features to websites.

How They Work Together

If you wanted to put a button on your website:

HTML creates the button:

<button class="my-button" id="myButton">Click this Button!</button>

CSS changes how the button looks visually:

.my-button {
  background-color: green;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

JavaScript makes the button actually do something when is it clicked:

document.getElementById('myButton').onclick = function() {
  alert('Hello World!');
};

Setup

To practice building webpages, you can use the HTML playgroud built into this website. You can also run it from your own computer, with very little setup needed:

  1. Open a text editor
  2. Create a new file called index.html (or any other name you want)
  3. Type this code:
    <!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>I made this webpage myself.</p>
</body>
</html>
  4. Save the file and open it in your browser. This can be as easy as just right clicking and selecting "open with..." or just double clicking the file.

You are now ready to move on to HTML basics!