Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
29
Comments
10

Paulo Wells

@wellsprRio de Janeiro, Brazil530 points

I love to see things coming into place by code. I have experience writing frontend code in HTML, CSS, JavaScript, and React. I also have experience in backend and full-stack frameworks, like Node.js and Next.js, respectively, and databases like MongoDB.

I’m currently learning...

Full-Stack web development using the framework Next.js along with authentication, internationalization, database connection with Prisma ORM.

Latest solutions

  • Responsive Article Preview

    #accessibility#animation#sass/scss#lighthouse

    Paulo Wells•530
    Submitted 3 months ago

    Feedback is welcome!


    1 comment
  • Mobile-First Responsive Layout: Media Queries, Flexbox and Grid

    #accessibility#lighthouse#sass/scss#bem

    Paulo Wells•530
    Submitted 3 months ago

    I'd love to get feedback on this solution!


    2 comments
  • Responsive Cards Section - Media Queries, Flexbox and Grid

    #accessibility#bem#sass/scss

    Paulo Wells•530
    Submitted 3 months ago

    I'd love to receive any feedback about my solution!


    1 comment
  • Responsive Product Card With Semantic Tags, Flexbox and Media Queries

    #accessibility#bem#lighthouse#sass/scss

    Paulo Wells•530
    Submitted 4 months ago

    I would appreciate feedback on code structure, the use of semantic tags, accessibility, the application of BEM methodology, or any obvious areas where I might have complicated things.


    2 comments
  • Accessible and Responsive Recipe Page: Flexbox, BEM and Media Queries

    #accessibility#bem#sass/scss#lighthouse

    Paulo Wells•530
    Submitted 4 months ago

    I would love to get feedback on any point of this project, including the way I apply the BEM methodology, the use of semantic tags, etc. Thank you!


    1 comment
  • Accessible and Responsive Social Links Profile Using Flexbox

    #accessibility#sass/scss#lighthouse

    Paulo Wells•530
    Submitted 4 months ago

    I'll be glad to hear your feedback on my solution.


    1 comment
View more solutions

Latest comments

  • Ilham Bouktir•500
    @ilham-bouk
    Submitted 6 months ago

    Article preview component

    #accessibility#pure-css#van-js
    1
    Paulo Wells•530
    @wellspr
    Posted 3 months ago

    Good job on the desktop version, it is very close to the original design. However, it lacks responsiveness for smaller screen sizes. To improve this solution, you should include one or more media queries. The media queries are necessary because the layout changes from vertical to horizontal. Then, it would be your choice to use, for example, Flexbox or Grid to arrange the layout accordingly. For example:

    .preview {
      display: flex;
      flex-direction: column;
    
      @media (min-width: 768px) {
        flex-direction: row;
      }
    }
    
    Marked as helpful
  • P
    Gabe•320
    @gabei
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of getting the grid to work at all the way I wanted it to. I'm still getting the hang of it.

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

    I was a little slow to get a hang of the grid-area property. The format of placing row-start / col-start / row-span / col-span took a little bit of getting used to.

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

    Feedback on anything and everything is welcome!

    Testimonial Grid

    #node#sass/scss
    1
    Paulo Wells•530
    @wellspr
    Posted 3 months ago

    This solution is outstanding! It uses semantic HTML tags and makes an advanced use of Sass preprocessor. The CSS grid shines in all places! The resulting webpage is fully responsive and includes a nice tablet version which interpolates between mobile and desktop original designs.

    It would be nice if the desktop version content had a max-width, to prevent it from becoming too wide on wider screens.

    Also, the content would show better if vertically centralized.

    Congratulations and happy coding!

  • Chinedu Daniel Okeke•340
    @Sage-25
    Submitted 4 months ago
    What challenges did you encounter, and how did you overcome them?

    I experienced an issue with the horizontal card issue and realised I missed a div when writing the HTML code. So I was able to fix it.

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

    The responsive view.

    My CSS & HTML implementation of the Four Card Section

    #accessibility
    1
    Paulo Wells•530
    @wellspr
    Posted 3 months ago

    Congratulations for completing this challenge!

    The markup uses semantic tags, which is important for accessibility and SEO. The styles utilize grid, which is the main point of the challenge.

    I'll list some points that can help you improve your solution:

    1. For improving accessibility and SEO, don't forget to include the alt attribute in images;

    2. To improve the mobile version, try to set widths to 100%, instead of auto, then set the correct font sizes, etc.

    I hope this helps you! Happy coding!

    Marked as helpful
  • Gian•20
    @Giancarlo-vs
    Submitted 4 months ago

    Responsive preview card component builded with HTML and CSS.

    #accessibility#animation#materialize-css#web-components#vanilla-extract
    1
    Paulo Wells•530
    @wellspr
    Posted 3 months ago

    Congratulations for completing this challenge! Your code makes use of semantic tags, flexbox, and media queries.

    Some aspects that help enhance your solution:

    • It would be nicer to reproduce the mobile design more accurately in the specified size (just like you made with the desktop). No problem to let the card be responsive above that size;

    • I've noted that the button is not centralized in the mobile version.

    • The font families of description and price differ from the ones in the original design.

    I hope this feedback will be useful! Happy coding!

  • P
    mci3x•100
    @mci3x
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Similarity to original, I guess

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

    How can I simplify my code while adhering to best practices?

    QR Component | HTML & CSS

    2
    Paulo Wells•530
    @wellspr
    Posted 4 months ago

    This is a nice solution, very similar to the original. The HTML code is clean, uses semantic tags, and is accessible and well organized. Also, the CSS makes good use of flexbox.

    I have a few points to help improve your solution. First, note that in the original design, you have different slate shades for the text colors, which are specified in the color palette in the style-guide (you can, in this case, refer directly to the Figma design).

    Also, I always use Lighthouse to test solutions, and your solution is a meta description away from getting a full 100% score there!

    I hope this feedback will be useful, keep up with the good work, Happy coding!

    Marked as helpful
  • GCrane93•70
    @GCrane93
    Submitted 4 months ago

    Recipe Page

    #sass/scss
    1
    Paulo Wells•530
    @wellspr
    Posted 4 months ago

    This great solution includes semantic HTML tags, is accessible, and uses Sass preprocessor to produce styles. The result is very close to the original. It also uses the CSS function counter to style the numbers and bullets of the ordered and unordered lists.

    I'll point out that in the original design, the last row of the table has no bottom border, so it could be used appropriate selectors to pick all rows but the last when applying border-bottom style.

    Happy coding and keep up the good work!

    Marked as helpful
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

Beta Member

This badge is a shoutout to the early members of our community. They've been around since the early days, putting up with (and reporting!) bugs and adjusting to big UX overhauls!

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