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

Guilherme Dias Simões

@gdsimoesToronto210 points

I started my lifelong interest in coding and problem-solving in my teenage years, and, after a few years of tutoring, I decided to become a professional developer.

Latest solutions

  • Body Mass Index calculator built with React, Next.js and Vitest

    #next#react#vitest

    Guilherme Dias Simões•210
    Submitted 12 months ago

    I would appreciate feedback on a few specific areas:

    1. Accessibility: While I’ve implemented a VisuallyHidden component and followed best practices, I’m eager to know if there are any overlooked aspects of accessibility that could be improved, especially in more complex use cases.

    2. Testing Strategy: I’ve started using Vitest for testing, but I’m interested in learning more about how I can expand my test coverage and improve the effectiveness of my tests. Any advice on advanced testing techniques or best practices would be highly valuable.

    3. CSS Optimization: I’ve made some strides in optimizing my CSS, but I’m open to suggestions on how to further refine it, particularly in terms of maintainability and scalability for larger projects.

    Feedback in these areas would help me continue to grow and ensure my future projects are even more polished.


    0 comments
  • Simple solution with highly optimized fonts


    Guilherme Dias Simões•210
    Submitted about 1 year ago

    I would love to get some tips on how to improve accessibility.


    1 comment
  • Simple solution using variable fonts

    #accessibility

    Guilherme Dias Simões•210
    Submitted about 1 year ago

    The font rendering on Figma was slightly different than the one on the browsers. Can I do something about this?


    0 comments
  • Simple solution using CSS Flexbox


    Guilherme Dias Simões•210
    Submitted about 1 year ago

    This project is very simple so I am more interested in some opinions about how I organized my CSS code.


    0 comments
  • Minimalist solution


    Guilherme Dias Simões•210
    Submitted over 1 year ago

    I feel like my CSS code is too verbose. I would love some suggestions to make my code more concise.


    1 comment
  • Mobile-first solution using Sass and JSON

    #accessibility#sass/scss#fetch

    Guilherme Dias Simões•210
    Submitted about 3 years ago

    1 comment
View more solutions

Latest comments

  • Benjamin Juarez•390
    @ImBenja
    Submitted about 1 year ago

    Tarjeta con HTML y CSS

    1
    Guilherme Dias Simões•210
    @gdsimoes
    Posted about 1 year ago

    Your solution looks really good; however, there are some minor inconsistencies with the design:

    1. The image should have a width of 50% of the entire card.
    2. The word "CHANEL" is a different color than the rest of the paragraph.
    3. The button is not aligned with the text above.

    If you address these issues, I'm sure your project will be even better!

  • Munib ahmad•270
    @MunibAhmad-dev
    Submitted about 1 year ago
    What specific areas of your project would you like help with?

    For the nutrition section below, I struggled to get it right, and it still isn't that good. Maybe it's because I didn't use a grid. I always use flexbox for everything.

    Recipe Page

    #accessibility#cube-css#pure-css#tailwind-css#itcss
    1
    Guilherme Dias Simões•210
    @gdsimoes
    Posted about 1 year ago

    I don't think Grid would help here. You should have used a table element since this is tabular data. If you need help learning how to style tables I recommend checking out Kevin Powell's video about this topic on YouTube.

    Also, have you checked the style guide for the colors? It seems like yours are a bit off.

    Marked as helpful
  • Nikola•220
    @porumbachanov
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Nothing in particular, would probably try a smarter way to do the css.

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

    It was pretty similar to the Blog preview card.

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

    Maybe a better way to write the responsiveness and css as whole.

    Social links profile with flexbox

    2
    Guilherme Dias Simões•210
    @gdsimoes
    Posted about 1 year ago

    I really enjoyed reviewing your project—it's clear you've put a lot of effort and creativity into it! The overall design is visually appealing, and the functionality seems robust. I do have a few suggestions that could enhance the usability and accessibility of your project even further.

    • Contrast Issue: The contrast in your footer links is currently too low, which may cause accessibility issues for visually impaired users. Consider enhancing the contrast to improve readability.

    • Font Size Units: It's recommended to avoid using pixels for setting font sizes, as this can restrict users who need to adjust font sizes in their browser settings for better readability. Consider using relative units like em or rem instead.

    • Layout Consistency: The spacing between the description and the first button differs from the original design. Adjusting this distance could enhance the visual consistency of your project.

    Marked as helpful
  • thebigfatpaanda•60
    @thebigfatpaanda
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    that is completed the challenge i would try to make the website responsive from the beginning.

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

    i faced problems in positioning some of the components and also faced issues in making it responsive

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

    I would like to get help in positioning and responsiveness thankyou.

    blog preview page

    1
    Guilherme Dias Simões•210
    @gdsimoes
    Posted over 1 year ago

    Design & Layout:

    • Image Alignment: The main image appears off-center, which affects the visual balance of the page. Consider adjusting the CSS properties like margin to center the image effectively.

    • Card Width: The card is currently too wide.

    • Scrolling Issue: On smaller screens like laptops, it would be better if the entire page fit without needing to scroll. This can be achieved by making sure the card height is equal to the one in the design.

    Code Quality:

    • Code Formatting: There are some inconsistencies in your formatting. Tools like Prettier can automatically format your code, making it cleaner and more readable.

    • Naming Conventions: Using IDs like div1 and img2 can make the code harder to maintain. More descriptive class names would enhance the readability and reusability of your CSS. For example, using .profile-card instead of #div1 could be more descriptive.

    • Use of <br>: Instead of using <br> tags for adding space, it's better to use CSS properties such as margin or padding. This approach is more flexible and keeps your HTML cleaner.

    General:

    • Your choice of colors and fonts aligns well with the design file, which is a great start! With some adjustments to layout and code structure, your project will be even better.
    Marked as helpful
  • Guilherme Dias Simões•210
    @gdsimoes
    Submitted over 3 years ago
    What are you most proud of, and what would you do differently next time?

    I finished this project a long time ago, so I don't feel particularly proud. Next time I will use Prettier for formatting my code and Josh Comeau's CSS reset instead of the CSS remedy.

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

    I don't remember any.

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

    This project for me was mainly about learning the workflow of submitting solutions and so on. I don't think I need any help in this one.

    Simple solution using only CSS Flexbox

    3
    Guilherme Dias Simões•210
    @gdsimoes
    Posted over 1 year ago

    I don't speak spanish...

  • Joramir Jr.•250
    @JoramirJr
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    Well, it was a very simple problem, so I don't think there's much room for improvement. Overall, I'd say that I could keep an eye on accessibility principles, since I'm aware of none of them. I'm not sure if I used the correct HTML semantic tags for the job, so that would, maybe, be something I'd change.

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

    None

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

    I used a tag for the bottom text, but I'm not sure if that was a good decision. Also, In order to align the QR code image, I used a wrapping for the job, but probably I could've centered the , in the top section, without using an extra .

    1st challenge solution (QR code component), using CSS Grid and Flexbox

    1
    Guilherme Dias Simões•210
    @gdsimoes
    Posted over 1 year ago

    It looks pretty good and if you use the box-shadow it will look even better!

    Also, you might consider using a separate CSS file. It won't change the final website but makes for a better developer experience.

View more comments

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