@saravdbergSubmitted over 3 years ago
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-coderAll comments
- @sstepaaSubmitted over 3 years ago
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 :)
@Gabrieldev-web-coderPosted over 3 years agoHola 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 - @adityapawar12Submitted over 3 years ago
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
@Gabrieldev-web-coderPosted over 3 years agoHi, 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 helpful0 - @befflusSubmitted over 3 years ago
This is my go at this challenge. It was not easy to place the images:-) Hope you like it.
@Gabrieldev-web-coderPosted over 3 years agoHi, 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 helpful0 - @CpineroSubmitted over 3 years ago@Gabrieldev-web-coderPosted over 3 years ago
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 - @aausttSubmitted over 3 years ago@Gabrieldev-web-coderPosted over 3 years ago
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 - @maha887Submitted over 3 years ago
Please give your feedback on the code or the website
@Gabrieldev-web-coderPosted over 3 years agoI 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 - @UtkarshGoel22Submitted over 3 years ago
I was unable to position the background circles in mobile view. How can i fix this ?
@Gabrieldev-web-coderPosted over 3 years agoTry 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 - @Gabrieldev-web-coderSubmitted over 3 years ago
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
@Gabrieldev-web-coderPosted over 3 years agoSomeone knows why the design comparation shows my solution bad?
In the previews does'nt show like that ._.
0 - @Gabrieldev-web-coderSubmitted over 3 years ago
I do my best.
Any feedback is welcome, thanks <3
@Gabrieldev-web-coderPosted over 3 years agoI have no idea why my solucion looks like that ._. see the preview site
0 - @Gabrieldev-web-coderSubmitted over 3 years ago
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)
@Gabrieldev-web-coderPosted over 3 years agoA lot media queries background position fixed.
0 - @reya3183Submitted over 3 years ago
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 :)
@Gabrieldev-web-coderPosted over 3 years agoThank for you solution! now i know how make that background without a lot media queries XD
1
