Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
3
Comments
4

jorditosa

@jorditosa120 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

React Redux React router Strapi

Latest solutions

  • Intro Signup React Tailwind Localstorage

    #accessibility#react#tailwind-css#vite

    jorditosa•120
    Submitted over 2 years ago

    0 comments
  • Advice generator with React

    #react#vite#accessibility

    jorditosa•120
    Submitted over 2 years ago

    0 comments
  • React Summary component

    #accessibility#react#vite

    jorditosa•120
    Submitted over 2 years ago

    0 comments

Latest comments

  • Melvin Aguilar 🧑🏻‍💻•61,020
    @MelvinAguilar
    Submitted over 2 years ago

    Single price grid component (Tailwind CSS)

    #accessibility#tailwind-css
    9
    jorditosa•120
    @jorditosa
    Posted over 2 years ago

    Hi Melvin,

    Excelent work! Just to say something: For anchor elements, it is good practice target "_blank" attribute.

    Then, for html markup, probably I would split main element to use it only for "join our community" container, and other two being created as section elements...all as the main part of the webpage, not all is the dominant content.

    Finally, probably you have used many arbitrary values...then, could be better developing directly with css or with preprocessor. For example, class p-[1.5625rem], that you repeat often, would be faster to create a variable with that value (:root), and then you do not need to write different times.

    I repeat, that is an excellent work! Is just to give some extra opinion, not best, but mine! keep working

    Marked as helpful
  • Kells•140
    @keblank
    Submitted over 2 years ago

    Responsive results component

    1
    jorditosa•120
    @jorditosa
    Posted over 2 years ago

    Hi! Nice result, very good in my opinion.

    Only to have some feedback. Between 375px and 520 there's bad summary view.

    And the semantic and code structure of html and css files are pretty good. Only to comment the :root variables it is better to have it at the top of the css file. And for semantic probably the alt attribute in images could be better explained, all indicated as "icon" could be confusing for who need some digital assistance.

    Marked as helpful
  • Scynes•190
    @Scynes
    Submitted over 2 years ago

    Used Flexbox, tried to do some class based design.

    1
    jorditosa•120
    @jorditosa
    Posted over 2 years ago

    Hi!

    Very good design, some feedback: Reverse to use flex at body to place at center the component, and grid for the main container.

    Like html and css file structures and writting also hover effect on summary results.

    Probably, in terms to be exactly as design proposal, some text colors and lower font sizes could be better. And for classes, using some methodology ( interesting one is BEM por example ) could be better to have those better readable and ordered.

    Marked as helpful
  • 1lgrand•30
    @1lgrand
    Submitted over 2 years ago

    Stats Preview Card Solution

    1
    jorditosa•120
    @jorditosa
    Posted over 2 years ago

    Hi!

    Responsive design -> better use lower breakpoints. You have one at 1440px. Try at least two, one at 400-500px, and another at 1200-1400 that's ok.

    HTML -> super important to use more specific labels and les "<div>". Example the image, never inside a div, use "<img>" and always with alt atributte ( better accessibility).

    CSS Grid -> For that kind of uses better is Grid. With displaying in grid, you can develop one column for Mobile viewports, and two columns for bigger screens.

    Design -> correct the margin of big title on desktop viewport. We can create only one container, inside put h2, p, and the stats, and assign a padding or margin once in the main container. With that you would correct and align all the elements correctly as the origin design.

    css -> good file structure

    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