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
OverviewSolutions11Comments11

All comments

  • P
    Sara Dunlop• 220

    @Risclover

    Posted

    Beautiful job!

    0
  • P
    Sara Dunlop• 220

    @Risclover

    Posted

    Just a small note about your code. You are using a lot of nested <section> elements, and several of them would be better as <div> tags instead.

    From the W3C specification:

    "The <section> tag is not a generic container. If you need an element only for styling purposes or for scripting, it’s better to use a <div> element instead. The use of the <section> element is appropriate only when the contents of an element are listed in the document’s outline."

    0
  • P
    Sara Dunlop• 220

    @Risclover

    Posted

    From what I see, you absolutely nailed this. Good job!

    2
  • P
    Sara Dunlop• 220

    @Risclover

    Posted

    Hi! You commented on my solution for the same challenge (about the logo/h1 element issue), so I came over to check yours out. I'm glad I'm not the only one who did the Reset button colors like how we did them.

    I like how you made it so that the People number automatically begins with 1 as well. Very smart!

    0
  • Mason Dubelbeis• 140

    @mdubelbeis

    Submitted

    • This challenge was pretty straight forward. One of the main issues that occurred was the widths of the card and getting it just right. Since I am still learning how to effectively use TailwindCSS, it was weird getting exactly what I wanted.

    • As a beginner to React, the area where a lot of my concerns other than discussed above was my implementation of the state in React.

    • This project has guided me to dig deeper into best practices with TailwindCSS widths and React state implementation. Any advice on these would be much appreciated.

    Interactive Rating Component with React and TailwindCSS

    #react#tailwind-css

    2

    P
    Sara Dunlop• 220

    @Risclover

    Posted

    Hey :) I just wanted to point out that the "focus background" is missing from the rating buttons. Like the design images show, they are supposed to have a grey background when one is selected. Just some advice for when you do tackle this, you should make it so that it remains in that style even when you focus off of the button. And of course, only one should be able to be selected at a time.

    Marked as helpful

    0
  • Alexander Craggs• 35

    @EyreC

    Submitted

    I submitted this solution still unsure how to do a few things.

    1. I wanted to anchor the 'Learn More' button to the bottom of the colored div, so as the page height changed the button remained a constant distance from the bottom of the div. I achieved this by setting a fixed margin-top css style to the button, but feel like there could be a better way of doing this - preferably within tailwind
    2. I attempted use a flexbox within a flexbox, but noticed that setting 'justify-between' on the inner flex box did not spread the items apart, though the same property successfully spread elements when set on the parent flex box container. I couldn't understand this behaviour. I had the three colored divs contained in a flexbox div, and tried to use each colored div as a flex box for its contents
    3. When making the screen more narrow, there are a few sizes where the 'Learn More' button is not lined up horizontally across all three colored divs as the paragraph text have different numbers of lines. Is using a flexbox the best way to resolve this type of problem (see qn 2) or are there other best practices?
    4. When I make the screen shorter (reduce the height) I want the colored div to reduce in size as well, until a minimum threshold then it should stop shrinking and force the user to scroll up and down. I acheived this by setting a % height and a minimum height in rem. I thought the % height was fine, but worry that setting the minimum height in rem may have consequences I didn't predict. Is there a best practice around this? 4.1 I also noticed that the white space from my top and bottom padding is no longer visible when I use this minimum height approach and reduce the vertical height of the screen. This is ok in my opinion, but I am curious as to how to keep the white space there while still setting the min-height to get scrolling once the screen is shrunk to a certain point

    Cars4Us built with Tailwindcss

    1

    P
    Sara Dunlop• 220

    @Risclover

    Posted

    Hi Alexander!

    I happened to notice that a lot of what you're having trouble with, I did, too, but I found solutions that worked for me. I submitted my own version of this challenge just a couple of hours ago if you'd like to take a look. It was created via pure HTML and CSS. I've never used anything but vanilla CSS (so no Tailwinds knowledge), but I think that when looking through your code, I can tell (for the most part) what's what.

    I'm replying to your solution questions because I feel like you and I have the same thinking in terms of how to execute this solution.

    • You might want to consider putting another media query breakpoint from around 795px to at least 500px. I had to do the same because I had the same issue - the mobile layout was too stretched for that screen resolution. I ended up just putting in a stationary mobile layout (meaning no responsiveness) for a portion of the "middle" chunk of resolution sizes (check out my solution to see what I mean). I don't have nearly enough experience to know whether this is the "right" thing to do, but it works for this challenge I think.
    • I, too, had decided that it would be best to do one big main container that the three smaller containers would fit into in order to use Flexbox to align everything correctly. I essentially achieved my mobile layout by making my big container flex-direction: column, and I did the same with the 3 smaller containers (since everything is vertically placed, flex-direction: column;). Then for my desktop layout, my main container went to row while each individual container stayed column. My point in saying all of this is that that approach isn't the problem, which brings me to the next thing.
    • When you mention justify-between, do you mean justify-content: space-between? Or were you using justify-between? Because I don't think that exists, which is why it wasn't working. (Or wait, is justify-between a Tailwinds thing?) When thinking about my approach for tackling this challenge, I, too, had the initial thought of using justify-content: space-between for the three smaller containers, but then I ended up using a combination of padding and margin to achieve good spacing.
    • In regards to your button/height problems, I have a solution for your buttons, but I wanted to say this first. With layouts like these, I tend to not touch height at all (in terms of responsiveness, I mean). I base my layout changes on width because when I try to change via height size, the results never seem to make sense, and I can't get it to look good. Personally, I don't think it's worth the huge space between the paragraphs and buttons in your 3 containers just so it's responsive to height change, but I also respect your opinion. :)
    • As for your question about the button being misaligned in places, you actually helped me out! I thought I was all good in that regard and went back to see what I did, but then I noticed that my buttons were doing the same thing! So thanks for that! I had to dig through answers around the internet to find something that worked for my specific situation, but after a little while, I did find a solution, and I think it could work for you, too.
    1. Your 3 containers (the parent containers of the buttons) need to have position: relative; set if they don't already. If you don't do this, the buttons will place themselves according to the actual page, not their boxes.
    2. Give your buttons position: absolute;. This is what will keep them still.
    3. You also need to give your buttons bottom: #px;, which places your buttons however many pixels above the bottom of each of the containers you want them to be.

    (Edit: Oh duh, you're using Tailwinds... well, whatever the equivalent code in Tailwinds is, do that.)

    As a side note, when I executed the above, all of my containers became too short, so I did have to adjust code elsewhere. I ended up needing to fiddle with my <p> padding. But I fixed everything, and now my buttons stay aligned, so hopefully it works for you, too!

    Oh, and I don't know if you've seen this, but I just noticed that right before your page changes from desktop mode to mobile mode, the buttons get disproportionately tall and look wonky. Might want to look into that.

    Alright, that's enough from me. I hope at least one little thing from this was helpful in some way. I'm pretty new to this too, so I'm not claiming that any of what I'm saying is best practice. I just wanted to share what worked for me.

    Apart from the issues, your page looks wonderful! Keep it up.

    Cheers!

    Sara

    1
  • Harsh Gupta• 90

    @hg8116

    Submitted

    Hey Guys! This is my third submission, learned some new things about CSS grid. please comment where I can improve.

    3-column-preview-card

    1

    P
    Sara Dunlop• 220

    @Risclover

    Posted

    Hi Harsh Gupta!

    I just did this challenge, too. I took a look at your page. A little bit of a disclaimer - I haven't looked at your code. This is from a visual viewpoint only. :)

    Looking at your page initially, it looks good! Obviously, there are some differences here and there between your solution and the original design - your buttons are smaller, your headings are smaller, the spacing is a little different, and you should put in a line height of somewhere around 1.5 to 2 - but all of that is nitpicky, and only matters if you want to get closer to an exact remake.

    When I went into the dev tools and started playing with the responsiveness of your page, I started noticing some stuff you should take a look at.

    1. The challenge is for us to create a desktop layout and a mobile layout so that the page is "responsive" to different screen displays. The mobile layout they used for their sample was 375px, so when I'm doing these challenges, I base my mobile layout off of a 375px display so I can most closely match theirs, and go from there. Anyway, when you go to 375px with your page, your buttons are way warped in shape - their height and width aren't proportional any more. Other than that, things look good there, too.

    2. From around 1000 - 1100px, your display looks odd. It's just too squished. Similarly, when the layout switches over to the mobile layout (at 959px), it looks really off until around, I don't know, 500px or so.

    For the record, I did the same thing. I, too, had a desktop and a mobile layout, and my problem was the same - the desktop layout was too squished going down in px, and then when it hit the mobile layout resolution sizes, the layout was way too wide until (scaling down) I hit around 600px or so.

    I highly recommend that you do what I did - make an additional media query breakpoint! Pick a chunk of resolution size range and either make it like the mobile layout or the desktop layout, but in a way that looks right for the screen sizes, if that makes sense.

    What I did for that "middle" layout was I created a stationary mobile layout, meaning although my elements were responsive for my regular desktop and mobile layouts, once it hit the "middle" mobile layout, it was just one fixed size for a bit until becoming responsive again. Check out my solution to see what I'm talking about if you'd like.

    Other than the responsiveness issue, I think you're doing well! Once again I'll mention that I haven't checked out your code, so no guarantees there ;)

    Keep it up, fellow newbie!

    • Sara

    Marked as helpful

    0
  • rluna15• 60

    @rluna15

    Submitted

    I used flex box to organize the text side and image side but for some reason on the mobile layout the image is not displaying correctly. The image is being cut off short but when I change the height of container it doesn't change at all.

    Also for the image I am using a background color with a background blending mode to give it the color overlay effect to the image but when it's on the browser the blending mode it not working, hiding the image with the background color.

    Stats Card With Sass

    2

    P
    Sara Dunlop• 220

    @Risclover

    Posted

    I'm not sure what you mean by blending mode, but I put an opacity on my image. Maybe if you do the same it'll work? Or use z-index to put it in front?

    0
  • Yazdun• 1,310

    @Yazdun

    Submitted

    Hello ! I added extra feature to this challenge so you can toggle between dark and light theme. and here I have some questions :

    • Website should load dark theme by default, does it function correctly on your browser ?
    • Can you toggle between themes ? does this solution functions correctly ?
    • What are the best practices on creating dark and light mode ? is my approach any good ?

    ✅ I'd be glad to know your feedbacks on this

    Stats preview card component 🌞 Light-mode / Dark-mode toggle feature

    1

    P
    Sara Dunlop• 220

    @Risclover

    Posted

    After you gave me some feedback, I decided to look at your solution for the same challenge and found this. :) So, to help you out because nobody else did:

    Website should load dark theme by default, does it function correctly on your browser ?

    • Yes. I'm using Chrome (v. 95.0.4638.54), if it matters.

    Can you toggle between themes ? does this solution functions correctly ?

    • Yes.

    What are the best practices on creating dark and light mode ? is my approach any good ?

    • If you are asking in terms of code, I couldn't tell you. However, I will say that, in regards to your color scheme for the "Light" mode, it kind of hurts my eyes. Something about the background being darker than the content box (grey vs. white) coupled with the blue accents makes my brain not like it. I think if you were to make the background white and the content box grey, that could work better.

    Edit: Or, after taking a second look at it, maybe if you were to make it so that the shadow goes around the whole box instead of just at the bottom to create some better depth, that might also be a possible way to improve the visuals.

    Thanks again for your comment on my challenge! Yours looks wonderful!

    Marked as helpful

    0
  • Agustina Hernandez• 10

    @AgustHernandez

    Submitted

    Hello !

    This is my first challenge in Frontend Mentor.

    Although I recently finished a Web Development course, I don't have much experience with HTML and CSS.

    What did you think of my project? Would you make any improvements?

    Thank you !!

    Responsive Order Component with CSS Flexbox and SASS

    2

    P
    Sara Dunlop• 220

    @Risclover

    Posted

    I don't know if you've noticed this, but there's no background showing up. :)

    0
  • P
    Sara Dunlop• 220

    @Risclover

    Posted

    Hi! I know you just posted, but I had a few comments for you.

    First of all, good job on your page so far! Just a few things I've noticed:

    • You've used the wrong font for your stats (the bolded stats, like "10k+" and such).
    • You didn't try to change the image color. I just completed this challenge as well, and if you'd like a hint, I was able to do something with color by changing the image's opacity. I know there are different ways to do this, and I'm not sure if mine is even the "correct" or suggested way, but yeah.
    • A big part of this challenge was to make the page responsive so that there's a "desktop" look and a "mobile" look. You've got the desktop look down pretty well, but I noticed that you didn't try to make it responsive and match their mobile screenshot? So that's something you can work on.
    • One last thing: According to the HTML Semantics Report, you've used width='100%' in this line of code: <img src=`images/image-header-desktop.jpg` alt=`image-header-desktop` width=`100%`> I don't think you're supposed to use the % sign for inline CSS. Besides, you should try to eliminate all of your inline CSS and practice only using external CSS. :)

    Other than the above, I thought your solution was fairly well done! Good job!

    Marked as helpful

    0