Skip to content
OverviewSolutions
7
Comments
8
P

Lampros Liontos

@reteov180 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • P
    Lampros Liontos•180
    @reteov

    I'm not sure what's up, but for some reason, I'm getting 404 errors when attempting to view the source and site for this submission, so I don't know how much analysis I can provide to assist.

    Just looking at the page's screenshot, however, it looks like you ticked all the boxes. A little more work with the spacing (particularly the application of a margin-top property) might help, but other than that, this works.

    Marked as helpful
  • P
    Lampros Liontos•180
    @reteov

    I certainly don't see much of a problem here; everything looks like it should. The only thing that seems to stand out is the placement of the heading, it's too far up compared to the image. The features-intro class looks like it could benefit from a margin-top directive.

    The use of the grid is an interesting design choice, useful for exact placement. Personally, I'd use flexbox instead of grid, but like I said, that's a design choice, not a requirement. You made it work, so that's all that matters.

    Well done.

  • P
    Lampros Liontos•180
    @reteov

    Aside from the size of the product box (which isn't really that big of a difference), I can't see anything wrong with this. I didn't realize the <picture> and <source> elements were there and could be used in this fashion, which seems kind of obvious in retrospect. Not bad.

    One thing that might help in the CSS is to use the :root property to set up variables, like this:

    :root {
    --light-green: hsl(158, 36%, 37%);
    --dark-green: hsl(158, 42%, 18%);

    --black: hsl(212, 21%, 14%);
    --grey: hsl(228, 12%, 48%);
    --cream: hsl(30, 38%, 92%);
}

    After this, you can use var(--grey) instead of using hsl(228, 12%, 48%) everytime. This way, if you decide later to change the colors, you can change them in one place, instead of changing all instances manually.

    This isn't limited to colors, either, you can also use it to set a default size or a border radius, to ensure they are used universally.

    :root {
    --par-font-size: 14px;
    --default-radius: 0.75em;
}

    I hope this helps!

    Marked as helpful
  • KingX•150
    @iwedibah
    What are you most proud of, and what would you do differently next time?

    I am most proud of the fact i successfully completed this challenge

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

    I think my major challenge has been on responsiveness

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

    please all the areas you'd find out in the codes that needs improvement, i'd definitely improve

    Recipe Page

    1
    P
    Lampros Liontos•180
    @reteov

    It looks like the page handles transitions well between mobile and desktop viewing. The image placement and resizing is responsive, and gets the job done well.

    The text, however, needs some work.

    One thing that you should avoid is the use of px measurements. You can never tell what a person's screen resolution will be, so you always want to use relative units, so that the browser can decide what the exact sizes should be.

    As such, you might want to try converting your px measurements to em measurements. This allows the display to be adjustable based on the size of the screen.

    Marked as helpful
  • Gideon•130
    @Gibby0
    What are you most proud of, and what would you do differently next time?

    I was able to do this without any challenges.

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

    None

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

    None

    Social Links Profile Using Html and css

    1
    P
    Lampros Liontos•180
    @reteov

    First, it looks like the inter-button spacing is a little small; if you were to increase the margins and the padding a little, the buttons should be a little bigger, and a little further apart, and the whole box should be taller, making it closer to the design screenshot size.

    I also noticed a scrollbar on the window. This normally happens when using 100vh without also applying margin: 0; to the body section. This is because the page size is exactly the entire height of the screen, plus the default extra margin (which adds extra space outside the body), which is what is causing the scrollbars.

    I hope this helps!

    Marked as helpful
  • alvarozama•360
    @alvarozama
    What are you most proud of, and what would you do differently next time?

    I would go for a cleaner CSS since once again I ended up using too many properties on all my selectors. I feel like the padding and margin properties could have been reduced to a single line or a couple of them, so I'll try to fix that.

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

    I was not really sure how to make the page responsive for mobile layouts without using media queries.

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

    Making the layout responsive to shrink the container in size when browsing on mobile devices without media queries. Also, I'm under the impression that images don't show on the live site, so I'm not sure if I'm doing something wrong when calling the src on my index.html.

    Blog preview card using HTML and CSS

    2
    P
    Lampros Liontos•180
    @reteov

    One thing that might help would be to alter the .card-container element so that it has a maximum width of around 360 pixels. This will allow the project to fit the requirements, and leave a little room around the sides for the shadow and the background. From there, you can then adjust the font and image sizes to make the content of the container line up similar to how it looks in the screenshots.

    Marked as helpful
View more comments