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

Rafael Ibarra

@rafbar2000rr120 points

Como Full Stack Web Developer, desarrollo aplicaciones con las tecnologías React, Javascript, NodeJS, Express, Sequelize.

Latest solutions

  • Testimonials grid using tailwindcss, flexbox, grid

    #tailwind-css

    Rafael Ibarra•120
    Submitted 9 months ago

    I would like to know how to change the quotation marks color for it to be the same as the model given.


    1 comment
  • Four card feature using flexbox, tailwindcss

    #tailwind-css

    Rafael Ibarra•120
    Submitted 9 months ago

    I would like to know if there is a better way to code for the cards arrangements when the screen crosses the breakpoint from mobile to desktop. I did it using flexbox but I am not sure if using grid could be easier.


    1 comment
  • Product-preview-card using tailwindcss and flexbox

    #tailwind-css

    Rafael Ibarra•120
    Submitted 9 months ago

    I would like to know if there is another way in Vercel to select the folders, because I use to move the images from the images folder to the src folder, otherwise Vercel cannot read the images. I don't know if what I do is really necessary or there is a better way to do it.


    1 comment
  • Recipe using tailwindcss, CSS Grid, Flexbox

    #tailwind-css

    Rafael Ibarra•120
    Submitted 9 months ago

    Althougth I use fonts by linking to google fonts, I would like to know how to use fonts by using the local font files provided inside the fonts folder.


    1 comment
  • tailwindcss, flexbox

    #tailwind-css

    Rafael Ibarra•120
    Submitted 9 months ago

    I would like to know why in the following code, relative units in percentage doesn't work but absolute units like px does work.

          GitHub
    

    1 comment
  • Blog preview card using tailwindcss and flexbox

    #tailwind-css

    Rafael Ibarra•120
    Submitted 9 months ago

    I would like to know wether it is strictly necessary to use responsive design in this project because I haven´t used it and my project run very good.


    1 comment
View more solutions

Latest comments

  • Umar Mubeen•80
    @UmarMubeeen
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    I have gained little exp on grid system and their working flow, learned to control them.

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

    after previous challenge this was not much challenging however, making code more efficient is definitely a challenge in this task.

    TestimonialsGrid

    #tailwind-css
    1
    Rafael Ibarra•120
    @rafbar2000rr
    Posted 9 months ago

    I found it almost perfect, good job. The only thing I noticed is the background color, for what I see in the design given, it should be the neutral color: light grayish blue: hsl(210, 46%, 95%). I see your code is very clean, well structured, understandable, with the comments written at the beginning of each card.

  • Amit Dhakal•610
    @herojk64
    Submitted 9 months ago

    Four card feature section

    #react#tailwind-css#sass/scss
    1
    Rafael Ibarra•120
    @rafbar2000rr
    Posted 9 months ago

    When resizing the window to mobil, I noticed that the card's width decreases as I move. In order to turn from desktop to mobil with a fixed width I would add on each of the four sections on App.tsx this: <section className = "max-w-[365px]"> .

    Besides I noticed that the heading and the group of cards didn't move together as I resized the window, so I would add on App.tsx: flex, flex-col and items-center classes this way: <div className='App flex flex-col items-center'>

    Marked as helpful
  • P
    tloyan•275
    @tloyan
    Submitted 9 months ago

    Product Preview Card Component | Next.js, Typescript, Tailwind CSS

    #next#react#tailwind-css#typescript
    1
    Rafael Ibarra•120
    @rafbar2000rr
    Posted 9 months ago

    Nice work. The desktop design is perfect, concerning to the mobile design, I see that the paragraphs are not exactly the same because it has less number of lines than the model. I would only reduce the article width a little so that the paragraphs will increase its number of lines. I see a good padding and good margins, and that's all I will do. Almost a perfect work.

  • Nate Poli•60
    @njpoli
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    Fairly simple project. Only thing I would do differently next time is hopefully complete the challenge faster. It took me longer than expected to complete.

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

    The only trouble I had for this project was dealing with getting the text to go to the right of the makers. It works on the first line but once it goes to the next line the text is directly under the marker rather than going under the first word of the text. If anyone could point out to me how to do it that would be great.

    Adding left margin inside of a span nested inside of the list item only worked for the first line. I also tried wrapping the text content in a div and made the div a block-level element, but that put the entire block of text on the next line with the marker above it.

    Recipe Page built with nextjs and tailwindcss

    #react#tailwind-css#next
    1
    Rafael Ibarra•120
    @rafbar2000rr
    Posted 9 months ago

    In my project I did the following in <ol>, I didn't use list-inside-space neither marker:text-primary-nutmeg:

    <ol class=" pl-5 ml-[10px] list-decimal "> and for each <li> I only added a padding left class pl-2, this way: <li class="pl-2"> So each text will be at the right of its marker and it worked.
  • hafizfawwazmhd•30
    @hafizfawwazmhd
    Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    I think I am getting better at using tailwind CSS. I am really proud of myself that i still managed to continue doing this project.

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

    My challenges i faced was my page is not so responsive when i tested on mobile and tab. After i modify some of my code, I think its work already.

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

    Nothing so far.

    Social Links Profile

    #tailwind-css
    1
    Rafael Ibarra•120
    @rafbar2000rr
    Posted 9 months ago

    When you click any button, you should be directed to an URL. To do this, you can wrap each button by an anchor (<a>) tag, this way:

    <a href="https://github.com"> <button class="w-full text-white bg-[#333333] my-[10px] p-[5px] rounded-xl hover:bg-slate-600 active:bg-slate-700 focus:outline-none focus:ring focus:ring-slate-300" > Github </button> </a>
  • Jeremiah Olarinde Ogunleye•20
    @Jay-cey
    Submitted 9 months ago

    Blog Preview Card

    #tailwind-css
    1
    Rafael Ibarra•120
    @rafbar2000rr
    Posted 9 months ago

    In order to have a focus ring around the phrase: HTML & CSS foundations when it is focused, I will add the following classes:

    focus:outline-none This class removes the default focus outline that browsers apply when an element is focused. Usually, elements like buttons or links have a blue outline when focused (via keyboard navigation). By using focus:outline-none, you're removing that outline to customize it using other classes.

    focus:ring-1 Adds a ring around the element with a thickness of 1 pixel when the element is focused.

    focus:ring-black Specifies the color of the ring to be black. This visual feedback indicates the element is currently in focus, which is important for accessibility, especially for keyboard users.

    cursor-pointer This class changes the cursor to a pointer (a hand icon) when the user hovers over the element, indicating that the element is clickable.

    tabindex="0" (this is not a class, it is an HTML attribute) This makes the <h1> focusable via keyboard navigation. Normally, headings aren't focusable, but adding a tabindex="0" allows it to be reached using the Tab key, enhancing accessibility for users who navigate via keyboard or assistive technologies.

    So, finally your code for that phrase will be:

    <h1 class="text-2xl font-extrabold hover:text-[#F4D04E] cursor-pointer inline-block focus:outline-none focus:ring-1 focus:ring-black " tabindex= "0"> HTML & CSS foundations </h1>
    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

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