PHOTOBLOG

THE MAKING OF THE HOMEPAGE

Although I wasn’t able to participate in the data collection due to being sick, I still played a crucial role in our Community-Based Research (CBR) by creating the webpage for our project. I’m really grateful to my leader, Rico, for covering my part in the research, and in return, I made sure to keep my promise by designing and coding the webpage from scratch. Despite not being present in most classes and struggling to remember lessons, I took it upon myself to self-study coding and complete our webpage.
 Here’s how my journey went:

1. Structuring the Webpage

"Starting with the basics! My team and I worked together to create the 9 main links for our webpage, each corresponding to a section of our research."

🖥 Links Created:

✅ Community Profile

✅ Brief Research Description

✅ Profiles

✅ Focus Study

✅ Conclusion

✅ Methodology

✅ Recommendation

✅ Media Gallery

✅ Bibliography

We simply copied and pasted the research content onto the corresponding HTML files and uploaded them to Google Drive for safekeeping.

2. Designing the Homepage

"Creating a structured and functional homepage was a challenge, but I made sure it looked clean, professional, and easy to navigate."

🔹 Harriet helped by sending me past lessons on HTML/CSS and team photos for the profile section.

🔹 I used the Bantay Bell Tower as the background image to give the page a distinct local identity, complemented by a navy blue, gray, and white color scheme for a modern, minimalistic look.

To enhance functionality and user experience, I incorporated:

✅ Header – Included the ISNHS logo at the top to establish branding and identity.

✅ Middle Text: Added the title "Doon po sa amin, Pagiging Handa Ang Aming Sandata" with the subtitle "Facing Emergencies with Courage and Preparedness" in the center of the homepage to emphasize the theme of our research.

✅ Navigation Bar – Designed 9 interactive buttons, each linking to different sections of our research

✅ Footer – Placed a copyright notice at the bottom for a polished, professional finish

3. Learning and Applying CSS

"Making the webpage interactive! To improve the design, I started learning CSS (Cascading Style Sheets) to add animations and hover effects for a smoother user experience."

🎨 Steps I Took:
1️⃣ Created a separate style.css file.
2️⃣ Linked it to the HTML using: <link rel="stylesheet" href="style.css">

3️⃣ Added effects like hover animations to make profiles expand when hovered.

💡 Helpful Resources: I used W3Schools for tutorials and installed Brackets (a coding software) to debug and preview my work easily.

4. The Struggles and Challenges

"Coding wasn’t as easy as I thought! What I expected to be a one-day task turned into a full week of trial and error."

⚠️ Challenges Faced:
❌ Debugging countless errors
❌ Revising code due to unexpected issues
❌ Managing stress from the workload

Despite the difficulties, I kept researching, troubleshooting, and improving the layout until I got it right.

5. Finalizing and Presenting

"After countless hours of work, it was finally done! I saved the webpage on my USB and presented it to the class, explaining how I built it."

✨ Key Features of the Webpage:
✔️ Hover effects for team profiles
✔️ Simple yet clean navigation
✔️ Well-organized sections

Although I couldn’t physically participate in fieldwork, I’m proud that I contributed through my skills in web development. This experience taught me patience, perseverance, and self-learning, and honestly, it felt amazing to build my first webpage from scratch. 💻

The Webpage Overview: