Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
21
Comments
22
Mateus Lima
@mts-ml

All comments

  • MoAdel74•10
    @MoAdel74
    Submitted 3 months ago

    FAQ accordion

    1
    Mateus Lima•490
    @mts-ml
    Posted 3 months ago

    Hey @MoAdel74, congrats on finishing the challenge. Some points, I've noticed:

    Does the solution include semantic HTML? No, you used only div, it's a small project but you could've used a main tag.

    Is it accessible, and what improvements could be made? You used an h1 which is good, most of the images don't have an semantic value on this project, but you could use alt to show "Decorative star" or used an aria-hidden.

    Does the layout look good on a range of screen sizes? On large screens the image get cut.

    Overall, good job!

  • calvinvin•1,060
    @calvinvin
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that I conquered my first app, though single page. So many detailed logics need to be think thoroughly.

    rest-countries-api-with-color-theme-switcher

    #react#react-router#vite
    1
    Mateus Lima•490
    @mts-ml
    Posted 5 months ago

    Hey @calvinvin, you've got an error on your promise. Only the loading is displaying.

  • Danilo Parra Jr•430
    @daniloparrajr
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I like the fields validations and overall design and responsiveness.

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

    I had a challenging time adding custom validations and formatting on the currency field.

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

    Suggestion on adding animations and proper way to deal with currencies.

    Mortgage Repayment Calculator

    #next#react#tailwind-css
    1
    Mateus Lima•490
    @mts-ml
    Posted 5 months ago

    Great solution, you did an amazing job, the code and validation are pretty nice!

    The only thing to point out is in desktop size, the solution is not centralized, I don't know Tailwind but using grid, place-items:center and min-height:100vh solves the problem.

  • P
    Kamran Kiani•2,780
    @kaamiik
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of successfully completing this project using React for the second time, along with TypeScript to enforce type safety and improve code maintainability. It was rewarding to see my growth in understanding state management, particularly with the useState and useEffect hooks, as well as implementing forwardRef for component references. I also took the opportunity to enhance accessibility by adding aria-live announcements for screen readers, which I believe is an important aspect of web development. Next time, I would focus on improving my state management approach by utilizing the Context API from the beginning, rather than relying on prop drilling (I have updated my code with Context now). This would help streamline the data flow and make the code base cleaner and more maintainable. Additionally, I would explore more advanced features of Tailwind CSS to further enhance the styling and responsiveness of the application.

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

    During this project, I faced several challenges, particularly in creating components and effectively using the useState hook to manage state. Additionally, integrating TypeScript into the project required careful attention to type definitions and ensuring type safety across components. Initially, I struggled with structuring my components in a way that promoted reusability while also ensuring that state was managed correctly across them. To overcome these challenges, I took the time to break down the application into smaller, manageable components, which helped clarify their responsibilities. I also revisited the React documentation and various tutorials to deepen my understanding of the useState hook and how to manage props effectively. By practicing prop delegation, I was able to pass data between components more efficiently (update: Instead of prop drilling I have updated my code with Context API).

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

    I would appreciate feedback on several specific areas of my project. First and foremost, I am looking for insights into whether there are any issues with my state management or component structure. I want to ensure that my use of the useState hook is optimal and that my components are designed for maximum reusability and clarity. Additionally, I’d like feedback on how I’ve implemented TypeScript in the project, particularly whether my type definitions and type safety practices are effective and maintainable. Furthermore, I would like to receive feedback on the accessibility features I implemented, particularly the aria-live announcements for screen readers. It’s important to me that my application is accessible to all users, so any suggestions for improvement in this area would be valuable. Lastly, I am open to any general advice on how I can enhance my code quality, whether through better practices, performance optimizations, or improved styling techniques.

    Product list Card using React, Tailwind and TypeScript

    #accessibility#react#tailwind-css#vite#typescript
    1
    Mateus Lima•490
    @mts-ml
    Posted 6 months ago

    Hey, great solution, really liked the design, I'm still learning about accessibility myself so I can't really help, but overall great job!

  • artscomi•50
    @artscomi
    Submitted 6 months ago

    Ui project

    #accessibility
    1
    Mateus Lima•490
    @mts-ml
    Posted 6 months ago

    Does the solution include semantic HTML? No, you should use semantic tags like main and section, not only div.

    Is it accessible, and what improvements could be made? I don't know much about accessibility but the images have and alt text, which is good, some areas could use a aria-label.

    Does the layout look good on a range of screen sizes? Yes, it's responsive.

    Does the solution differ considerably from the design? Just a little, the font is sans-serif and not Hanken Grotesk like in the design, but overall it looks good.

    Nice job, I liked the design!

  • P
    John Geddis•260
    @JGedd
    Submitted 6 months ago

    Results summary component

    3
    Mateus Lima•490
    @mts-ml
    Posted 6 months ago

    Great job!

    Looks almost identical to the design!

    Does the solution include semantic HTML? No, You only used <div>, should you semantic HTML like a <section>.

  • Marc Francis•730
    @marcfranciss
    Submitted 9 months ago

    Bookmark landing page (React | Typescript | Sass | Vite)

    #accessibility#react#sass/scss#typescript#vite
    1
    Mateus Lima•490
    @mts-ml
    Posted 9 months ago

    Hey!

    Nice project!

    Does the solution include semantic HTML? Yes

    Does the layout look good on a range of screen sizes? Yes

    Does the solution differ considerably from the design? A little, somethings are a little off, like the blue background, differs from the design and logo color is different too.

    It's a nice project, well done!

  • 1deadjoe•370
    @1deadjoe
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    I a proud that I was able to style the webpage without layout breaking. Although it took me quite a while. I have gotten a great grasp on transitions too.

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

    The only challenge I have encountered was trying to add in a slide in animation for the three slides. I eventually resigned, but I am still learning.

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

    I hope someone could help me understand how to include the slide-in animation to my webpage. I would higly appreciate any thoughts. On the animation, and also how to go about understanding the JS involved.

    ROOM HOMEPAGE USING SCSS AND JS

    #accessibility#sass/scss
    1
    Mateus Lima•490
    @mts-ml
    Posted 10 months ago

    Hey @1deadjoe!

    I like how there are no "empty" spaces when switching between different screen sizes. Did you read an article or was it just practice?

    Also, I liked the arrow transition you made.

    At width: 950px, the design breaks, the title and image get messed up.

    As for the JS, I named all sections with the same class and used document.querySelectorAll('.menu__bg') to select them all. Since it returns an array, I used forEach() to loop through and select the correct one to display. I'm happy with how my JS turned out, and if you'd like to check it out, I believe it could help you.

    Marked as helpful
  • Azzam Al Kahil•310
    @AZZAM-K
    Submitted 10 months ago

    Responsive landing page with SCSS

    #sass/scss
    1
    Mateus Lima•490
    @mts-ml
    Posted 10 months ago

    Hey!

    Nice design.

    Does the solution include semantic HTML? Yes

    In my opinion you should add some transition effects, really improves hovers effects and the visual experience.

  • P
    Srijan Manandhar•450
    @srijanss
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?
    • I learned how to use BEM methodology for CSS.

    NFT preview card component using BEM

    #vite#bem
    1
    Mateus Lima•490
    @mts-ml
    Posted 10 months ago

    Great solution, it looks identical!

    Nice job! ;)

    To be picky, you should've used cursor: pointer; when hovering over the image. Aside from that, everything is great.

    Marked as helpful
  • P
    olopcodes•440
    @olopcodes
    Submitted about 1 year ago
    What specific areas of your project would you like help with?

    Might not be the cleanest/dryest code, but it's a work in progress

    Splitter with toggler

    #jquery#sass/scss
    1
    Mateus Lima•490
    @mts-ml
    Posted 10 months ago

    Hey @olopcodes!

    Really liked you design, the option to select between two themes is pretty nice, great job!

    Does the solution include semantic HTML? No, only <div> used and no <label> or <h1>.

    Does the layout look good on a range of screen sizes? Yes, it does.

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

    I enjoyed making the responsive for this app the most, next time I want to use REACT for this app.

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

    Displayed design for tablets.

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

    I want to hear suggestions on working with js frameworks.

    Time-tracking-dashboard

    #gulp#sass/scss
    1
    Mateus Lima•490
    @mts-ml
    Posted 10 months ago

    Hey @salomasik!

    I also want to recreate this challenge using React, I believe it's going to be a good experience using props, useEffect()...

    The feedback: Your solution looks good, needed to change the font family to the correct one. The gap between cards is larger than in the provided solution, and on mobile screens, it's not centered.

    The HTML is semantic and the solution is responsive.

    Marked as helpful
  • P
    juliusalberto•220
    @juliusalberto
    Submitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of creating the js script! I learnt how to manage events and change element class. I would do it faster next time (although I think mine is alr fast enough).

    I also created this using a mobile-first workflow. Surprisingly, it's kinda fast!

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

    I don't encounter any difficult one, but I think it's lining up the padding and margin. And responsive design. My website looks ugly on tablet.

    Newsletter sign up page

    #sass/scss
    1
    Mateus Lima•490
    @mts-ml
    Posted 10 months ago

    Hey @juliusalberto!

    Nice design, looking at yours I realized I didn't change the standard e-mail from mine, got to correct it...

    For feedback, two things, the HTML is not semantic, you should use at least a <main> tag instead of only <div>. And in my opinion, I'd change the message when the e-mail is valid and the field color.

  • P
    gajbos99•170
    @gajbos99
    Submitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    /

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

    /

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

    Well i ran into a couple problems. first of all. i created mobile first and created the design for both of the share parts. i just do not know how to change that when full screen as that is looking different. the mobile social media icon div is looking different from the one on the desktop. What is the best way to do that? as now i put display none on the light share bar and display flex on the other one and that toggles. but on the desktop version the light one doesnt need to be removed.

    Article Preview Component

    #sass/scss
    1
    Mateus Lima•490
    @mts-ml
    Posted 10 months ago

    Hey @gajbos99!

    I liked that you used React and useState. I've used JS to manipulate the class, but using the hook seems better.

    I tried to preview the solution site but got a 404 error. Looking at the code, I noticed that you jumped from a <h1> to a <h4>. I've read that you should always follow header hierarchy.

    The solution differs a little from the design; the background color is off, and the name/date is centered when it should be aligned to the left.

    About your question, I’d need to see the page and play around with it a bit to try and provide some input.

  • P
    wideirp•280
    @wideirp
    Submitted 11 months ago

    Testimonials grid section with HTML & Sass

    #sass/scss#cube-css
    1
    Mateus Lima•490
    @mts-ml
    Posted 11 months ago

    Hey!

    Great job overall! Everything looks pretty good, aside from some color differences. The HTML and CSS are well done, and it's responsive too.

    Nice work!

  • Dei•60
    @deidalopez
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    Getting the initial scaffolding done.

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

    I needed more grid practice, the heading was a struggle for me for some reason.

    Four card preview with Sass

    #sass/scss
    1
    Mateus Lima•490
    @mts-ml
    Posted 11 months ago

    Hey @deidalopez!

    Congratulations on finishing the challenge, I've had some trouble with this one too, had to learn grid in order to get the cards right.

    I liked how you've configurated you CSS, I didn't know you could use $red: hsl(0, 78%, 62%);. Gotta check this out.

    Does the solution include semantic HTML? I've noticed you used <h1> and then jumped to <h3>, it's recommended to follow the headers hierarchy.

    Does the layout look good on a range of screen sizes? On mobile screens the header doesn't appear.

  • PriyaSharma026•40
    @PriyaSharma026
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of that I could make a responsive project without watching a youtube tutorial and figuring out things by my own and this time I used Sass extension for the first time and I loved it.

    HTML and SCSS-powered responsive page with dynamic Flexbox layouts.

    #sass/scss
    1
    Mateus Lima•490
    @mts-ml
    Posted 11 months ago

    Great design, looks exactly like the prototype.

    Great job!!!

  • Jaime•150
    @Jaimealicante83
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    I built it with attention to the detail and measures of the design. It's the kind of work I do at my workplace.

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

    This template was more difficult than the previous one, I had to pay attention to the details

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

    How to avoid mistakes while building the template and be aware of errors.

    Recipe page with HTML and SCSS

    #sass/scss
    1
    Mateus Lima•490
    @mts-ml
    Posted 11 months ago

    Hey Jaime!

    Excellent work, the design looks very nice.

    I have no comments, just congratulations!!!

    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