Skip to content

Reference Hub & Code Library

This page functions as a living repository of your clean production code files and essential development documentation shortcuts.

Complete Practice Project Files

🏠 1. index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coding Practice</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>  
    </header>

    <h1>MY WEBPAGE</h1>
    <h2 class="sub_heading">This is h2</h2>
    <h3>h3</h3>
    <h4>hello</h4>
    <h5>helloooo</h5>
    <h6>woah</h6>

    <div class="containers">
        <h2 class="sub_heading">What are divs?</h2>
        <h5>Divs are used as containers for other html elements and help us divide our pages into sections</h5>
    </div>

    <div class="box">Box 1</div>
    <div class="box">Box 2</div>

    <section>
        <h2>This is heading2 size</h2>
        <p>This is normal sized paragraph</p><br>
        <i id="italic">This is italic</i><br>
        <em>This is emphasized text</em><br>
        <strong>THis element uses a bolder or stronger text</strong><br>
        <b>This is bold text</b>
    </section>

    <a href="[https://amazon.com](https://amazon.com)">Go shopping</a>
    <a href="about.html">About</a>
    <img src="[https://th.bing.com/th/id/OIP.YEZqoxnfYxL_Eqd565eWdwHaQC?w=161&h=349&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3](https://th.bing.com/th/id/OIP.YEZqoxnfYxL_Eqd565eWdwHaQC?w=161&h=349&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3)" alt="Cloud" class="circleImg">

    <a href="[https://www.bing.com/images/search?q=aesthetic+wallpaper&form=HDRSC3&first=1](https://www.bing.com/images/search?q=aesthetic+wallpaper&form=HDRSC3&first=1)">
        <img src="Clouds1.jpg" alt="clouds" class="circleImg">
    </a>
</body>
</html>

🎨 2. style.css

h1 {
    font-size: 2.5em;
    color: rgb(4, 28, 85);
    text-align: center;
    margin-bottom: 20px;
}

.sub_heading {
    font-size: 2em;
    color: rgb(9, 4, 49);
    text-align: left;
    margin-bottom: 15px;
}

h2 {
    font-size: 2em;
    color: rgb(113, 161, 211);
    margin-bottom: 15px;
    text-align: center;
}

#italic {
    font-style: italic;
    color: rgba(49, 12, 88, 0.57);
}

.containers {
    color: rgb(10, 70, 30);
    border: 10px solid rgb(36, 103, 105);
    margin: 50px 100px;
    padding: 20px 10px;
    font-size: 1.8em;
    text-align: center;
    background-color: rgb(142, 158, 158);
}

.box {
    width: 200px;
    height: 50px;
    background: rgb(151, 144, 144);
    margin: 10px 0px;
    padding: 15px;
    display: inline-block;
    text-align: center;
    font-size: 1.2em;
}

nav {
    background-color: rgb(186, 204, 226);
    text-align: center;
    padding: 0;
}

a {
    margin: 20px;
    text-decoration: none;
    color: rgb(12, 42, 99);
    font-size: 1.2em;
}

nav ul {
    list-style-type: none;
}

nav ul li {
    display: inline-block;
    margin-right: 10px;
    padding: 5px;
}

.circleImg {
    width: 200px;
    height: 200px;
    border-radius: 50%; /* Softens sharp edges to shape clean circles */
    object-fit: cover;
    display: block;
    margin: 20px auto;
    box-shadow: 20px 20px 30px rgba(15, 13, 38, 0.5); /* Imparts a subtle 3D appearance */
}

CSS Styling Reference Cheatsheet

a {
    text-decoration: none; /* Strip off underline style defaults from link elements */
}

img {
    border-radius: 20%; /* Rounds sharp edge borders slightly inward */
}

  • box-shadow Syntax: box-shadow: [horizontal offset] [vertical offset] [blur radius] [color];

  • SEO Rule: Make sure you expand your site description right inside your HTML head element to boost optimization signals on web searches:

<meta name="description" content="Add informative web summary snippets directly here">