@iguanasplit
@Gabo-boy
Submitted
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 -
@iguanasplit
Posted
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
@Radiyyah
Submitted
For best practices, should one begin with the mobile or desktop view when styling.
@iguanasplit
Posted
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
@tecour
Submitted
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!
@iguanasplit
Posted
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
