FreeCodeCamp认证.

freeCodeCamp是一个非营利的开源编程学习平台和社区。它的一些主要特征包括:

  • 提供免费的在线编码课程,包括网页开发、数据科学、机器学习等方面的课程。课程实用且互动,采用项目驱动的学习方式。

  • 一个活跃的社区论坛,志愿者们可以在上面交流、求助和协作。

  • 通过完成课程可以获取谷歌、Amazon等认证,这对求职很有帮助。

  • 一个开源的代码基于GitHub,鼓励开发者做出贡献。

  • 一个501(c)(3)的非营利组织,由公众捐款和志愿者支持。

  • 课程项目致力于帮助非营利组织解决实际问题。

  • 帮助学员建立 portfolio,为求职做准备。

总之,freeCodeCamp是一个优秀的编程学习平台,它致力于通过编码帮助人们改变生活,是一个值得推荐的免费学习资源。

第一题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style> body {
            font-family: Arial, sans-serif;
        }

        form {
            max-width: 600px;
            margin: 0 auto;
        }

        label {
            display: block;
            margin-bottom: 8px;
        }

        input, select, textarea {
            width: 100%;
            padding: 8px;
            margin-bottom: 16px;
            box-sizing: border-box;
        }

        #submit {
            background-color: #4caf50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        #submit:hover {
            background-color: #45a049;
        } </style>
</head>
<body>

    <h1 id="title">Survey Form</h1>
    <p id="description">Please fill out the form below:</p>

    <form id="survey-form">
        <label for="name" id="name-label">Name:</label>
        <input type="text" id="name" placeholder="Enter your name" required>

        <label for="email" id="email-label">Email:</label>
        <input type="email" id="email" placeholder="Enter your email" required>

        <label for="number" id="number-label">Number:</label>
        <input type="number" id="number" placeholder="Enter a number" min="1" max="100">

        <label for="dropdown">Select an option:</label>
        <select id="dropdown">
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
        </select>

        <fieldset>
            <legend>Choose an option:</legend>
            <input type="radio" name="radioGroup" value="radio1"> Radio 1
            <input type="radio" name="radioGroup" value="radio2"> Radio 2
        </fieldset>

        <fieldset>
            <legend>Select multiple options:</legend>
            <input type="checkbox" value="checkbox1"> Checkbox 1
            <input type="checkbox" value="checkbox2"> Checkbox 2
        </fieldset>

        <label for="comments">Additional Comments:</label>
        <textarea id="comments" rows="4" placeholder="Enter your comments"></textarea>

        <button type="submit" id="submit">Submit</button>
    </form>

</body>
</html> 

第二题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style> body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #main {
            text-align: center;
            padding: 20px;
        }

        #title {
            font-size: 1.5em;
            margin-bottom: 10px;
        }

        #img-div {
            margin-top: 20px;
        }

        #image {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
        }

        #img-caption {
            margin-top: 10px;
        }

        #tribute-info {
            margin-top: 20px;
        }

        #tribute-link {
            display: block;
            margin-top: 20px;
            color: #007bff;
            text-decoration: none;
        } </style>
</head>
<body>

    <main id="main">
        <h1 id="title">Dr. Norman Borlaug</h1>

        <div id="img-div">
            <img id="image" src="image-url.jpg" alt="Dr. Norman Borlaug">
            <figcaption id="img-caption">Dr. Norman Borlaug</figcaption>
        </div>

        <div id="tribute-info">
            <p>Description of Dr. Norman Borlaug and his contributions...</p>
        </div>

        <a id="tribute-link" href="external-link" target="_blank">Learn more about Dr. Norman Borlaug</a>
    </main>

</body>
</html> 

第三题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style> body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    #navbar {
      position: fixed;
      left: 0;
      top: 0;
      background-color: #333;
      padding: 15px;
      width: 200px;
      height: 100vh;
      color: white;
    }

    #main-doc {
      margin-left: 220px;
      padding: 20px;
    }

    .main-section {
      margin-bottom: 40px;
    }

    .main-section header {
      font-size: 24px;
      font-weight: bold;
    }

    .nav-link {
      display: block;
      margin-bottom: 10px;
      text-decoration: none;
      color: white;
    }

    @media (max-width: 768px) {
      #navbar {
        width: 100%;
        position: static;
        text-align: center;
        padding: 15px 0;
        margin-bottom: 20px;
      }

      #main-doc {
        margin-left: 0;
      }
    } </style>
</head>
<body>
  <nav id="navbar">
    <header>Technical Documentation</header>
    <a class="nav-link" href="#Introduction">Introduction</a>
    <a class="nav-link" href="#JavaScript_and_Java">JavaScript and Java</a>
    <a class="nav-link" href="#HTML_and_HTML5">HTML and HTML5</a>
    <a class="nav-link" href="#CSS">CSS</a>
    <a class="nav-link" href="#Responsive_Design">Responsive Design</a>
  </nav>

  <div id="main-doc">
    <section id="Introduction" class="main-section">
      <header>Introduction</header>
      <!-- Content for Introduction section -->
    </section>

    <section id="JavaScript_and_Java" class="main-section">
      <header>JavaScript and Java</header>
      <!-- Content for JavaScript and Java section -->
    </section>

    <section id="HTML_and_HTML5" class="main-section">
      <header>HTML and HTML5</header>
      <!-- Content for HTML and HTML5 section -->
    </section>

    <section id="CSS" class="main-section">
      <header>CSS</header>
      <!-- Content for CSS section -->
    </section>

    <section id="Responsive_Design" class="main-section">
      <header>Responsive Design</header>
      <p></p><p></p><p></p><p></p><p></p>
      <p></p><p></p><p></p><p></p><p></p>
      <code></code><code></code><code></code>
      <code></code><code></code>
      <li></li><li></li><li></li>
      <li></li><li></li>
      <!-- Content for Responsive Design section -->
    </section>
  </div>
</body>
</html> 

第四题

<!DOCTYPE html>
<html>
<head>
  <title>产品登录页</title>

  <style> #header {
    display: flex;
    align-items: center; 
    position: fixed;
    top: 0; 
    left: 0;
    right: 0;
  }

  #header-img {
    height: 40px;
    margin: 0 24px;
  }

  #nav-bar {
    display: flex;    
    margin-left: auto; 
  }

  .nav-link {
    margin: 0 12px;
    cursor: pointer;
  }

  @media (max-width: 600px) {

    #nav-bar {
      flex-direction: column;
    }

    .nav-link {
      margin: 4px 0;
    }
  }  

  #video {
    margin: 60px 0;
  }

  #form {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 4px; 
  }

  #email {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
  }

  #submit {
    background-color: #007bff;
    color: #fff;
    padding: 10px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  } </style>

</head>

<body>

  <header id="header">
    <img id="header-img" src="logo.png" alt="Logo">

    <nav id="nav-bar">
      <a class="nav-link" href="#video">视频</a>
      <a class="nav-link" href="#form">登录</a>
      <a class="nav-link" href="#footer">联系我们</a>
    </nav>
  </header>

  <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

  <form id="form" action="https://www.freecodecamp.com/email-submit">
    <input id="email" type="email" name="email" placeholder="邮箱地址">
    <input id="submit" type="submit" value="登录">
  </form>

  <footer id="footer">
    <!-- 页脚 -->
  </footer>

</body>
</html> 

第五题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style> body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        #welcome-section {
            height: 100vh;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #projects {
            padding: 20px;
        }

        .project-tile {
            border: 1px solid #ccc;
            margin-bottom: 20px;
            padding: 10px;
        }

        #navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: #333;
            padding: 10px;
            color: #fff;
            text-align: center;
        }

        #profile-link {
            color: #007bff;
            text-decoration: none;
        }

        @media (max-width: 768px) {
            /* Add your responsive styles here */
        } </style>
</head>
<body>
    <div id="navbar">
        <a href="#welcome-section">Welcome</a>
        <a href="#projects">Projects</a>
    </div>

    <div id="welcome-section">
        <h1>Welcome to My Portfolio</h1>
    </div>

    <div id="projects">
        <div class="project-tile">
            <h2>Project 1</h2>
            <p>Description of Project 1</p>
            <a href="#">Project Link</a>
        </div>

        <!-- Add more project tiles as needed -->
    </div>

    <a id="profile-link" href="https://github.com/yourusername" target="_blank">Visit My GitHub Profile</a>
</body>
</html>