# Week 5
## Goals
- [ ] Wrap up the `KudosForm.tsx` from last week's session
- [ ] Complete this week's challenge
## Your Objective
Your goal is to style the `KudosForm.tsx` component by adding CSS rules to the `KudosForm.css` file. We've already set up all the `className` attributes you'll need in the component.
Your job is to target those classes and bring the app to life!
Try to create a design that is:
- **Clean and readable:** Users should easily understand what to do.
- **Modern:** Think soft shadows, rounded corners, and good spacing.
- **Interactive:** The form should give visual feedback when a user interacts with it (like clicking an input or hovering over the button).
## Task Outline
Here's a breakdown of the elements to style:
1. **The Main Container (`.kudos-form`)**
- Make the form stand out from the background. It should look like a distinct "card." How can you give it some depth and defined edges?
2. **The Title (`.form-title`)**
- The title "Give Kudos" should be a clear and prominent header for the form. How can you make it the focal point?
3. **Field Groups (`.form-group`)**
- Currently, all the labels and inputs are squished together. Add some vertical spacing between each field group to let the form breathe.
4. **Field Labels (`.form-group label`)**
- Style the labels (`To:`, `Message:`, etc.) so they are clear and distinct from the input fields they describe. They should sit neatly above their respective inputs.
5. **Inputs, Textareas, & Selects**
- Target `.form-group input`, `.form-group textarea`, and `.form-group select` all at once.
- Give them a consistent look. They should have clean borders, nice internal padding, and stretch to the full width of the form.
6. **The Focus State (`:focus`)**
- This is a key part of user experience! When a user clicks into an input field, it should be visually obvious which one is active. How can you change the border or add a glow effect?
7. **The Submit Button (`.submit-button`)**
- Make it look like the primary action on the form. Think about its color, font size, and shape.
## Some Hints...
Here are a few CSS properties that might help you out:
- **For the card effect:** Look into `box-shadow` and `border-radius`.
- **For spacing:** Your best friends are `margin` and `padding`. Remember, margin is for space _outside_ an element, and padding is for space _inside_.
- **To make the button feel "clickable":** Use `cursor: pointer;` to change the mouse icon, and for the "press down" effect, check out `transform: translateY(1px);` in an `:active` state.
If you do get stuck, feel free to refer back to last week's session where we discussed CSS styling!
Here is an example of what your cards could look like (ignore dark mode):
[](https://wiki.sitblueprint.com/uploads/images/gallery/2025-10/screenshot-2025-10-22-at-2-58-36-pm.png)
## Uhhh... what now?
Great job building the static components for our Kudos Board! You have a beautiful `` that you can type in and a stylish `` component ready to display data.
There's just one problem... they don't talk to each other. 😅
Next week, we will tie evrything together and get this component working with state! Get hype!