@rebornay
Latest solutions
02-challenge-product-preview-card-component
#astro#node#tailwind-css#accessibilitySubmitted 4 months ago
Latest comments
- @saularanguren
Hello 👋 friend, I am reviewing your solution and it is really good, however, testing a little the responsive design of your website, I found the following
if the user's browser is below 1440px wide, they will see the site wrong, your card automatically changes to flex-column, but assumes a width of almost 90%, that is, if the user had a resolution of 375px onwards up to 450px, it would look good, but if you have 1200px or 1040px it looks bad, and not to mention the resolution of a tablet, test your solution in the browser so you understand what you did in the code, also I advise you to center the card with the following css
body { delete this: /* 3. Add accessible line-height */ line-height: 1.5; /* 4. Improve text rendering */ -webkit-font-smoothing: antialiased; padding: 1rem; // let's do this on the body instead: /* Don't forget to delete the comments I'm leaving, let's center the card with flex and give color to the body */ display: flex; align-items: center; justify-content: center; background-color: var(--Cream); }In addition, I advise you to reset the margin and padding values of all elements with:
* { margin: 0; padding: 0; box-sizing: border-box; }Finally, I advise you to check out the solutions of other, more experienced colleagues (with more points here on FrontEndMentor) so you can continue learning and evolving.
Likewise, you can check out my GitHub and check out my projects. You'll be able to learn a bit about other work methodologies.
Happy coding 😁.
- @Mo1382@saularanguren
Hi friend, I was looking at your solution, it's really impressive, however, I come with a tip that will help you practice a little more and it will be great for users who see your project, try to make a smooth transition between the change from dark-mode to light-mode, try to make that improvement, so that the change is not so "abrupt"
happy coding 😁
- @SmasheroonieWhat are you most proud of, and what would you do differently next time?
This was a great opportunity to recap the basics of HTML and CSS. I had a lovely time using the vanilla layouts and rules, and I'm proud of the result! It's so interesting figuring out all the ways elements can be aligned and positioned. I'm particularly interested in learning as much as I can about Flexbox.
What challenges did you encounter, and how did you overcome them?Starting a new project can be intimidating, but I impressed myself with how well it came together.
What specific areas of your project would you like help with?CSS is something that I would like to become a lot more comfortable with.
@saularangurenHello @Smasheroonie, your solution is really impressive. However, I am going to help you make it even more perfect. Firstly, you should remove that line of HTML that prints the information at the bottom. This is to make your solution as close as possible to the design.
delete:
<footer> <div id="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank" >Frontend Mentor</a >. Coded by <a href="https://github.com/Smasheroonie">Luke Goncalves</a>. </div> </footer>Lastly, I recommend adding a box-shadow effect to the component. If you can see in the design, there is a shadow that creates the card. Try to replicate this in your code.
Happy coding 😁, and I look forward to your next project! 👋
- @khaduj03What specific areas of your project would you like help with?
Any feedback would be appreciated.
@saularangurenHello, my friend. Your solution is very impressive. I would like to ask: how did you create the animations? And my next question is based on personal criteria. I understand that in comparing your solution with the design provided by the platform to visualize whether the solution is as close to the design as possible, it seems that only the header is present. Of course, I understand that this happens because of the animations, but don't you strive to make your solutions as identical to the design as possible? I emphasize again that this last question is based on personal criteria, as I believe in developing solutions that are as similar to the design as possible.
Marked as helpful - P@danielmrz-devWhat are you most proud of, and what would you do differently next time?
🛸 Hello FEM Community! I'm Daniel and this is my solution for this challenge! 😊
🛠️ Built with:
- Angular 🅰️
- SASS 🎨
- Typescript 🤖
- BEM Notation 🅱️
- Template Driven Forms approach 🧾
- Validations using Angular Directives ✅
- Mobile first workflow approach 📲
It took me a few days to finish this one. I wasn't sure if my current knowledge about Angular would be enough to finish this project, but I tried anyway and I'm very glad I did. As always, I ended up learning a lot during the process and I'm much more comfortable using Angular.
Again, thanks to the Front-End Mentor team that creates challenges that make us learn a lot from doing them. 💟
What specific areas of your project would you like help with?If you have any suggestions on how I can improve this project, feel free to leave me a comment!
Feedback welcome 😊
@saularangurenHi Dani, bro I advise you to use the
outline: noneproperty, so that the black frame is not seen in the inputs, excellent solution and happy coding 😁 - P@jdillard2532@saularanguren
Greetings friend, excellent solution, you just need to update the screenshot of your challenge within the platform, because it looks aligned at the top and not in the center as it is in your code, be careful, you just have to press, generate a new screenshot here in frontendmentor, happy coding 😁
Marked as helpful
