How I Developed This Website

This page explains the HTML and CSS I used to build PHSYC'S CAGE.

This is my assasmenet 1's 2nd page (webdev1)progress list. with the help of w3school and inspiration from other's web preview i wanted to make a dark themed page called Phsyc's Cage I am still trying to learn more tags but for this website I searched for css layouts than i found this css lydout with dark theme than i emplemented extra css with the help of my friend in this website i tried to use basic and easy to understand and learn html and css . I first day I didn't know how to make a text button than i learnt it from w3 school .i visiit website and asked Gen ai "what is this explain me"after some days of knoledge gatharing I came to know about more css code like (btn,footer,btn animation then i emplemented those in my website

HTML Tags I Used

<header>

I used the header tag to create the top navigation bar of the website. It contains the logo, the site title, and all the menu links.

<section>

Sections helped me divide the webpage into different parts such as the banner, about area, cage selection, and the footer. It keeps the layout organized.

<div>

I used div tags as containers for grouping content together, such as images, text blocks, items inside the cage selection, and layout structures.

<img>

The img tag was used to display images for the cages and the profile picture in the navigation bar.

<a>

Anchor tags were used to create links — for navigation items, buttons, and the link to this second page.

<button>

I used the button tag for the “Explore More” button to make it interactive and clickable.

<footer>

The footer tag is used at the bottom of the page to show the final message and copyright text.

below I am going to explain Why and where I used those tags in my html.

1. Basic HTML Structure

I started with the standard HTML5 structure to define the document type and load the CSS file(made with help of my friend ,Gen AI and youtube videos.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PHSYC'S CAGE</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    ...
</body>
</html>

2. Top Navigation Bar (HEADER)

This header includes my profile picture, website name, and navigation menu links(Links not availabe because its a prototype).

<header class="topbar">
    <div class="left-side">
        <img src="images/profile pic.jpg" class="profile-pic">
        <span class="creator-name">PHCYC'S CAGE</span>
    </div>

    <nav class="menu">
        <a href="#">Home</a>
        <a href="#">Posts</a>
        <a href="#">Collections</a>
        <a href="#">Chats</a>
        <a href="#">About</a>
        <a href="#" class="join-btn">Join now</a>
        <a href="#">Log in</a>
    </nav>
</header>

I styled the topbar using flexbox to align everything horizontally.

3. Banner Section

The banner is the large top section with the website title and description.

<section class="banner">
    <div class="overlay"></div>

    <div class="banner-content">
        <h1 class="main-title">PHSYC'S CAGE</h1>
        <p class="stats">0 members · 0 posts</p>
        <p class="description">
            “PHSYC’s Cage: Break free from the cages you never knew you lived in.”
        </p>
        <a href="#" class="member-btn">Become a Member</a>
    </div>
</section>

The background image is set in CSS, and the overlay makes the text easier to read.

4. About Section

This section explains the meaning behind the website. It uses a two-column grid layout.

<section class="about-cage">
  <div class="about-inner">

    <div class="about-text">
      <h3>About PHSYC's Cage</h3>
      <p> ... website explanation ... </p>
      <a href="#" class="btn-primary">Learn More</a>
    </div>

    <div class="about-image"></div>

  </div>
</section>

5. Cage Selection Grid

These cards show different “cages” like music, nature, human, social media, etc.

<section class="collections">
    <h2>Cage Selection</h2>

    <div class="collection-box">

        <div class="collection-item">
            <img src="images/music2.jpg">
            <h3>Music</h3>
        </div>

        ...
    </div>
</section>

The grid uses CSS Grid to create a clean 3-column layout.

6. Footer Section

The footer contains a message and the link to this page.

<footer class="ending-section">
    <h2>Break Free From the Cage</h2>
    <p> ... footer text ... </p>
    <p>
        If you want to know how I developed this website 
        <a href="webdev1.html">click here</a>
    </p>
</footer>
⬅ Back to Home