Beginner-Level HTML and CSS Projects for Web Development Practice

1. Personal Portfolio Website

Description:

A personal portfolio website is essential for showcasing your professional profile. It should include your bio, skills, projects, and contact details with interactive CSS animations.

Code:

html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Personal Portfolio</title>

    <style>
        body {
            font-family: Arial, sans-serif; 
margin: 0;
            padding: 0;
            background-color: #f4f4f4;
 }
        header {
            background: linear-gradient(45deg, #6a11cb, #2575fc);
color: white;
            padding: 20px; 
text-align: center;
 }
        section {
            padding: 20px;
 }
        .skills, .projects, .contact {
            margin: 20px auto; 
max-width: 800px;
 }
        .skills ul, .projects ul {
            list-style: none;
padding: 0;
 }
        ul li {
            background: #fff;
margin: 10px 0;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
        a {
            color: #2575fc;
            text-decoration: none;
 }
        footer {
            text-align: center;
background: #333;
color: white;
            padding: 10px 0;
position: fixed;
            bottom: 0;
            width: 100%;
 }
</style>

</head> 
<body>

    <header>

        <h1>Shiba Khan</h1>

        <p>Web Developer | Tech Enthusiast</p>
    </header>
    <section class="bio"> 
<h2>About Me</h2>
        <p>Hello! I'm a passionate web developer specializing in creating elegant and efficient web solutions.</p>
    </section> 
<section class="skills">
        <h2>Skills</h2> 
<ul>
            <li>HTML</li> 
<li>CSS</li>
            <li>JavaScript</li> 
</ul>
    </section> 
<section class="projects">

        <h2>Projects</h2>
        <ul>
            <li>
<a href="#">Project 1</a>
</li>
            <li>
<a href="#">Project 2</a></li> 
<li><a href="#">Project 3</a></li>

        </ul>
    </section>
    <section class="contact"> 
<h2>Contact</h2>
        <p>Email: shiba8922@gmail.com</p> 
<p>Phone: +91-123-456-7890</p>

    </section>
    <footer>

        <p>&copy; 2024 Shiba Khan</p> 
</footer>
</body>
</html>

Key Points:

CSS animations can be added for hover effects.
This layout uses a clean and responsive structure.

2. Landing Page

Description:

A landing page for a fictional product or service should include a call-to-action button, a hero image, and a responsive layout.

Code:

html
<!DOCTYPE html>

<html lang="en">

<head> 
<meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Landing Page</title> 
<style>
        body 
{
            margin: 0;
            font-family: Arial, sans-serif;
color: #333; 
 }
        header {
            background: url('https://via.placeholder.com/1200x400') no-repeat center/cover;
color: white; 
height: 300px; 
display: flex; 
justify-content: center; 
align-items: center; 
text-align: center; 
 }
        header h1 {
            font-size: 2.5rem;
 }
        main {
            padding: 20px;
 }
        .cta {
            display: block; 
background: #2575fc; 
color: white;
text-align: center;
padding: 10px;
border-radius: 5px;
text-decoration: none; 
width: 200px; 
margin: 20px auto;
 }
        footer {
            text-align: center; 
background: #333;
color: white;
padding: 10px 0;
 }
    </style> 
</head>
<body> 
<header>
        <h1>Fictional Product</h1>

    </header>
    <main>

        <p>Our fictional product offers incredible features to make your life easier. Experience innovation like never before!</p> 
<a href="#" class="cta">Learn More</a> 
</main>
    <footer> 
<p>&copy; 2024 Fictional Product Co.</p>

    </footer>
</body> 
</html>

3. Restaurant Website

Description:

A restaurant website should have a menu section, contact form, and location map.

Code:

html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Restaurant</title>

    <style>
        body {
            font-family: Arial, sans-serif;
margin: 0;
padding: 0; 
 }
        header {
            background: darkred; 
color: white; 
padding: 10px;
text-align: center;
 }
        .menu {
            padding: 20px;
 }
        .menu ul {
            list-style: none; 
padding: 0;
        }
        .menu ul li {
            margin: 10px 0;
padding: 10px;
border-bottom: 1px solid #ccc;
 }
        .contact {
            padding: 20px;
 }
        iframe {
            width: 100%; 
height: 300px; 
border: none;
 }
    </style>
</head>

<body>

    <header> 
<h1>Welcome to Our Restaurant</h1> 
</header>
    <section class="menu"> 
<h2>Menu</h2>
        <ul>
            <li>Pizza - $10</li> 
<li>Pasta - $8</li>
            <li>Salad - $5</li>

        </ul>

    </section>
    <section class="contact">

        <h2>Find Us</h2>
        <p>123 Main Street, Food City</p>

        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12"></iframe> 
</section>
</body>
</html>

4. Photo Gallery

Description:

Create a responsive photo gallery to display images in a grid or flexbox layout. Add hover effects for interactivity.

Code:

html
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Photo Gallery</title>
    <style>
        body { 
font-family: Arial, sans-serif;
margin: 0;
            padding: 0;
            background-color: #f4f4f4;
 }
        header {
            text-align: center; 
padding: 20px;
            background: #333;
color: white;
 }
        .gallery {
            display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
padding: 20px;
 }
        .gallery img {
            width: 100%; 
border-radius: 8px; 
transition: transform 0.3s ease;
 }
        .gallery img:hover {
            transform: scale(1.1);
 } 
</style>
</head>
<body>
    <header> 
<h1>Photo Gallery</h1>

    </header> 
<section class="gallery"> 
<img src="https://via.placeholder.com/200" alt="Sample Image">

        <img src="https://via.placeholder.com/200" alt="Sample Image">

        <img src="https://via.placeholder.com/200" alt="Sample Image">
        <img src="https://via.placeholder.com/200" alt="Sample Image"> 
<img src="https://via.placeholder.com/200" alt="Sample Image"> 
<img src="https://via.placeholder.com/200" alt="Sample Image"> 
</section>
</body>
</html>

5. Simple Survey Form

Description:

Build a clean and simple survey form to collect user input. Add basic form validation and style it for better usability.

Code:

html
<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Survey Form</title> 
<style>
        body {
            font-family: Arial, sans-serif; 
margin: 0;
            padding: 0;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center; 
height: 100vh;
 }
        form {
            background: white;
padding: 20px; 
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
width: 300px; 
 }
        h1 {
            text-align: center;
margin-bottom: 20px;
 }
        label {
            display: block;
margin: 10px 0 5px;
 }
        input, select, textarea {
            width: 100%; 
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ccc; 
border-radius: 4px;
 }
        button {
            width: 100%; 
padding: 10px; 
background: #2575fc; 
color: white;
border: none;
border-radius: 4px; 
cursor: pointer;
 }
        button:hover {
            background: #0e63d0;
        } 
</style>
</head>
<body> 
<form action="#" method="POST">
        <h1>Survey Form</h1> 
<label for="name">Name:</label>
        <input type="text" id="name" name="name" placeholder="Your Name" required>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" placeholder="Your Email" required>

        <label for="age">Age:</label>
        <input type="number" id="age" name="age" placeholder="Your Age" required> 
<label for="gender">Gender:</label>
        <select id="gender" name="gender">

            <option value="male">Male</option> 
<option value="female">Female</option> 
<option value="other">Other</option> 
</select>
        <label for="feedback">Feedback:</label> 
<textarea id="feedback" name="feedback" rows="4" placeholder="Your Feedback"></textarea> 
<button type="submit">Submit</button> 
</form>
</body>
</html>

winscoder

Search This Blog