Webdev 1- MoodReel

Purpose of the Website

The aim of the site is to give simple movie suggestions depending on how the user is feeling. The four mood cards on the home page (Calm, Need Comfort, Feeling Bored and Escape Reality) help users quickly choose a mood and then genre after clicking a certain mood (future page idea). The second section lists must-watch movies from the 2010s to give extra recommendations in a clear, organised way.

HTML

Page structure: I used <header>, <main> and <footer> to organise the page.
Navigation: The <nav> element links to the Home and WebDev1 pages.
Headings and paragraphs: I used <h1>, <h2>, <h3> and <p> to structure content into clear sections.
Lists: The 2010s movies are presented using <ul> and <li>.
Links: I used <a> elements for navigation and “See movies →” text on mood cards.
Div containers: I grouped related content using <div> (for example, each mood card).
Images: I added a hero image using <img>.

These HTML choices follow the core structure and content rules from ISYS1001 Module 1 (HTML and how the web works).

CSS

External stylesheet: All styling is in styles.css.
Colours and backgrounds: I used soft pastel colours for mood cards and a grey band for the 2010s list.
Typography: I changed font sizes and text alignment to improve readability.
Box model: I used padding, margins, border-radius and box-shadow to create card-style elements.
Float layout: Mood cards use float: left; with a clear element underneath to arrange content.
Width percentages: I used percentage widths to control the layout so it works on different screen sizes.
Movie list layout: I styled the unordered list so the six 2010s movies appear in three neat columns.

These styling decisions come from ISYS1001 Module 3, where we practised using colours, typography, the box model and layout properties such as float, width and box-shadow.

Design and Usability Choices

Simple navigation: Two main links to keep the site easy to move around.
Large header image: The header image on the home page quickly shows the theme of relaxing and watching movies.
Mood cards: Cards are centred with soft colours so users can choose based on how they feel.
Clear separation: The grey 2010s section visually separates the list of films from the mood-based cards.
Consistent spacing: Padding and margins are used to keep content groups apart and improve readability.

These choices are based on ISYS1001 Module 2, which covered planning, layout patterns, hierarchy, colour and keeping navigation simple for users.

Image Credits

The images on this website are used only for this ISYS1001 assignment and are taken from free stock-photo websites that allow reuse.

Movie collage image created using free AI tool (non-copyrighted).
Other images from pexels.com / unsplash.com, free for personal use.

All images are used in a non-commercial, educational context only.

Summary of Key Features

Navigation bar: Lets users move quickly between Home and WebDev1.
Mood cards: Groups movies by emotion instead of only by genre.
Box model styling: Helps create neat, separated card-style blocks.
Full-width grey band: Highlights the 2010s movie section and separates it from the mood cards.

What I Learned in Assignment 2

In Assignment 2, I improved the MoodReel website using the new skills from ISYS1001 Modules 4–6. These modules helped me extend the site beyond Assignment 1 and add more professional design and structure.

Consistent colour theme: I redesigned the whole site using a clear colour palette (red, grey, white, cream). All pages now share the same header, footer and visual style so the website feels unified.
Multi-page design: I added new pages (Contact, Terms, WebDev1, CMS) and made sure the navigation links and layout were consistent across all pages.
Improved page layout: I applied better spacing, section structure, alternating backgrounds and clearer headings following the design principles from Module 2 and Module 6.
Form design: I created a fully styled contact form with labels, inputs, a dropdown, textarea and a styled submit button, following the form examples taught in Module 3.
Basic JavaScript concept: I learned how JavaScript is used for simple interactions, such as confirming a form submission or validating fields. (The contact page uses a simple confirmation message to show how this works.)
CMS understanding: I learned the difference between a static website and a CMS. The new CMS page explains how WordPress works and how it would connect to a site like MoodReel in a real project.

These updates come from Modules 4–6, which introduced multi-page site planning, accessibility, design improvements, CMS concepts and basic JavaScript usage.

WebDev1 – About This Website