Module 4: Career Opportunities and Final Project
Looking for ‘Introduction to HTML, CSS, & JavaScript Module 4 Answers’?
In this post, I provide complete, accurate, and detailed explanations for the answers to Module 4: Career Opportunities and Final Project of Course 5: Introduction to HTML, CSS, & JavaScript – IBM AI Developer Professional Certificate .
Whether you’re preparing for quizzes or brushing up on your knowledge, these insights will help you master the concepts effectively. Let’s dive into the correct answers and detailed explanations for each question!
Peer-graded Assignment: Final Project: Submit Your Work and Review Your Peers
profile_name.png
<div class=”header”>
<h1 class=”name”>Devendra Kumar</h1>
</div>
<style>
.header {
position: absolute;
top: 20px;
left: 20px;
}
.name {
font-family: Arial, sans-serif;
font-size: 28px;
color: #1a73e8;
}
</style>
nav_bar.png
<nav class=”navbar”>
<ul>
<li><a href=”#about”>About</a></li>
<li><a href=”#projects”>Project details</a></li>
<li><a href=”#skills”>Skills</a></li>
<li><a href=”#recommendations”>Recommendations</a></li>
</ul>
</nav>
<style>
.navbar ul {
list-style: none;
display: flex;
gap: 20px;
}
.navbar li a {
text-decoration: none;
color: #333;
font-size: 18px;
}
.navbar li a:hover {
font-weight: bold;
text-decoration: underline;
color: #1a73e8;
}
</style>
aboutme.png
<section id=”about”>
<img src=”your-photo.jpg” alt=”Profile” class=”profile-pic”>
<h2>Devendra Kumar</h2>
<p>I am a passionate web developer with an interest in front-end design and interactivity.</p>
</section>
<style>
.profile-pic {
width: 120px;
border-radius: 50%;
}
</style>
skills.png
<section id=”skills”>
<h3>Skills</h3>
<div class=”skill”>
<img src=”html-logo.png” alt=”HTML”><span>HTML</span>
</div>
<div class=”skill”>
<img src=”css-logo.png” alt=”CSS”><span>CSS</span>
</div>
<div class=”skill”>
<img src=”js-logo.png” alt=”JavaScript”><span>JavaScript</span>
</div>
<div class=”skill”>
<img src=”react-logo.png” alt=”React”><span>React</span>
</div>
<div class=”skill”>
<img src=”git-logo.png” alt=”Git”><span>Git</span>
</div>
</section>
<style>
.skill {
display: flex;
align-items: center;
margin: 10px 0;
}
.skill img {
width: 30px;
margin-right: 10px;
}
</style>
projects.png
<section id=”projects”>
<h3>Projects</h3>
<ul>
<li>Portfolio Website – Personal site using HTML/CSS/JS</li>
<li>Weather App – Real-time weather with OpenWeather API</li>
<li>Task Manager – Todo app with local storage</li>
</ul>
</section>
recommendations.png
<section id=”recommendations”>
<h3>Recommendations</h3>
<ul id=”recList”>
<li>“Devendra is highly dedicated and skilled in front-end technologies.”</li>
<li>“A detail-oriented developer with strong JavaScript knowledge.”</li>
<li>“Great team player and fast learner!”</li>
</ul>
</section>
new_recommendation.png
<input type=”text” id=”newRec” placeholder=”Write a recommendation”>
<button onclick=”addRecommendation()”>Submit</button>
<script>
function addRecommendation() {
var text = document.getElementById(“newRec”).value;
if (text) {
var li = document.createElement(“li”);
li.innerText = text;
document.getElementById(“recList”).appendChild(li);
alert(“Thank you for leaving a recommendation!”);
}
}
</script>
home_icon.png
<a href=”#top”><img src=”home-icon.png” alt=”Home” style=”width:30px;”></a>
popup.png
Pop-up appears when you click Submit (as above in addRecommendation()).
Related contents:
Module 1: HTML Overview
Module 2: CSS Overview & HTML5 Elements
Module 3: JavaScript Programming for Web Applications
You might also like:
Course 1: Introduction to Software Engineering
Course 2: Introduction to Artificial Intelligence (AI)
Course 3: Generative AI: Introduction and Applications
Course 4: Generative AI: Prompt Engineering Basics
Course 6: Python for Data Science, AI & Development
Course 7: Developing AI Applications with Python and Flask
Course 8: Building Generative AI-Powered Applications with Python
Course 9: Generative AI: Elevate your Software Development Career
Course 10: Software Developer Career Guide and Interview Preparation