Skip to content
OverviewSolutions
27
Comments
12
John
@MiyaoCat

All comments

  • Tharun Raj•1,330
    @Code-BeakerSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Completed it and learned how to google for things that you find difficult. That's all :)

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

    I didn't know how to get the rounded borders around the icons. So did a bit of Googling and Luckily, Stack Overflow helped me solve it.

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

    I'm not really confident about its responsiveness. It might not be perfect for bigger displays because it is my first time trying mobile-first workflow completely.

    I would like to know if I did well with the CSS. Thank you!

    Huddle Landing page using Grid, Flex and Media Queries

    1
    John•410
    @MiyaoCatPosted 8 months ago

    You have <main class='main'>. I think that's redundant. You'll only have one <main> element so you don't necessarily need to give it a class. If you do, maybe make it more descriptive of the element.

    The site only covers the top half of the screen when viewed on desktop. To fill out the page so the content covers the entire height of the screen you could do main { display: flex; flex-direction: column; } then header { flex-grow: 1}

    You have most of the content in the <div='header'>. You can use the official <header> tag for the logo and have the meat of the content in <main>. Then put the social icons in the <footer>.

    Otherwise, looks great!

    Marked as helpful
    1
  • 123dakalo•50
    @123dakaloSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    When I began coding I ignored table elements but in this solution I learned how to use tables.

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

    The challenge I faced was making the design to be responsive like in the design I failed to mimic the design solution. I'll overcome by learning more.

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

    Media query please and maybe to centre big element like this one

    Responsive recipe page using HTML and CSS

    2
    John•410
    @MiyaoCatPosted 8 months ago

    Looks great! The spacing between the bullets and numbers and the text is well done. I know I struggled with that.

    Some small differences I noticed:

    • Your line spacing looks a bit tight compared the the design file.

    • I saw you use @media (max-width: 426px). For mobile-first development, you'll want to use @media (min-width: 426px). When you build mobile-first, you build out the mobile screen first. As you make the screen bigger, you may change some of the CSS. So you'll say, when the screen size is a minimum of X pixels, the elements will include Y CSS. In other words, when the screen size is X pixels or larger, then do this...Hope that makes sense! I know for me it seemed totally backwards and took me a minute to understand it.

    0
  • Moises2710•190
    @Moises2710Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    I proud of my HTML because I feel that I am improve my knowledge in this topic.

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

    I didn't have any problem in this challenge.

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

    I would like to receive help in my responsive design.

    Web page with responsive desing and flexbox

    2
    John•410
    @MiyaoCatPosted 9 months ago

    Nice work! Not much to add, just a couple things I quickly noticed.

    • It looks like your box-shadow around the Payment button is off. Here's a handy article that explains the numbers. https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
    • An even easier tool is Chrome's inspect too. If you inspect the Payment element then click on the little purple box next to the box-shadow declaration, you can drap and pull the box shadow and it'll automatically update the numbers.
    • I see you used main as the container. However this is a component. I like to think of components as a piece of the page that can be placed anywhere on the page. I would add a secondary container to the main, I typically just make a div and give it the class name of whatever the component is I'm building.
    • When I pull the window wider than 1440px, the background wave cuts off. Also, it looks like the button half is white when it should be blue. I went back and looked at my solution and I didn't even add the wave. Oops!

    Otherwise, looks great! Keep it up!

    Marked as helpful
    0
  • Moises2710•190
    @Moises2710Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    I proud of my HTML because I feel that I am improve my knowledge in this topic.

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

    I didn't have any problem in this challenge.

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

    I would like to receive help in my responsive design.

    Web page with responsive desing and flexbox

    2
    John•410
    @MiyaoCatPosted 9 months ago

    Nice work! Not much to add, just a couple things I quickly noticed.

    • It looks like your box-shadow around the Payment button is off. Here's a handy article that explains the numbers. https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
    • An even easier tool is Chrome's inspect too. If you inspect the Payment element then click on the little purple box next to the box-shadow declaration, you can drap and pull the box shadow and it'll automatically update the numbers.
    • I see you used main as the container. However this is a component. I like to think of components as a piece of the page that can be placed anywhere on the page. I would add a secondary container to the main, I typically just make a div and give it the class name of whatever the component is I'm building.
    • When I pull the window wider than 1440px, the background wave cuts off. Also, it looks like the button half is white when it should be blue. I went back and looked at my solution and I didn't even add the wave. Oops!

    Otherwise, looks great! Keep it up!

    0
  • John•410
    @MiyaoCatSubmitted 9 months ago

    I'm decided to incorporate SCSS with this challenge (and future challenges going forward). I tried using mixins and an extension, just for practice. I really like the nesting capability.

    I had some trouble with the background-image again. I wasn't quite sure on the framing of it all. I measured the height/width of the entire desktop image to bet 800x1440. All of the content measured out to be about 556x1100. I think I messed up and set the social-proof div to 800x1100 with padding, but in reality I should probably have set the social-proof div to 800x1100. If anyone has best practices on this or corrections for me, send them my way!

    Social Proof - Mobile first, SCSS, Grid, Flexbox

    1
    John•410
    @MiyaoCatPosted 9 months ago

    I updated the size of the social-proof div and made it smaller. I also moved the background-images to main instead of within the social-proof div.

    0
  • John•410
    @MiyaoCatSubmitted 9 months ago

    I couldn't figure out the hover effect so I'm submitting now to see other people's solutions.

    I was able to get the view-icon with the background-color to appear on hover, but the icon is too big and the opacity too strong.

    NFT card - Hover effect, Flexbox

    2
    John•410
    @MiyaoCatPosted 9 months ago

    Thank you so much! That was incredibly helpful! I was wondering why the .overlay was appearing so big.

    Do you know why the bit of whitespace appears at the bottom if I don't do display: block to the NFT image?

    1
  • Jack-OC•250
    @Jack-OCSubmitted 9 months ago

    I had a few issues with using radio inputs to select ratings and then displaying it in the thank you section. I got it working and now have a better understanding of using input elements and using their values in javascript. Any suggestions to clean up my solution would be greatly appreciated, Jack

    Interactive Rating Component

    1
    John•410
    @MiyaoCatPosted 9 months ago

    Nice work! I initially thought about using radio buttons, but I went with list-items because they were easier to work with. I think radio buttons was the appropriate choice.

    One small detail - it looks like your numbers are slightly off-center vertically. They look a couple pixels too high.

    0
  • John•410
    @MiyaoCatPosted 9 months ago

    Looks great! Only a couple small differences I see.

    • In your Instructions section, the list-items are indented. The challenge has them aligned with the sub-header. They're pretty tricky to adjust and I don't really know the best way to go about it. I just added a margin-left to mine in this challenge.

    • The other correction would be to remove the border-bottom underneath the "fats" row.One way to go about this is to use the "+" in your CSS. You could do something like this .border-bottom + .border-bottom { border-top: 1px solid black }. This means any .border-bottom directly followed by a .border-bottom will have a top border. You can also try using a table for this section. It might be somewhat outdated, but this section seemed primed for this use case.

    • In the mobile view, I would remove the margin around the body.

    • Lastly, the link to your source code is broken.

    Otherwise amazing work! Keep it up!

    Marked as helpful
    1
  • John•410
    @MiyaoCatPosted 10 months ago

    Love the animation!

    1
  • repro123•300
    @repro123Submitted 10 months ago

    I found it difficult to ensure the responsiveness on mobile devices. Can you advice me on how to make sites more responsive?

    QR Code Component

    2
    John•410
    @MiyaoCatPosted 10 months ago

    I think this specific challenge really only asks for one size. The QR code card seemed like it was the same size on mobile and desktop. But for other challenges, I recommend building the site on the mobile size first (mobile-first development).

    A couple things I noticed:

    • font-weight: bold; Bold is not a declaration. You'll want to use a numbered weight. For this challenge, the weights were 400 and 700, 700 is for bold. (The higher the weight the bolder the text)
    • For your QR code image, you can remove the height or set it to auto. That way when the screen is wider/larger it wont stretch vertically.

    Those were the only two improvements I'd reccommend. Otherwise everything looks great!

    Marked as helpful
    0
  • John•410
    @MiyaoCatPosted 10 months ago

    Looks great! There's a couple small details that a slightly different. In the solution page, all of the <li>'s are aligned with the sub-headers (instructions, ingredients, etc). Your <li>s are indented. It takes some playing around with to get that to align. I just added a 1em margin-left to mine to get it to align.

    In the nutrition area I recommend using grid or table/tr/td elements. I went with table (which I think may be outdated, but I felt this was a good use case for it). That way the content will align better. Also, I noticed you used a div to create the lines. With the table you can use a border-top instead.

    Here's my solution for reference if you want to inspect.

    Otherwise, your page looks nearly identical!

    Marked as helpful
    1
  • John•410
    @MiyaoCatPosted 10 months ago

    I just completed this challenge too!

    • It looks like you're file path to the avatar is wrong. I believe you just need to add a './' at the beginning so it goes back to the root
    • The name, location and quote don't have the correct fonts. You'll want to add the font to the style sheet or within the head of your index file
    • To center the container, you can do margin-left: auto and margin-right: auto instead of setting a specific percentage. -- I'd also recommend wrapping the entire container and btn-group in a div because it's kind of it's own element. I named mine 'social-card'.

    Hope this helps! Looks great!

    Marked as helpful
    0