— Manejo de Clases BEM
What challenges did you encounter, and how did you overcome them?— Ajustar object-position y object-fit en distintos tamaños para que la parte deseada de la imagen principal siempre sea visible en los recortes de móvil, tablet y escritorio. — Posicionamiento del Popup
Te quedó prácticamente idéntico. Me encantó el resultado, felicidades.
All feedback is welcome. Thanks!
I loved your quiz, super interactive and easy to solve. Just one thing, although it's almost a personal request—I am a Spanish speaker and there were some words I didn’t know the meaning of in English, and when I used Google Translate on the page to translate it, it did translate but then immediately the screen went blank, which was very frustrating because I had to start over haha. But I completed it and I liked it!
Proud of getting the grid layout correct. I would likely start from mobile and work up to desktop next time. I also gave up on matching the font and colors for each section as I was focused on the layout.
What specific areas of your project would you like help with?keeping all content centered vertically as well as getting the background image quotes in the background of the first card
Your page looks amazing! To place the quotation marks SVG behind the text in the top-left corner of the card while keeping the background color, use CSS background-image with background-position: left 2rem top 2rem; and background-repeat: no-repeat;. Set the card’s background-color as usual and add a media query to show the SVG only on large screens (e.g., @media (min-width: 1440px)). This positions the SVG nicely away from the edges and behind the content. I hope this helps!
I was able to make proper use of tailwind's grid variant
What challenges did you encounter, and how did you overcome them?Rearranging the grid to have different combinations, mostly trial and error and realizing what works and what doesn't
What specific areas of your project would you like help with?I manipulated the rows and columns of the grid on the grid container for different media sizes which made it look bloated. If there is a better alternative, I'd like to know about it.
Looks amazing! The layout adapts really well to different screen sizes.
Unfortunately, I can’t see your code or live page, but the screenshot looks great!
I'm most proud of how clean and responsive the final layout turned out. It matches the design closely across different screen sizes, and I was able to apply Tailwind CSS effectively to speed up styling while keeping the codebase neat.
If I were to do this project again, I would focus more on improving accessibility—ensuring that the component works well for screen readers and keyboard users. I’d also like to implement the project using only one styling approach, either Tailwind or Bootstrap, to avoid unnecessary overlap.
What challenges did you encounter, and how did you overcome them?One of the main challenges I faced was making the layout responsive on smaller screens. At first, the elements overlapped or didn't stack properly. I overcame this by reviewing how flexbox and media queries work, and then applied a mobile-first approach to fix the layout step by step.
Another challenge was deciding when to use utility classes from Tailwind versus writing custom styles. To keep things organized, I stuck mostly to Tailwind but used custom classes only when necessary for clarity and reuse.
What specific areas of your project would you like help with?I'd really appreciate feedback on the following:
Responsiveness: Does the layout adjust well across different screen sizes? Are there any breakpoints or devices where it looks off?
Code structure and readability: Is my HTML and CSS organized in a clean and maintainable way? Any tips on improving naming conventions or reducing repetition?
Mixing frameworks: I used both Tailwind CSS and Bootstrap—was this a good decision, or should I stick to one? What’s the best way to manage or separate styles when combining frameworks?
Accessibility: Are there any improvements I could make to ensure the component is more accessible (e.g., better focus states, semantic elements, or alt text usage)?
I’m open to any tips that can help me improve as a front-end developer, especially in real-world projects like this!
Hi! I just finished this same challenge a moment ago, and from my experience, I can tell you that to properly structure the image alongside the information on desktop size, you should use Bootstrap’s grid columns. Look into them on the Bootstrap website—they are very easy to use and make it really simple to create a responsive page. I also recommend designing mobile-first and then progressively enhancing up to desktop because it’s actually much easier that way! I hope this helps you.
at least I still remember how to use tables
What challenges did you encounter, and how did you overcome them?I faced challenges with typos, but was able to correct them after doing through my code... I first used dd, dt and dl for the instruction section, but later changed it to ol and li, and it became easier to style. however, I encountered challenges while trying to color my ordered list.
What specific areas of your project would you like help with?I would like to understand how to color ordered and unordered lists, especially when the list style type color is not the same as text.
I had the same question and I found out that if you use the ::marker pseudo-class on a list element, you can change the properties of the bullets. For example: ul li::marker { color: #fff; font-size: 0.5rem; } With this, you would have white and smaller bullets. I hope this helps!
I am proud to have achieved a result that is faithful to the images and responsive.
What challenges did you encounter, and how did you overcome them?The bigs challenges is formatting the table, using sematic tags in HTML and centralizinh the marker with text.
First regarding the table formatting, i didn't know how to add a line to separate the rows. When i discovered about the css attribute border-collapse, it saved me, because with this and border-bottom i was able to add the separation.
Second choosing the best tags for the html structure. I think i repeat too many section tags and i'm not sure if i managed to choose the best structure.
Third, to center the ul li marker with text content, i had to use flexbox on the li to create a marker and centralize a text with align-self.
I`d like help with the HTML structure. I have a questions about how to improve the HTML structure.
Hello, great job! My recommendations for the HTML layout are that inside the you place an that wraps all the code since, in theory, the complete recipe is an article, right? Then, inside it, divide each part of the page into elements—one for the instructions, another for the ingredients, and so on. Also, the main image together with the recipe name and description would be better placed inside a, which is another semantic HTML tag.
Additionally, the that contains "Challenge by..." should be wrapped inside a element to properly represent the page footer.
I hope this helps you improve your HTML.
Hello, very nice design! Just to help out: to change the color of the text when hovering over it, use the :hover pseudo-class by targeting the element you want to animate. For example, you can write li a:hover {} and then apply the styles you want the text to have when the cursor is over it.
I hope this helps!
Proud of finishing and getting this far. As for different I would want to clean up a lot of my classes, as well as make my HTML more semantic and more readable.
What challenges did you encounter, and how did you overcome them?Just in the final section having to figure out why my lines were not forming as well as having to unfortunately using padding for a copout I really need to get out of that bad habit!
What specific areas of your project would you like help with?What I could have done differently for the final section instead of using padding right is there a flexbox property I should've used? or did I have it down just needed to change my classes?
You did a great job on your project! I have a couple of recommendations that might help improve it even further.
First, to eliminate the empty space at the bottom of your page, make sure your html and body elements have height: 100% and remove any conflicting background colors. It looks like you have two different background colors set, so it’s best to keep only the one you actually want to use to avoid that split-color effect.
Second, in your HTML, try to avoid using too many <div> elements unnecessarily. Instead, it’s recommended to use semantic HTML5 tags like <article>, <section>, <header>, and others. These tags improve the readability of your code and help with accessibility and SEO.
I hope these suggestions help you! Keep up the great work.
Accessibility guidance needed. How can I change the cursor pointer color on hover ?
Congratulations on the great work you’ve done! Regarding accessibility and changing the cursor color on hover, unfortunately, CSS does not allow you to change the cursor's color directly, but you can customize the cursor by using a custom cursor image with the cursor property in CSS, such as cursor: url('your-cursor-image.png'), auto;. This way, you can design a cursor with the desired color and style to improve accessibility and user experience. This was what the AI suggested to me haha. I hope this helps
i would like to thank the ppl who made those challenges. any FeedBack will be great!
Hello! It turned out really well, just a few small recommendations: for the CSS file, it's recommended—or at least what I've seen—is to name it "style" instead of "index," just as a good practice. Also, I would put the container outside and the main inside, but that's just my opinion in that regard. I hope this helps
I am happy as I made it almost same as the given one with suitable width and height and I would like to use key-frames next time for better responsiveness.
What challenges did you encounter, and how did you overcome them?I struggled open it in localhost using parcel because the version is not compatible with regular image import method and so I used URL based import method with parcel and the regular method for vite.
What specific areas of your project would you like help with?I would like to get specific size of height and width of the image and padding in pixels.
Hello, I don’t know if this will be useful to you, but if you use VS Code, you can find out the default values of an image by pressing Ctrl and clicking on the image URL; it will show you the SVG data, including its height and width. I hope this helps you.
I'm understanding better the page, in this moment Im okay, im waiting for hardest challenges
What challenges did you encounter, and how did you overcome them?How to see figma, because idk how to do it
What specific areas of your project would you like help with?My Css Skills, the most part of my time, I use components libraries
Your page is excellent! To learn CSS and be able to use it independently, I recommend watching YouTube videos that teach it in less than two hours, where you quickly learn best practices like always using rem or em units for resolutions, for example. I hope this helps you.
Hello, I saw your code and I would just like to recommend that you don’t set a fixed height or width in pixels on the container, and it’s also not necessary to use position: absolute; I think without those it would center properly, but that’s just my opinion. I hope I helped you.
You did a great job overall! To enhance your buttons, add hover effects by using the CSS :hover pseudo-class—for example, change the background color and text color on hover to make it clear the button is interactive. For your cancel order button, you can darken the background slightly on hover using something like background-color: hsl(224, 23%, 40%) to give a subtle feedback. Also, make sure your links have visible hover styles, such as changing their color or underlining them, so users know they’re clickable. Implementing these simple hover effects will improve usability and user experience. I hope this helps!
The less time it took me to get it done.. Compare to the time took to get the previous designs done
What challenges did you encounter, and how did you overcome them?Box shadow i have to make research on how to execute it better.
What specific areas of your project would you like help with?Font styling I look so weak in that aspect currently..
Your page looks practically identical to the original design! To use the exact typography specified in the challenge, you can add this line inside the of your HTML:. Then, in your CSS, apply the font by adding font-family: 'Red Hat Display', sans-serif; to the body selector or any element you want to style. This method ensures the font loads correctly and matches the challenge’s look perfectly. I hope this helps!
Most proud of: The clean UI and responsive layout I built from scratch. Next time: I'd double-check all image paths before deployment to avoid display issues.
What challenges did you encounter, and how did you overcome them?Challenge: Images weren’t showing after deployment. Solution: I corrected the image paths by using ./ instead of / which fixed the issue.
What specific areas of your project would you like help with?I need feedback on my layout and styling—specifically how to improve responsiveness and alignment of elements in my order summary card.
You did a great job with your code! To improve it further, try using more semantic HTML elements—for example, replace generic containers with, , or where appropriate to give your markup clearer meaning and improve accessibility. Also, simplify your CSS by grouping repeated styles and using shorthand properties, which will make your code cleaner and easier to maintain. For instance, instead of separately setting margin-top and margin-bottom, use margin: 1rem 0; to apply vertical margins at once. Lastly, make sure your layout is fully responsive by using relative units like % or vw and applying media queries to adjust styles on different screen sizes. I hope this helps!
