Skip to content
OverviewSolutions
11
Comments
8
Hanana
@meantoes

All comments

  • hameedmodibbo•110
    @hameedmodibboSubmitted over 1 year ago

    I have issues with the colors i dn't understand how the colors are used please someone enlighten me. on that why us card what background color is used there and also the join our community card please someone tell me

    and for the layout i use grid-template-areas to do it and i add one media query for responsiveness

    single price grid component made with grid and flexbox

    1
    Hanana•170
    @meantoesPosted over 1 year ago

    Hi, good job on completing this challenge🙌🏻

    I see that you used the wrong color for some sections, if you want to match the design, you can try them one by one until it matches.

    If you haven't, I suggest you use Live Server extension on VS Code to see how your code would look like, any browser works fine but I recommend you to use Firefox to live the code. It's my preference, I think it's more convenient, especially to inspect the page.

    I hope you find this helpful, have a nice day and happy coding⭐

    0
  • suisoh•10
    @ssuishSubmitted over 1 year ago

    I am a beginner in web development, and I had a difficulty understanding the behavior of CSS. Due to my lack of experience in CSS styling, do you have any recommended resources regarding best practices, tricks, and techniques?

    QR code component

    3
    Hanana•170
    @meantoesPosted over 1 year ago

    Hi! congrats on completing your first challenge⭐

    I have some recommendations for you

    • wrap your whole content with <main> tag, you can learn more about HTML semantic tags here
    • use relative units for margin, padding, width, and height. learn more about it here

    for resources, I recommend you to check Kevin Powell's YouTube Channel, he gives lots of tricks and tips about CSS. I also recommend Web Dev Simplified, this is my preference, I like the way he explained things.

    oh and, check this video from the CEO of Scrimba, you might become more comfortable in web dev after knowing those checklists.

    hope this helps, have a great day⭐ and happy coding🙌🏻

    2
  • Hanana•170
    @meantoesPosted over 1 year ago

    hi! I see that GitHub can't read your code because of the way you name your file. Try to change your HTML file to index.html. I also recommend you rename your CSS file to style.css and reconnect it in your HTML file.

    You can also check the style-guide file given for background-color. Lastly, try to match the font-size to the design

    Don't forget to download this challenge's starter pack ⭐

    hope this helps, have a good day and keep going🙌🏻⭐

    0
  • Hanana•170
    @meantoesPosted over 1 year ago

    hi! congrats on completing the challenge⭐ I have some suggestions that might interest you,

    • wrap the whole content in the <main> tag instead of the div .container

    • use alt attribute for the perfume image

    for the css, use this trick to center the container

    • add these properties to your body element
        
    body {
        /* -- */
        display: flex;
        align-items: center;
        min-height: 100vh
    }

    hope this helps

    Marked as helpful
    1
  • Hanana•170
    @meantoesPosted over 1 year ago

    hi! congrats on finishing this challenge!

    I have some suggestions for the input type to match the design

    • edit its border and outline's width and color to make it lighter
    • give some space between the label and input-filed by giving a margin
    • create a grid for .exp-date (.month and .year) and CVC

    be sure to check style-guide.md file, it be easier for u to match the design.

    hope this helps🙌🏻 have a nice day⭐

    0
  • Andrei•530
    @XeotheosisSubmitted over 1 year ago

    Issues I can't figure out for the life of me:

    • how to change the svg icons color;
    • how to change the size of the hero image dynamically based on screen size;
    • how to position absolutely the circle/rings pattern without messing up the size of their container.

    If anyone can help me with this, I'd be forever in your debt. You can also send me an email by using the Contact section on the project :)

    Single Page Portfolio / React/EmailJS

    2
    Hanana•170
    @meantoesPosted over 1 year ago

    hi! congrats on finishing this project!

    tbh, I have no idea how u write the code but if I can see the HTML file, I think u need more dividers for each section so u can set them with different sizes and displays.

    here's how I'd do it:

    • div for the hero:
    .hero {
display: grid;
grid-template-column: 2fr 1fr
}
    • div for skills:
    .skills {
display: flex;
flex-wrap: wrap;
}

/* add class skill for each item */
.skill {
width: calc(100% / 2 - 20px); /* adjust for each screen sizes */
}
    • div for projects' grid:
    .project-grid {
display: grid;
grid-template-column: 1fr 1fr; /* adjust for each screen sizes */
}
    • div for contact and input (create two different grids for each):
    .contact {
display: flex;
flex-direction: row; /* adjust for each screen sizes */
justify-content: space-between;
}

    dont forget to add margin for each divs. or in the main-container if u put them in a container.

    hope this helps🙌🏻 have a great day⭐

    0
  • Alper•1,010
    @adonmez04Submitted almost 2 years ago

    Hi everyone,

    I upgraded my solution based on good comments and other solutions. Thanks for that... It looks better now. However, there is no end to this work, right...

    I'm not sure, can I use width and height values for my container elements like section-card? I'm still struggling with responsive design :(

    And I don't know why my text area is shaking, I don't want it to appear this way but I couldn't fix it.

    Any comments, critique, advice is greatly appreciated. For those of you reading this, have a nice day!

    (Note: I separated style.css and media-queries.css for easy to read to code. I'll merge them later.)

    Stats-preview-card-component-v2.0

    1
    Hanana•170
    @meantoesPosted almost 2 years ago

    Hi there, I'm currently trying to finish this challange but I can't find a way to make the header image moved from top to right :<

    I only use flex but even with grid I still can't find a solution to do so, would you please help me or maybe give a trick to solve it? I'd appreciate it soo much⭐

    I know this isn't feedback but I send this anyway🥲 oh and btw your solution looks 99% similar to the design, that's a great job and have a nice day⭐🙆🏻‍♀️

    Marked as helpful
    1
  • Hanana•170
    @meantoesPosted almost 2 years ago

    updated-- using the feedback from @MelvinAguilar 🙇🏻‍♀️

    0