@ansarstellarSubmitted 7 months ago
جهاد أحمد
@Gehad28All comments
- @Gehad28Posted 7 months ago
Nice work!
Your code is well-structured and readable. I like how you handled the rating options.
For the background, I used
radial-gradientwith different alpha values from inside to outside as following:background: radial-gradient(circle at top, rgba(37,45,55,1) 10%, rgba(37,45,55,1) 15%, rgba(37,45,55,0.95) 20%, rgba(37,45,55,0.9) 25%, rgba(37,45,55,0.8) 40%, rgba(37,45,55,0.7) 50%, rgba(37,45,55,0.6) 60%, rgba(37,45,55,0.5) 70%);Keep going ☘️
0 - @gk6294Submitted 8 months ago@Gehad28Posted 8 months ago
Nice Work!
One comment on the error message; it appears when I try to input a decimal number. Also, if I wrote the bill and the number of people before choosing a tip, it calculates a tip amount and when I choose the tip the result doesn't change.
Other than that, the UI looks good! Keep going ☘️
0 - @gk6294Submitted 8 months ago@Gehad28Posted 8 months ago
Nice work!
It is really nice that you used tailwind Keep going ☘️
0 - P@cacesasaSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I'm happy that I was able to complete the challenge with some good results. Next time I will try to use a styling extension like sass.
What challenges did you encounter, and how did you overcome them?How to implement form validation was a challenge to me but I was able to do it by trial and error.
What specific areas of your project would you like help with?Any feedback is always welcome. Thanks.
@Gehad28Posted 8 months agoNice work!
One thing that I have learnt from another member here: To change the image according to the screen size, use
<picture>tag instead of an empty div withbackground-img. You can use it as following:<picture> <source media="(max-width: 380px)" srcset="assets/images/illustration-sign-up-mobile.svg"> <img src="assets/images/illustration-sign-up-desktop.svg" alt="..."> </picture>In the
sourcetag we put the image for a certian screen size, and in theimgtag we put the default image.Keep going ☘️
Marked as helpful1 - @cas1092Submitted 8 months agoWhat are you most proud of, and what would you do differently next time?
i'm very proud of knowing i have the html/css part very controlled by now, adding java made me think a little bit more about the components on the design (now the button has more attributes) differently, i tried making all at once, creating all the styles and maybe, when working with javascript i should try going on parts, so i can get organized
What challenges did you encounter, and how did you overcome them?the pop-up design, until now almost all my items/class/attributes had a relative position, this challenge requiered a absolute on the action, so that made me work extra hard. i went to the discord channel and to sleep and in the morning, with some distance, the solution was there (also match with the comments i got). maybe i should obssed too much when things aren't working
What specific areas of your project would you like help with?the javascript get me a little scared, in this case it wasn't that hard
@Gehad28Posted 8 months agoNice work! Some comments:
-
You are displaying the card as flex, so you can use the property
gapto make the gap between the rows equal:gap: 1rem;. -
You also can center the card by giving the body a height
height: 100vh;andalign-content: center;. This will center the card vertically. Now give the card itself an auto margin and it will be centered horizontally!
Keep going! ☘️
0 -
- @KostexxSubmitted 8 months agoWhat specific areas of your project would you like help with?
Any constructive criticism is welcome.
@Gehad28Posted 8 months agoWow! It's perfect! and your code is really organized. Nice work ☘️
0 - @RogerTito455Submitted 8 months agoWhat are you most proud of, and what would you do differently next time?
Well, I think that I developed an hability to make this kind of css html project so easily. I would like to try new things like trying to make it good.
What challenges did you encounter, and how did you overcome them?Well, I didn't know how to make the borders of the box and the shadow but I overcome using a little bit of chatgpt and gave me an advice.
What specific areas of your project would you like help with?The same as the previous one, I really want to know if my code can be smaller to make it efficient.
@Gehad28Posted 8 months agoHi @RogerTito455, nice work!
You can use
border: 1px solid black;to make a thin border in all sides. Then you can usebox-shadow: 10px 10px;to make the solid shadow on the right side and the bottom.The first number in the box-shadow property is the horizontal offset, a positive value puts shadow on the right side and a negative value puts it on the left side. The second number is the vertical offset, a positive value puts the shadow on the bottom side and a negative one puts it on the top side.
Hope this helped! ☘️
Marked as helpful0 - @Zangetsu5Submitted 8 months agoWhat are you most proud of, and what would you do differently next time?
well i did it on my own without need of using the internet
What challenges did you encounter, and how did you overcome them?i had issues getting the colouring right and i just kept on trying(trial and error)
What specific areas of your project would you like help with?i still need help with my css designing
@Gehad28Posted 8 months agoHi @Zangetsu5, nice work!
You can find the colours and fonts in a file called style-gide.md in the starter folder, you don't have to guess them. :)
I think you didn't push your final work to the github repo as the live site doesn't seem like your screenshot. I can see from you screenshot that you just need to apply some padding and margin and delete some.
Here are some tips:
- You can think of the page as a grid or a flex box of one column. This will help you apply a gap between the sections so that the spaces between them are equal.
- For the preparation time section, you can give the div a padding from all directions. For example,
padding: 2rem;. - For the ingredients and instructions sections, you can give the div a margin from the left.
- To apply style on the marker of the list items, you can use the following selector:
li::marker{ font-size: 12px; color: hsl(14, 45%, 36%); }I hope this helps. Keep going ☘️
Marked as helpful0 - @joaoxavier-profissionalSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
Next time i would make the desktop style first
What challenges did you encounter, and how did you overcome them?figuring out grid layout was a challenge
What specific areas of your project would you like help with?the grid layout and the height of the page
@Gehad28Posted 8 months agoHey @joaoxavier-profissional, nice work!
I can see you thought of the cards' layout as a grid of 6 columns. It is really a good thinking; I did something similar.
As you can see in the design, there are 3 columns, the first one has a single card, the second one has 2 above each other, and the third one also has a single card. So, how about thinking of the layout as a grid of 3 columns and 4 rows?
This way, you can just do the following:
.card-1, .card-4{ grid-row: 2/4; } .card-2{ grid-row: 1/3; } .card-3{ grid-row: 3/5; }Also, For the heading, you may use
<br>after the<span>tag so that the text after the span goes into a new line, or you can just use<p>for the regular text and<h1>for the bold one. And don't forget to change the font weight for the desktop view. :)Hope that helped. Keep going ☘️
Marked as helpful1 - @JoaoHenriqueDeSouzaSubmitted 8 months ago@Gehad28Posted 8 months ago
Hello, @JoaoHenriqueDeSouza. Nice work.
I just have a comment on the position of the card. I can see you displayed the body as a flex box to use
justify-contentandalign-items. You may usecenterinstead ofendfor thejustify-contentproperty so the content gets centered vertically.Great job!
0 - @Exterminator737Submitted 8 months ago@Gehad28Posted 8 months ago
Nice work, I like that you used a mobile-first approach. Also, the code is well-structured and readable. You may try using the right colour of the heading and adjust the shadow of the cards. Otherwise, great job!
Marked as helpful0 - @MAY55ASubmitted 8 months ago@Gehad28Posted 8 months ago
I like how precise you are with spaces especially the line height of texts. Nice work!
1 - @AbimzzSubmitted 8 months agoWhat challenges did you encounter, and how did you overcome them?
I had some issues with the padding for the image in the mobile view, was unable to make to the image ignore the padding of the card to fill the width of the card.. i ended up having to separate the image from the rest of the card-info, which allowed me to give them different padding ..
What specific areas of your project would you like help with?I would appreciate help with the styling of the list marker, i was unable to figure out how to change only their style without affecting the rest of the link.
@Gehad28Posted 8 months agoI had the same issue with the image padding, I solved it as following:
- Apply padding to the card, let's say
padding: 0 2rem; - To make the image ignore the padding and take the whole width of the card, apply a negative margin with the same value of the padding to it.
margin: 0 -2rem; - Now, there would be another issue as the width of the image is smaller than the screen size of the mobile (375px), so, make the minimum width of the image equals the screen size of the mobile (the min-width used in the media query). And I also set the border radius of the image to zero, so it does not have a curve at the bottom.
@media (max-width: 375px){ .container{ padding: 0 2rem; } img{ margin: 0 -2rem; min-width: 375px; border-radius: 0; } }To style the list marker, use the following selector:
li::marker{ font-size: 12px; color: hsl(14, 45%, 36%); }Hope I helped.
0 - Apply padding to the card, let's say
- @123MikolajSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I’m particularly proud of experimenting with SVG noise and grain effects in this project. Although these effects weren't part of the original project requirements, I saw it as a valuable opportunity to explore and implement something new.
What challenges did you encounter, and how did you overcome them?One challenge was adding grain effects to the project. To tackle this, I watched a Juxtoposed tutorial:
https://www.youtube.com/watch?v=_ZFghigBmqo&ab_channel=Juxtopposed
It provided clear guidance on using SVG filters to create the desired effect. Additionally, ensuring semantic HTML for interactive elements like tabs was crucial for accessibility. I learned that using proper HTML elements and attributes is essential for both functionality and user experience, which improved the overall quality of the project.
@Gehad28Posted 8 months agoWow!
- I like that you did it your way and it really looks good.
- The layout looks good on a range of screen sizes.
- The code is well structured and readable.
Good job!
1 - @DevBytes-JSubmitted 9 months agoWhat are you most proud of, and what would you do differently next time?
The result as a whole . Understand the task first and lay it out before starting
What challenges did you encounter, and how did you overcome them?Responsiveness
What specific areas of your project would you like help with?Responsiveness......Media queries to be precise
@Gehad28Posted 8 months agoThe layout looks good on a range of screen sizes. Also, the code well-structured, readable. Nice work!
Marked as helpful1 - @iamabraryeasirSubmitted 8 months ago
