Web Dev Bootcamp spring 2024, week 12 - Project Collab - Vittoria & Sofia #44
Conversation
There was a problem hiding this comment.
Good job Sofia & Vittoria.
The website works on all devices and your code is very clean. I'm always very impressed with your work. I have learnt a few things from reviewing your code. Thank you.
I would have liked to have two different folders for the components to distinguish between the actual sections and the reusable parts. But that's just a personal preference.
src/components/Burger.jsx
Outdated
| <> | ||
| <StyledBurger | ||
| onClick={toggleMenu} | ||
| aria-label="Toggle menu" |
There was a problem hiding this comment.
Thx about the reminder. I always forget to use aria-label.
| @@ -0,0 +1,160 @@ | |||
| import styled, { keyframes } from "styled-components"; | |||
There was a problem hiding this comment.
nice! I didn't use keyframes. have to look into it for animations.
| return ( | ||
| <StyledSection> | ||
| <H2>Our services</H2> | ||
| <CarouselContainer> |
| <CarouselContainer> | ||
| <StyledCarousel> | ||
| {cardContent.map(card => ( | ||
| <React.Fragment key={card.heading}> |
There was a problem hiding this comment.
So much I have to look up... ;-)
Never used React.Fragment myself -> seems to be handy to avoid a lot of wrapping elements.
| <Nav> | ||
| <ul> | ||
| <li> | ||
| <Link to="/contact">Contact</Link> |
There was a problem hiding this comment.
good work, even implementing the routes.
| import { handleResize } from "../utils/handleResize"; | ||
|
|
||
| export const Home = () => { | ||
| const [windowWidth, setWindowWidth] = useState(window.innerWidth); |
There was a problem hiding this comment.
I like how you handle the resize here. I used it directly in the components. Your approach makes the code a lot cleaner.
There was a problem hiding this comment.
Hello Vittoria & Sofia, congratulations for completing your week 12 project. It looks ✨ awesome ✨ The site looks very close to the design and followed most of our requirements. How did you like Styled Components? Seems like you tackled it in the right way and implemented a great result! Now the design is not pixel perfect, but that's okay, here's some aspects that need to be taken into consideration to meet the requirements:
- Images resolution: use always format.svg for images not.jpg, this will ensure HQ on any screen size
- accessibility scored 80 - should be at least 95
- make sure icon and button sizes, margins and spaces are proportioned. Right now the elements in the nav bar and footer appear quite big and the section looks crowded compared to the original design. It would be enough to reduce the font-size and icons width.
Please fix these few things and you're good to 🚀 🥇
|
Hi @AntonellaMorittu! |
|
Hi again @AntonellaMorittu |
|
Hi 👋 for example difference between design and implementation: 
Also it's good to know not to rely too much on css rules suggested on Figma, many are auto-generated and not be accurate at times, visually you see when the proportions are off. Regarding the svgs, if available in the design (like in this example), use SVG format. SVGs are vector-based — built from a complex mathematical network of lines, dots, shapes, and algorithms. They can expand to any size without losing their resolution therefore you don't lose image resolution. 
These are not critiques Sofia, we're in a learning environment and I am just trying to guide you to achieve the best result possible. Good luck :) |
|
@AntonellaMorittu Thanks for the clarification! |
Netlify link
Thrive Fitness on Netlify
Collaborators
[vittoriamatteoli]