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>
