Responsive design
What challenges did you encounter, and how did you overcome them?Responsive design
What specific areas of your project would you like help with?Problems with the images in content: url() don't show in github
I’d love to get feedback on my code performance—whether what I’ve done is correct or if there are any issues I might have missed. Specifically, I’m looking for feedback on things like code optimization, form validation, and accessibility.
That said, I’m open to any suggestions for improvement :)
Nothing in particular. Any kind of feedback is appreciated :)
Even though it was a SASS project, it felt like I was just writing regular CSS. Is my code correct? Are there any improvements I could make in the SASS part or anything else I might have overlooked?
Nothing in particular. Any kind of feedback is appreciated :)
Responsive design
What challenges did you encounter, and how did you overcome them?Responsive design
What specific areas of your project would you like help with?Problems with the images in content: url() don't show in github
Good work!
Good job on the solution! The UI looks matches the design given. Here are a few suggestions for improvement:
HTML
<article>
for the card content.<ul>
for better accessibility.<ul>
<li>
<a href="/">(icon svg/img)</a>
</li>
...
</ul>
CSS
rem/em
instead of px
for better responsiveness.JavaScript
Aside from these points, the structure and overall implementation looks great.
Happy Coding 😊
Great job! The UI looks accurate, and your code is clean and well-organized.
Does the solution include semantic HTML?
<h1>
to represent the main topic of the page. Here’s a suggested structure:<h1 class="visually-hidden">Testimonials Grid Section</h1> /* Visually hidden main heading for accessibility */
...
<h2 class="username">Daniel Clifford</h2>
<span class="edu-level">Verified Graduate</span>
...
<h3 class="testimonial-brief testimonial-brief-daniel">I received a job offer mid-course,...</h3>
You can use this visually hidden class snippet to ensure the <h1> is accessible but not visible.
Also, consider wrapping the testimonial content in a <blockquote>
for better semantic structure:
<blockquote>
<p class="testimonial-long testimonial-long-daniel">I was an EMT for many years before I joined the bootcamp...</p>
</blockquote>
Aside from those few things, the structure and everything else looks great.
Happy Coding 😊
I'm most proud of having learned Sass and being able to apply a good part of its features in this project. In addition to reviewing some CSS display grid concepts and how to organize the elements. Next time I would like to add other events using js, such as a modal when clicking on each card.
Great job! The solution looks closer to the design. I like how you added shadows to the cards.
The desktop version looks good, but the mobile version needs some work. Decreasing the font size and padding around the card for the mobile version will make it look better. Also, the design uses the default image sizes for icons, so you should remove the width
and height
attributes from them.
Overall, it looks good to me 😊
Great job! Your solution is very close to the given design. One thing I can say is if you center the article
it will look even better. Keep up the great work!
Consegui acertar o (responsivo) de forma correta. mudaria o formato das informações.
What challenges did you encounter, and how did you overcome them?para alinhar a imagem de fundo. consegui superar baixando uma imagem com os tamanhos (Largura x Altura) adequada
What specific areas of your project would you like help with?Gostaria de ajuda na parte do CSS, nao consigo evoluir muito nos layout. Gostaria de deixar a imagem proncipal (prato de omelete) redonda, mas não consegui.
Good job! I like how you are trying to customize the design to your linking 😊.
To make the image round you need to give the image equal height
and width
and a border-radius: 50%
. Something like the code below-
.omelete .imagem-omelete {
width: 300px;
height: 300px;
object-fit: cover; /* to maintain the aspect-ratio of the image */
border-radius: 50%;
}