Luan Barcaça
@barcacaAll comments
- @davso11@barcaca
Looks really great!
- P@Mustapha909What are you most proud of, and what would you do differently next time?
I'm most proud of the project's overall responsiveness and how it adapts gracefully across various breakpoints. Leveraging Tailwind's spacing scale and utility classes allowed us to create a clean, maintainable design that works consistently on mobile, tablet, and desktop. It was rewarding to see the layout transition smoothly between flex directions and grid configurations.
If I were to do it differently next time, I would invest more time into creating custom breakpoints and possibly a design system for even more granular control over the UI. I might also integrate more advanced state management or even animation libraries to enhance user interactions further. This experience reinforced the importance of flexibility and planning for responsive design from the start.
What challenges did you encounter, and how did you overcome them?One of the main challenges was ensuring that the layout remained fluid and centered across a wide range of screen sizes. Initially, the flex direction and absolute positioning of certain elements (like the timeframe buttons) caused the content to shift or get clipped at specific breakpoints. To overcome this, I revisited the responsive classes in Tailwind and adjusted the breakpoints, using a mix of flex and grid utilities to ensure that the design gracefully transitions from a column to a row layout. This helped maintain a centered and cohesive look regardless of screen size.
Another challenge was fine-tuning the dynamic sizing of components. It took some trial and error to set up the spacing scale so that the user profile and activity cards scaled proportionally on different devices. Leveraging Tailwind’s utility classes for width, height, and spacing allowed for quick adjustments until the desired responsiveness was achieved.
Overall, the process reinforced the importance of responsive design and iterative testing across multiple breakpoints. Each issue provided an opportunity to learn more about Tailwind's responsive utilities and how to apply them effectively in a real-world project.
What specific areas of your project would you like help with?Responsive Design Refinement: I'm looking to further optimize the responsiveness of the dashboard. Although it adapts well across breakpoints, I'd like suggestions on any potential tweaks or best practices to ensure consistency and optimal spacing on unusual screen sizes.
Component Abstraction & Reusability: I want to ensure that my components (like UserProfile, ActivityCard, and ActivityGrid) are as reusable and maintainable as possible. Any insights on abstraction, code splitting, or better state management would be very helpful.
Performance Optimization: Since the layout involves dynamic image rendering and responsive adjustments, I'm curious about techniques or tools that could help with performance improvements, especially for mobile devices.
Enhanced Interactivity & User Experience: While the basic interactions work fine, I'm looking for ideas on how to introduce more advanced animations or transitions that could make the dashboard feel even more engaging.
@barcacaThe site looks good, but you need to adjust the font sizes for other breakpoints and use the challenge's font to make it perfect.
Marked as helpful - @MomonkueiWhat are you most proud of, and what would you do differently next time?
I practiced using vue router and vee-validate
What challenges did you encounter, and how did you overcome them?How to customize error messages for vee-validate validation Try using chatgpt to help me solve it
What specific areas of your project would you like help with?Nothing
@barcacaThe solution looks great!
- @ghulammurtaza27@barcaca
The site looks good, but it literally has nothing to do with the proposed challenge.
- P@moustafaessamWhat are you most proud of, and what would you do differently next time?
I am proud that I was able to make the content of each block using only react props
What challenges did you encounter, and how did you overcome them?None for this project
What specific areas of your project would you like help with?None for this project
@barcacaLooks great! Just missing the bg-pattern to make it even better.
- P@niuguy@barcaca
The solution looks great! Just a suggestion: changing the font to match the one from the challenge would help align the design even better.
- @MomonkueiWhat are you most proud of, and what would you do differently next time?
nothing
What challenges did you encounter, and how did you overcome them?nothing
What specific areas of your project would you like help with?nothing
@barcacaLook good!
- @HaiyingLiaoWhat are you most proud of, and what would you do differently next time?
I am most proud of achieving a perfect replication of the design. Every element, from the layout to the smallest details, closely matches the original design, showcasing my attention to detail and commitment to quality.
Additionally, I am proud of my implementation of the DRY principle. By thoroughly analysing the design, I was able to create reusable components and streamline my code, ensuring consistency and reducing redundancy throughout the project.
What challenges did you encounter, and how did you overcome them?One of the main challenges I encountered was integrating multiple fonts using Next.js. I overcame this challenge by thoroughly reading the Next.js documentation, which provided detailed guidelines. By following these best practices, I was able to successfully implement the required fonts.
What specific areas of your project would you like help with?I would appreciate advice on improving my use of semantic HTML. While I have a good understanding of basic semantic elements, I am eager to learn more about best practices and advanced techniques for structuring HTML to enhance accessibility, SEO, and maintainability. Any insights or resources you can share would be incredibly valuable for refining this aspect of my project.
@barcacaYour project looks really good!
A suggestion to improve the use of semantic HTML would be to consider using
<ul>/<ol>
and<li>
tags instead of<div>
and<p>
elements for the list of instructions/ingredients. Since you are presenting a sequence of steps, an<ol>
(ordered list) would make more sense, helping with the accessibility and clarity of the content for screen readers.For example:
<section> <h2 className={`${young_serif.className} subtitle`}>Instructions</h2> <ol className="list-decimal pl-5"> {dummyInstuctions.map((item, i) => ( <li key={i} className="mainTextStyle mb-2"> {item.name}: {item.content} </li> ))} </ol> </section>
Additionally, for the nutrition section, using a
<table>
could be a good alternative since the data is tabular in nature (name and nutritional value).Overall, excellent work!
- @NPUNITH62What are you most proud of, and what would you do differently next time?
I’m proud of implementing responsiveness and hover effects to improve user interaction. The code is clean, and accessibility is prioritized.
What challenges did you encounter, and how did you overcome them?Ensuring the design was fully responsive across different screen sizes was a challenge, but flexbox and media queries resolved it.
What specific areas of your project would you like help with?I would like help with optimizing page load speed using techniques like lazy loading and performance tuning.
@barcacaReally great job!
- @henriquesbarros@barcaca
Ficou muito bom mesmo! Está bem estruturada, clara e eficiente. Ótimo trabalho!
- @iam-inath@barcaca
Both the website and github are down.
- P@ttsoares@barcaca
I have two feedback option:
Option 1:
<div class="text-[7.5rem]/[110px]"> Your text here. </div>
This option seems to attempt setting both the
font size
andline height
directly.Option 2:
<div class="text-[7.5rem] leading-[3rem]"> Your text here. </div>
This option is more aligned with Tailwind CSS conventions. It separates the
font size
.text-[7.5rem]
andline height
.leading-[3rem]
I would suggest referring to the official Tailwind CSS documentation on Font Size and Line Height. This will ensure a consistent and well-supported implementation.
I hope you found this helpful
- @catalina-arriagada@barcaca
Great job on completing the challenge!
It seems that the desktop version is not displaying correctly because you set the
minimum width (min-width) to 1440px
Here are a few suggestions to enhance your code further:
- Your media query for the screen width seems to be set for larger screens. Consider adjusting it to
@media screen and (min-width: 796px)
for better responsiveness.
.container { @media screen and (min-width: 796px) { /* Styles specific to larger screens */ }
-Remove
margin-left
and addmargin-inline: auto
:.container .summary { border-radius: 32px; /* Remove margin-left and add margin-inline:auto */ margin-inline: auto; /* Centering horizontally */ } .container .results .circle { width: 200px; height: 200px; border-radius: 50%; /* Remove margin-left and add margin-inline:auto */ margin-inline: auto; /* Centering horizontally */ background: linear-gradient(hsl(256, 72%, 46%), hsla(241, 72%, 46%, 0)); }
This adjustment ensures that the elements are centered horizontally without using
margin-lef
t. Themargin-inline: auto
property is a shorthand for setting bothmargin-left
andmargin-right
to auto, which is commonly used for centering block-level elementsGood luck with your coding, and keep up the good work!
- Your media query for the screen width seems to be set for larger screens. Consider adjusting it to
- @PamellaMoraes@barcaca
Parabéns por concluir o desafio!
Aqui estão algumas sugestões:
-
Você tem código repetido no
responsive.css
para a regra demedia query (max-width: 768px)
. O bloco de estilo dentro desse bloco de mídia está repetido duas vezes. -
Considere escolher nomes de classes mais descritivos. Por exemplo, em vez de
verde
ebranco
, use nomes que descrevam o conteúdo ou a finalidade desses elementos. Por exemplo, você poderia usar algo comoimagem-fundo
econteudo
. -
Considere evitar o uso do caractere "ç" em classes e IDs no CSS e HTML. Embora seja tecnicamente possível, é uma prática comum evitar caracteres especiais, como acentos.
-
Seu uso de media query parece estar correto, mas há redundâncias nas regras. Concentre-se em modificar apenas o necessário para a adaptação do layout, evitando duplicações de código. Aqui está um exemplo para simplificar:
@media screen and (max-width: 768px) { #container { flex-direction: column; } .verde, .branco { width: 100%; border-radius: 10px; } .verde { height: 250px; } .branco { height: 400px; } .btn-compras { margin-top: 5px; } }
Essa abordagem reduz a duplicação de código, mantendo a adaptabilidade do layout para telas menores.
Mandou bem, continue assim!
-
- @J3r3mia@barcaca
Nice work on the challenge!
For a cleaner solution, wrap both
image-container
andcard-content
in aparent div
. Apply theborder-radius
to theparent div
. Example:HTML
<div class="parent-container"> <div class="image-container">...</div> <div class="card-content">...</div> </div>
CSS
.parent-container { border-radius: 10px; /* Adjust as needed */ overflow: hidden; }
The
overflow: hidden;
property hides any content that goes beyond the rounded corners set byborder-radius: 10px;
in the.parent-container
. Feel free to removeborder-radius
from other CSS properties for a cleaner look.Great work!
Marked as helpful - @redstar504@barcaca
Hello,Great job on completing the challenge!
I have a suggestion:
- Consider changing the color of the
a
tag with theclass "atribution"
for better contrast accessibility. - Adding a
hover
effect to botha
tags andbutton
would enhance user interaction.
These adjustments aim to improve accessibility and user experience.
Keep up the good work!
- Consider changing the color of the
- @Rrashdi@barcaca
Hello, Great job completing the challenge!
A suggestion:
- Consider adding
display: flex;
andjustify-content: center;
to thebutton
tag. In this case, by settingjustify-content: center;
on thebutton
, you ensure that its content (text and icon) is horizontally centered within thebutton
.
Keep up the great work!
Marked as helpful - Consider adding
- @De122@barcaca
Hello, Great job on the challenge!
I have some feedback to share.
- I suggest switching the
margin-top
tomargin-block
for thebutton
tag. This would create space at the top and bottom, improving the mobile layout. - Also, adding the hover effect using this CSS code, will create an appealing effect on the
button
.
button:hover { background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%)); }
Keep up the good work!
- I suggest switching the