Kelly Valdez• 50
@GK-Production
Submitted
You are welcome to comment and give some suggestions. Thank you.
Jeffrey Izelaar
@Astrobean
All comments
- Jeffrey Izelaar• 110
@Astrobean
Posted
Damn near perfect!
- The width of the cards should be increased slightly to prevent the paragraphs from wrapping contrarily to the design.
- Judging by your css theoretical knowledge, you look ready (to me) to start Junior level exercises.
Marked as helpful
0 - Mapelsun• 70
@Mapelsun
Submitted
Any feedback would be appreciated:).
Jeffrey Izelaar• 110@Astrobean
Posted
Judging by your code, and the way you use scss, you should move up to Junior level exercises. Good job! 👍
0 - Abdulrhman Kotb• 395
@abdo-kotb
Submitted
Feel free to provide feedback. I will be very happy if you tell me how I can improve.
Jeffrey Izelaar• 110@Astrobean
Posted
I see that you're playing around with animations, which is great, because fun is a good motivational tool for studying. Here's some suggestions:
- Center the card vertically, there are plenty of easy ways to do this, but it's more fun if you figure that one out yourself.
- Normalize css is cool, but overkill for a tiny project like this.
- You're using many media queries for the background alone. This pattern usually indicates that you need to stop using absolute units (px) and lean towards relative units and percentages instead. I'm sure you could build a smoother result if you used less media queries, and more appropriate units.
Happy coding ✌
Marked as helpful
2 - Izzatbek• 50
@IzzatbekDadamirzayev
Submitted
Who can help me to fix responsive design
Jeffrey Izelaar• 110@Astrobean
Posted
Nice work! You're almost done, here's some quick suggestions:
- The size of the card is fixed, no need to let it shrink or grow.
- The card's size and layout is the same on mobile and desktop, so you don't need to use a media query on it.
- For the card cover, try 'background-size: cover', to make it fill the top-half of the card.
- The profile picture is a tricky one. I aligned it perfectly using CSS position.
- The background images do need to be included in a media query as their position is different in each layout.
1 - Flash• 80
@flash54
Submitted
Was confused with the background circles but i did find a solution which helped. https://github.com/Astrobean/frontendmentor-2 . Thanks @Astrobean. I don't know if its the correct way to use background position but it worked for now. If yall have any other ways, drop them in the comments please. Thank you. I'm new to this.
Jeffrey Izelaar• 110@Astrobean
Posted
Never imagined that my code would help someone like this, that's actually really cool, so thanks for that awesome moment! 🙏
The bad news is: I did not do it right, but I did learn that understanding how CSS position works is equally as important as layout options like flexbox and grid! And, just like flexbox and grid, it can be tricky to wrap your head around it.
I think more practice with CSS position will help you for sure.
1 - Khazin• 50
@khazin
Submitted
Feedback appreciated :)
Jeffrey Izelaar• 110@Astrobean
Posted
Big black bars on the side! I checked your code and noticed that you give things a fixed width using px. Here's some quick tips:
- A background is applied to a box, in this case your body element. To make your body cover the full page, try using 'height: 100vh' and 'width: 100%'.
- Step away from using px, and familiarise yourself with sizing boxes using flex or units like 'rem'. Seriously, google these things before you start your next project; it's pretty simple and it'll improve everything about your code.
0
