Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
23
Comments
78
Eric Salvi
@ericsalvi

All comments

  • Patrick•10
    @pmahon628
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I am happy I completed it and it looks pretty much like the image, I know there is much more to learn and I hope to have better code and writeups as time goes on.

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

    I started off by trying to do too much but in the end I simplified the code and kept it simple and that served me a lot better

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

    I am pretty happy with how it turned out, I know I can fine tune some things and get better, this is my first submission and I look forward to many more

    QR Code using HTML and CSS

    1
    Eric Salvi•1,350
    @ericsalvi
    Posted 8 months ago

    Congrats on your first submission!!!

    First here are some suggestions. I think you are missing some CSS for the image. I would try adding width: 100% height: auto and set border-radius: 10px. This should get your image looking close to the original and to not spill out beyond its container.

    I don’t think your font is loading as I am seeing just the default system sans-serif load. I am not seeing the Google import or linked code in the Head of your HTML.

    Something I challenged myself on is to keep your code as semantic as possible. Great for accessibility purposes. I would try to avoid any div or span tags. With this one you could have turned the div tag with a class name of card into a more semantic article tag. Running this through AxeDevTools (great Chrome extension to add to your toolkit) shows 3 accessibility issues. One way to overcome this is to convert your HTML div into an article tag and then wrap this article tag with a main tag. 



    You also do not have an ALT tag on your image.

    Lastly, I do notice some slight differences between the font colors and alignment. It is very important to try and get the completed work matching as close as possible. This will really start training your eyes to these little details.

    Again, great job on your submission and I am looking forward to seeing more that you do!

    Marked as helpful
  • Bader Idris•2,880
    @Bader-Idris
    Submitted over 2 years ago

    Random quotes fetched from a specific website which derives JSON text.

    1
    Eric Salvi•1,350
    @ericsalvi
    Posted over 2 years ago

    Hey @Bader-Idris,

    First of all, this one looks great. I am seeing it working in your preview and looking at the JS it looks to be clean and valid. I do know with this API there is a cool down so you are unable to quickly call a piece of new advice spamming the button. Is this what you are referring to?

    As for the code itself, it is very clean and straightforward. One thing I would suggest is maybe adding a simple cursor: pointer to the dice icon so the user knows it is clickable.

    Other than that, something you could try doing for future challenges is using no divs or spans and only semantic HTML.

    Great job with this one and keep up the momentum!

  • maia•300
    @maiaflow
    Submitted over 2 years ago

    SCSS Article preview component with JS share menu

    #sass/scss
    1
    Eric Salvi•1,350
    @ericsalvi
    Posted over 2 years ago

    Hey @maiaflow,

    Great job on another challenge. You are unstoppable!

    I am not seeing too much from a design POV except I feel the card can get too long on very wide screen sizes. So I would probably try setting a max-width for body main on the desktop only. That way when the screen gets really wide, the card doesn't get really wide as well.

    Also, one thing that I like to do is with the footer section in the card you have a margin-top being set to push it down the page a bit. Sometimes what I like to do is set the actual section content to display: flex and flex-direction: column. Then you could change the margin-top to auto. What this will do is push the footer to the bottom of that section and so no matter what height the card ever becomes, the footer will always stick to the bottom of the container.

    You have 3 invalid issues in your HTML. The social sharing icons you have do not have the alt attribute. Even if an image doesn't need to have a need for actual alt text, the attribute still needs to be present. Just add alt="" to your 3 images to fix those issues.

    The JS looks great and you should be proud of yourself for getting it done. The more of these that you do, the easier it will become. Also, the new word you created called sharrow is pretty cool!

    Let's chat more about vendor prefixes.

    Keep up the momentum!

  • maia•300
    @maiaflow
    Submitted over 2 years ago

    Responsive reviews page using SASS/SCSS

    #sass/scss
    1
    Eric Salvi•1,350
    @ericsalvi
    Posted over 2 years ago

    Hey @maiaflow, I'm not sure how I missed this one, but the overall design looks great. There is a strange overflow issue of the main text on specific screen sizes (1086px to 1200px) but other than that this one is really solid.

    As for the Accessibility warning here and when using Axe DevTools, it looks like the issue is that a screen reader won't know what each of the ratings is for. Since you are using 3 asides what I would try doing is finding each of the h2, and giving them a unique id. So id=rating1 and so on.

    Then you can use the aria-labelledby on the asides and then reference each of the different IDs so that you are telling the screen readers what each aside is meant for.

    Check out this article here

    Hope this helps.

    Marked as helpful
  • maia•300
    @maiaflow
    Submitted over 2 years ago

    Responsive product page

    1
    Eric Salvi•1,350
    @ericsalvi
    Posted over 2 years ago

    Hey @maiaflow,

    Great job as always. I really do enjoy seeing you complete these challenges. I did notice your URLs were broken in the CSS as you needed to include the correct pathing so I was glad to be able to help fix this offline.

    As for the work, I am a fan of keeping things pixel-perfect but I do know that is not practical and it doesn't have to be pixel-perfect.

    The use of CSS variables is great. Glad to see you starting to use them. I also noticed that your code is pretty semantic except for the one use of a div in the footer.

    It appears to be pretty accessible when using AXE DevTools for checking.

    Cannot wait to see your next one completed!

  • maia•300
    @maiaflow
    Submitted over 2 years ago

    QR code speedrun

    1
    Eric Salvi•1,350
    @ericsalvi
    Posted over 2 years ago

    WOW... great job on the challenge of trying to get it completed in less than 1 hour.

    Your HTML is super semantic and your CSS is small. I can't find any issues at all so I'll try to maybe offer suggestions for future challenges.

    If you want to stick with CSS try to run your CSS through the vendor prefix tool here

    If you stick with CSS, look for opportunities to use CSS variables.

    Try setting the base font size on the body and then use REM units.

    Try something a bit different by using a CSS preprocessor such as SCSS. This tool will do the vendor prefixes automatically.

    Lastly, I have been trying to constantly use GitHub pull requests for milestones when working on these challenges. Really helps me to get more comfortable with that platform.

    Cannot wait to see your next one!

    Marked as helpful
  • Yui•50
    @yterai
    Submitted almost 3 years ago

    Testimonials grid section

    3
    Eric Salvi•1,350
    @ericsalvi
    Posted almost 3 years ago

    Hey @yui,

    Great job on your 4th solution completed. Everyone does these solutions differently and Lucas did offer some great feedback to be a bit more semantic. I actually just completed this one too and I had no Divs, no Spans, or no Class Names. It was actually a fun challenge and made me really think about the structure before I started with the design.

    There is one thing I did notice that I am not a fan of and not sure if there was a different approach. Positioning the entire content by using an absolute position with a top and left of 50% and then translating it with a -50% to me is not the best and could cause unexpected results.

    Instead, what a great thing to do is instead on the main container, and in this case, the body set the min-height to 100vh and then display it as a grid. This way you can then use the easy place-content to center. Of course, you need to also make sure you set a max-width container to your grid items, which is the main.

    What I do like is that you are using grid templates which is really nice and you also did a mobile-first approach. Much nicer to only have to change a few lines for desktop if you do mobile-first rather than if you do desktop first you have to add way more lines of CSS in order to shrink things down.

    Again, great job and keep up the momentum!!!

    Marked as helpful
  • maia•300
    @maiaflow
    Submitted almost 3 years ago

    Testimonials section with CSS Grid

    4
    Eric Salvi•1,350
    @ericsalvi
    Posted almost 3 years ago

    Hey Maia,

    Another great-looking design from you. 5 in a row!

    I didn't see too much to pick at looking at the rendered solution. The only thing I noticed is that the container of the grid items on the desktop may be missing a max-width. I found that the width of the container of items on the desktop should be 1110px.

    As far as the code itself, I think it looks pretty good. Adriano left a really good comment on things you could try doing in the future. Also, have a look at the Chrome extension called "axe DevTools". I run my code through this tool from the inspector and it generates a validation/accessibilty report I can try to fix before submitting it.

    For your next solution, keep on trying the mobile-first approach but also maybe read up on CSS variables. For larger projects, it really helps.

    Keep up the momentum!

    Marked as helpful
  • Yui•50
    @yterai
    Submitted almost 3 years ago

    Base Apparel coming soon page

    3
    Eric Salvi•1,350
    @ericsalvi
    Posted almost 3 years ago

    Hey @yterai,

    This one looks incredible! Great job. I think Elaine mentioned everything I would have said. For the mobile-first approach, you don't need to declare 2 ranges for media queries. The way CSS cascades styles, it will naturally inherit the styles from additional larger min-width.

    I couldn't see too many improvements but what I would like to see for future challenges is for you to work on your README.md file for the GitHub repository. Think of it as a way to explain yourself and what you worked on. Like a journal so others can read and discover new things.

    Your JS was great as well. Works like charm. My only suggestion with this would be to include some type of something to know the email is correct and valid. So like on submit, maybe learn the input field and display an inline thank you message or something.

    I cannot wait to see your next challenge and hopefully, you take a few of these recommendations from me and Elaine, it will really make your solutions pop!

    Marked as helpful
  • maia•300
    @maiaflow
    Submitted almost 3 years ago

    Coming soon page using flexbox and built in validation

    1
    Eric Salvi•1,350
    @ericsalvi
    Posted almost 3 years ago

    Hey @maiaflow,

    Great job from a rendered finished product. You have come a long way in the few that you have submitted. This one is very responsive. The only thing I would keep on remembering to do is check out the report that gets generated on your submission. https://www.frontendmentor.io/solutions/coming-soon-page-using-flexbox-and-built-in-validation-OcWjIS-An6/report You have a few accessibility ones that can easily be fixed.

    Now one it comes to the JS.... there are many different ways to approach this and it really comes down to what works for you. The way I created mine is what made sense in my head but the way you attacked it is something I would not have thought of.

    I did find out about pattern parameters on certain inputs that take Regex so maybe doing your way with patterns might help if you decide to finish this one up.

    Check out: https://www.youtube.com/watch?v=g-Y31Iswr2M

    Cannot wait to see your next submission.

    Marked as helpful
  • Yui•50
    @yterai
    Submitted almost 3 years ago

    Huddle landing page with a single introductory section

    #sass/scss
    3
    Eric Salvi•1,350
    @ericsalvi
    Posted almost 3 years ago

    Hey @yterai,

    The desktop design looks amazing! Great job. Also kudos for trying out SCSS for the first time on this challenge.

    As others have mentioned, the mobile responsiveness doesn't really work with the recommended size that was provided. Sort of like what @ErayBarslan mentioned, it is actually really good practice to do the mobile-first approach that way you are just changing a few items on the desktop rather than trying to change and add a lot more elements for mobile.

    A few suggestions for GitHub and your repositories, make sure to fill out your README.md file. Makes it a bit more polished when checking out your work.

    Also for SCSS you could do some interesting things with nested declarations. Although I never used MIXINS and math components, one thing I do like specifically about SCSS is you can keep it all organized by selectors like so,

    .register-button {
      border: 1px solid $white;
      border-radius: 30px;
      width: 11.5rem;
      height: 3.3rem;
      background-color: $white;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      color: rgba($violet, 0.8);
      font-size: 1.1rem;
    }
    
    .register-button:hover {
      background-color: $soft-magenta;
      border: $soft-magenta;
      color: $white;
      cursor: pointer; 
    }
    

    could have been a bit more simplified by nesting the hover inside the button selector itself like so and using the &.

    .register-button {
      border: 1px solid $white;
      border-radius: 30px;
      width: 11.5rem;
      height: 3.3rem;
      background-color: $white;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      color: rgba($violet, 0.8);
      font-size: 1.1rem;
      cursor: pointer; 
    
      &:hover {
        background-color: $soft-magenta;
        border: $soft-magenta;
        color: $white;
      }
    }
    

    Keep up the great work and I am looking forward to seeing more from you.

    Marked as helpful
  • maia•300
    @maiaflow
    Submitted almost 3 years ago

    Responsive landing page

    1
    Eric Salvi•1,350
    @ericsalvi
    Posted almost 3 years ago

    WOW, Maia! Great job with this one. The completed work is stunning. I don't see too much to pick at with the design as the work you did is pretty top-notch from a rendered POV.

    The only thing I can see possibly suggesting is maybe to get a bit more descriptive with your class names.

    I looked at the generated report and there are some errors I'd try to fix. https://www.frontendmentor.io/solutions/responsive-landing-page-SPclCHeVSk/report

    The HTML errors all seem to be coming from font-awesome and not too sure if you can fix it.

    Lastly, the CSS is very organized with comments. This is something I need to get better at.

    Great job and keep up the momentum!

  • maia•300
    @maiaflow
    Submitted almost 3 years ago

    Interactive rating component with CSS & JS

    2
    Eric Salvi•1,350
    @ericsalvi
    Posted almost 3 years ago

    Hey @maiaflow, great job on completing your 2nd challenge. We already had some offline communications about this one and I was glad you were able to do some digging into the JS to start the button actions but needed a bit of a push to get it completed.

    I know my code was not correct but was hoping you could use it as a base to elaborate upon it or to simplify it.

    The more you do of these the easier it will become. Keep on watching those teamtreehouse videos.

    I few suggestions now that you have completed this one, you have access to view all solutions of this challenge here. I would dig into the HTML structure of them to see if there are any common factors on how they implemented the interactive section of this challenge. I am not saying my approach to using a Form is the correct one, it just made it much easier and cleaner when it came to JS.

    Also make sure to clean up any HTML or Accessibility warnings of the submission here

    Keep up the momentum!

  • Toyin Robinson•20
    @toyrobs
    Submitted about 3 years ago

    Order summary using flexbox

    3
    Eric Salvi•1,350
    @ericsalvi
    Posted about 3 years ago

    Hey Toyin,

    Great job on your first submission. Checked out your code and it looks clean!

    A few things I would try to do for your next challenges is to always check out the validation for accessibility or HTML. Either do this before you submit by using axe DevTools extension or you can check out the report that FrontendMentor generates here.

    One thing I would suggest doing before you submit is to take all of your CSS and run it through a tool such as https://autoprefixer.github.io/. What it will do is generate any required additional CSS to make this submission work on all platforms and browsers. The best way to almost be fully compatible.

    For your links instead of using # for these types of components, I'd suggest using javascript:void(0) instead as this will not refresh the page when a link is clicked, unlike using #.

    Great work again and I cannot wait to see more of your work.

    Keep up that momentum!

  • Tina•10
    @ernestina404
    Submitted about 3 years ago

    Responsive Landing Page Using Flexbox

    2
    Eric Salvi•1,350
    @ericsalvi
    Posted about 3 years ago

    Hey Tina,

    Great job with your first submission. I love how you implemented the payment buttons' hover shadow effect. Makes it look like you really pressed down on it on hover.

    I few suggestions for future submissions would be to use an accessibility/HTML validator before submitting your work. I use axe DevTools extension in Chrome. Also if you do end up submitting always check the report that gets generated.

    To fix your background images, it has to do with the relative path. If you were to open up one of the images, this is the path you get. This is because of the single dot (or no dot in your actual CSS) at the start, it would need a double dot. So how you have it is that the single dot (or no dot) is in the current directory but the double dot will take you one folder out, which is not the CSS folder but the root folder to go back into the images folder. Confusing!

    I'd just add ../ to the start of each of your CSS image URLs.

    Lastly, I see you are using filters for opacity as well. Looks like they do not play nice with Safari and other browsers. A good rule of thumb is after you are happy with your current CSS, copy it all and paste it into https://autoprefixer.github.io/ which will add required vendor prefixes for incompatible CSS for all browsers. For instance, the filter opacity doesn't work in Safari but after using that tool, it generates the correct prefixes to be compatible with Safari. -webkit-filter: opacity(80%);

    That tool is a great one to bookmark.

    Keep up the momentum and I am looking forward to new submissions from you!

  • Yui•50
    @yterai
    Submitted about 3 years ago

    Responsive order summery component using Flexbox

    4
    Eric Salvi•1,350
    @ericsalvi
    Posted about 3 years ago

    Hey Yui,

    Great job with your first submission!

    I think your flex works great for the pricing section where you have it now. I don't think there really is a need for anything else to have flex unless on mobile it needed to go from column to row. But for this component that is not the case.

    A suggestion for future flex usage, instead of adding a padding-left: 20px to the item-2 class, you could just use gap: 20px set on the flex container.

    I'd also try to name your classes according to what the content is. Reading the code, item-1 and item-2 don't really help the developer to fully understand what each section is. I like to implement the BEM naming convention, not required, just helpful.

    One last thing is that the 2 buttons you have are not selectable via the keyboard. It looks like you just have 2 divs styled to appear like buttons. I'd check out https://a11y-101.com/design/button-vs-link for future submissions on buttons.

    Also to piggyback on what Philemon was saying, each submission on this platform generates a report for any invalid accessibility or HTML. Check out your report It is good practice to try and fix them. I use the axe DevTools extension in Chrome before I submit.

    Can't wait to see more of your work!

    Marked as helpful
  • maia•300
    @maiaflow
    Submitted about 3 years ago

    Responsive order summary card

    1
    Eric Salvi•1,350
    @ericsalvi
    Posted about 3 years ago

    Hey Maia,

    Great job with your first submission!!! I like how you structured your layout on the submission. The class names make sense and the different sections that make up this component are easy to understand. Also thank you for the call-out in your repository!

    A few things I would suggest either fixing now or remembering to keep an eye out for future submissions is to fix any accessibility or HTML issues.

    https://www.frontendmentor.io/solutions/responsive-order-summary-card-LpTS2rYbNT/report

    Something I like to do also is to make sure to remove any HTML commented-out sections or unnecessary CSS.

    The last thing I noticed is that your background image does not span the entire body width. You could easily add background-size: 100% to the body selector to fix this.

    Cannot wait to see future submissions by you!

  • Joshua•30
    @zepolj1126
    Submitted about 3 years ago

    Basic NFT card using HTML and CSS

    2
    Eric Salvi•1,350
    @ericsalvi
    Posted about 3 years ago

    Hey!

    I love the solution you did for the hover effect on the image and revealing the eye icon. When I did this, I struggled a bit but yours is a bit more simplified. Great job with your first submission.

    A few things to keep an eye out for would be after you submit your solution, check out the report that gets generated to check for errors and accessibility issues.

    View Report Here

    A tool you could use in Chrome Dev Tools before you submit is AxeDevTools (extension download).

    Another thing I would suggest doing is to remove any unneeded comments from your HTML and CSS and make sure to remove any CSS that is not needed (ie. .attribution).

    One thing you could try to start using is CSS Variables for things such as colors. It makes it so much easier to code, I found.

    Great job again, and I look forward to seeing more submissions from you in the future.

    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

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