[Go to site: main page, start]
Scribd
Upload
2 views3 pages

Webdev Guide Code

The document is an HTML template for a website titled 'WebDev Guide', aimed at teaching web development from scratch. It includes sections for topics, latest tutorials, and recommended tools, with a responsive grid layout for content display. The design features a dark header and footer, a light background, and uses the 'Fira Code' font for a modern coding aesthetic.

Uploaded by

desmondsariki232
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views3 pages

Webdev Guide Code

The document is an HTML template for a website titled 'WebDev Guide', aimed at teaching web development from scratch. It includes sections for topics, latest tutorials, and recommended tools, with a responsive grid layout for content display. The design features a dark header and footer, a light background, and uses the 'Fira Code' font for a modern coding aesthetic.

Uploaded by

desmondsariki232
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WebDev Guide</title>
<link href="[Link]
rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Fira Code', monospace;
}
body {
background-color: #f8f9fa;
color: #333;
line-height: 1.6;
}
header {
background-color: #0d1117;
color: white;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
nav a {
color: white;
margin: 0 1rem;
text-decoration: none;
}
.hero {
background-color: #e9ecef;
padding: 4rem 2rem;
text-align: center;
}
.hero h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.topics, .articles, .tools {
padding: 2rem;
}
.section-title {
font-size: 1.8rem;
margin-bottom: 1rem;
text-align: center;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.card {
background: white;
border-radius: 8px;
padding: 1rem;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
footer {
background-color: #0d1117;
color: white;
text-align: center;
padding: 1rem;
margin-top: 2rem;
}
</style>
</head>
<body>
<header>
<h2>WebDev Guide</h2>
<nav>
<a href="#">Home</a>
<a href="#">Topics</a>
<a href="#">Tutorials</a>
<a href="#">Tools</a>
<a href="#">Contact</a>
</nav>
</header>

<section class="hero">
<h1>Learn Web Development from Scratch</h1>
<p>Your guide to front-end, back-end, and full-stack web development.</p>
</section>

<section class="topics">
<h2 class="section-title">Topics</h2>
<div class="grid">
<div class="card">Front-End</div>
<div class="card">Back-End</div>
<div class="card">Full-Stack</div>
<div class="card">Tools & Frameworks</div>
<div class="card">Deployment</div>
</div>
</section>

<section class="articles">
<h2 class="section-title">Latest Tutorials</h2>
<div class="grid">
<div class="card">HTML Basics for Beginners</div>
<div class="card">Deploy a Site on GitHub Pages</div>
<div class="card">Understanding APIs</div>
</div>
</section>
<section class="tools">
<h2 class="section-title">Recommended Tools</h2>
<div class="grid">
<div class="card">VS Code</div>
<div class="card">Git & GitHub</div>
<div class="card">Figma</div>
<div class="card">Chrome DevTools</div>
</div>
</section>

<footer>
<p>&copy; 2025 WebDev Guide. All rights reserved.</p>
</footer>
</body>
</html>

You might also like