Project Exercise — Build a Technical Documentation Page

发表于 更新于 分类于 ， ， ， 本文字数： 6.9k 阅读时长 ≈ 6 分钟

freeCodeCamp —- Responsive Web Dedign

Build a Technical Documentation Page —— Test
Objective:

Build an app that is functionally similar to https://technical-documentation-page.freecodecamp.rocks

User Stories:
  1. You can see a main element with a corresponding id="main-doc", which contains the page’s main content (technical documentation)
  2. Within the #main-doc element, you can see several section elements, each with a class of main-section. There should be a minimum of five
  3. The first element within each .main-section should be a header element, which contains text that describes the topic of that section.
  4. Each section element with the class of main-section should also have an id that corresponds with the text of each header contained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header “JavaScript and Java” should have a corresponding id="JavaScript_and_Java")
  5. The .main-section elements should contain at least ten p elements total (not each)
  6. The .main-section elements should contain at least five code elements total (not each)
  7. The .main-section elements should contain at least five li items total (not each)
  8. You can see a nav element with a corresponding id="navbar"
  9. The navbar element should contain one header element which contains text that describes the topic of the technical documentation
  10. Additionally, the navbar should contain link (a) elements with the class of nav-link. There should be one for every element with the class main-section
  11. The header element in the #navbar must come before any link (a) elements in the navbar
  12. Each element with the class of nav-link should contain text that corresponds to the header text within each section (e.g. if you have a “Hello world” section/header, your navbar should have an element which contains the text “Hello world”)
  13. When you click on a navbar element, the page should navigate to the corresponding section of the #main-doc element (e.g. If you click on a .nav-link element that contains the text “Hello world”, the page navigates to a section element with that id, and contains the corresponding header)
  14. On regular sized devices (laptops, desktops), the element with id="navbar" should be shown on the left side of the screen and should always be visible to the user
  15. Your technical documentation should use at least one media query

Note: Be sure to add <link rel="stylesheet" href="styles.css"> in your HTML to link your stylesheet and apply your CSS

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
77
78
79
80
81
<!DOCTYPE html >
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <nav id="navbar">
      <header>Js</header>
      <ul>
        <li>
          <a class="nav-link" href="#Introduction">Introduction</a>
        </li>
        <li>
          <a class="nav-link" href="#What_you_should_already_know">What you should already know</a>
        </li>
        <li>
          <a class="nav-link" href="#JavaScript_and_Java">JavaScript and Java</a>
        </li>
        <li>
          <a class="nav-link" href="#Hello_world">Hello world</a>
        </li>
        <li>
          <a class="nav-link" href="#Declaring_variables">Declaring variables</a>
        </li>
      <ul>
    </nav>
    <main id="main-doc">
      <section class="main-section" id="Introduction">
        <header>Introduction</header>
        <article>
          <p>JavaScript 是一种跨平台、面向对象的脚本语言。 它是一种小巧轻量级的语言。在主机环境中 （例如，Web浏览器），JavaScript可以连接到 其环境的对象，以提供对 他们。</p>
          <p>JavaScript 包含一个标准的对象库，例如 Array、 日期和数学，以及一组核心语言元素，例如 运算符、控制结构和语句。核心JavaScript可以 通过补充它来扩展各种目的 附加对象;例如：</p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
        </article>
      </section>
      <section class="main-section" id= "What_you_should_already_know">
        <header>What you should already know</header>
        <article>
          <ul>
            <li>对互联网和万维网的一般了解 （万维网）。</li>
            <li>对互联网和万维网的一般了解 （万维网）。</li>
            <li>对互联网和万维网的一般了解 （万维网）。</li>
            <li>对互联网和万维网的一般了解 （万维网）。</li>
            <li>对互联网和万维网的一般了解 （万维网）。</li>
            <li>对互联网和万维网的一般了解 （万维网）。</li>
            <li>对互联网和万维网的一般了解 （万维网）。</li>
          <ul>
        </article>
      </section>
      <section class="main-section" id="JavaScript_and_Java">
        <header>JavaScript and Java</header>
      </section>
      <section class="main-section" id="Hello_world">
        <header>Hello world</header>
        <article>
          <p>
            <font></font>
            <code>"function greetMe(yourName) { alert("Hello " + yourName); } greetMe("World"); "
            </code>
          </p>
          <code>
          </code>
          <code>var x = 32;</code>
          <code></code>
          <code></code>
          <code></code>
        </article>
      </section>
      <section class="main-section" id="Declaring_variables">
        <header>Declaring variables</header>
      </section>
    </main>
  </body>
</html>
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
html,
body {
  min-width: 290px;
  color: #4d4e53;
  background-color: #ffffff;
  font-family: 'Open Sans', Arial, sans-serif;
  line-height: 1.5;
}

#navbar {
  position: fixed;
  min-width: 290px;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 100%;
  border-right: solid;
  border-color: rgba(0, 22, 22, 0.4);
}

header {
  color: black;
  margin: 10px;
  text-align: center;
  font-size: 1.8em;
  font-weight: thin;
}

#main-doc header {
  text-align: left;
  margin: 0px;
}

#navbar ul {
  height: 88%;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

#navbar li {
  color: #4d4e53;
  border-top: 1px solid;
  list-style: none;
  position: relative;
  width: 100%;
}

#navbar a {
  display: block;
  padding: 10px 30px;
  color: #4d4e53;
  text-decoration: none;
  cursor: pointer;
}

#main-doc {
  position: absolute;
  margin-left: 310px;
  padding: 20px;
  margin-bottom: 110px;
}

section article {
  color: #4d4e53;
  margin: 15px;
  font-size: 0.96em;
}

section li {
  margin: 15px 0px 0px 20px;
}

code {
  display: block;
  text-align: left;
  white-space: pre-line;
  position: relative;
  word-break: normal;
  word-wrap: normal;
  line-height: 2;
  background-color: #f7f7f7;
  padding: 15px;
  margin: 10px;
  border-radius: 5px;
}

@media only screen and (max-width: 815px) {
  /* For mobile phones: */
  #navbar ul {
    border: 1px solid;
    height: 207px;
  }

  #navbar {
    background-color: white;
    position: absolute;
    top: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    max-height: 275px;
    border: none;
    z-index: 1;
    border-bottom: 2px solid;
  }

  #main-doc {
    position: relative;
    margin-left: 0px;
    margin-top: 270px;
  }
}

@media only screen and (max-width: 400px) {
  #main-doc {
    margin-left: -10px;
  }

  code {
    margin-left: -20px;
    width: 100%;
    padding: 15px;
    padding-left: 10px;
    padding-right: 45px;
    min-width: 233px;
  }
}