Skip to content
OverviewSolutions
32
Comments
17
Sarfaraz 👾
@sarfarazstark

All comments

  • Gabriela Amaro•20
    @GabAmarog
    What are you most proud of, and what would you do differently next time?

    I'm proud because I thought it would take a long time (it took an afternoon) to do it because I was afraid of many things, but you learn from mistakes. What would I do differently? I think nothing, every inconvenience introduced me to a new tool to improve my knowledge

    What challenges did you encounter, and how did you overcome them?

    My biggest problem was centering it on the page, it gave me a problem that the white content was widened and not centered, what I did was use a container that had the white container and the information. Apart from this, the measurements would be exact but I did what I could and I am proud

    What specific areas of your project would you like help with?

    I had never made a responsive page, in terms of measurements the QR was on one side or very low but with YouTube research and help from people with greater knowledge than me it helped me. With part of receiving help, any advice helps me a lot, all advice is well received

    My first responsive QR with html and ccs

    #accessibility
    1
    Sarfaraz 👾•650
    @sarfarazstark

    You did a great job, congrats But i would suggest:

    • Using semantic tags like: main for container, h1 for title
    • Center the component using flex on body tag thats all
  • Mesroua Djamel•430
    @MesrouaDjamel
    What are you most proud of, and what would you do differently next time?

    now I use figma before code

    What challenges did you encounter, and how did you overcome them?

    I've never deployed the application before, but reading the documentation on vercel makes it easier.

    Responsive Qr Code with FlexBox

    #next#tailwind-css
    2
    Sarfaraz 👾•650
    @sarfarazstark

    Hello @MesrouaDjamel,

    Your solution looks great! For an even closer match to the given design, consider the following adjustments:

    1. Set the max-width of your main tag to 300px.
    2. Add 0.75rem left and right padding to your p tag.

    These changes will help your solution align more closely with the provided design.

    Best regards, Sarfaraz

    Marked as helpful
  • Sarfaraz 👾•650
    @sarfarazstark

    Solution

    set the body and main div height to auto

    add body padding top and bottom to 2rem

    add gap of 10px to socialmedia tag

    Marked as helpful
  • Sarfaraz 👾•650
    @sarfarazstark

    The issue is with your width and height dont set explicit height and width also always use max-width for this kind of component

    for now use this solution:

    max-width: 870px;

    max-height: 350px;

    Marked as helpful
  • Sarfaraz 👾•650
    @sarfarazstark

    Use color from style-guide.md for text

  • Moussa•540
    @Mahmoud974

    Multi form

    #accessibility#react#typescript#tailwind-css
    1
    Sarfaraz 👾•650
    @sarfarazstark

    In the input field add some paddings

    Even though I filled in all those input fields your code still shows an error try Debug this

    I think you validating the field using the input event use click event to check input fields

  • Sarfaraz 👾•650
    @sarfarazstark

    I have some suggestions for you:

    👉 Use main and section tag

    👉 Reset the default style of the website with this

    *{ box-sizing: border-box; margin: 0;} in your style sheet

    👉 Instead of giving random class names give them some descriptive name

    👉 Use font style which is included in style-guide.md

    👉 Don't use px instead use rem em

    👉 There is a scrollbar why please try to fit everything that it will not give the scrollbar

    👉 I see that you just make a photo like a website as it has no text field nor button tag please use them to make a newsletter email box

    I hope my suggestion helps you 😊

  • Sarfaraz 👾•650
    @sarfarazstark

    use display: none; with media queries

  • Sarfaraz 👾•650
    @sarfarazstark

    Great work,

    But for making it more accurate you should change the color of your headings with this

    • color: hsl(218, 44%, 22%); also, change the tag to h1
    Marked as helpful
  • Sarfaraz 👾•650
    @sarfarazstark

    Great Work.

    You should add shadow to it because it's missing in it

    .order-summary{ box-shadow: 0px 12px 21px -9px rgba(0,0,0,0.75); }

    Marked as helpful
  • Sarfaraz 👾•650
    @sarfarazstark

    Everythings look great just remove that footer text so it look more accurate

    Marked as helpful
  • Sarfaraz 👾•650
    @sarfarazstark

    Great work

    Marked as helpful
  • Sarfaraz 👾•650
    @sarfarazstark

    If you don't have knowledge in CSS or just started leaning please check freecodecamp it will help you

    Marked as helpful
  • Sarfaraz 👾•650
    @sarfarazstark

    You don't even share your live code URL

    Marked as helpful
  • Sarfaraz 👾•650
    @sarfarazstark

    Hell yeah its take but i just did it use display unset in mobile view img in media queries and it worked

  • Sarfaraz 👾•650
    @sarfarazstark

    I dont know why screenshot showing this, please check the live code cuz screenshot showing wrong

  • Sarfaraz 👾•650
    @sarfarazstark

    You did so close but instead of using div use html5 tags for containers and add flex style in your body also check your style-guide.md for text colors and size add lang attribute in html tag