I've been focusing on the clarity of my code. Please let me know if I have anything to review in this regard.
What challenges did you encounter, and how did you overcome them?None, just reviewing the basics.
What specific areas of your project would you like help with?Any advice is welcome. Especially on the clarity of my code for this challenge.
Handling the mobile first approach by using Tailwind CSS in a smart way is something I am proud of. Also, the use of clean React components.
Next time, I would try some testing libraries just to practice TDD, and also try some other CSS approach like Styled Components or even libraries like Material UI.
What challenges did you encounter, and how did you overcome them?Probably the keyboard navigation was the most challenging since I had never done it, but I managed to overcome it with some help from my dear friend Google XD.
What specific areas of your project would you like help with?When not on a 1440px or 375px screen viewport size, items such as the background header image appear in a strange way. Also, there is some problems with visualizing some icons in the Vercel deployment.
If anyone has any comments, it would be much appreciated!
good work but you need Ensure the correct path for each image.
I am proud of the detail level. Maybe to have a figma design would be the ideal for next time.
What challenges did you encounter, and how did you overcome them?I set myself the challenge of doing the app without using context.Then i used useSearchParams, which lead to my app failing at the deployment at Netlify. The issue was finally fixed with the addition of the react/Suspense and wrapping the component on it, at the level of the entire component and not from inside the component/fragment.
What specific areas of your project would you like help with?Best practices for responsiveness and use of all the media queries, responsiveness in a solid way from the start.
You can use an element and hide it and give it a command that after pressing the button this element is shown and the main element is hidden
And once again, I’ve decided to change the color theme 😅
I chose that option because, in real-time, customers often don’t know what color theme they want, and the webdev needs to figure it out on their own. So, it’s good practice for me.
What challenges did you encounter, and how did you overcome them?Fun in process, nothing else 😁
What specific areas of your project would you like help with?As always - I'm open to any suggestions and feedback! Let's grow together ❤️
I'm trying to learn how media queries and responsive web design work so I attempted the mobile version first, however I struggled to actually achieve the responsive design so instead I duplicated the folder and coded the web version separately. Hopefully in the future I'll overcome this and figure out how responsive design works!
Use of media query
/* Extra small devices (phones, < 576px) / @media (max-width: 575px) { / Styles here */ }
/* Small devices (landscape phones, 576px and up) / @media (min-width: 576px) and (max-width: 768px) { / Styles here */ }
/* Medium devices (tablets, 769px and up) / @media (min-width: 769px) and (max-width: 991px) { / Styles here */ }
/* Large devices (desktops, 992px and up) / @media (min-width: 992px) and (max-width: 1199px) { / Styles here */ }
/* Extra large devices (large desktops, 1200px and up) / @media (min-width: 1200px) { / Styles here */ }
1- This is my first project that i made it all by myself and that something I'm proud of 2-What i will do differently is is to use more position in CSS
What challenges did you encounter, and how did you overcome them?-The only challenge was forgetting the html or css-comand. -I solve it by using Chat GPT and you Tube tutorials.
What specific areas of your project would you like help with?I need help in how to position my box because i feel confused using command position or margin...
.box { background-color: hsl(0, 0%, 100%); width: 285px; /* height: 34vw; */ margin: 10vh auto; border-radius: 15px; } remove height and
add padding-bottom p { color: hsl(216, 15%, 48%); font-weight: 400; padding-right: 20px; padding-left: 20px; padding-bottom: 4vh; }
Use the correct path to the image or upload the image with the site so that it appears
I utilized a JSON file for this project, making the NFT card super versatile and ready for any occasion! 🎉 Now it can be reused without breaking a sweat—talk about a card that works smarter, not harder! 😄 Who knew JSON could be so fabulous?
What challenges did you encounter, and how did you overcome them?Due to my limited experience, I found myself rewriting and tweaking the script for creating HTML `` several times. But hey, every misstep is just a step towards mastery! Now I have a much clearer understanding of how it all works—watch out world, I’m leveling up! 🚀
What specific areas of your project would you like help with?I've been wondering whether :hover effects are really necessary for mobile devices, especially after finishing the project. It only hit me after completing everything, but I think next time I might avoid adding hover effects for the mobile version altogether. What do you think?
i think in hover better because it makes the user feel like they are interacting with the site. and good work
I am proud that I was able to work through the HTML smoothly. I used ordered and unordered lists and a simple table. I am proud that I worked through difficulties getting the content to fit the container and that my final solution is pretty close to the design.
My @media query seems to work and I was able to get that mostly how I wanted it on the first try.
What challenges did you encounter, and how did you overcome them?I had trouble getting the content to fit the container. I solved this by setting the font-size to 55%. I used 20% for the mobile version. Not sure this is best practice, but it did work.
I also had trouble with sizing/spacing. I did not have the Figma files and realize how useful these are. Had to use trial and error, which takes much longer. I also had trouble getting the black background, with the lighter inner container. I was able to get this to work by adding an .outer-container outside the .card-container.
What specific areas of your project would you like help with?Not sure if using the 50% font-size is the correct way to size this, so I'd love feedback on that. I appreciate any other feedback. Thanks so much!
use this body { background-color: var(--Stone100);}
.card-container { display: flex; flex-direction: column; justify-content: start; align-items: left; background-color: white; width: 70vw; height: max-content; padding: 25px; border-radius: 15px; }
somehow i have trouble positioning element the same way as design
You are good, keep going and everything will be fine. You just need confidence.
É meu primeiro projeto na front-end mentor, sinceramente parecia bem básico e fiquei me perguntando se valeria a pena fazer, mas dei uma quebrada na cabeça para conseguir faze-lo e ainda deixar responsivo.
What challenges did you encounter, and how did you overcome them?A princípio pensei que iria ser bem fácil mas achei algumas coisinhas que me fizeram perder um tempinho, tipo espaçar o número de uma lista, alinha-la pela marcação e não pelo texto, a mesma coisa com as tabelas.
What specific areas of your project would you like help with?Acho que em reaproveitamento de código, eu sempre vou fazendo o projeto todo e só depois percebo que tem itens com as mesmas estilizações se repetindo várias vezes.
make div after main and give this div max-widh and height
