W3Schools Tryit Editor

# Set up the hello-world repository
git init -q
cat > index.html << 'EOF'
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link rel="stylesheet" href="bluestyle.css">
</head>
<body>

<h1>Hello world!</h1>
<p>This is the first file in my new Git Repo.</p>
<p>A new line in our file!</p>

</body>
</html>
EOF
echo "# hello-world" > README.md
echo "body {background-color: lightblue;}" > bluestyle.css
git add --all
git commit -q -m "First release of Hello World!"

# On the new branch, add an image (an empty file stands in for it) and a line in index.html
git checkout -q -b hello-world-images
touch img_hello_world.jpg
sed -i '/<h1>/a <div><img src="img_hello_world.jpg" alt="Hello World from Space"></div>' index.html
git add --all
git commit -q -m "Added image to Hello World"

# Go back to main
git checkout -q main

# Make an emergency fix on a new branch
git checkout -q -b emergency-fix
sed -i 's/A new line in our file!/This line is here to show how merging works./' index.html
git commit -q -am "updated index.html with emergency fix"

# Go back to main
git checkout -q main
git merge -q emergency-fix
git branch -q -d emergency-fix

# Back on hello-world-images, add another image and show it in index.html
git checkout -q hello-world-images
touch img_hello_git.jpg
sed -i '/A new line in our file!/a <div><img src="img_hello_git.jpg" alt="Hello Git"></div>' index.html
git add --all
git commit -q -m "added new image"

git checkout main
git merge hello-world-images