Deep Dive — What We Learned & How We Used It

Our Learning Story

We started with curiosity: a single lesson on what HTML tags look like. Over weeks we practiced creating headings, writing paragraphs, inserting images, and crafting small layouts. As assignments grew, we learned to structure pages with semantic tags (<header>, <main>, <footer>), style elements using <style> or external CSS, and make pages interactive with forms and media.

Here we explain the most important elements we used — with sample code and reasons why they matter.

HTML Elements & Why We Use Them

• Headings (<h1>..<h6>): organize content hierarchy. In our project, <h1> is the page title, <h2> for sections, etc.
• Paragraphs (<p>): for readable blocks of text — we write reflections and stories inside <p> tags.
• Images (<img>): show faces and visuals. Always include alt text for accessibility. Example:

<img src="khyra.jpg" alt="Khyra smiling in graduation outfit" width="180">

We put images inside cards, gave them rounded borders, and added captions to describe what they show.

<a href="mailto:khyragomz@gmail.com">Email Khyra</a>

Lists are used to group items: ordered lists (<ol>) for steps and unordered lists (<ul>) for bullet points.

Tables are for structured data (timetables, quick comparisons). We styled tables to be readable and accessible.

<table> ... </table>

Design & CSS Techniques

Design is about readability and emotion. For this project we experimented with:

• Font pairing — friendly headings (Pacifico) + readable body (Poppins / Merriweather).
• Gradients and background textures — to make the page feel warm and inviting.
• Cards, box-shadow, and rounded corners — for depth and polish.
• Transitions & hover effects — subtle animations when hovering links and profile cards.

Sample CSS snippet we used for card hover effect:

.card { transition: transform .45s, box-shadow .45s; }
.card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(0,0,0,.28); }

We also learned responsive basics with simple media queries to make pages look good on phones.

Forms & User Interaction

Forms let visitors send us messages. Our project uses a simple form (no backend) to show that we know how to build input controls:

<form>
  <label>Name:</label>
  <input type="text" name="name" required>
  <button type="submit">Send</button>
</form>

We added validation attributes (like required) and proper labels so screen readers can understand the form fields.

Quick Reference Table

Extras — Media & Embedded Content

We also learned to embed media:

• Video: using <video> or iframe to show tutorials or clips.
• Audio: sample MP3 with controls.
• Embedded pages: using <iframe> for Wikipedia or external references (safe sandboxing recommended).

<iframe src="https://www.wikipedia.org" width="560" height="315"></iframe>

We used comments (like <!-- note -->) in our code to explain parts to future readers — that’s important in teamwork.