web-portfolio-template/index.html at main · FAUHSCoding/web-portfolio-template · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <h1>Welcome!</h1>
    <h3>This is a template for your portfolio website.</h3>

    <p>Before you get started, be sure to install the Live Preview extension in your
        code editor. This will allow you to see your changes in real-time as you edit
        your code. Hit (CTRL/CMD + SHIFT + X) to open the extensions panel, then search
        for "Live Preview" and install it.</p>

    <p>Once installed you can navigate back to the file explorer (CTRL/CMD + SHIFT + E),
        open this index.html file, right-click anywhere in the file, and select "Show Preview".
        A little window should appear on the side showing your webpage.
        Now, as you make changes to this file and save them, you should see the preview
        update automatically!</p>

    <!-- pro tip: press ALT + Z to toggle line wrapping -->

    <p>Typically, all the elements of your portfolio will be in the <code>&lt;body&gt;</code> section below.
        You can add sections like About Me, Projects, Contact Information, etc.
        Feel free to customize the HTML structure and add your own content!</p>

    <!-- there are all sorts of ways you can put text on your site -->

    <h1>super big text</h1>
    <h2>big text</h2>
    <h3>medium text</h3>
    <h4>small text</h4>
    <p>normal text</p>

    <p><strong>bold text</strong></p>
    <p><em>italic text</em></p>
    <p><a href="#">a link</a></p>

    <p>inline code: <code>&lt;div&gt;This is a div&lt;/div&gt;</code></p>
    <p>code block:</p>
    <pre>
        <code>
            function helloWorld() {
            console.log("Hello, world!");
            }
        </code>
    </pre>

    <button>click me!</button>

    <br><br><br><br> <!-- line breaks, useful to space things out -->

    <img src="https://www.fau.edu/university-communications/images/spirit-mark2.png" alt="Placeholder Image"
        style="max-width: 200px;">

    <p id="bruh"></p>

    <!-- the div is unassuming, but extremely useful. its a way you can segment and
     wrap stuff into neat boxes (or any other shape) -->

     <!-- vvv this here is an inline style, you can apply CSS to any element -->
    <div style="border: 2px solid black; padding: 10px; max-width: 300px;">
        <h2>This is a box</h2>
        <p>Boxes are useful for grouping related content together.</p>
    </div>


    <script src="script.js"></script>
</body>

</html>