P
Marc Francisā¢ 520
@marcfranciss
Submitted
Mehrine
@DarkMoonLit
All comments
- Mehrineā¢ 120
@DarkMoonLit
Posted
Hello, Well done on the challenge.
Nice coding!
Marked as helpful
1 - Praise feyisholaā¢ 50
@Feyisholadesigns
Submitted
What are you most proud of, and what would you do differently next time?
I am proud of how I was able to do it in a day, I learnt a lot too
What challenges did you encounter, and how did you overcome them?
I didn't encounter any challenges
What specific areas of your project would you like help with?
none
Mehrineā¢ 120@DarkMoonLit
Posted
Hi, As you said, you did a great job with this project. I just have some suggestions on how you could improve your code:
- Instead of using px, try to use relative units such as rem/em
- Margin and padding should be bigger -To achieve the bold looking character, use font-weight (the size is provided in style-guide)
- For the <hr> tag, try this code
hr {background-color: ...; border: 0; height: 1px;}
Hope these suggestions will be helpful. Happy coding!
Marked as helpful
0 - 0xdvckā¢ 90
@0xdvck
Submitted
What specific areas of your project would you like help with?
I aim to enhance the structure of my code by organizing and naming CSS and class names more professionally.
Mehrineā¢ 120@DarkMoonLit
Posted
Hi, your code is great and the way you named your classes is well-structured. My only suggestion is using align-items : center for the desktop layout so that your project becomes identical.
Happy coding!
0 - HoaCTaā¢ 110
@HoaCTa
Submitted
What are you most proud of, and what would you do differently next time?
I can make the interface look somewhat similar to the design
What challenges did you encounter, and how did you overcome them?
I was struggled to make the page responsive and align correctly like in the mobile design. I also have some issue what set css for table items, for example the numbers in the order list items don't perfectly align with the contents
What specific areas of your project would you like help with?
I need help understanding the steps to create a responsive page. If the instructions state 'Mobile: 375px. Desktop: 1440px' and provide two UI screenshots, does this mean any screen size below 375px will appear as the given mobile design, and any screen size above 375px will appear as the desktop design?
Mehrineā¢ 120@DarkMoonLit
Posted
Hi, You did a great job at this challenge, the design looks pretty similar. To attain the length of a webpage, set height to 100vh in body. As for your question about the screen size, I'm not sure since some mobile screens are above 375px.
0 - Muhammad-Siddiqueā¢ 60
@Siddique145
Submitted
What are you most proud of, and what would you do differently next time?
The QR code card that I have made I have learnt more many things that I couldn't used ever so I will try to use something new in to the my new projects
What challenges did you encounter, and how did you overcome them?
In this project I have faced more many things but I also learnt from the mistakes that I made.
What specific areas of your project would you like help with?
The project helps in my daily based Practice and more many things that this project taught me
Mehrineā¢ 120@DarkMoonLit
Posted
Hi, you did a great job completing the challenge despite the difficulties you encountered. I just have some suggestions that might help you for this project and future ones:
- Reduce the div you used (div body) to 2 div (main and box) since the colour is applied throughout the page
body {background-color: ... ;}
-The colour used for the background is found in the style-guide.md
-For the box div, try removing the height, use padding and margin to attain the sizing you want.
Keep up the good job. Hope these suggestions can be helpful. Happy coding!
0 - Reduce the div you used (div body) to 2 div (main and box) since the colour is applied throughout the page
- Zub04ekā¢ 110
@Zub04ek
Submitted
What are you most proud of, and what would you do differently next time?
I discovered a new CSS method that helps to make the font size more flexible and adaptive when increasing the width of the viewport without using media queries. It's the clamp() CSS function, and I will use it going forward.
What challenges did you encounter, and how did you overcome them?
It was a bit difficult to understand the new CSS function clamp(), especially how the preferred value is calculated. But I was able to find resources that show and explain this concept in a complete and clear way. I also had some problems with displaying fonts on GitHub pages using @font-face, but I fixed that by correcting the path to the font files.
Mehrineā¢ 120@DarkMoonLit
Posted
Hi Zub04ek, thanks to you, i'm learning a new CSS component a.k.a clamp().
1 - Abigael74ā¢ 40
@Abigael74
Submitted
Mehrineā¢ 120@DarkMoonLit
Posted
Hello Abigael74,
I have looked at your code and you did a fantastic job. I just wished to point out that the layout looks good on large screen but does not attain the height in desktop mode and on small screens. You have used media queries, an excellent choice by the way, just you can put a min-width and a max-width so that the screen sizing is adequate for all screens. ex: @media (min-width: 480px) and (max-width: 1200px)
I hope you find it useful. Happy coding!
Marked as helpful
0
