session-notebook/index.html at master · DanielCyubahiro/session-notebook · 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
<!doctype html>

<!--
This page looks quite confusing.
It would be much better to use semantic HTML to structure this code.
Let’s fix this mess!
(Hints are provided below some elements to help you out.)
-->

<html lang="en">
  <head>
    <title>HTML Basics Excercise</title>
    <meta charset="UTF-8" />
  </head>
  <!-- Someone forgot to wrap the content of our webpage with an HTML element,
  which one was it again? -->
  <body>
    <header>
      <h1>Jane Doe</h1>
      <!-- Which elements could be used to link to parts of the webpage,
          which appear below? -->
      <ul id="nav">
        <li>About Me</li>
        <li>Contact</li>
        <li>Skillset</li>
      </ul>
    </header>
    <!-- Looks like the following part is the central content of our webpage. -->
    <main>
      <section id="about-me">
        <h3>About me</h3>
        <p>
          Hi there! Welcome to my personal website. Here is gathered the most
          important information about me. If you want to work with me or get to
          know me, please don't hesitate to get in contact.
        </p>
        <!-- What element could be used to combine an image with a descriptive caption? -->
        <section>
          <img
            src="https://source.unsplash.com/random/400x300?fruit"
            alt="a random picture"
          />
          <p>
            A random picture, because I would like to maintain my privacy and
            let my code speak for me, instead of images.
          </p>
        </section>
      </section>

      <section id="contact">
        <h3>Contact</h3>
        <!-- When clicking on these element, nothing happens! But I want to be redirected to the other websites. Why is it not working? -->
        <a href="https://github.com" target="_blank">GitHub</a>
        <a href="https://de.linkedin.com/" target="_blank">LinkedIn</a>
        <a href="https://codesandbox.io/" target="_blank">CodeSandbox</a>
      </section>

      <section id="skills">
        <h4>Skillset</h4>
        <!-- This part could use some bulletpoint to be more structured. -->
        <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
          <li>React</li>
          <li>Painting rainbows</li>
          <li>Party</li>
        </ul>
      </section>
    </main>
  </body>
</html>