Skip to content
OverviewSolutions
7
Comments
7
Vynny LonlySoft
@Lonlysoft

All comments

  • Vynny LonlySoft•160
    @LonlysoftPosted 17 days ago

    Well organized code and truthfully responsive. Great work! The only thing that is a little mistaken from the approach is the padding of the body and the color of the user-desc text. Besides the description having a bigger size than general text, there's not as much contrast as in the white background cards. So the .user-desc that aren't background-color: white; should be color: --white;

    0
  • LiamHilton•20
    @LiamHiltonSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I worked on my HTML and CSS through prior knowledge before utilising a tutorial by Kevin Powell as i continue to explore different practices from professionals in the field. my process has been to figure out what it is i want to create. What i will use being Flexbox or Grid then working systematically within the html so that i can form my CSS.

    • A key thing with this template was " Cascading order in my html" -- This meant also looking at the mobile version and thinking about how the layout will form once no longer in desktop. This worked nicely with Grid but i also explored my options with Flexbox. -- I am building a solid foundation for CSS through FrontEnd Mentors tasks and although im currently learning JavaScript im finding it refreshing to come back and tinker with these tasks. It is giving me an added daily drive to challenge myself again and stay consistent with my FrontEnd Web Development path.

    -- furthermore i added a slight variation that was not in the task but i enjoy adding to my cards.This was a :hover class which changed each cards box shadow to a lighter gradient of the initial border-top. If you haven't tried it yet then this could be great to play around with and bring a slight dynamic to the simplicity of the task. See code below:

    .border-teal { border-color: var(--clr-primary-teal); } .border-red { border-color: var(--clr-primary-red); } .border-yellow { border-color: var(--clr-primary-yellow); } .border-blue { border-color: var(--clr-primary-blue); }

    .border-teal:hover{ box-shadow: 0 1rem 1rem -.5rem hsl(180, 29%, 30%); } .border-red:hover{ box-shadow: 0 1rem 1rem -.5rem hsl(0, 38%, 38%); } .border-yellow:hover{ box-shadow: 0 1rem 1rem -.5rem hsl(34, 53%, 48%); } .border-blue:hover{ box-shadow: 0 1rem 1rem -.5rem hsl(212, 39%, 40%); }

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

    i encountered a few challenges when playing around with grid and Flexbox but found GRID to provide the best output for this template. I sourced out a tutorial from Kevin Powell which also brought me great enlightenment on individual aspects i hadn't learnt before in CSS. I have been working on looking at how a page looks so i can then visualise how i will portray my code to get the correct results.

    Four card feature section

    2
    Vynny LonlySoft•160
    @LonlysoftPosted about 1 month ago

    Pretty neat what you've done here. I actually never heard that it was possible to set the grid-template-areas like that. The hovering effect is also a really great detail, the only thing I'd add to it is setting a transition animation on the shadow change to give it a more smooth look when hovered. But overall you did pretty well.

    0
  • Egnodia•100
    @EgnodiaSubmitted about 2 months ago
    What specific areas of your project would you like help with?

    Can I get more responsive websites hints, cause I'm really struggling with it :(

    Responsive Product Preview Card

    1
    Vynny LonlySoft•160
    @LonlysoftPosted about 2 months ago

    You did a pretty well job in desktop! There's still some stuff like the icon positioning and the hover on the button, but those can be resolved easily.

    There are a lot of responsive website hints, so it would be better if you say what you're more struggling with so the help would be more precise. But seeing your code I might have noticed some stuff that might had been difficult to you:

    If you're wondering how to do the image switch for mobile and desktop, in HTML you can use the <picture> tag. It might sounds like a more complex tag, but it's used to change the image according to a media query statement. Example:

    <picture>
    <source media = "(max-width: 23em)" srcset = "img.png"/>
    <img src = "img2.png"/>
</picture>
    • You can add more than one source tag if you need to.

    The mobile design you can do it by using the flex-direction: column in the flexbox container and appliyng the proper styles on the media query.

    I think this is the better option here since you used flexbox.

    Also, I see you tried to test media queries, but nothing might have happened. The issue is that the mobile width isn't 375rem. (The font size in the root isn't 1px.) And since the font size is 16px you actually are appling the media query to a screen which width is between 6000px and 23040px. You need to convert 'px' to 'em' in order to get the media query interval right.

    Hope those hints help.

    Marked as helpful
    0
  • Vynny LonlySoft•160
    @LonlysoftPosted 2 months ago

    Good looking! The only thing that I think it misses is that in the mobile the image has the padding so it doesn't have a effect that looks like a banner. My recommendation is to divide the image from the rest of the text and in the @media adding a padding to this division and turning the recipe-page's padding 0. Also, the font is already bold by default, so just dim the font-weight in the headings to 400 or to var(--fw0-light) this will look closer to the design and you'll still have the headings' properties.

    0
  • Vynny LonlySoft•160
    @LonlysoftPosted 2 months ago

    There's some subtle differences in colors, but I like them. One of the things that I felt missing here is the color changing when hovering and the link and the anchor doesn't covers the whole button. That means that the user needs to click on the text to access the link. To do that you could just style the <a> and not the div or just set the width and height of the <a> to 100%.

    Marked as helpful
    0
  • Vynny LonlySoft•160
    @LonlysoftPosted 2 months ago

    It looks good. In the code I see that you used tailwind to do the work. It's overall a good technology to get used to. The only thing that I may point out is that you forgot to add a border. Although, it looks even better than the original design because it looks cleaner. Pretty clever if it was intentional.

    Marked as helpful
    1
  • Franixerx•10
    @piolonrqzSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    centering the div, right position of image and the text

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

    positioning of the dv, image and text

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

    Project with logical background like a color sequence it has logics behind it

    Screen Responsive Landing Page

    1
    Vynny LonlySoft•160
    @LonlysoftPosted 2 months ago

    Alright, here's some tips:

    1. I see that you tried the position absolute centering in the container. This can't be done there because the body has no height or width. (50% of 0 is 0). To that work define a width for the body element to actually use position absolute centering. Yet, I don't recommend absolute centering unless you're making elements that need to be overlapped. This is not the case so I recommend flexbox.

    2. The image has its original size. So it comes off the boundaries of the container. I see that you tried to make the qr-code div as a try to contain image size, but issue is that the image doesn't obey this declaration. My recommendation is to add the img selector in CSS and set its width and height to 100% or... just delete the qr-code div and set the class name qr-code directly to the img tag.

    About logic background color: In this project there's no need for a said "it has logics behind it". The little "gradient" there is just made using CSS' box-shadow property in the container. And the background color is just a solid color that you can get 1:1 on the style-guide.md file provided in the challenge. It's in hsl() between lines 14 to 18.

    I hope those tips help.

    Marked as helpful
    0