Webdev1

"How I made my Website"

My Website Information

My website has four pages: Home, Portfolio/Webdev1, Contact, and Terms & Conditions.
I used HTML to build the structure and CSS to control layout, colours, images, and responsive design.
I kept styles in an external CSS file to make the code cleaner and easier to maintain.

How I made my HTML

Every page starts with <!DOCTYPE html>, <html>, <head> and <body> to define the basic structure.
Inside the <head> I used <meta> for character set and viewport, <title> for page titles and <link> to connect CSS and favicon.
I used a <header> on each page with <div class="logo"> and <div class="navbar">, plus a <ul> list of <a> links for navigation.
On the Home page, I used a <div class="hero-image"> with a <video> and nested <source> tag for the hero background video.
I used <div class="hero-text"> and <div class="hero-buttons"> to place headings and the “Book Now!” button on top of the video.
I used heading tags <h1>–<h6> for titles such as “Featured Photos”, “About Dom Studios”, “Webdev1”, and the Terms & Conditions sections.
Normal text is written using the <p> tag, including About content, Webdev1 explanations, and footer copyright text.
For photo galleries, I used <div> elements with classes like "grid-container", "grid-container2", "item", and "portfolio" with <img> tags using src and alt attributes.
On the Contact page, I organised content using <main> and <section> tags and built the form with <form>, <label>, <input>, <textarea>, <select>, and <option>.
On the Terms & Conditions page, I grouped content using <main> and multiple <section> blocks with headings and <address> for structure.
Each page ends with a footer container <div class="footer"> which includes <nav> and copyright text.

How I made my CSS

I used an external CSS file styles.css to style fonts, colours, spacing, layout, images, and responsiveness.
body sets the base theme using background colour, font family and default size.
header uses Flexbox (display: flex;, justify-content:, align-items:) to keep the logo and navigation aligned.
The logo has fixed height, rounded corners and shadow.
Navigation (.navbar) uses Flex layout, spacing, hover effects and an active state.
Hero section uses position: relative; and object-fit: cover; for full-bleed video.
Headings and buttons over hero use position: absolute; to overlay.
Photo galleries use CSS Grid (auto-fit, minmax, gap) to stay responsive.
Images use border-radius, transition and hover scale + shadow.
About section uses centred text and max-width for readability.
Footer uses dark background, centred links, spacing and padding.
Forms are styled like cards with padding, rounded corners and shadow; fields share consistent borders and focus glow.
Buttons share the green theme with hover effects.
I used a media query @media (max-width: 600px) to stack the header, resize the logo, adjust grids, increase text size and improve padding on small screens.

What I changed base on A1 feedback

I updated the favicon and page title, added a navbar active highlight for better navigation
compressed all media files including the video for faster loading
moved images from CSS to HTML for control
placed source credits to the photos or video for proper ownership reference.
I also added 2 more pages the contact page and terms and conditions page .

Purpose of My Photography Website

The purpose of my website is to showcase my photography (mostly shot on a mobile phone and edited in Adobe Lightroom) and to introduce Dom Studios as my personal creative brand. Building a multi-page site allowed me to demonstrate my understanding of core HTML structure and CSS styling from ISYS1001 Modules.

Portfolio

"A collection of moments frozen in time capturing the essence of everyday life across Australia, all shot on a mobile phone."

Source: Jonah Apao