I made my site full responsive by using media root
What challenges did you encounter, and how did you overcome them?n/a
What specific areas of your project would you like help with?What should i do to make my code look more professional?
Hola @Wasu44:
Muy buena solución la que has mostrado, me da la sensación que primero has empezado por el diseño de escritorio y luego has continuado por el de móvil. No es que esté mal, pero creo que si lo haces al revés escribes algo menos de código (pero esto es discutible).
Si me lo permites, tengo una sugerencia con respecto a las imágenes (yo hice la misma solución que tú, pero me dijeron que era mejor con picture)
<picture> <source media=" (max-width: 33.75rem)" srcset=" ruta de la imagen móvil"> <img scr=" ruta de la imagen escritorio"> </picture>
proud of matching the given design. improving code.
Hola que tal, Sirex.
Has presentado una solución increíble, enhorabuena. Pero si me lo permites, me gustaría darte alguna sugerencia para que sea aún más increíble.
Limitaría el uso de la etiqueta b, ya que según la W3C, es mejor utilizar una etiqueta que sea semántica (tipo strong), o si solo le quieres dar el color de negrita, utilizar Css (bold).
Parece ser, que se te olvidó dejar un espacio entre la imagen y el botón de aprende más.
.card-content { margin: 1rem 0; }
No te preocupes, a mí me ocurre lo mismo. Espero que estas dos pinceladas te ayuden.
Un saludo y que pases buen día.
Complete it in an hour.
What challenges did you encounter, and how did you overcome them?Mostly when it comes to responsive but getting used to it.
What specific areas of your project would you like help with?I would like a feedback on the code if there is a better way for me to use it.
** Hola, Rustom0.
<div class="image-container"> <img/> </div>
.image-container { width: 90%; } img { max-width: 100%; }
I'm most proud of how quickly I completed the exercise using my basic knowledge of HTML and CSS. Next time, I would focus more on refining the design and experimenting with new techniques to enhance the overall quality.
What challenges did you encounter, and how did you overcome them?The exercise was quite straightforward, but my biggest challenge was working with media queries. I overcame it by reviewing documentation and experimenting with different breakpoints to ensure the layout was responsive across devices.
What specific areas of your project would you like help with?My main concern is whether I'm following best practices, even though the exercise was quite simple. I want to avoid replicating any mistakes when I work on larger projects, so any feedback on code structure or optimization would be really appreciated.
Hola ,que tal Justina.
.image img { max-width: 100%; /* Con width la imagen se escala infinitamente aunque pierda calidad, pero con max-width la imagen no se escala más allá del ancho máximo intrínseco de la imagen */ }
- Cuando yo empecé, también trabajaba con px (unidad absoluta). Pero luego me di cuenta que utilizando rem, em, % (unidades relativas), la escalabilidad y el diseño responsivo era más flexible.
- Lo dicho **trabajo fenomenal** y sigue así que vas muy bien.
I was able to do it faster than my first challenge.
What challenges did you encounter, and how did you overcome them?I dont have access of the figma files so i dont know the exact dimensions/measurements of the design
What specific areas of your project would you like help with?weirdly enough
display:grid ; place-items: center;
does not center the container vertically but it does so horizontally. I had to do height:85vh; to the body to center it completely.
Hola GorrionNado, tu solución es correcta, pero hay cosas que se podrían mejorar.
.qr-container { padding: 1rem;
De esta forma no se verá tan apretado el contenido.
A veces es mejor utilizar en vez de px:
Por último una correcta indentación de los elementos HTML es clave para que tú código sea legible por todos.
Espero que estos consejos te sean útiles para futuras soluciones.
Buen trabajo y a continuar aprendiendo (como todos).
The Time I spend building the main Layout is Decraesing every time I finish a Project, I'm really proud that I'm Actually learning Something and Leveling up My Skills.
What challenges did you encounter, and how did you overcome them?Nothing Was that hard as i actually practice some of my previous challenges regularly
What specific areas of your project would you like help with?Nothing as of now
Hola Mohamed, tu solución de las cuatro tarjetas es muy buena, sobre todo por que la has construido con una tremenda precisión ( casi de cirujano ). Lo que más me ha llamado la atención es que te has decantado por utilizar flex, que para este diseño no era nada fácil de hacer.
También he tomado nota de todas las consultas de medios que tienes. A partir de ahora las tendré en cuenta para futuras soluciones mías.
Felicidades y a seguir aprendiendo, que el saber no ocupa lugar ( pero si memoria en nuestro cerebro).
@Dacardonac
Parece ser que has utilizado un preprocesador para completar el reto, aparte de un documento jason.
La estructura de carpetas es de un 10. Además el HTML es bastante más semántico que el mío. Con la inclusión de figure, bloquote, section y article.
No te puedo brindar una mejora, por que la solución que he presentado es peor.
Enhorabuena....
@curiosodilip
Buenas noches Bilip kumar:
Se nota que eres bueno en esto, por que me he quedado alucinado con tu solución de las cuatro tarjetas.
Sobre todo con todas las carpetas que tienes, tu organización y cribado para principiantes , intermedios y expertos.
Algunas de las cosas que haces las entiendo, otras no.
No sabría como hacer un comentario útil para tu solución, así que felicidades y espero algún día poder tener tu nivel de organización y comprensión del código.
Un saludo.
Nothing big changes I faced but I little bit struggle in doing the flex for large screens.
What specific areas of your project would you like help with?what are mistakes I have done and how to enhance the code little more than this . It might be more responsive , flexible code and how can I improve more better than now.
Hola Abhi, tu código se ve fenomenal.
<main> <article class= "previewCard"> <section class= "imgSection">...</section> <section class= "details">...</section> </article> </main>
<div class= "hero__image></div>
.hero__image { background-image: url(" ruta de la imagen"); }
-La dificultad, radicó en que le puse una altura fija, que a la hora de aplicar flex me dió problemas.
-Sinceramente, comparando códigos, creo que el tuyo es más completo. Siento no poder ayudarte más.
Un saludo y sigue así.
Estou bem satisfeito com resultado, ficou incrível no dispositivos móvel. Não mudaria exatamente nada do projeto. Eu gostei muito da solução.
What challenges did you encounter, and how did you overcome them?Em relação ao tamanho da viewport, estava com dificuldade de fazer as adaptações para dispositivos moveis, nos testes sempre aparecia uma barra de rolagem por mais que iniciasse no first mobile. Ao testar em telas maiores os textos se estendiam demais, então limitei a largura da minha hero para 1000px, mas quando voltava para mobile aparecia a rolagem, confesso que ficava bem triste!..rsrs. Mas comecei a estudar e considerei um comentário feito no meu projeto anterior. Usar max-width, pronto! Tudo resolvido, todos os elementos se adaptaram.
What specific areas of your project would you like help with?Gostaria muito de uma melhor solução para definir o padding de tabelas, para ficar próximo do projeto inicial que tem um espaço a esquerda das linhas da primeira coluna, tive dúvida se fiz de forma correta.
Hola Denner Silva.
Tu código se ve genial, salvo quizás porque observo un uso excesivo de estilos en línea y que la imagen es algo más alta que la del diseño.
Pero no te preocupes, por que todo tiene solución. Hay un fandom donde te explica porque no hay que abusar de los estilos en linea. fandom estilos en línea.
En cuanto a la imagen una forma de que las imágenes no se estiren aunque su altura no coincida con su anchura.
object-fit: cover;
La verdad es que he aprendido con tu @face, no sabía que se podían incrustar fuentes así.
Vas por buen camino, felicidades por tu diseño.
Hola Lucielub tengo algunas reflexiones que ofrecerte, si me lo permites:
<nav class ="LinksContainer">...</nav> en vez del
<div class= "LinksContainer">...</div>.Gracias a tu código he aprendido a utilizar el atributo role y aria-label de forma correcta.
Además es escalable y muy legible, con clases muy descriptivas que no hace falta ningún comentario o explicación de que hace cada elemento.
Hay algo que siempre me ha parecido algo contradictorio y es el hecho de resetear estilos, para luego poner margins y paddings a los elementos. No es una crítica, más bien es una reflexión que me hago cuando lo veo plasmado en un código.
* { margin: 0; padding: 0; } . . . element1 { margin-button: 1rem; } element2 { padding: 2rem; }
- La verdad es que no puede estar mejor hecho, es sencillo, legible y reutilizable.
###Enhorabuena, buen trabajo.
i finish it
What challenges did you encounter, and how did you overcome them?i cant center text author before, then i using flex for the container author and again margin-y: auto ,to fix it
What specific areas of your project would you like help with?i try using 10% margin in my image container but still cant make it centered
body { display: flex; flex-direction: column; justify-content: center; align-items: center; }
