Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
11
Comments
13

Daniel

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

  • 3 column preview card component

    #accessibility

    Daniel•260
    Submitted 12 months ago

    0 comments
  • nft preview card component

    #accessibility

    Daniel•260
    Submitted 12 months ago

    I know there are better ways on how to go about this. Any feedback is well appreciated. THANK YOU.


    1 comment
  • testimonials-grid with Grid, Flexbox, Fluid type and Fluid space


    Daniel•260
    Submitted about 1 year ago

    Any feedback or recommendation is well appreciated. Thank You.


    1 comment
  • four card feature section with CSS Grid, Fluid type and fluid space


    Daniel•260
    Submitted about 1 year ago

    Any recommendation is appreciated.


    1 comment
  • Responsive product preview card component with CSS Grid and Flexbox

    #accessibility

    Daniel•260
    Submitted about 1 year ago

    I would appreciate any feedback on Responsive design and page structure best practices. Any Feedback is appreciated. Thank You.


    1 comment
  • Responsive Recipe page with Responsive units & Flexbox

    #accessibility

    Daniel•260
    Submitted about 1 year ago

    i would appreciate any feedback on the best practice to follow when structuring pages.


    0 comments
View more solutions

Latest comments

  • JavohirXolmamatov•140
    @JavohirXolmamatov
    Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    great

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

    great

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

    great

    display flex

    1
    Daniel•260
    @Flashdaniel
    Posted 9 months ago

    Great Job! I like to point out that you should learn to Make use of Accessibility Landmarks like <header>, <main>, <footer>. Always put yourstyles in a different file separate form the HTML files. Make proper use of the heading tags. Always start with h1 then h2, h3 and so on. You can use css to size then to your preferred. I personally do everything possible to avoid using the css height property in my code. And if you must use height avoid using the vh unit. Do this

    * {
    box-sizing: border-box;
    

    This applies it to all the elements. Do put it on the body as it is not inherited. Cheers!

    Marked as helpful
  • Kvngjakes1•40
    @Kvngjakes1
    Submitted about 1 year ago

    test grid

    2
    Daniel•260
    @Flashdaniel
    Posted 12 months ago

    Nice work. I like to give you a few pointers that will benefit you.

    1. Value more schematic HTML like article, header etc. than div. I see you used it a lot in your code.
    2. When using <img> make sure you add meaningful description of the image with the alt attribute. Can only leave alt empty when the image is just for presentation like when used to display icons. HAPPY CODING.
    Marked as helpful
  • micfrazer•60
    @micfrazer
    Submitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of myself for finding resources where I got stuck and correcting errors along the way.

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

    I was having issues with the footer; I made the position absolute. Other minor syntax errors were caught.

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

    I'd like suggestions for the positioning of the footer. If I don't use absolute, the footer moves to the right of the social links box OR on it. How can I more specifically adjust my CSS to move the footer to center just below the box?

    Social Links Profile - flex, position, styling

    2
    Daniel•260
    @Flashdaniel
    Posted 12 months ago

    Great work. You solution look good. I like to add to what @danielmrz-dev just said.

    Your footer is outside the body tag. So Include it in the body tag the try applying @danielmrz-dev tip😌.

  • P
    nekefer•200
    @nekefer
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I am proud of how I use display grid.

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

    I struggle with postion of body and his height.

    four card components

    1
    Daniel•260
    @Flashdaniel
    Posted about 1 year ago

    Nice work. But I like to point out that you worked harder in your CSS.

    1. There was no need for position property in your CSS code. body was already properly positioned by the browser. Your struggle was as a result of the position: absolute.

    2. Learn to make proper use of inherited properties in CSS, for less code and avoid duplication.

    3. You can learn to make proper use of responsive units (like em, rem, %) in font-size, padding, width and margin. It helps to keep your site responsive if Users chose to resize their browser windows or change browser font size

    You can apply full height to the <body> by doing this

    body {
      height: 100vh;
    }
    

    Or

    html {
      height: 100%;
    }
    body {
     height: 100%;
    }
    
    Marked as helpful
  • kendo-desu•70
    @kendo-desu
    Submitted about 1 year ago

    Grid Cards Challenge

    3
    Daniel•260
    @Flashdaniel
    Posted about 1 year ago

    Nice work. I like to point a few things:

    1. Use headings h1, h2 ... h6 orderly, not h2 then h2 again like in your code.
    2. box-sizing property is not inherited, so adding it to the body element only affects the body. if your thought was to all the elements. Do this
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }
    

    You can make your site more responsive by changing the .parent { grid-template-columns: 1fr; } to .parent { grid-template-columns: repeat(auto-fill, minmax( your, 1fr); }.

    Learn to make use of the repeat() function, instead of grid-template-columns: 1fr 1fr 1fr; Do grid-template-columns: repeat(3, 1fr);. And don't use grid-template-rows if it's not necessary like in your case, allow Auto-placement in grid to make that decision for you.

    Marked as helpful
  • María López•280
    @oppahero
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Instead of using the media query to change the columns of the grid template, I want it to be a dynamic grid.

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

    Initially I made a dynamic grid assigning it to the card grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) and it worked well

    However, when I set max-width max-width: 600px; to the card it stopped working correctly

    What specific areas of your project would you like help with?
    • Html semantic
    • Grid

    How can I make a dynamic grid without using media queries grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) , but make the container have a maximum width

    Product preview card using CSS flex and grid

    #accessibility#lighthouse
    1
    Daniel•260
    @Flashdaniel
    Posted about 1 year ago

    Great solution Maria. I Cloned your repo and checked it out myself. i found out that the problem is not the max-width on the container, but the flexbox algin-items property on main used in centering the card. Remove it and you have a dynamic grid.

    main {
      min-height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      /* align-items: center; */
    }
    
View more comments
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

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