All comments

• 

  Nate Poli• 60

  @njpoli

  Submitted 7 months 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

  1

  50

  

  Rafael Ibarra• 60

  @rafbar2000rr

  Posted 4 days 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.

  0
• 

  hafizfawwazmhd• 30

  @hafizfawwazmhd

  Submitted 16 days 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

  1

  20

  

  Rafael Ibarra• 60

  @rafbar2000rr

  Posted 8 days 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>

  0
• 

  Jeremiah Olarinde Ogunleye• 20

  @Jay-cey

  Submitted 10 days ago

  

  Blog Preview Card

  1

  40

  

  Rafael Ibarra• 60

  @rafbar2000rr

  Posted 9 days 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

  0
• 

  Paulo Borges• 80

  @Paulo-Borges

  Submitted 10 months ago

  Sou Novato, 1º projeto no site. O Mas difícil foi que o RESPONSIVO ficava certo no PC, mas nos celulares de casa não. da parte responsiva . Com certeza tem como melhorar. Espero ajuda..

  

  HTML , CSS

  1

  30

  

  Rafael Ibarra• 60

  @rafbar2000rr

  Posted 14 days ago

  Instead of hardcoding pixel/rem widths for each media query, use percentages or relative units like vw to provide more fluid scaling across different devices. For the width, vw (viewport width) is used for the main container, image, and text sizes, making the layout adjust dynamically as the viewport changes. This prevents having to switch between fixed widths.Use media queries only for 375px and 1440 px as written in the design. These are the changes you can do: .container { width: 80vw; /* Uses 80% of the viewport width / max-width: 90rem; / Restricts max width for large screens */ display: flex; font-family: 'Outfit', sans-serif; background-color: hsl(212, 45%, 89%); justify-content: center; align-items: center; text-align: center; margin: 6.25rem auto; padding: 6.25rem; }

  .base { width: 60vw; /* Responsive width / max-width: 25rem; / Limit the maximum size / background: hsl(0, 0%, 100%); border-radius: 20px; text-align: center; padding: 15px 5px 25px 5px; box-shadow: 1px 2px 10px hsl(220, 15%, 55%); } / Media Query for Mobile Devices (375px) / @media (max-width: 375px) { .container { width: 90vw; / Slightly wider on small screens */

  }
  
  .base {
      width: 80vw; /* Adjust the container width */
  }
  

  }

  /* Media Query for Desktop Devices (1440px and larger) / @media (min-width: 1440px) { .container { width: 60vw; / Restrict width on larger screens */

  }
  .base {
      width: 40vw;
  }
  

  }

  0