React, Tailwind CSS, mobile-first approach
What challenges did you encounter, and how did you overcome them?none.
What specific areas of your project would you like help with?Any feedback is welcome!
Congratulations on your solution. I liked because it was readable, even though I am not familiar with Tailwind, I could "deduce" the meaning of the class names.
Obviously this challenge is a component, so I doubt it would exist on its own, hence I am not sure it's too important to make a comment on the use of "landmark" elements.
Thank you for sharing this solution, I learned a bit more about Next.js
I am proud to have managed to complete the project alone.
What challenges did you encounter, and how did you overcome them?I had difficulty with the footer background image and in the first section of the page, but with a little research I was able to resolve it.
What specific areas of your project would you like help with?I would like help with the top of the page, I believe there may be a better way to do this section! Any feedback is welcome
Awesome! You got the solution using very minimal and clean CSS!
Congratulations to you.
I very much liked your usage of flex.
Congratulations on completing this challenge! It's always hard to get to the end of any project, and you did it!
On the accessibility front, I recommend using at least one main landmark element, like a main tag, as well as a header which you can then visually hide.
I liked your usage of the grid-area. Any reason why you used ordinal numbers for the grid-area (first, second, third, etc.) and cardinal number for the class names of the cards (card1, card2, card3, etc.)?
Very well done!
Congratulations on completing this challenge.
You used semantic HTML.
It is accessible even though I would not skip heading levels and use h2 for the cards' titles. I liked the structure of your code and the usage of float: right to position to the icons, cool idea.
The only issue I found is with the screen widths between 700px and 1200px: the translationY value causes two of the feature cards to be staggered incorrectly.
Hello everyone!
I am open to receiving feedback that can help improve my code.
Happy coding..
Congratulations on your solution!
I liked your usage of the picture element and the naming convention for the CSS classes.
Thank you for the ideas.
I'm finally getting the hang of using CSS's ability to do variables, pseudo-selectors, and nested rules.
What challenges did you encounter, and how did you overcome them?I had some issues getting the image and article sections to visually look like the design file. This was my first mobile-first approach project.
What specific areas of your project would you like help with?Would love feedback on my CSS and how I could optimize it or clean it up.
Well done Jennifer! Congratulations on competing another challenge!
As you requested, I took a look at opportunities in your CSS and what came to mind was in the table element: have you considering using the th tag so you don't need to resort to pseudo-selectors? Even though the table is oriented differently, "Calories", "Fat", "Protein", and "Carbohydrates" are still acting as headers.
When I looked at the instruction steps, I noticed that maybe some left padding is needed. Likewise, I am curious about the counter-reset usage: I thought there was no need in this case, but in case you know more I'd very interested to learn :)
I really liked your exploration and usage of the nested rules in CSS! It reminded me that I should do more of it :-P
Ah, the hr element appears a bit thicker than the design. It's not an easy element to style, but you could try by assigning an overall border of 1px to it, and then eliminate either the top or the bottom:
hr { border: 1px solid var(--clr-stone-600); border-bottom: none; }
Again, awesome work and continue with more challenges!
Another project that served as a basis for me. I think that I did quite well in terms of time, as I basically did not fix anything in the HTML structure and just wrote the CSS myself fluently
What challenges did you encounter, and how did you overcome them?I didn't have any specific problem in the project itself
What specific areas of your project would you like help with?At the moment I have not had any problems with the project itself, but I still need to learn how to use the semantic elements correctly
Congratulation on your solution!
I encourage you in the exact area that you have mentioned. Remember that there aren't direct hard and fast rules about semantic usage of tags.
In this challenge, maybe you could have used three different header tags to indicate a hierarchy of content and guide search engines toward identifying/reinforcing the main topic of the document.
I used <h1> for the name, <h2> for the location, and <h3> for the short biographical description.
Congratulations on completing the challenge!
Maybe I missed it on my implementation, but I thought the only interaction on this component regarded the title. I noticed you also provided a call-to-action treatment on the category label (Learning).
I also like your consideration of large screens to accomodate more blog cards like this one.
Have you tried using a different unit of measure to regulate the font-size property instead of using media queries?
Estoy orgulloso de haber logrado un diseño completamente responsivo utilizando Flexbox y Media Queries, lo cual permite que el componente se vea y funcione bien en cualquier tamaño de pantalla. También me enorgullece el uso eficaz de Google Fonts para mantener una tipografía coherente y profesional en el diseño.
La próxima vez, me gustaría experimentar con animaciones sutiles al interactuar con el QR code y los enlaces, para hacer la experiencia del usuario aún más dinámica y atractiva. Además, podría considerar utilizar un framework CSS como Tailwind o Bootstrap para acelerar el desarrollo y garantizar una mayor consistencia en el diseño.
What challenges did you encounter, and how did you overcome them?Uno de los desafíos fue asegurar que el diseño fuera completamente responsivo sin perder la coherencia visual en diferentes dispositivos, desde móviles hasta pantallas más grandes. Logré superarlo utilizando media queries específicas para ajustar el tamaño y la disposición de los elementos, lo cual permitió mantener una buena proporción y legibilidad en todos los casos.
Otro desafío fue asegurar que el footer se mantuviera fijo en la parte inferior de la pantalla, incluso con poco contenido. Esto lo resolví utilizando flexbox en el diseño principal del body, distribuyendo el contenido para que siempre se adaptara correctamente.
What specific areas of your project would you like help with?Me gustaría recibir ayuda para mejorar la accesibilidad del componente, haciéndolo más inclusivo para personas con discapacidades, como usuarios de lectores de pantalla y personas con dificultades visuales o motrices. Además, sería útil recibir sugerencias sobre la optimización del CSS para reducir la redundancia y mejorar la eficiencia en proyectos más grandes. También estoy interesado en aprender cómo mejorar el rendimiento del sitio y optimizarlo para motores de búsqueda (SEO), incluso en componentes simples como este.Me gustaría recibir ayuda para mejorar la accesibilidad del componente, haciéndolo más inclusivo para personas con discapacidades, como usuarios de lectores de pantalla y personas con dificultades visuales o motrices. Además, sería útil recibir sugerencias sobre la optimización del CSS para reducir la redundancia y mejorar la eficiencia en proyectos más grandes. También estoy interesado en aprender cómo mejorar el rendimiento del sitio y optimizarlo para motores de búsqueda (SEO), incluso en componentes simples como este.
Hola Osmel, en primer lugar, enhorabuena por completar el proyecto: por pequeño que parezca, demuestra que eres tenaz y tienes empuje. En cuanto a tu pregunta sobre cómo mejorar la accesibilidad para usuarios discapacitados, no hay mucho que puedas hacer ya que este componente es realmente pequeño.
Sin embargo, la clase visually-hidden carece de definición, y puedes empezar por ahí.
También puedes utilizar el atributo aria-roledescription en los elementos <main> y <footer> para definir claramente qué función desempeñan. Por ejemplo:
<main aria-roledescription="Este elemento contiene la solución al reto">
<footer aria-roledescription="Esta sección contiene referencias al creador de la solución">.
