Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions27Comments38

All comments

  • deepika9107• 140

    @deepika9107

    Submitted

    Mobile layout was very difficult to achieve. I'm still not sure about the javascript code . And can anyone tell me how to change the color of svg icons.

    product_landing_page

    #sass/scss

    2

    Manish Patel• 730

    @savvystrider

    Posted

    If you're using SVG code in your HTML, you can change the fill or stroke color directly in the markup or through CSS. If you're importing the SVG as a file, you can open up the code in any text editor and change the stroke and/or fill colors

    Marked as helpful

    0
  • Manish Patel• 730

    @savvystrider

    Posted

    The page looks great and the responsiveness functions well. The only thing I noticed is that the font is not displaying. Looks like the import is commented out in your index.css file:

    /* @import url('https://fonts.google.com/specimen/Epilogue'); */ @font-face { font-family: "Epilogue"; src: local ("Epilogue") url(../fonts/Epilogue/Epilogue-Italic-VariableFont_wght.ttf) format("truetype"); }

    0
  • Manish Patel• 730

    @savvystrider

    Posted

    The easiest way I've learned to properly center an element like this is to apply the following styles to the body element: display: grid; min-height: 100vh; place-items: center;

    Marked as helpful

    0
  • Sbeveandbeyond• 10

    @Sbeveandbeyond

    Submitted

    I am unsure of the approach I took with the divisions and their styles.

    Basic css

    2

    Manish Patel• 730

    @savvystrider

    Posted

    Looks great! The only thing I would recommend is adding some transitions to the hover effects/active states.

    0
  • Ezequiel Alarcon• 270

    @Eze-Alarcon

    Submitted

    Is there any way in which I could improve my information 'modal'?

    What aspects do you think deserve more attention?

    Please feel free to comment on any aspect of the application that you think is good or bad, any feedback is welcome, thank you for your feedback and happy coding.

    Movie app with React & Tailwind

    #framer-motion#react#react-router#tailwind-css#vite

    1

    Manish Patel• 730

    @savvystrider

    Posted

    Wow, looks amazing! I noticed a few minor issues with the modal:

    • clicking anywhere inside the modal closes the modal
    • scrolling up and down with the modal open causes the background to scroll up/down
    1
  • therapy181• 20

    @therapy181

    Submitted

    in my own VS Code Live Server, I see the project just fine with both circles on each corner but as I uploaded them, I don't see them in the Github Pages. Don't know why. Help?

    Profile Card

    2

    Manish Patel• 730

    @savvystrider

    Posted

    Your project looks great! To get your background images to appear, you will have to make a minor modification to your CSS:

    .circle-background and .circle-background2 need a period added inside the parentheses for the url

    background-image: url('./images/bg-pattern-bottom.svg') instead of background-image: url('/images/bg-pattern-bottom.svg').

    0
  • deva• 10

    @devDevaa

    Submitted

    I am a student, I learning web development

    HTML, CSS

    2

    Manish Patel• 730

    @savvystrider

    Posted

    Looks awesome! The main text is a bit hard to read against the background (not enough contrast), so I'd recommend using a darker color to make it stand out.

    1
  • Manish Patel• 730

    @savvystrider

    Posted

    Your design looks good but the images are not displaying. Change the main image to <img src="image-product-desktop.jpg" alt="perfume"> and the icon to <img src="icon-cart.svg" alt="cart"> to get them to display properly.

    0
  • bOREDpANDA69• 70

    @bOREDpANDA69

    Submitted

    Hii

    This is my first fully interactive form, learned very new things, I would like to get help on my code part I think the solution way I took was very unclean, and long process. Please make me better.

    Thank you <3

    Interactive Card Details Form

    2

    Manish Patel• 730

    @savvystrider

    Posted

    Your solution looks awesome and the form validation works really well. The only thing I'd suggest is preventing users from typing letters into input fields intended for numbers. You can achieve that with HTML.

    1
  • Manish Patel• 730

    @savvystrider

    Posted

    The text content looks good but it looks like you did not upload an image with your code.

    Marked as helpful

    0
  • Marcel Czubak• 100

    @marcelczubak

    Submitted

    Overall happy with how this turned out! Getting the hang of it

    Had a little issue with the mobile view. My browser wouldn't minimise to the mobile view at a @media ... (max-width: 550px) but worked at 600px- so I stuck with that. It might appear a bit squished in the mobile view but ah well :/

    Product Preview Card Component

    1

  • Manish Patel• 730

    @savvystrider

    Posted

    The file path of your img is incorrect, so it's not showing up. Change the src attribute to src="./qr-code-component-main/images/image-qr-code.png".

    1
  • P13czaR• 70

    @P13czaR

    Submitted

    Hello, please give me some advices to do better this code. Thanks for help.

    NFT Card Component

    #sass/scss

    1

    Manish Patel• 730

    @savvystrider

    Posted

    The design came out well! I'd recommend the following in your HTML:

    • Add alt text to all images for accessibility.
    • Use relative paths for file references. This will ensure you don't have issues with file paths if you change hosts.
    • Use more semantic tags, like header, nav, footer, or section for accessibility.
    0
  • Manish Patel• 730

    @savvystrider

    Posted

    Looks good! I'd recommend not using pixel units for width in your media queries. Consider using relative units of measurements, like em or rem or percentags. Seems like you are using them in other parts of your code already.

    Marked as helpful

    1
  • Manish Patel• 730

    @savvystrider

    Posted

    Looks excellent! Small suggestion:

    Avoid using floats for layout: Instead of floating the icon to the right in .main-card__icon, consider using flexbox or grid to position it.

    1
  • TheRival2002• 330

    @TheRival2002

    Submitted

    It was a very interesting project, I am in the learning process of JS so the booking page was a struggle, I made a few pages to make it possible. Would appreciate any comment.

    Responsive multi-page using grid and flex

    1

    Manish Patel• 730

    @savvystrider

    Posted

    Looks amazing!

    Here are some suggestions to improve the JS:

    • Use const instead of let for variables that are not reassigned.

    • Use textContent instead of innerHTML since you're only setting text content.

    • Use input event instead of click event for input fields: Instead of attaching the click event to increase or decrease the number of visitors, you can attach the input event to the visitorNumber input field. This allows users to change the value by typing directly into the input field.

    • Instead of showDiv1(), showDiv2(), and showDiv3(), you could use more descriptive function names in camelCase, such as showFamilyBooking(), showSpecialBooking(), and showSocialBooking().

    • Also, try to consolidate repeated code: The code that checks if a value is valid and shows or hides the label could be consolidated into a separate function that can be reused for each input field.

    1
  • Manish Patel• 730

    @savvystrider

    Posted

    • You can use background-size: cover to display the image as a background image and then use the cover property to scale it.
    • You can add max-width: 100% to all images to make sure that images don't get any larger than they are supposed to be.
    • You can also use the transform: scale property to scale the image.
    • Also, you can use the HTML picture element "to offer alternative versions of an image for different display/device scenarios."

    Hope this helps! I think your project came out well, regardless.

    0
  • Manish Patel• 730

    @savvystrider

    Posted

    Love the new color scheme and animation! Only thing I would suggest is lowering the opacity on the buttons before they're clicked on. It's hard to tell the states apart.

    Marked as helpful

    0
  • Reni• 40

    @renikoulen

    Submitted

    I struggled with using fonts locally for a good part of the exercise. Also, I am unsure why I could not create a border-radius around the cards. Why can't I position the cards wrapped inside a <main> section to the center of the page? And why does the button move and partially cover the paragraph text when the screen gets smaller?

    Responsive Landing Page using CSS Grid revised

    3

    Manish Patel• 730

    @savvystrider

    Posted

    Hi, I'm glad you didn't give up! I think it came out well.

    If you want to apply specific styles when the screen is below a certain size, you'll need to use Media Queries. The syntax takes some getting used to, but it would go something like this:

    @media (max-width: 375px) { /* … */ }

    Quick notes:

    • remove max-width: 85rem; from the body element. It will center the content a little more smoothly.
    • there's a small typo in your footer styles that's causing some weird formatting: width: 100dvh;
    0
  • A.• 390

    @MooseCowBear

    Submitted

    The active states for this challenge show that hovering/focusing on the container should change the container's background color, but that hovering/focusing on an ellipsis image should not. In the case of keyboard navigation, css was able to achieve this. But I could not find a css solution for getting the same effect when hovering with the mouse.

    Does anyone know if there is a way to get the (lack of) hover effect of a parent element with css? Or is this something I would have to do in JS?

    Time tracking dashboard with Grid

    1

    Manish Patel• 730

    @savvystrider

    Posted

    You can use the :not() CSS pseudo selector. It would work something like this:

    .container:hover:not(.icon) {...};

    MDN link

    0
  • P
    M-D1• 270

    @M-D1

    Submitted

    In this challenge I put display flex on the body and on a div.content is that good ?? I feel like I made things harder for myself

    Order summary component

    3

    Manish Patel• 730

    @savvystrider

    Posted

    Looks good! Using a display of flex on the body element is fairly common for centering content. You could also use display: grid; min-height: 100vh; place-items: center.

    The display of flex on the div is also common for aligning content.

    1
  • Manish Patel• 730

    @savvystrider

    Posted

    Your solution looks good!

    I would recommend the following, though:

    • You have too much padding/whitespace on larger screens. Trim it down.
    • The mobile image looks a bit warped. You can fix it by adding this property to the image: object-fit: cover;.
    1
  • Manish Patel• 730

    @savvystrider

    Posted

    Looks excellent! Only have one recommendation: change the color of the icons at the bottom to stand out against the background. It looks like they're supposed to be #fff in the screenshot but hard to tell.

    Marked as helpful

    1