Ask a New Question
Menu

Now that you’ve learned how to make a basic web page using HTML and CSS, you’re going to get creative with your skills! For this activity, you will be making a web page with a tutorial explaining a favorite hobby, game, or process.

For an example, check out this tutorial of how to play a tambourine!

Your tutorial must include the following elements:

An informative title
A brief overall description of the hobby, skill, or process
At least two different headings
An ordered list to show the steps required, with a nested unordered list for at least one step (Remember what nested means? Think “a list within a list”)
A picture for each ordered list that demonstrates the corresponding part of the process
At least four CSS rules for the various elements on your web page
A caption under each picture that includes the source of the image
You will code your web page in CodeSandbox. When you’re finished, click on the Share button, and click the Copy Sandbox Link button. Submit the link to the dropbox.

1 answer

Here's a simple example of an HTML and CSS code snippet for a tutorial on "How to Play Guitar." You can replicate this structure in CodeSandbox according to your specifications.

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to Play Guitar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>How to Play Guitar</h1>
        <p>Learn the basics of playing the guitar, a popular instrument used in various music genres.</p>
    </header>

    <section>
        <h2>Step-by-Step Guide</h2>
        <ol>
            <li>Get Your Guitar
                <ul>
                    <li>Acoustic or Electric</li>
                    <li>Choose the Right Size</li>
                </ul>
                <img src="https://via.placeholder.com/200" alt="Get Your Guitar">
                <figcaption>Image Source: Placeholder Image</figcaption>
            </li>
            <li>Tune Your Guitar
                <img src="https://via.placeholder.com/200" alt="Tune Your Guitar">
                <figcaption>Image Source: Placeholder Image</figcaption>
            </li>
            <li>Learn Basic Chords
                <ul>
                    <li>C Major</li>
                    <li>G Major</li>
                    <li>D Major</li>
                </ul>
                <img src="https://via.placeholder.com/200" alt="Learn Basic Chords">
                <figcaption>Image Source: Placeholder Image</figcaption>
            </li>
            <li>Practice Strumming Patterns
                <img src="https://via.placeholder.com/200" alt="Practice Strumming Patterns">
                <figcaption>Image Source: Placeholder Image</figcaption>
            </li>
        </ol>
    </section>
</body>
</html>

CSS (styles.css)

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 0;
}

header {
    background: #6a5acd;
    color: white;
    padding: 20px;
    text-align: center;
}

h1 {
    font-size: 2.5em;
}

h2 {
    color: #333;
    padding: 10px 0;
}

ol {
    list-style-type: decimal;
    margin: 20px;
}

ul {
    list-style-type: disc;
    margin-left: 20px;
}

img {
    width: 200px;
    height: auto;
    border: 2px solid #333;
    margin: 10px 0;
}

Steps to Complete the Activity:

  1. Create a new sandbox in CodeSandbox.
  2. In your sandbox, create two files: index.html and styles.css.
  3. Copy and paste the HTML code into the index.html file.
  4. Copy and paste the CSS code into the styles.css file.
  5. Replace the placeholder image URLs with actual images that you want to use for the tutorial.
  6. Click the Share button in CodeSandbox and copy your sandbox link.
  7. Submit the link as required.

Feel free to modify the content to reflect your own favorite hobby, game, or process!