Devlog #2: Designing the main page

Hey everyone! Welcome back to the devlog for Forever.

Following up on the landing page, I have officially begun building the core hub of the application: the Main Page. This is the page users will see immediately after clicking “Start Studying!”, serving as their command center for tracking daily progress.

Here is an update on how the layout is coming together, the CSS design choices, and what remains to be wired up!

The Lyout of the main page

For the dashboard, I wanted to maintain the clean, glassmorphic aesthetic established in the landing page.

Daily Overview: At the top i have a welcome sign an under it there is a text that shows the date however the date part is still to be created using javascript. I also have a place that displays the total amount of time the person spent studying throughout the whole day.
Subject Grid: Below the daily summary, I created a grid for individual subjects (e.g., Math, Physics, Information Technology). Each subject card displays the amount of time spent studying each separate subject and refreshes every day.
The Add Subject Card: To prepare for future features, I added a card with a clean + icon, which will eventually allow users to add new subjects of their preference.

The code behind this

To arrange the subject cards neatly on both desktop and mobile screens, I relied heavily on CSS display grid.

1. HTML Structure

Here is how the structural skeleton of the dashboard looks:

<div class="top-bar">
            <h1>Welcome to Forever</h1>
            <p>Todays Date</p>
        </div>


        <div class="TotalTime">
            <div>
                <p>Today</p>
                <i class="fas fa-clock"></i>
            </div>
            <h3>0 hours 0 minutes</h3>
        </div>


        <div class="Subjects">
            <h2>Subjects</h2>
            <div class="subject-list">
                <div class="math">
                    <h3>Math</h3>
                    <p>0 hours 0 minutes</p>
                </div>
                <div class="physics">
                    <h3>Physics</h3>
                    <p>0 hours 0 minutes</p>
                </div>
                <div class="IT">
                    <h3>Information Technology</h3>
                    <p>0 hours 0 minutes</p>
                </div>
                <div class="add">
                    <button><i class="fa-solid fa-plus"></i></button>
                </div>
            </div>

        </div>