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
OverviewSolutions25Comments23

All comments

  • Alejandro25A• 220

    @Alejandro25AR

    Submitted

    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

    #bem#itcss#sass/scss#typescript#react

    1

    Snehamoy Bag• 600

    @snehamoybag

    Posted

    Man this looks incredible! Great job

    0
  • Snehamoy Bag• 600

    @snehamoybag

    Posted

    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

    @snehamoybag

    Posted

    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
  • P
    Dave Quah• 670

    @Milleus

    Submitted

    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

    #cube-css#accessibility

    2

    Snehamoy Bag• 600

    @snehamoybag

    Posted

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

    0
  • lieneil• 560

    @NJVS

    Submitted

    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

    #sass/scss#animation

    2

    Snehamoy Bag• 600

    @snehamoybag

    Posted

    Woah those waves are so cool 😍 love it!

    1
  • dvbenthem• 110

    @dvbenthem

    Submitted

    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

    @snehamoybag

    Posted

    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

    @Alejandro25AR

    Submitted

    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

    #accessibility#bem#itcss#sass/scss

    1

    Snehamoy Bag• 600

    @snehamoybag

    Posted

    Daaaaaaamn! The animations are so cool 😍

    0
  • POTB• 330

    @Peteonthebeat

    Submitted

    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

    @snehamoybag

    Posted

    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

    @Fidget836

    Submitted

    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

    @snehamoybag

    Posted

    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

    @snehamoybag

    Posted

    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

    @hWeitian

    Submitted

    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

    @snehamoybag

    Posted

    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-Chan

    Submitted

    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

    @snehamoybag

    Posted

    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
  • Lucas 👾• 104,580

    @correlucas

    Submitted

    👾 Hello, Frontend Mentor coding community. This is my solution for the 3 Columns Card Component.

    Feel free to leave any feedback and help me improve my solution or make the code clean!

    • 👾 I added a Custom hover effect on card w/ the Vehicle Types photo on background.

    I'll be happy to hear any feedback and advice!

    3 Column Preview Card (Vanilla CSS + Custom Design & Hover States)

    13

    Snehamoy Bag• 600

    @snehamoybag

    Posted

    Damn this is so cool! 😯🔥

    1
  • Snehamoy Bag• 600

    @snehamoybag

    Posted

    Hi Sam 🙋‍♂️ Great job on completing this challenge it looks awesome 👏 Keep going!

    Answer to your query : If you're talking about the "quote" background image then you can use background-size css property to resize your background images. For the units you can use rem/ em/ % / px etc.

    And similarly if you want to place background image at a certain area in your page then you can use the background-position css property

    Here are few useful links to learn more about them

    Marked as helpful

    1
  • Snehamoy Bag• 600

    @snehamoybag

    Posted

    Great job! Keep on going 🔥

    1
  • Snehamoy Bag• 600

    @snehamoybag

    Posted

    Great Job Cameron 🙌 Congratulations on completing your first challenge 🙌

    And yes it is better to markup your html first then do the css, well atleast some of the basic structural html (i.e. divs, h1, paragraph etc). You can later change, add, remove or edit the html if you have to 😄 and it is completely normal for a web developer to switch between tabs again and again in order to make sure everything looks and works fine.. so don't worry about it 😁

    Marked as helpful

    1
  • Snehamoy Bag• 600

    @snehamoybag

    Posted

    Hi Mani! You can add multiple background-images by separating them with commas

      background-image:  url('/first_image'), url('/second-image');
}

    Similarly they can be positioned separately using commas

    background-position: right 52vw bottom 35vh, left 49vw top 49vh ;

    😄

    1
  • C Lewis• 110

    @casserole27

    Submitted

    Through these exercises, I'm really getting the hang of where and when to code flexbox.

    The background images with circles where very difficult to position. I ended up delving into the CSS background selectors more thoroughly, and eventually using another user's solution. It worked so well that I didn't see the point in reinventing the wheel, but I am going to delve deeper to make sure I understand what the code is doing. Does anyone else have suggestions for this?

    Also, when doing an accessibility check, I darkened the gray text because the suggested color was throwing contrast errors.

    ApplePieGiraffe's solution: https://www.frontendmentor.io/solutions/card-component-with-3d-animation-t0NqrfqMT

    Profile Card Component using HTML, vanilla CSS, Flexbox

    1

    Snehamoy Bag• 600

    @snehamoybag

    Posted

    Hi Lewis, Great job on the challenge 🙌 Me too got stuck in this challenge for a while and then I found this video from Kevin Powell where he discusses more about the background image positioning. It was super helpful 😄

    Marked as helpful

    1
  • P
    Dave Quah• 670

    @Milleus

    Submitted

    A useful HTML element to load different images based on media, pixel density or image type (webp, avif, etc).

    <picture>
    <source srcset="/image-desktop.jpg" media="(min-width: 50em)">
    <img src="/image-mobile.jpg" alt="" >
</picture>

    More about picture element from MDN website.

    Stats preview card component

    #cube-css#accessibility

    1

    Snehamoy Bag• 600

    @snehamoybag

    Posted

    Wow it looks exactly like the design great job! And thanks for the tip.. I had no idea you can do that in html 😳

    1
  • R1loth• 40

    @R1loth

    Submitted

    Hello, while building this I used grid which I'm absolutely new to, and I found it difficult to shift the layout from mobile first to desktop so if you have any recommendations about using the grid and queries better way please let me know, also I don't like the responsiveness while I resize the viewport any tips how I could do it better would be great.

    3-column-using-sass-and-grid-and-media-queries

    #sass/scss

    2

    Snehamoy Bag• 600

    @snehamoybag

    Posted

    Hi! I think you can just skip using grid for mobile screens in this challenge and you can use grid for wide screens to get the cards in a column

    Marked as helpful

    1
  • Snehamoy Bag• 600

    @snehamoybag

    Posted

    Hi Leo, Great job on your first project 🙋

    0
  • Maxwell• 50

    @Maxwell-Santos

    Submitted

    This project was actually quite easy, I don't think I'm a beginner.

    responsive card NFT

    1

    Snehamoy Bag• 600

    @snehamoybag

    Posted

    I think you forgot to add the image hover effect.. otherwise good job

    0
  • Snehamoy Bag• 600

    @snehamoybag

    Posted

    not sure what was your plan here but it looks like a image slider 🤔 and its not supported on my phn either

    0