Skip to content
OverviewSolutions
12
Comments
16
جهاد أحمد
@Gehad28

All comments

  • جهاد أحمد•280
    @Gehad28

    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 ☘️

  • جهاد أحمد•280
    @Gehad28

    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 ☘️

  • جهاد أحمد•280
    @Gehad28

    Nice work!

    It is really nice that you used tailwind Keep going ☘️

  • P
    Carlos Santana•260
    @cacesasa
    What 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.

    Newsletter sign up with success message

    1
    جهاد أحمد•280
    @Gehad28

    Nice 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 with background-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 the img tag we put the default image.

    Keep going ☘️

    Marked as helpful
  • Lorena Castillo Goche•300
    @cas1092
    What 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

    Article preview component

    1
    جهاد أحمد•280
    @Gehad28

    Nice 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; and align-content: center;. This will center the card vertically. Now give the card itself an auto margin and it will be centered horizontally!

    Keep going! ☘️

  • جهاد أحمد•280
    @Gehad28

    Wow! It's perfect! and your code is really organized. Nice work ☘️

  • RogerTito455•170
    @RogerTito455
    What 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.

    BLOG-PREVIEW-CARD-MAIN

    1
    جهاد أحمد•280
    @Gehad28

    Hi @RogerTito455, nice work!

    You can use border: 1px solid black; to make a thin border in all sides. Then you can use box-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 helpful
  • Zangetsu5•10
    @Zangetsu5
    What 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

    Recipe-page using html and css. I also used padding margin and borders

    #accessibility
    2
    جهاد أحمد•280
    @Gehad28

    Hi @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:

    1. 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.
    2. For the preparation time section, you can give the div a padding from all directions. For example, padding: 2rem;.
    3. For the ingredients and instructions sections, you can give the div a margin from the left.
    4. 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 helpful
  • João Xavier•230
    @joaoxavier-profissional
    What 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

    Four card feature section using grid

    1
    جهاد أحمد•280
    @Gehad28

    Hey @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 helpful
  • جهاد أحمد•280
    @Gehad28

    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 and align-items. You may use center instead of end for the justify-content property so the content gets centered vertically.

    Great job!

  • جهاد أحمد•280
    @Gehad28

    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 helpful
  • جهاد أحمد•280
    @Gehad28

    I like how precise you are with spaces especially the line height of texts. Nice work!

  • Abimbola•200
    @Abimzz
    What 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.

    Recipe page

    2
    جهاد أحمد•280
    @Gehad28

    I had the same issue with the image padding, I solved it as following:

    1. Apply padding to the card, let's say padding: 0 2rem;
    2. 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;
    3. 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.

  • Mikolaj Solecki•50
    @123Mikolaj
    What 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.

    Social Links Profile Solution

    1
    جهاد أحمد•280
    @Gehad28

    Wow!

    • 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!

  • DevBytes-J•60
    @DevBytes-J
    What 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

    Blog preview card

    1
    جهاد أحمد•280
    @Gehad28

    The layout looks good on a range of screen sizes. Also, the code well-structured, readable. Nice work!

    Marked as helpful
  • جهاد أحمد•280
    @Gehad28

    Looks good 👏