Skip to content
OverviewSolutions
8
Comments
3
Dominic
@Dpal88

All comments

  • Mohammad Irfan•160
    @Mohammad-Irfan-Noorzada
    What are you most proud of, and what would you do differently next time?

    I'm most proud of making the layout responsive. Next time, I'd work on optimizing the images for faster loading. I had difficulty with aligning some elements on mobile screens. I solved this by using media queries and testing different breakpoints.

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

    I couldn't find what to use until I found out that grid-template-areas is the solution.

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

    I’m happy with the layout on larger screens, but I’m struggling to get the mobile layout perfect. Any advice on improving the mobile responsiveness?

    Bento Grid Page Using Grid

    #sass/scss
    1
    Dominic•170
    @Dpal88

    Hi @Mohammad-Irfan-Noorzada,

    Great job on completing this challenge!

    This challenge can be a little tricky, but you did a nice job on matching the desktop design!

    Your mobile layout looks good, but I see what you mean about it not quite matching the mockup images.

    My suggestion to you for future projects would be to use a mobile first layout approach, which just means to write the CSS for smaller screens first, and then use media queries for tablet & desktop devices.

    If you start using this approach I think you'll find it much easier to create your mobile layout. Also I've done this same challenge using the mobile first approach if you would like to take a look at my profile.

    I hope this helps you, and if you have any questions feel free to reach out!

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

    I'm proud I stuck with this challenge and actually submitted it for review. I started off with desktop in mind before considering the mobile design. I got my code specifically my layout into a bad state and decided to start over with a mobile first approach. This worked better so I'll probably approach future problems mobile first.

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

    My biggest challenge was getting the general layout to work for desktop and mobile. As I mentioned in the previous question restarting with a mobile first design approach helped. Another challenge was getting the nutrition table to work. I initially tried getting it to work with grid but found it hard to get the bottom border to work. I got stuck so I tried using a flexbox instead and that approach worked better for me.

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

    I really struggled with getting the layout to work for different screen sizes so any advice on that would be great. Also my CSS file is mess and I'm not sure how to structure the general layout of the file ie do I put element selectors above class selectors file etc.

    Mobile First Responsive Page With Flexbox

    1
    Dominic•170
    @Dpal88

    Hi @jyoshida93,

    Great job on completing this challenge!

    And your solution does a great job of matching the design, but I have few tips that could make it even better!

    1. Right now I think your design looks great on larger screens, however there is one small issue on mobile screens where the image is not scaling properly. This can be easily fixed though by simply removing the height property from the image.

    2. As far as organizing your CSS file goes, there's not a right or wrong way of doing things. But I would suggest looking into some different CSS methodologies, which are essentially CSS coding guides that take a very structured approach to writing and organizing CSS. One of the most popular methodologies that I see people using is BEM (Block, Element, Modifier), I'll leave a link below if you are interested in reading more about this.

    https://getbem.com/introduction/

    However, for smaller projects I would say it doesn't matter to much how you go about organizing you CSS file as long as you are keeping things consistent. I would also recommend adding comments to your code. These can be used to divide your stylesheet into sections, explain complex styles, etc.

    3. Also I noticed that your bulleted lists & numbered lists do not have the correct colors set. To target the actual bullets and numbers you can use the CSS ::marker pseudo-element.

    I hope this helps, and if you have any questions feel free to message me!

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

    I AM VERY CONFIDENT THAT I DID GOOD ON THIS PROJECT. AND WOULD WANT TO BETTER UNDERSTAND THE FLEX BOX PROPERTY.

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

    SIZING THE DIVS (HEIGHT AND WIDTH)WERE VERY CHALLENGING FOR ME.

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

    THE FLEX-BOX PART AND SIZING UNITS.

    Social links profile using HTML & CSS

    1
    Dominic•170
    @Dpal88

    Hi @mamman-naf! Great work on completing this challenge, and your design is spot on!

    As far as sizing units go, it really depends on the situation. For font size I would recommend using rem units. Rem units are a relative length unit which just means that they are relative to something else, in this case rem units are relative to the font size of the root element. This means that 1rem is equal to the font size of the html element, which for most browsers the default is 16px. Whereas px units are an absolute length unit, meaning that their size will not change. The nice part about using rem units is that when users change the default font size in their browser the text will scale accordingly.

    Also I noticed that you were using percentages for your margins, and I would recommend using rem units instead for margin and padding.

    All the different units can make things a little confusing but the more you work with these different units the easier it will become. Also flexbox is a great and essential tool to learn, I wont get into here because it's a lot to explain but I'll link some helpful resources down below.

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://www.youtube.com/watch?v=GteJWhCikCk

    I hope this helps and if you have any questions feel free to reach out.

    Marked as helpful