Skip to content
OverviewSolutions
16
Comments
3
Cas
@iguanasplit

All comments

  • Gabriel•20
    @Gabo-boySubmitted about 2 years ago

    Como pueden ver soy un principiante es CSS y HTML. Me cuesta entender la funcion de los containers y de las clases padres, por eso creo que se puede mejorar la estructura HTML. En CSS necesito practica con el tema de las posiciones absolute, relative, etc, y el CSS grid y el flexbox.Quien me pueda ayudar a mejorar en estos aspectos se lo agradeceria. En fin esto es lo que pude hacer -

    CSS grid,

    4
    Cas•220
    @iguanasplitPosted about 2 years ago

    Hola! un gusto, de manera similar a ti soy principiante, puedo ver que lograste adaptarte bien a los mediaQuerys para el cambio de tamaños en dispositivos, y lograste bien centrar el elemento principal. pero veo que:

    -font-size: 'Montserrat';- que pusiste que el tamaño de la fuente es montserrat, esto te lo marca como error. las fonts las buscas aquí: https://fonts.google.com/ y al buscarlas y agregarlas te deberia dar un link como este : @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap'); estos posteriormente los llamas con : font-family: 'Montserrat', sans-serif;

    para el color de fondo es unicamente poner background-color en el body.

    hmm para la imagen estirada se puede usar object-fit:cover. pero en este caso ... <img class="imagen" src="images/image-product-desktop.jpg" alt="imagen del producto" > estas usando la imagen del desktop para el mobile.
    para eso se puede usar la tag de picture: <picture> <source media="(min-width:650px)" srcset="img_pink_flowers.jpg"> <source media="(min-width:465px)" srcset="img_white_flower.jpg"> <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> </picture>

    algunos links: https://www.w3schools.com/css/css3_object-fit.asp https://www.w3schools.com/tags/tag_picture.asp

    Espero que esto te sirva o te ayude, y un gusto ver a otro hispano hablante aqui!

    Marked as helpful
    1
  • Cas•220
    @iguanasplitPosted about 2 years ago

    hey! from my understanding, the best practice is to start with mobile first since its the sizing with most limitations regardings sizing. so while you can re-style desktop completely by making a very detailed and complicated layout it may be imposible to replicate it in mobile version without sacrificing the user experience forcing you to reinvent a new layout, or make something entirely different, while if you make mobile first it tends to be easier to adapt.

    a link that explains it clearer!: https://www.freecodecamp.org/news/taking-the-right-approach-to-responsive-web-design/

    i hope that helped!

    Marked as helpful
    0
  • Trey Courtney•10
    @tecourSubmitted over 2 years ago

    I found the most difficult part of this was getting images to link properly in Github. I think it was mostly due to not properly creating a folder structure in Github. Overall the build wasn't too difficult. I wasn't sure about resizing for mobile. Would love feedback on how to do that for this particular project. Thanks!

    QR Code Component

    1
    Cas•220
    @iguanasplitPosted over 2 years ago

    i found this tutorial useful exactly for organizing folders:

    https://devpractical.com/upload-and-host-html-website-on-github/

    you have to first upload all the HTML files in the root and then click on create a new file, and you name it like the folder, slashes and everything :

    for example ****/images/

    then its gonna ask you to name the file ****/images/ image.png

    now the folder and an empty file are created. delete the file and upload the images

    Marked as helpful
    0