جهاد أحمد
@Gehad28All comments
- @ansarstellarSubmitted 2 months ago@Gehad28Posted about 2 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-gradient
with 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 2 months ago@Gehad28Posted 2 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 3 months ago@Gehad28Posted 2 months ago
Nice work!
It is really nice that you used tailwind Keep going ☘️
0 - @cacesasaSubmitted 3 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 3 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
source
tag we put the image for a certian screen size, and in theimg
tag we put the default image.Keep going ☘️
Marked as helpful1 - @cas1092Submitted 3 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 3 months agoNice work! Some comments:
-
You are displaying the card as flex, so you can use the property
gap
to 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 3 months agoWhat specific areas of your project would you like help with?
Any constructive criticism is welcome.
@Gehad28Posted 3 months agoWow! It's perfect! and your code is really organized. Nice work ☘️
0 - @RogerTito455Submitted 3 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 3 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 3 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 3 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 3 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 3 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 3 months ago@Gehad28Posted 3 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-content
andalign-items
. You may usecenter
instead ofend
for thejustify-content
property so the content gets centered vertically.Great job!
0 - @Exterminator737Submitted 3 months ago@Gehad28Posted 3 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 3 months ago@Gehad28Posted 3 months ago
I like how precise you are with spaces especially the line height of texts. Nice work!
1