HTML SVG Basics Introduction to SVG SVGs as Images

Immanuel Jaeggi
Immanuel Jaeggi
5,164 Points

html file not shown in Workspace

in this SVG video, I can`t work along with the html file, since it is absent. It only shows SVG Basics. Here is the link:

https://teamtreehouse.com/library/svg-basics/introduction-to-svg/svgs-as-images

Please help txs.

1 Answer

shashi7
shashi7
11,031 Points

I came here to post the same question but looks like lots of people already complaining about the same. Yes, No files in the workspace but I managed to find the workaround files by just looking at the video and copy the code. Here are the required files to follow along the code: index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scalable Vector Graphics</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/normalize.css">
</head>
<body>
    <h1>SVG Example</h1>

    <div class="wrapper">

    </div>
</body>

</html>

main.css

body {
    font-family: 'Nunito', sans-serif;
    color: #384047;
}


h1, h2 {
    margin: 30px 0;
    text-align: center;
}

.wrapper {
    max-width: 90%;
    margin: 10px auto;
    padding: 10px 20px;
    background: #f4f7f8;
    border-radius: 8px;
}

normalize.css (https://necolas.github.io/normalize.css/8.0.0/normalize.css)

and finally...... Just change the filename from HTML-SVG.svg("Downloaded zip file") to star.svg

Good Luck all.