On the cards for each activity i wasn't able to hide the colors from the element under the display, if anyone can give me a tip on it, i would be thankful!
What specific areas of your project would you like help with?Except the specific mentioned before anything that i could improve!
I actually ran into the exact same problem you mentioned when working on this challenge using tailwind.
In order to fix the issue, I had to set rounded-b-[<value>] and rounded-t-[<value>] rather than simply using rounded-[<value>] for the div that has the changing background color. To get the background of the div in the back not to show, I simply set the rounded corner radius on the bottom only to be something higher than the dark blue div that holds all of the data.
Don't make the radius full or it will look wrong, but something that's a higher value than your data containing div should get the sliver of color to hide.
Overcome: Fail, Try again, Try harder, Fail
What specific areas of your project would you like help with?I would LOVE to see a Senior Developer to get in his mind and understand their way of tackling the problems
While looking through your code I noticed you are using a very helpful util function that became very popular from shadcn/ui I think. Very nicely done!
Nice job using variants to allow tailwind to style differently depending on the media breakpoints.
I do think that the mobile layout could use a little tweaking, especially the horizontal sizing and alignment of the hero image in relation to the form content with mobile screen sizes.
Overall, very nicely done!
The desktop and mobile designs look to be very close to the solution and work great. I especially liked the hover effect that you added to the social link icons. I think it would be nice to see a similar type of hover effect with the share button so that a user might know they can't click it.
I did notice that when transitioning from a small screen to medium, and also when going from large to medium, the interrim tablet size stretches the entire size of the screen and doesn't look right as it becomes much wider than the desktop version. It also seems to move the article image above the details in a flex column, which it should not do until it reaches the small breakpoint for mobile.
All in all, it looks great! Nice job!
I've just started learning Tailwind CSS for this project and am excited to have implemented a responsive page! Responsiveness has always been a bit tricky for me, especially dealing with overlapping elements when using absolute positioning, but I feel like I've finally got it figured out
What challenges did you encounter, and how did you overcome them?At first, I found Tailwind’s syntax a bit challenging, but the website’s documentation was super helpful, and now I’m much more comfortable with it. Positioning hero images was a bit tricky too—I wanted them to overflow the parent container and touch the viewport edges. I figured it out by using negative margins, and it’s looking just right now!
What specific areas of your project would you like help with?I’d like some guidance on effectively using mixins or reusable styles in Tailwind, similar to how CSS handles mixins. I’m curious if there’s an efficient way to apply repeated styling patterns across multiple components without adding redundant code.
Additionally, I’ve noticed my HTML tags are getting cluttered with a lot of classes, making them look a bit unwieldy. Are there any strategies or best practices in Tailwind for keeping my code cleaner, especially when it comes to managing lengthy class lists? Any tips on optimizing readability would be great!
Nice job getting your responsive UI to work the way you wanted it to in tailwind.
It looks like the paragraph text in the first two sections is expanding farther than the design. The top hero section text should be the same width as the heading above it. The second heading and that section's paragraph text are also expanding farther than the design looks to intend.
The footer section looks to be laid out in a column rather than a row, so you might want to take a look at getting it to flex as a row rather than a column for large screens.
Trying to keep the code lines as small as possible to customize the grid system and keep it responsive
What challenges did you encounter, and how did you overcome them?to rearrange the cards based on the challenge.
What specific areas of your project would you like help with?N/A
Looks great, nice job!
I did notice that when I resize the screen from desktop down to tablet and mobile sizes, the double quote character in the background of the purple div seems to get out of alignment. It might be worth checking different screen sizes if you have a chance.
I didn't notice much usage of semantic html in your code, I it might help with accessibility to look at places you could use a <main>, <section, and <article> tag in this challenge.
You did a good job splitting up the code into parts that are easy to understand. One thing you might consider is splitting out the testimonial card itself out into its own component that can be reused, so the code inside the map would be a bit simpler to follow.
The top padding in your desktop size looks to be using the same value as the smaller layouts want, rather than the largest of the three padding values included in the Figma design. I believe it should be at 102 pixels.
Also, nice job using semantic HTML, here's an alternative use of it that might be helpful:
<body> <header class="intro-card"> <p class="intro-pg">Reliable, efficient delivery</p> <h1 class="title">Powered by Technology</h1> <p class="description-pg"> Our Artificial Intelligence powered tools use millions of projects data points to ensure that your project is successful </p> </header> <main> <article class="supervisor"> <h2>Supervisor</h2> <p>Monitors activity to identify project roadblocks</p> <img src="./Imgs/icon-supervisor.svg" alt="Supervisor icon" /> </article> <section class="double-card-section"> <article class="team-builder"> <h2>Team Builder</h2> <p>Scans our talent network to create the optimal team for your project</p> <img src="./Imgs/icon-team-builder.svg" alt="Team Builder icon" /> </article> <article class="karma"> <h2>Karma</h2> <p>Regularly evaluates our talent to ensure quality</p> <img src="./Imgs/icon-karma.svg" alt="Karma icon" /> </article> </section> <article class="calculator"> <h2>Calculator</h2> <p>Uses data from past projects to provide better delivery estimates</p> <img src="./Imgs/icon-calculator.svg" alt="Calculator icon" /> </article> </main> </body>
You might consider using the <article> semantic html tag for components container rather than a <div>.
The layout looks good and matches pretty closely to the example. I did notice a few of the fonts are a bit off. If you haven't already checked the Figman diagram for the CSS values for each element I'd suggest doing so. It makes it much easier to get the right values in there. Like for "Perfume", in tailwind v4 it should be text-xs to give you font-size: 12px rather than a font-size: 14px which is what text-sm give you in tailwind v4.
I like your use of the re-usable <CodedBy /> component as you are likely using it multiple challenges! Nice job!
Nice use of semantic HTML throughout the page.
Layout looks correct for all screen sizes, other than the top and bottom padding on tablet and desktop sized screens. That should be set to a padding of 40px on all sides of the main div so that the recipe component does not push against the edge of the screen. Looks great!
Unfortunately your GitHub pages deployment is using your repo's root dir and not working for the index.js page for your React app. I would imagine you are aware and are working on fixing this issue.
Your code looks to be well organized in general, and your CSS looks to be used correctly as well.
If you'd like me to review this again after you've fixed your deployment let me know and I'd be happy to.
The layout looks nearly pixel perfect for a desktop screen. I did notice that on the mobile screen of 300px that it doesn't match the design provided in figma. It should have a little bit of padding around the card so that it's not butted up against the sides of the screen on a 300px mobile screen.
The code was very well organized in general and easy to follow. The one thing I would have liked to see if you intend on using this card in an app, would be to pass in props to the card so that you can specify the thumbnail image, category, publish date, title, description, and author info.
Really great job!
Great job using semantic HTML for <nav>, <section>, and <footer>. It was really easy to follow where the different parts of the layout were located.
I didn't find any issues with accessibility at a glance. I did run it through an accessibility checker which was recommending not using the <h1> and <h2> tags on line 63 and 226. It claimed these were in violation of WGAC 2.0 Level AA under success criteria 2.4.6 "Headings and Labels (AA)".
The layout looked great while resizing. There was one breakpoint when it switched to the smallest mobile size where the diagonal balance looked a tad off with the two buttons at the top of the first section, and right before that breakpoint the padding between the image and the text looked a bit off.
The code was very well organized and easy to read. I'm not sure on reusability since you were using HTML only so I don't think this really applies.
Unfortunately I can't comment on how your design might differ from the intended design since the side by side comparison is showing the qr-code component challenge rather than the emergeAI website challenge. Give how good the design looks I'd be surprised if it differed much from the design given.
