Happiness survey by Joyce & Helene #84
Conversation
…ndicator.css with basic styling
…sed to the heading of the next step instead of the button
There was a problem hiding this comment.
Great job with this project!
You're meeting the requirements and going beyond.
I like how well polished this forms looks like. You have put time and effort into small design details, such as the favicon etc.
It wasnt the main learnings for this week but it will make this project stand out in your portfolios.
Code Organization: The strcutre of your code base is well-maintained with clear distinctions between components and styles.
Functionality: The added states and functions in App.jsx effectively manage the survey flow and user input.
Styling: The CSS updates ensure a consistent and accessible design, with the use of custom fonts and responsive design considerations. Also, 100 points on Lighthouse check ⭐️
Really nice to see that you've started to think about reusability in your components, such as the button component.
Keep up the good work 🌠
| width="400" | ||
| height="400" |
There was a problem hiding this comment.
how come you put width and height here instead of a css file?
There was a problem hiding this comment.
Having width and height explicitly set on images (even if you control the size with CSS in some other way) prevents layout shifts when the page os loading because you preserve space for them. Especially noticeable on a slow 4G net for example. @JennieDalgren
| import "./ProgressIndicator.css"; | ||
| import Checkmark from "../assets/checkmark.svg?react"; | ||
|
|
||
| export const ProgressIndicator = ({ currentStep }) => { |
Netlify link
View it live »
Collaborators
Joyce Kuo & Helene Westrin