Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
8
Comments
3

Dominic

@Dpal88170 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

  • Single-Page Design Portfolio - HTML, CSS, JS


    Dominic•170
    Submitted 6 months ago

    Any advice on how I can improve my code is always appreciated!


    0 comments
  • Article Preview Component - HTML, CSS, & JS


    Dominic•170
    Submitted 7 months ago

    Any tips on how I can improve my code is always appreciated!


    1 comment
  • FAQ Accordion - HTML, CSS, JS w/ Accessibility


    Dominic•170
    Submitted 7 months ago

    I'm open to any feedback that can help improve my code!


    0 comments
  • News Homepage - HTML, CSS, JS w/ Accessibility & BEM

    #accessibility#bem

    Dominic•170
    Submitted 8 months ago

    I'm open to all and any advice on how I can improve my code!


    1 comment
  • Blog Preview Card w/ Random BG Color Generator - HTML, CSS, JS


    Dominic•170
    Submitted 8 months ago

    If you have any suggestions on how I can improve my code, feel free to leave me a comment!


    0 comments
  • Skilled e-Learning Landing Page - HTML & CSS


    Dominic•170
    Submitted 8 months ago

    I'm open to all advice on how I might be able to improve my code!


    0 comments
View more solutions

Latest comments

  • Mohammad Irfan•540
    @Mohammad-Irfan-Noorzada
    Submitted 8 months ago
    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
    Posted 8 months ago

    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
    Submitted 8 months ago
    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
    Posted 8 months ago

    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
    Submitted 8 months ago
    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
    Posted 8 months ago

    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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub