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

Anthony Licata

@anthonyplicataPhiladelphia170 points

New learner | Career Shifter | Philadelphia

Latest solutions

  • Responsive Grid Layout of Testimonies


    Anthony Licata•170
    Submitted over 1 year ago

    0 comments
  • Responsive 4 Card Layout


    Anthony Licata•170
    Submitted almost 2 years ago

    2 comments
  • Responsive Price Grid CSS


    Anthony Licata•170
    Submitted almost 2 years ago

    0 comments
  • Responsive Mobile-First Social Proof Page


    Anthony Licata•170
    Submitted almost 2 years ago

    0 comments
  • Responsive 3 Column Preview Card with Bootstrap

    #bootstrap

    Anthony Licata•170
    Submitted almost 2 years ago

    1 comment
  • Responsive Summary Page with Bootstrap

    #bootstrap

    Anthony Licata•170
    Submitted almost 2 years ago

    1 comment
View more solutions

Latest comments

  • FinnJ04•100
    @FinnJ04
    Submitted over 1 year ago

    Four Card Feature Section

    1
    Anthony Licata•170
    @anthonyplicata
    Posted over 1 year ago

    Nice job on using grid! It's a great feeling when that one clicks. If you center everything on the page it will prevent everything from moving off just to the right. Using margin: 0 auto; is a very helpful in centering things. Always sneaks up on me when I'm trying to align something left or right and forget that the margin is set somewhere😅. Responsive size values like % or vw/vh will help with the boxes changing as you manipulate the screen size. Setting the width to 100% and the max-width to something of your choice might give you a better scaling of the cards.

  • Manuela Azeredo•40
    @manuacg
    Submitted almost 2 years ago

    QR Code Component Solution

    1
    Anthony Licata•170
    @anthonyplicata
    Posted almost 2 years ago

    Looks good!! If you want to get it centered in the page you can try adding to body selector

    min-height: 100vh (this will set the height to full view height) margin: 0 auto (this will set the left and right margins even) width: 100%

    Marked as helpful
  • P
    Daniel Ribas•100
    @daniel-ribas
    Submitted almost 2 years ago

    My first challenge using flexbox

    1
    Anthony Licata•170
    @anthonyplicata
    Posted almost 2 years ago

    Looks great! And you nailed the centering of the card which I definitely struggled with when I first got here.

    If you chose to use the h2 tag for difference in size compared to h1 I would suggest sticking with the h1 tag since there are no other headings. Use CSS to style the text the way you want it. It's more so technically correct but also allows for screen readers to properly read the markup. As for using <header> and <main> I'd say this challenge doesn't have a real header other than maybe the qr code image? But you could put the text contents inside of a main tag to make it more accessible!

    The "Challenge by..." text is footer content. So you could take .attribution and change it from a div to footer and take it out of that section container. You could go even further with accessibility and place the text inside a <small> tag inside the <footer>. It will shrink the font size a little but it will also tell the assistive tech that it's small footer content.

    Marked as helpful
  • océane•290
    @Ocece77
    Submitted almost 2 years ago

    Using position

    1
    Anthony Licata•170
    @anthonyplicata
    Posted almost 2 years ago

    This looks great honestly!

    I had gotten good advice for centering the content on this one as well.

    I do use flex now, but for flex or grid I was told to set min-height to 100vh. Seemed to resolved a whole lot for me.

    Marked as helpful
  • Big-Norj•100
    @Kingnorj1
    Submitted almost 2 years ago

    Preview card

    #accessibility
    2
    Anthony Licata•170
    @anthonyplicata
    Posted almost 2 years ago

    I just did this challenge as well. What I learned to make it responsive was using flexbox and grid. I used a <picture> element that lets you have an <img> and <source srcset=""> so the browser can use both images depending on the screen size. w3schools.com helps me a whole lot.

    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

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