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. 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
Title: Mastering the Art of Paper Folding: Origami 101
Description: Origami is the traditional Japanese art of folding paper into various shapes and designs. In this tutorial, you will learn the basic steps to create a beautiful origami crane.
Headings:
1. Introduction to Origami
2. Required Materials
3. Step-by-Step Instructions
Ordered List:
1. Introduction to Origami
a. Begin with a square piece of paper
b. Origami is often used for decorative purposes
c. Origami helps improve hand-eye coordination
2. Required Materials
a. Square sheet of origami paper
b. Flat surface to work on
3. Step-by-Step Instructions
a. Fold the paper in half diagonally and unfold
- Holding the top corner, fold to the center
- Repeat with the other top corner
b. Fold the right corner towards the center
- Repeat with the left corner
c. Fold the bottom corner towards the top
- Repeat with the other bottom corner
d. Flip the paper over and fold the angled corners to the center
e. Fold the top corner downwards
- Rotate the paper and repeat with the other side
f. Unfold the flaps on the bottom and fold them upwards
- Tuck the flaps into the pocket created
g. Pull out the neck and tail of the crane to finish
Pictures:
1. Picture for Step 3a: Fold the paper in half diagonally and unfold
- Image source: www.example.com/fold-diagonal.png
2. Picture for Step 3d: Flip the paper over and fold the angled corners to the center
- Image source: www.example.com/fold-corners.png
CSS Rules:
1. Body {
font-family: Arial, sans-serif;
background-color: lightblue;
}
2. h1 {
color: navy;
text-align: center;
}
3. img {
width: 300px;
height: auto;
display: block;
margin: 0 auto;
}
4. caption {
font-style: italic;
text-align: center;
}
Captions:
1. Caption for Step 3a image: Folding the paper in half diagonally and unfolding.
2. Caption for Step 3d image: Flipping the paper over and folding the angled corners to the center.
Could you please do another example?
Title: The Art of Brewing the Perfect Cup of Coffee
Description: Brewing coffee is not just a morning routine, it's an art form. In this tutorial, you will learn the step-by-step process to brew a perfect cup of coffee using a pour-over method.
Headings:
1. Introduction to Brewing Coffee
2. Required Equipment and Ingredients
3. Step-by-Step Brewing Instructions
Ordered List:
1. Introduction to Brewing Coffee
a. Coffee is a popular beverage enjoyed worldwide
b. Brewing methods affect the flavor and aroma of the coffee
c. Pour-over brewing allows for control and precision in extraction
2. Required Equipment and Ingredients
a. Freshly roasted coffee beans
b. Burr grinder
c. Pour-over dripper
d. Paper coffee filter
e. Gooseneck kettle
f. Digital scale
g. Timer
h. Mug or carafe
3. Step-by-Step Brewing Instructions
a. Heat water to the desired temperature
- Pour hot water from the kettle into the gooseneck kettle
- Set the temperature to 195°F - 205°F (90°C - 96°C) for optimal extraction
b. Grind coffee beans to the desired coarseness
- Weigh the coffee beans
- Grind the beans using a burr grinder
c. Rinse the paper coffee filter
- Place the filter in the dripper and rinse it with hot water
- Discard the rinse water
d. Add ground coffee to the filter
- Place the filter with coffee grounds on a digital scale
- Set the desired coffee to water ratio (e.g., 1:16)
e. Bloom the coffee
- Start the timer and pour a small amount of water over the coffee grounds
- Allow it to bloom for 30 seconds
f. Pour the remaining water in a circular motion
- Slowly pour the rest of the water in a circular, spiraling motion
- Maintain a consistent flow rate and avoid pouring too close to the edges
g. Allow the coffee to drip and enjoy
- Once the water passes through the filter, remove the dripper
- Serve the brewed coffee into a mug or carafe
h. Clean and maintain the equipment for future use
Pictures:
1. Picture for Step 3c: Rinsing the paper coffee filter
- Image source: www.example.com/rinse-filter.png
2. Picture for Step 3f: Pouring the remaining water in a circular motion
- Image source: www.example.com/pour-water.png
CSS Rules:
1. Body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
2. h1 {
color: #333;
text-align: center;
}
3. img {
width: 400px;
height: auto;
display: block;
margin: 0 auto;
}
4. caption {
font-style: italic;
text-align: center;
}
Captions:
1. Caption for Step 3c image: Rinsing the paper coffee filter to remove any residual taste.
2. Caption for Step 3f image: Pouring the remaining water in a circular motion to ensure even saturation of the coffee grounds.
Could you do an example revolving around a game?
Title: Mastering Chess: A Strategic Battle of Minds
Description: Chess is a timeless game that challenges players to think strategically and plan their moves carefully. In this tutorial, you will learn the fundamental rules and strategies to become a competent chess player.
Headings:
1. Introduction to Chess
2. Setting Up the Chessboard
3. Basic Rules of Chess
4. Essential Chess Strategies
Ordered List:
1. Introduction to Chess
a. Chess is a two-player board game played on a square board
b. The objective of the game is to checkmate the opponent's king
c. Chess requires logical thinking, foresight, and adaptability
2. Setting Up the Chessboard
a. Place the chessboard between the players
b. Each player starts with 16 pieces: 1 king, 1 queen, 2 rooks, 2 knights, 2 bishops, and 8 pawns
c. Position the pieces correctly on their respective starting squares
3. Basic Rules of Chess
a. The pieces move in specific ways
- Pawns move forward, capture diagonally, and promote upon reaching the opponent's back rank
- Rooks move horizontally or vertically
- Knights move in an L-shape
- Bishops move diagonally
- Queen moves in any direction
- King moves one square in any direction
b. Special moves include castling and en passant
c. Check, checkmate, and stalemate are crucial concepts
4. Essential Chess Strategies
a. Control the center of the board
b. Develop your pieces to active squares
c. Protect your king and avoid unnecessary risks
d. Plan ahead and consider potential moves by your opponent
Pictures:
1. Picture for Step 2: Setting Up the Chessboard
- Image source: www.example.com/chessboard-setup.png
2. Picture for Step 3a: Movement of Chess Pieces
- Image source: www.example.com/chess-pieces-movement.png
CSS Rules:
1. Body {
font-family: Arial, sans-serif;
background-color: #fff;
}
2. h1 {
color: #333;
text-align: center;
}
3. img {
width: 400px;
height: auto;
display: block;
margin: 0 auto;
}
4. caption {
font-style: italic;
text-align: center;
}
Captions:
1. Caption for Step 2 image: Correctly setting up the chessboard before starting the game.
2. Caption for Step 3a image: Understanding the movement rules of each chess piece.