Skip to content
OverviewSolutions
7
Comments
8
Anlia
@book-Anlia

All comments

  • Zarak•100
    @zarakSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I'm starting to get a little more comfortable with CSS grid. This project was a great way to develop that further. I used the nth-child pseudo-selector to order and style individual elements, but next time I think I would rather use specific classes to select individual items.

    I initially thought the quotation mark background would be difficult, but I was able to do it quite easily using absolute positioning and a translate transform, along with z-index to make sure the card text appears on top.

    What challenges did you encounter, and how did you overcome them?

    I'm not sure if I implemented the grid in the best way. I ended up using order. I wonder if it's possible to write the grid in a way that it just flows correctly and is thus responsive, including for mobile, without making a lot of changes to each card. I had to reset the order attribute for each card, for example. I did use span instead of hard-coding the start and end rows though.

    What specific areas of your project would you like help with?

    I'd like some feedback on how I could improve my CSS grid setup. Also, is it okay to use nth-child selectors as I did, or is it better to use specific CSS classes? My hunch is the latter, but I'm curious to hear what others think.

    Vanilla CSS grid

    1
    Anlia•100
    @book-AnliaPosted about 2 months ago

    It was good!! I'm also still learning how to use display grid, and in my case, I chose to use specific classes with each user's name because I find it easier to identify.

    0
  • Anlia•100
    @book-AnliaPosted about 2 months ago

    bom trabalho! só acho que os cards ficaram um pouco grandes

    0
  • Sadick Sulley•280
    @Sulley-SadickSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    Solving the challenge makes me proud and feels like I'm improving on the Front-end skills.

    What challenges did you encounter, and how did you overcome them?

    Honestly I didn't any serous challenges.

    What specific areas of your project would you like help with?

    I think I need someone to explain to me if you are working on front-end mentor challenge where you are provided two images where one is for mobile design and one for desktop design. how would you use those two images provided in one projects.

    Product Preview card

    2
    Anlia•100
    @book-AnliaPosted 2 months ago

    Hi! I’m also still learning, so I’m not sure which other methods I could use. The method I used was adding an empty div in my HTML, and with CSS, I customized its dimensions and used background-image: url(path to the image). When adapting it with the media query, I just changed the path to the other image. If you’d like to take a look at the code in my project, I think you’ll understand better. (Sorry, I’m terrible at explaining!)

    0
  • tathanz98•90
    @tathanz98Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    Estoy muy orgulloso del diseño responsivo que pude implementar usando CSS Grid y Flexbox. La página se ve genial en todos los tamaños de pantalla y dispositivos. La próxima vez, me gustaría experimentar con animaciones para mejorar la experiencia del usuario y hacer que la página sea más atractiva.

    What challenges did you encounter, and how did you overcome them?

    Uno de los principales desafíos que encontré fue asegurarme de que el diseño fuera totalmente adaptable a múltiples tamaños de pantalla. Lo superé aprovechando CSS Grid para la estructura y Flexbox para elementos más pequeños, lo que me permitió crear un diseño flexible y escalable.

    What specific areas of your project would you like help with?

    Agradecería recibir comentarios sobre cómo mejorar la accesibilidad del sitio, especialmente en términos de navegación con teclado y compatibilidad con lectores de pantalla. Además, cualquier sugerencia para optimizar el rendimiento del sitio será de gran ayuda.

    Página de destino adaptable con CSS Grid y Flexbox

    #pure-css
    1
    Anlia•100
    @book-AnliaPosted 2 months ago

    ¡buen trabajo!. Para que el diseño sea un poco mas parecido al design, sugiero algunos puntos como:

    • cambiar el fondo a amarillo;
    body{
   background-color: #f4d04e;
}
    • añadir un borde, una sombra y un padding al card;
    .card {
    display: flex;(Flexbox es mejor para organizar y posicionar los elementos)
    flex-direction: column;
    gap: 24px;
    background-color: #fff;
    border: 1px solid #111111;
    border-radius: 20px;
    box-shadow: 8px 8px #111111;
    padding: 24px;
}
    • decorar e posicionar el texto;
    .card-content {
    padding: 20px;(en este caso el padding no es necesario)
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tag {
    color: #000000;
    background-color: #f4d04e;
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 4px;
}
    • añadir el footer con un solo parágrafo e posicionarlo debajo del card o al pie de la pagina;
      • al pie de la pagina: 
        footer ou .attribution{
 position: absolute;
 bottom: 10px;
}
      • debajo del card: 
         body{
   flex-direction: column;
   gap:15px;
 }

    Haz las cambios que necesites o adaptalo a tu gusto, espero que te haya ayudado :)

    0
  • Anlia•100
    @book-AnliaPosted 2 months ago

    Good job! If you decrease the font-weigth of the titles and change the color of the "even" class it will look even better.

    Marked as helpful
    0
  • Ahmad Danish Ikhwan•50
    @dnshikhwanSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    Getting better and better with css

    What challenges did you encounter, and how did you overcome them?

    Still about responsiveness but getting better and better

    What specific areas of your project would you like help with?

    Responsive, layout, creativity

    Social link frontend mentor

    1
    Anlia•100
    @book-AnliaPosted 2 months ago

    Good job! To improve visibility, make the entire "attribution" class white or another light color like the green used in this project.

    0
  • Anlia•100
    @book-AnliaPosted 2 months ago

    "Good job! a tip to improve it further would be to follow the standard design measurements outlined in the Figma provided for this challenge. This will help maintain consistency throughout the project and make it more like the design."

    0
  • CosmasA•10
    @CosmasASubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Writing the css codes

    What challenges did you encounter, and how did you overcome them?

    The structural layout in html

    What specific areas of your project would you like help with?

    More of css

    Frontend Mentor | QR Code Component

    1
    Anlia•100
    @book-AnliaPosted 3 months ago

    Great work! Just a suggestion— to make it even better, it would be great to follow the project standards in the Figma file provided for this challenge. This will help keep everything consistent.

    0