Skip to content
OverviewSolutions
2
Comments
2

William Cuc

@WilliamCucGuatemala40 points

Programador

Latest solutions

  • Submitted about 2 months ago

    blog card using css and html

    #pure-css
    • HTML
    • CSS
    1
  • Submitted 2 months ago

    QR Code Component

    #pure-css
    • HTML
    • CSS
    1

    I would like to have a clearer idea of ​​how to apply flexbox to both parent and child elements so that the design is exactly what I want. I would also like to improve when applying padding and margin to an element.

Latest comments

  • William Cuc•40
    @WilliamCucPosted about 2 months ago

    Utilizar etiquetas semánticas para mejorar la accesibilidad y el SEO.

    Agregar descripciones significativas en los atributos alt de las imágenes para mejorar la experiencia de los usuarios con lectores de pantalla.

    Quitar el comentario HTML innecesario al final del documento y dejar solo aquellos que expliquen secciones específicas del código.

    Eliminar el <p> anidado dentro de otro <p> ya que no es válido en HTML.

    0
  • P
    uzii•180
    @DeuziSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    i learnt how flexbox worked more, cause during the project i expected challenges in centering the element that holds the QR code and it's caption at the middle of the screen and also for it to be responsive, am happy i figured it out, i was using flex on the item in the room (the element) instead of using it one the room it's select (the body) and make any element inside it move to the center

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

    i would love to learn more about responsiveness of a page, am get better tho at it

    i used flexbox to ensure that the QR remains at the center

    #pure-css
    1
    William Cuc•40
    @WilliamCucPosted 2 months ago

    It's great that you've managed to center content with Flexbox. Focusing on learning how to use Flexbox properly is an important step in web development. However, here are some suggestions to take it to the next level:

    1. Using Flexbox: Currently, you're using Flexbox in the body, which is a common practice to center content in the viewport. This is great, but you could experiment with CSS Grid in future projects to have more control over the arrangement of elements. • For example, if you have more than one component on the page, Grid could help you organize everything in a more structured way.

    2. Vertical and Horizontal Centering: If in the future you need to center content in a smaller container, remember that you can use Flexbox on any container element, not just the body.

    3. Next Steps: Try practicing with different layouts, such as columns or more complex layouts, to deepen your knowledge of Flexbox and Grid.

    Since you want to improve responsiveness, here are some key points:

    1. Relative units and adaptability: Instead of using fixed values ​​like width: 320px, try using relative units like %, em, or rem.

    2. Mobile-first: Shift your approach to designing for mobile first and then scaling up to larger screens. This ensures that your design works well on all devices.

    3. Media queries: Your media queries are functional, but they could be simplified and optimized. For example, instead of repeating properties like font-size, you could set base values ​​for text and adjust them as needed.

    4. Practice with complex responsive designs: Try practicing with more complex layouts, like cards with images and text or grids that change shape depending on the screen size.

    5. Useful tools: Learn to use tools like clamp() for fluid text sizes and spacing:

    Marked as helpful
    0