All comments

Alberto Raúl José•610
@alberto-rjSubmitted 8 months ago
What challenges did you encounter, and how did you overcome them?
I got contrast errors between the background and foreground colors of the links, which were resolved using the Accessibility Insights for Web extension.
What specific areas of your project would you like help with?
👍 Any great feedback is appreciated!
Animated Social Links Profile
1
Raul Galicia•70
@raulgaliciabPosted 15 days ago
Hi Alberto

Great work and also great additions to the challenge!

Here is the feedback that I see:

For the CSS variables try to use more descriptive names. This will make the code more maintainable.

You are using px and rem in different classes for width and height. This might not be very clear for someone else reading the code. Try to use just one for consistency.
Marked as helpful
1
Vasu Vallabh•190
@coding-vasuSubmitted 3 months ago
What are you most proud of, and what would you do differently next time? Proud:
Changing root font size scales all rem-based elements proportionally, For screens up to 28.5rem wide: Root font size: 12px (default is 16px) 🖥️
Learn:
1. To dive deep into the world of CSS and JavaScript animations.
2. Crafting interactive elements that bring concepts to life.
What challenges did you encounter, and how did you overcome them? Responsive Design Challenge:
Making a responsive blog preview card, especially for small screensSolution: Studied blog posts and tutorials to understand responsive design, focusing on font sizes and rem units
CSS Pseudo-classes Challenge:
Understanding :active, :hover, and :focus (for tabindex)Solution: Consulted MDN docs to learn about these pseudo-classes
What specific areas of your project would you like help with? CSS Reset
- Question: What is the best CSS reset to use and why?
- Goal: Understanding the advantages of different CSS reset options.
Resources Needed
- Guidelines for CSS class naming conventions
- Best practices for CSS file structure
- Comparison of popular CSS reset/normalize options
- Tutorials on implementing BEM or other CSS methodologies
MDN Docs, Wave Extension,
1
Raul Galicia•70
@raulgaliciabPosted 3 months ago
This is a great solution!

The only issue that I noticed is that the desktop measurements are maintained in the mobile version. Looking at the Figma designs you can see that the mobile version is slightly narrow.
0
Elian Pujols•30
@ElianPujolsSubmitted 4 months ago
What are you most proud of, and what would you do differently next time?
Estoy orgulloso de haber podido crear mi primer proyecto y poder compartirlo con los demás. Por otro lado no estoy seguro de si hare algo diferente la proxima vez. A continuar mejorando...
What challenges did you encounter, and how did you overcome them?
El desafio mas grande hasta ahora fue entender como estaba estructurado el ejercicio y lo solucione buscando ayuda en google.
What specific areas of your project would you like help with?
En el planteamiento del proyecto antes de inicial este mismo
pequeña pagina, con targeta de codigo QR que utiliza flexbox
1
Raul Galicia•70
@raulgaliciabPosted 4 months ago
Hola Elian!

Viendo el projecto en línea creo que podrías enfocarte más en que las dimensiones sean más exactas al diseño original, como por ejemplo los padding o los border-radious. Algo que me ayudó mucho fue basarme en el archivo de Figma para ver las medidas exactas.

Algo que igual noté en el código es que pusiste la imagen en el mismo contenedor que los textos. Podría ayudar el ponerlos de forma separada para controlar mejor el flujo y los estilos.

De igual forma se podría trabajar más en el responsive design. En algunas dimensiones pequeñas de celulares los textos se salen de sus contenedores.

Podrías intentar usando font-size: 62.5% en la etiqueta html, para así usar rem en el font-size de los textos

Gran trabajo!
0

Raul Galicia

All comments

Animated Social Links Profile

MDN Docs, Wave Extension,

pequeña pagina, con targeta de codigo QR que utiliza flexbox