What are you most proud of, and what would you do differently next time?
I'm proud of nothing, this project just showed how weak I am at programming right now.
What challenges did you encounter, and how did you overcome them?
The most problematic challange was to center the elements, I tried to find the problem for a lot of time, then I just asked the problem to chatgpt, obviously I didn't use the chatgpt's solution, I only asked the problem.
What specific areas of your project would you like help with?
Is there any simpler and faster way to center the elements other than the way I wrote?
And I found it difficult ti adjust the width and height.
Good job. Don't stress about not understanding everything to begin with - just take everything you learn as a small win.
In regards to the trouble you're having with setting the size for elements, I'd suggest only setting a width for the image. By default, if you set a width, it should retain the same aspect ratio and so the height should be adjusted automatically so it remains a square. That would fix the main difference I noticed between your implementation and the design - the image is stretched currently.
The way you've centred the div is spot on I'd say. The standard way to do such a thing these days is to give the parent container a display of 'flex' and then use 'align item: center' and 'justify-content: center'. This will centre it to the parent container. If you want it centred in the middle of the screen, you need to be sure that the parent container is the size of the screen then. The parent container of the div is the body element and so you need to make this the size of the screen. By default I believe the body is always 100% width. The height is slightly trickier though because by default it will have a height large enough only to contain its child elements. A way to make it the full screen height (but also allow it to grow larger if needs be) is to set (min-height: 100vh). The vh unit stands for 'view height' and will always be equal to 1% of the screen height.
Hope that helped somewhat and wasn't overwhelming :)
What challenges did you encounter, and how did you overcome them?
For some reason, the fonts on my page are displayed differently than they did in the design photo, despite the fact that I used the same fonts and weight that were given in the style guide. I don't know why and how to fix it.
The font looks like it has some opacity on it - that'd explain the difference you can see. You can fix it by either changing the alpha value of the font colour, or changing the opacity property of the container.
Looking through your solution, the only thing I could think of which might help in future is: for the background image on the purple card, I think it's easier to use the background image property. This also has the benefit of keeping the content of your page separate from the styling.
Nice work! I looked through your solution to try to find some things to improve on and came up with these few things (although they are a bit nit-picky):
If you look at your Google Fonts import, you've actually listed a bunch of fonts to import (the ones from the previous challenges). I noticed I'd done this too. Google Fonts has a 'basket' of fonts which isn't cleared upon refreshing the page. I looked into this and modern browsers should avoid downloading imported fonts which haven't been used, so it's not really a problem but worth noting I suppose.
I would have personally made a CSS selector the 'card boxes' in general. This would have saved you repeating a large amount of properties for each of the properties. It is really only the grid information which is specific to a given box.
Your solution looks great. Some things I think you could improve on though are the following:
You have styled the "Perfume" heading by directly adding spaces and capitalising the letters in the HTML. There are properties in CSS to do this: 'letter-spacing' and 'text-transform'.
I am not sure if it is a result of using React, but I think you could choose closer-matching HTML elements. For example the table row you have used to contain pricing information, it's not really tabular information and so a simple div with either flexbox or grid might have been better suited. The main argument for this approach would be accessibility, as a screen reader announcing a table is a little bit inaccurate.
I'm not sure where I got the shadow on the QR code in all honesty lol. I put one on my solution but I think I meant to put it on the whole card itself. Looking at it now, there seems to be a subtle shadow at the bottom of the card, so it looks as if it is raised from the page slightly.
Either way, it's just one of these: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
If you Google 'css box shadow' there are websites which allow you to visually tweak a box shadow and then copy paste the css over.
Hi! Nice work. Just as some positive criticism, I would say you could perhaps look at choosing HTML containers with closer matching semantics. For example you used an unordered list for the nutrition information at the bottom of the page. You have created a table-like layout using an unordered list but you could have used an actual HTML table. This would make it more accessible for screen readers, as well as arguably making the HTML easier to read.
Another tip might be to look into using variables in your CSS for things such as the colours. They are arguably not necessary here but it might make the code more readable if you are using the same colour in multiple places (for example, seeing the colour variable 'main colour' in multiple places, it is easier to recognise that those elements use the same colour, as opposed to seeing just a hex value e.g. #FF2B11). Of course there are other benefits, too.
Hi, nice work. The colour transition on the buttons looks good.
A few areas to make note of and improve on in my opinion would be to perhaps structure include enclosing containers for the different sections of the card - i.e. a nav container around the buttons and another container around the personal information parts. This would make it more accessible as it would be easier to quickly navigate to different sections and then subsections using a keyboard. It would arguably also be more readable at a glance.
Looks good to me. If I had to nit-pick a few things:
Missing the shadow on the QR code image.
The card isn't vertically aligned with the page and so does not stay centred when you zoom out. Consider making the body element 100% of the viewport height and using flexbox to vertically align, rather than using top-margin as you have.
