Lecture Two Intermediate HTML CSS and JavaScript Building a Personal Portfolio
- Get link
- X
- Other Apps
JN
Mr John Njiraini
Lecturer in Computer Programming profile brief Mr John Njiraini teaches web technologies and practical coding
Slide
Slide description
Slides auto change every 4 seconds use controls to navigate
Lecture Two Intermediate HTML CSS and JavaScript Building a Personal Portfolio
Tip press space to pause or replay current section
Example semantic HTML Copy and test on CodePen
30
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Semantic HTML example</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h1>Welcome to my portfolio</h1>
<p>This is the home section</p>
</section>
<article id="about">
<h2>About me</h2>
<p>Short bio and experience</p>
</article>
</main>
<footer>
<p>© 2025 My Portfolio</p>
</footer>
</body>
</html>Example images lists and forms Copy and test on CodePen
30
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Images lists and forms</title>
</head>
<body>
<section>
<h2>Gallery</h2>
<ul>
<li><img src="https://via.placeholder.com/150" alt="placeholder"> Image One</li>
<li><img src="https://via.placeholder.com/150" alt="placeholder"> Image Two</li>
</ul>
</section>
<section>
<h2>Contact form</h2>
<form>
<label>Name<input type="text" name="name"></label><br>
<label>Email<input type="email" name="email"></label><br>
<label>Message<textarea name="message"></textarea></label><br>
<button type="submit">Send</button>
</form>
</section>
</body>
</html>Example CSS box model and flexbox Copy and test on CodePen
30
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox layout</title>
<style>
.row{ display:flex; gap:16px; align-items:flex-start; }
.card{ background:#fff; padding:16px; border-radius:8px; box-shadow:0 6px 18px rgba(15,23,42,0.06); flex:1; }
img{ max-width:100%; height:auto; display:block; }
</style>
</head>
<body>
<div class="row">
<div class="card"><h3>Column one</h3><p>Content here</p></div>
<div class="card"><h3>Column two</h3><p>More content</p></div>
<div class="card"><h3>Column three</h3><p>Even more content</p></div>
</div>
</body>
</html>Example Responsive CSS Copy and test on CodePen
30
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive example</title>
<style>
.container{ max-width:1100px; margin:0 auto; padding:16px; }
.grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; }
@media (max-width:800px){ .grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:520px){ .grid{ grid-template-columns: 1fr; } }
</style>
</head>
<body>
<div class="container">
<div class="grid">
<div class="card">Box 1</div>
<div class="card">Box 2</div>
<div class="card">Box 3</div>
</div>
</div>
</body>
</html>Example DOM manipulation Copy and test on CodePen
30
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM manipulation</title>
<style>
.badge{ display:inline-block; padding:6px 8px; background:#eee; border-radius:6px; margin-right:6px; }
</style>
</head>
<body>
<h1 id="greet">Hello</h1>
<input id="name" placeholder="Type your name">
<button id="btn">Update</button>
<div id="badges"></div>
<script>
document.getElementById('btn').addEventListener('click', function(){
const name = document.getElementById('name').value || 'Guest';
document.getElementById('greet').textContent = 'Hello ' + name;
const b = document.createElement('span');
b.className = 'badge';
b.textContent = 'Welcome ' + name;
document.getElementById('badges').appendChild(b);
});
</script>
</body>
</html>Mini Project Single Page Portfolio Copy and test on CodePen
30
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Personal Portfolio</title>
<style>
:root{ --accent:#d22323; --muted:#666; }
body{ font-family:Inter, Arial, sans-serif; margin:0; background:#f7f8fb; color:#111; }
.header{ background:#fff; padding:24px; text-align:center; box-shadow:0 6px 20px rgba(2,6,23,0.05); }
.hero{ max-width:980px; margin:28px auto; display:flex; gap:24px; align-items:center; padding:16px; }
.photo{ width:160px; height:160px; border-radius:8px; background:url("https://via.placeholder.com/160") center/cover no-repeat; }
.bio{ flex:1; }
h1{ margin:0 0 8px 0; color:var(--accent); }
.skills{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.skill{ background:#fff; padding:6px 8px; border-radius:6px; box-shadow:0 6px 12px rgba(15,23,42,0.04); }
.contact{ max-width:720px; margin:24px auto; background:#fff; padding:16px; border-radius:8px; box-shadow:0 6px 18px rgba(2,6,23,0.05); }
label{ display:block; margin-top:10px; }
input, textarea{ width:100%; padding:8px; border:1px solid #ddd; border-radius:6px; font-size:14px; }
button.submit{ margin-top:10px; background:var(--accent); color:#fff; border:0; padding:10px 14px; border-radius:8px; cursor:pointer; font-weight:700; }
@media (max-width:760px){ .hero{ flex-direction:column; align-items:flex-start } .photo{ width:120px; height:120px } }
</style>
</head>
<body>
<header class="header">
<h2>Personal Portfolio</h2>
</header>
<section class="hero">
<div class="photo"></div>
<div class="bio">
<h1>John Doe</h1>
<p>Front end developer building accessible responsive web experiences</p>
<div class="skills">
<span class="skill">HTML</span>
<span class="skill">CSS</span>
<span class="skill">JavaScript</span>
</div>
</div>
</section>
<section class="contact">
<h3>Contact</h3>
<form id="contactForm">
<label>Name<input name="name" required></label>
<label>Email<input type="email" name="email" required></label>
<label>Message<textarea name="message" rows="4" required></textarea></label>
<button class="submit" type="submit">Send Message</button>
</form>
<div id="thanks" style="display:none; margin-top:12px; color:var(--muted);">Thanks for your message We will be in touch</div>
</section>
<script>
document.getElementById('contactForm').addEventListener('submit', function(e){
e.preventDefault();
// simple simulated submit
document.getElementById('thanks').style.display = 'block';
this.reset();
});
</script>
</body>
</html>Copy each code block then paste into the CodePen editor you already have below this lecture Run and experiment for 30 seconds when prompted Then listen to my explanation
Mini CodePen Editor
- Get link
- X
- Other Apps
Comments