Skip to content
OverviewSolutions
25
Comments
23
Snehamoy Bag
@snehamoybag

All comments

  • Alejandro25Aβ€’220
    @Alejandro25ARSubmitted over 1 year ago

    Hello Mentor Frontend community

    As a bonus, add:

    • Dynamic animation of calculate age button when fields are valid or invalid
    • Custom text field with a button that opens a pop-up window to select the values taken by the input text field
    • Button to change the page theme (dark and light)

    I would be grateful if you could give me some guidance regarding:

    • Any other topic that helps me improve, I appreciate your comments.
    • The logic where I should go using atomic design, since I have used it in some atoms, molecules and organisms.
    • Any other topic that will help me to improve, I appreciate your comments.

    Thank you very much.

    Age calculator with React + TS, Atomic desing and mobile first

    1
    Snehamoy Bagβ€’600
    @snehamoybagPosted over 1 year ago

    Man this looks incredible! Great job

    0
  • Snehamoy Bagβ€’600
    @snehamoybagPosted over 1 year ago

    Hi @justEfere, πŸ™‹β€β™‚οΈ

    Congratulations on completing this challenge! πŸŽ‰ You did a great job on the layout, it looks great! πŸ‘

    You can use percentage units to give relative size to the children πŸ˜„

    <div class="container">
   <div class="container-item"></div>
</div>

    .container {
    width: 100px;
}

.container-item {
    width: 50%;
}

    This will make the .container-item to be 50% of its parent. So if you change the width of .container, the .container-item's width will also change.

    Marked as helpful
    0
  • Snehamoy Bagβ€’600
    @snehamoybagPosted over 1 year ago

    Hi @edivaldojrdev,

    Great job completing this challenge! πŸ‘

    Answering to your question, since you have only set the img {height = 100%}, it only stretched the image that is inside of your <img> tag. The mobile version of the image is actually inside the <source> tag within the picture.

    Therefore, in order to target both img and source tag you can use this selector :

    picture > * {
    height: 100%;
}

    This (picture > * { }) will target all element that is a direct child of the <picture> element. πŸ˜„

    Also, I just noticed that you are using order property to shift the layout 😯 as a disclaimer I'd recommend you not use it often, as it can mess up the actual order of html document which can cause major confusion to someone using an assertive technology πŸ˜…

    0
  • Dave Quahβ€’660
    @MilleusSubmitted almost 2 years ago

    Hello everyone πŸ‘‹,

    Here's my solution for Ping single column coming soon page.

    I've learnt that to make error messages accessible, we can use the Aria Live Regions. We can set aria-live="polite" so that screen readers will inform of the error when the user is idle, and aria-live="assertive" for more time-sensitive and critical notifications.

    I'd appreciate it if you can provide feedback on my solution. Thanks and happy coding! πŸ™‡β€β™‚οΈπŸ™

    Ping single column coming soon page

    2
    Snehamoy Bagβ€’600
    @snehamoybagPosted almost 2 years ago

    You're an inspiration.. always learn something useful from you

    0
  • lieneilβ€’560
    @NJVSSubmitted about 2 years ago

    I did go overboard on this project. I didn't use the provided svg background waves, instead, I built randomly generated waves using javascript. But other than that, this project is very simple, and the only Javascript needed is the form validation. I've already done a simple email validation from my previous FrontendMentor challenge(Base Apparel coming soon page) so I just copy and paste it.

    For the randomly generated waves, this script is heavily inspired from a library: Wavyfy by peacepostman. And if you wanna try it, I recommend using Wavyfy instead of mine. Wavyfy has a lot more functionality and mine is a little messy

    Also, I did consider users who turned off their animation on their device prefers-reduced-motion: reduce. If you do, it will only generate wave once. And if you are not sure if it's turned off, check the console. I leave a console.log() to see if it's ON or OFF.

    If you guys have any suggestion, please don't hesitate to comment. Thaaaanks!

    Huddle Landing Page

    2
    Snehamoy Bagβ€’600
    @snehamoybagPosted about 2 years ago

    Woah those waves are so cool 😍 love it!

    1
  • dvbenthemβ€’110
    @dvbenthemSubmitted about 2 years ago

    Hello coders,

    This was a fun project to build. The only thing I came across was that when I
    give the body a height: 100vh;, the text from the h1 and p from the top text it shifted to the top and out of sight. Does anyone know why this happens?

    How do you get that nice border effect without the curling edges on the cards?

    Any feedback is welcome :)

    Thanks, Danny

    four-card-feature-section-master

    2
    Snehamoy Bagβ€’600
    @snehamoybagPosted about 2 years ago

    Hi @dvbenthem, Congratulations on completing the challenge! Good Job! πŸ‘

    Answering to your query

    Setting a fixed height can be problematic.

    In small screen devices the content's height increases as the content's width shrinks, so if you have a element with set height the content inside of it overflows out of it.

    In your case as you have set a height on body, the extra content overflows out of the body and everything overflowing out of the body gets cropped. πŸ˜…

    To fix the issue

    Try to stick with min-height when setting a height on a element. Setting a min-height will give the element the minimum desired height and it'll strech if the content inside of it increases, so it won't cause any overflow.

    In short always use min-height unless you have a solid reason not to. πŸ‘

    Marked as helpful
    1
  • Alejandro25Aβ€’220
    @Alejandro25ARSubmitted over 2 years ago

    Hi Mentor Frontend community

    Change the accent color to blue, because orange doesn't contrast well with background colors.

    I would like to know if it is recommended to remove the content of the rating card in the DOM after submitting the information. I do this so that the user can't resubmit the form.

    Any comment that helps me improve will be well received, thank you very much

    Different accent color, animations, BEMIT and Vanilla JS

    1
    Snehamoy Bagβ€’600
    @snehamoybagPosted over 2 years ago

    Daaaaaaamn! The animations are so cool 😍

    0
  • POTBβ€’330
    @PeteonthebeatSubmitted over 2 years ago

    What did you find difficult while building the project? β€”Β I am in the process of figuring out 'Flex' and 'Grid.' So I'll refer to them as the most difficult. I

    Which areas of your code are you unsure of? β€” I am quite satisfied with the results I get from using 'em' and 'rem' instead of pixels. On the contrary, I'm not 100% sure I use those values most optimally...

    Do you have any questions about best practices? β€”Β Yes, I actually have one. What should I do if the following doesn't center a div inside my main?

    main { display: flex; justify-content: center; align-items: center; }

    Regards!

    Flex-box, Grid

    2
    Snehamoy Bagβ€’600
    @snehamoybagPosted over 2 years ago

    Hi @Peteonthebeat

    Looks like your site is not loaded as the index.html is inside of a folder/directory. I'd recommended you to put the files outside of the Qr~Code-Component folder and then update the solution πŸ‘

    And also answering to your query, justify-content: center and align-items: center should center a div both horizontally and vertically when the parent container has a set height. If the parent container doesn't have a height, align-items property won't work when flex-direction is set to row. Similarly, justify-content won't work when the parent container doesn't have a height and its flex-direction is set to column. πŸ˜„πŸ‘

    Marked as helpful
    1
  • Fidget836β€’20
    @Fidget836Submitted over 2 years ago

    This is my first HTML/CSS challenge so if you see bad details in the code or bad organization of the elements, don't hesitate to tell me, so I can avoid keeping these potential bad habits. But I wonder especially how to change the text in css with the media queries? In this challenge, we can see in desktop version "Gabrielle <br /> Essence Eau De Parfum" and after in mobile version "Gabrielle Essence <br /> Eau De Parfum". How i can change that ? Thank you. Have a good day.

    My first challenge HTML / CSS - Product preview card component

    3
    Snehamoy Bagβ€’600
    @snehamoybagPosted over 2 years ago

    Hi @Fidget836 πŸ™‹β€β™‚οΈ

    Congratulations on completing your first challenge πŸ‘ really good stuff πŸ‘

    Usually <br> tag is used to signify a line break so using it in a single sentence is semantically a bad idea. Instead you can set the title a max-width using the super useful ch unit, where ch stands for characters.

    h1 { max-width: 15ch; }

    LEARN MORE

    And if you want change the width of the title for wider screens you can use the media queries

    @media (min-width: 720px) { h1 {max-width: 10ch;} }

    *This change of style will appear when the screen resolution is 720px or more πŸ˜„ *

    Learn more about Media Queries

    Marked as helpful
    0
  • Snehamoy Bagβ€’600
    @snehamoybagPosted over 2 years ago

    Hi Ayush πŸ™‹β€β™‚οΈ

    Great job completing the challenge πŸ‘

    You can use media queries to style your page for big screens. Alternatively you can use non-fixed units such as percentages % to set the widths and heights of an element πŸ˜„πŸ‘

    Marked as helpful
    0
  • hWeitianβ€’20
    @hWeitianSubmitted over 2 years ago

    Hi, I just completed my first project. I would appreciate any feedback and comments to improve my code. Thank you!

    QR Code Component

    1
    Snehamoy Bagβ€’600
    @snehamoybagPosted over 2 years ago

    Hi @hWeitian, Congratulations on completing on your first project πŸ‘ I really liked how you used Flex-box efficiently to match the desired outcome. Great job!

    One concern i can notice in your css is the html { width: 100vw; height: 100vh } πŸ˜… as i've learnt earlier from a fellow frontend mentor dev that setting a fixed width and height can give scroll bars to some device and worse.. the content might even get cropped. So i'd recommend you to never use width to set the pages cause width is by default 100% on all devices and is responsive. On the other hand setting a fixed height can cause the content to overflow or get cropped.. so whenever you need to set a height.. always use the min-height property πŸ˜„πŸ‘

    Marked as helpful
    0
  • Man Ting Chanβ€’70
    @M-ChanSubmitted over 2 years ago

    Not exactly the most responsive... I had some issues with the mobile version. I used CSS grid for the layout and '@media only screen and (max-width: )' to create a new stylesheet for mobiles. However, even though I used viewport sizes and overflow hidden, there was still scrolling on the mobile and weird positions for the circles. Any suggestions are appreciated!

    Responsive Profile-Card-Component using CSS Grid

    1
    Snehamoy Bagβ€’600
    @snehamoybagPosted over 2 years ago

    Hi Chan πŸ™‹β€β™‚οΈ Great try attempting this challenge πŸ‘ I too struggled positioning the background-circle images πŸ˜‚ its no big deal though as a developer we learn new things when we get stuck 😁

    So for your queries you don't actually have to place the images on your html. You can set multiple background images separating them with commas ,. Like this background-image: url(images/1st-img.svg) , url(images/2nd-img.svg);

    Similarly to position the two images separately you can do something like this background-position: right 52vw bottom 35vh, left 49vw top 49vh ; As you can see, we used , to position the two different images seperately. πŸ˜ƒ

    To make the profile card responsive, You can set its default width to something like width: 90% and to make the card not get too wide add a calculated max-width, like max-width: 21rem

    Here are few documents you can check to learn more about this:

    And as a final note, You don't really have to create a separate css file for the mobile version . You can add as many media queries you want in a single css file. πŸ‘

    Feel free to reply if you need any further help πŸ˜„

    Marked as helpful
    0