CSS Responsive Design, Transitions & Animations Assignment

📘 Overview

You have already completed:

• A PDF CV design

• An HTML Resume

• An HTML Form

• Basic CSS styling

In this assignment, you will enhance both projects by implementing:

• Responsive layouts for three screen sizes

• CSS transitions between screen sizes

• Multiple CSS animations

• Modern layout techniques (Flexbox or CSS Grid)

All styling must be done using external CSS and managed using the correct Git workflow.

🔄 Important Reminder About Git Flow

You must follow the Git branching workflow:

This means:

• Commit and push your work to the dev branch

• Merge dev → beta

• Merge beta → main

• Your final work must be visible in the main branch

⚠️ Failure to follow this workflow may result in lost marks.

🎨 Part 1 — Responsive Resume Styling

Update your resume project so that it adapts visibly and smoothly across three screen sizes.

📐 Required Breakpoints

You must support all three screen sizes:

Example:

✔ Layout & Structure Requirements

Your resume must visibly change layout across screen sizes.

📱 Mobile

• Single-column layout

• Stacked sections

• Smaller font sizes

📱 Tablet

• Increased spacing and font size

• Two-column layout where appropriate

💻 Laptop / Desktop

• Full professional CV layout

• Clear alignment and spacing

• Matches your original PDF CV design

✔ Flexbox or CSS Grid is mandatory for layout
✔ Floating (float) or table-based layouts are not allowed

✨ Required Transitions (Mandatory)

You must implement CSS transitions so layout changes are smooth when resizing the screen.

✔ Requirements:

• At least 2 different CSS properties must transition

• Transitions must be visible when resizing the browser

• Examples of properties:

  • padding

  • margin

  • font-size

  • width

  • background-color

Example:

🎞 Required Animations (Mandatory)

You must include multiple CSS animations in the resume project.

✔ Requirements:

• At least 2 different animations

• Use @keyframes

• Animations must be appropriate and professional

• Applied to meaningful elements such as:

  • Header

  • Section titles

  • Profile image

  • Icons

Examples:

• Fade-in on page load

• Slide-in header

• Soft scale or reveal effects

✔ Commit → push → merge using dev → beta → main

🧑‍🎨 Part 2 — Responsive Form Design

Update your form project to be fully responsive, animated, and modern.

✔ Form Layout & Styling Requirements

• Use Flexbox or CSS Grid for form layout (mandatory)

• Styled labels, inputs, and buttons

• Consistent color theme

• Clear spacing and alignment

✨ Required Transitions (Mandatory)

Your form must include CSS transitions.

✔ Requirements:

• At least 2 transitioning properties

• Must include:

  • Input focus transition

  • Button hover transition

Example:

🎞 Required Animations (Mandatory)

Your form must include multiple CSS animations.

✔ Requirements:

• At least 2 different animations

• Use @keyframes

• Applied to elements such as:

  • Form container

  • Submit button

  • Labels or inputs

Examples:

• Form fade-in on load

• Button pulse or slide-in

• Label reveal animation

📱 Responsive Behavior Expectations

📱 Mobile

• Inputs stacked vertically

• Full-width input fields

• Large touch-friendly buttons

📱 Tablet

• Inputs grouped in rows

• Improved spacing

💻 Laptop / Desktop

• Centered form

• Card-style layout

• Clear visual hierarchy

✔ Commit → push → merge using dev → beta → main

📤 Submission Instructions

Submit two GitHub repository URLs in Moodle on separate lines:

⚠️ Make sure:

• Both links point to the main branch

• style.css clearly includes:

  • Media queries

  • Flexbox or Grid usage

  • Transitions

  • Multiple animations

• Git workflow (dev → beta → main) is followed correctly

✅ Grading Criteria