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.
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.
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'>
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.
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.
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.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.
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>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>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..
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;
}
}