📘 Overview

You have already completed:

• A PDF CV design

• An HTML Resume

• An HTML Form

• Responsive layouts using raw CSS

• Media queries, transitions, and animations

In this final CSS assignment, you will refactor both projects by removing most of your custom CSS and rebuilding the styling using Tailwind CSS.

This assignment reflects modern, real-world frontend workflows, where utility-first CSS frameworks are widely used in professional teams.

🎯 Learning Objectives

By completing this assignment, you will demonstrate your ability to:

• Replace traditional CSS with Tailwind CSS utilities

• Build responsive layouts without writing media queries

• Use Tailwind’s layout, spacing, typography, and color systems

• Apply transitions and animations using Tailwind

• Maintain clean Git workflows using multiple branches

📚 Learning Resources (Required Reading)

Before starting this assignment, you must review the following official Tailwind CSS resources.

📘 Tailwind CSS — Quick Setup (Play CDN)

For this assignment, you may use Tailwind CSS via Play CDN.

🔗 Official Setup Documentation (Required Reference)
https://tailwindcss.com/docs/installation/play-cdn

✔ This setup method is allowed and recommended
✔ No Node.js or build tools required
✔ Ideal for learning and rapid iteration

You must include Tailwind CSS in your HTML using the official Play CDN script exactly as shown in the documentation.

⚠️ Note:

• Play CDN is intended for development and learning

• Do not recreate Tailwind utilities using raw CSS

📖 Using the Tailwind Documentation (Mandatory)

You are expected to actively use the Tailwind CSS documentation while working on this assignment.

🔗 Tailwind CSS Documentation
https://tailwindcss.com/docs

The documentation explains how to use:

• Layout utilities (Flexbox & Grid)

• Spacing and sizing (p-, m-, gap-, w-)

• Typography (text-, font-, leading-)

• Colors and backgrounds

• Responsive breakpoints (md:, lg:)

• Transitions and animations

• Hover, focus, and state variants

⚠️ Important:

• Do not guess or invent class names

• Use the documentation to find the correct utility classes

• Marks may be deducted for incorrect or non-existent Tailwind classes

🎓 Free Official Tailwind Course (Highly Recommended)

If you are new to Tailwind or want more confidence with utility-first CSS, complete the free official course below:

🔗 Build UIs That Don’t Suck
https://tailwindcss.com/build-uis-that-dont-suck

✔ Created by the Tailwind CSS team
✔ Covers layout, spacing, typography, and responsiveness
✔ Practical, short lessons with real examples

⏱ Estimated time: 1–2 hours

🔄 Git Workflow (Mandatory)

You must follow this Git branching workflow:

Rules:

• All development happens on dev

• Merge dev → beta

• Merge beta → main

• Final work must be visible on the main branch

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

🔧 Technical Requirements (Mandatory)

✔ Tailwind CSS Usage

• Tailwind CSS must be included (CDN or build process)

• Most styling must use Tailwind utility classes

• Custom CSS must be minimal and justified

✅ Allowed custom CSS:

• Custom keyframes not easily expressed in Tailwind

• Minor overrides (maximum ~50 lines)

❌ Not allowed:

• Rebuilding layouts using raw CSS

• Using media queries for responsiveness

• Recreating Tailwind utilities manually

🧑‍💼 Part 1 — Resume Refactor Using Tailwind CSS

Refactor your HTML Resume so that Tailwind CSS replaces most of your previous CSS.

✔ Layout & Structure Requirements

Use Tailwind utilities for:

• Flexbox or Grid layout

• Spacing (p-, m-, gap-)

• Typography (text-, font-, leading-)

• Alignment (items-, justify-)

• Colors and backgrounds

❌ Floating (float) and table-based layouts are not allowed.

📱 Responsive Behavior (No Media Queries)

Responsiveness must be handled using Tailwind breakpoints only.

Required Layout Changes

📱 Mobile

• Single-column layout

• Stacked sections

• Smaller font sizes

📱 Tablet

• Two-column layout where appropriate

• Improved spacing and readability

💻 Laptop / Desktop

• Full professional CV layout

• Clear alignment and hierarchy

• Visually matches the original PDF CV

✨ Transitions (Mandatory)

Use Tailwind transition utilities.

✔ Requirements:

• At least 2 different transitioning properties

• Visible during hover or interaction

Examples:

• transition-all duration-300

• hover:bg-gray-200

• hover:scale-105

🎞 Animations (Mandatory)

Use Tailwind animations or custom keyframes.

✔ Requirements:

• At least 2 different animations

• Must be professional and meaningful

• Applied to elements such as:

  • Header

  • Section titles

  • Profile image

Examples:

• Fade-in on page load

• Slide-in header

• Soft scale reveal

📝 Part 2 — Form Refactor Using Tailwind CSS

Refactor your HTML Form to use Tailwind CSS for layout, styling, transitions, and animations.

✔ Form Layout & Styling Requirements

Use Tailwind utilities for:

• Grid or Flexbox layout

• Styled labels, inputs, and buttons

• Consistent color theme

• Clean spacing and alignment

❌ Raw CSS layout is not allowed.

✨ Transitions (Mandatory)

Your form must include Tailwind transitions.

✔ Must include:

• Input focus transition

• Button hover transition

Examples:

• focus:ring-2 focus:ring-blue-500

• hover:bg-blue-600 transition-colors duration-300

🎞 Animations (Mandatory)

✔ At least 2 animations, applied to:

• Form container

• Submit button

• Labels or inputs

Examples:

• Form fade-in on load

• Button pulse

• Input reveal animation

📱 Responsive Expectations (Tailwind-based)

📱 Mobile

• Inputs stacked vertically

• Full-width fields

• Large touch-friendly buttons

📱 Tablet

• Inputs grouped in rows

• Improved spacing

💻 Laptop / Desktop

• Centered form

• Card-style layout

• Clear visual hierarchy

📂 Project Structure Requirements

Each project must include:

• index.html

• Tailwind CSS included (CDN or build)

• Optional style.css (minimal only)

• Clean, readable HTML class usage

📤 Submission Instructions

Submit two GitHub repository URLs on separate lines in Moodle:

⚠️ Make sure:

• Both links point to the main branch

• Tailwind CSS is clearly used

• Git history shows dev → beta → main

✅ Grading Criteria