Sara• 180
@saravdberg
Submitted
Hey guys, I would love some feedback over the structure of my code. If anything looks out of place or doesn't make sense, please let me know! Would really appreciate your time and help, thanks!
Gabriel Monsalve
@Gabrieldev-web-coder
All comments
- Gabriel Monsalve• 320
@Gabrieldev-web-coder
Posted
Very nice work.
0 - rodrigo• 40
@sstepaa
Submitted
Es mi segunda practica html y css , tratando de respetar una estructura semanticamente correcta , y utilizando metodologia ben en css , y medias query en una misma hoja de estilos , si hay algun error , con gusto quiero saberlo asi , voy aprendiendo mas :)
Gabriel Monsalve• 320@Gabrieldev-web-coder
Posted
Hola hermano, espero estés bien, aquí mi aporte.
Solo decirte que te apegues a como esta hecho el diseño, hasta en lo más mínimo, esa es la gracia del frontend, efecto de hover y pudiste usar un cursor:pointer; en los botones, por que son elementos interactivos.
Noté que para alinear el componente usaste margin y padding, y eso esta bien para algunas cosas, para el layout es mejor usar flex o grid, por ejemplo, en el elemento body o la etiqueta contenedora de tu contenido principal pudiste usar flex y justify content para centrarlo o usar unidades de viewport. En cambio el margin y el padding pudo servir bien para los elementos de las cartas, para el parrafo, las imagenes y los botones.
Aún así luce bastante bien, sigue estudiando y practicando, sobre responsive design y las bases de css, ten buen dia.
0 - aditya pawar• 60
@adityapawar12
Submitted
how do you guys make your sites more mobile friendly.and also the website styling looks decent on my local desktop but it looks different on github pages
Gabriel Monsalve• 320@Gabrieldev-web-coder
Posted
Hi, maybe you use propities that don't support the browser, or only you do bad things.
For the background try use viewport units, and use the semantic html, and saw you use a div for a container of an image, the container of an img is the <figure> tag, the space of text that doesn't a paragraph, you can use <span>
Search and learn about BEM is a method to add the classes in html to be more readable, remember that others i'll read your code, and the name of your classes is some confuse.
You used also position to align the text and other things, for layout, the better way is use flexbox or grid, only for the img of victor is a good idea use the position, and you write so many code to a simple card compose, try to do reusable classes and do more writing less as possible.
Sounds hard but no one is born knowing, only stay practicing and studing and you will improve, have a nice day.
Marked as helpful
0 @befflus
Submitted
This is my go at this challenge. It was not easy to place the images:-) Hope you like it.
Gabriel Monsalve• 320@Gabrieldev-web-coder
Posted
Hi, i hope you're okay.
To align the background without the media queries use viewport units.
all other is okay, be careful with the details of the design, but well done.
Marked as helpful
0- Cpinero• 70
@Cpinero
Submitted
Gabriel Monsalve• 320@Gabrieldev-web-coder
Posted
Good work in this challenge, but be careful with the details of the design, like the font size, weight, and family.
All other is good, keep going.
1 - Sebastian• 40
@aaustt
Submitted
Gabriel Monsalve• 320@Gabrieldev-web-coder
Posted
El diseño es muy parecido, pero creo que en el breakpoint 600px hay mucho espacio en blanco, cuando en el diseño se mantiene solo un pequeño espacio, yo hubiese puesto la propiedad de Flex hasta llegar a 768px y recién allí adaptarlo a Tablet y ese mismo cambio sirva para 1024px en adelante.
Como usaste max-width creo que hiciste desktop first, ten en cuenta que en cuestión de SEO y accesibilidad lo ideal es que los diseños sean adaptados primero para dispositivos móviles, (mobile first) usando min-width, es una buena practica maquetar primero para móvil.
Pero aún así esta muy bien, sigue codeando hermano.
0 - maha siam• 40
@maha887
Submitted
Please give your feedback on the code or the website
Gabriel Monsalve• 320@Gabrieldev-web-coder
Posted
I see that there are many media queries to the background shapes, you can use viewport units, you can also see my solution to have an idea. Keep going
0 - Utkarsh Goel• 85
@UtkarshGoel22
Submitted
I was unable to position the background circles in mobile view. How can i fix this ?
Gabriel Monsalve• 320@Gabrieldev-web-coder
Posted
Try using Viewport units, you can view my solution to have an idea.
Also see better the details of the design, all other is good, keep going.
1 - Gabriel Monsalve• 320
@Gabrieldev-web-coder
Submitted
You may notice that the icon fonts are not the same as in the design, it was because in the preview of the challenge I believed that they would not be in the style guide and I put the ones that I downloaded in iconmoon, and when I realized that they were there , I was lazy to change them XD.
Any other comments or suggestions are welcome, have a good day <3
Gabriel Monsalve• 320@Gabrieldev-web-coder
Posted
Someone knows why the design comparation shows my solution bad?
In the previews does'nt show like that ._.
0 - Gabriel Monsalve• 320
@Gabrieldev-web-coder
Submitted
I do my best.
Any feedback is welcome, thanks <3
Gabriel Monsalve• 320@Gabrieldev-web-coder
Posted
I have no idea why my solucion looks like that ._. see the preview site
0 - Gabriel Monsalve• 320
@Gabrieldev-web-coder
Submitted
I don't use SASS or other preprocesser, because for the "newbies" the most important is dominant the basics of lenguajes (and because i don't know use it yet xD)
I try to do this responsive, and i said "try" because i think there are better methods than i use in this case, if you know how to better i'll thank give me feedback <3
My bigest problem was the background with the position background and the porcents, that made me write a media querye for each misalignment, and repeat code for change a single value :/
All other, if you see something you think can do better, please write it!
Be severe, is the way to learn. Thanks!
(Sorry if my english make you cry, i'm learning)
Gabriel Monsalve• 320@Gabrieldev-web-coder
Posted
A lot media queries background position fixed.
0 - Jannatun Naher Reya• 265
@reya3183
Submitted
Hello, this is my 5th challenge. I completed it using grid and flex. After completing this task finally, I realize how much grid and flex are nice to make responsive! I love so much it. If you have further any suggestion, feel free to tell me :)
Gabriel Monsalve• 320@Gabrieldev-web-coder
Posted
Thank for you solution! now i know how make that background without a lot media queries XD
1
