@sweetemulsionSubmitted over 3 years ago
Hello!
I'm always keen to learn more, please let me know if there's anything I can do to improve my code :)
hagureshinma
@hagureshinmaAll comments
- @hagureshinmaPosted over 3 years ago
Hello Tracie :)
You can imporve your solution implementing the background elements in the css file rather than inserting the images directly in the html. Helpful links MDN CSS-tricks
For the sake of your sanity, the attribute "alt" can be left empty in decorative images. "Images with no semantic meaning—such as those which are solely decorative—or of limited informational value, should have their alt attributes set to the empty string ("")." quote from MDN
Happy coding!
0 - @pauloboliveiraSubmitted almost 4 years ago
I was unable to add one of the images of background, which name is bg-pattern-bottom.svg. When I tried to position it on the right bottom, the image expand the browser even when I put the relative on display tag.
@hagureshinmaPosted almost 4 years agoHi Paulo.
Instead of using the
<img>tag try Calling the background images as such, using the propertybackground-image; this way you can even have multiple background images in a single element and control their size and position independently.You can still tweak the solution a little bit, take a look at the fonts sizes/styles and the white space around the picture.
Notice that the page should display the card correctly in a minimum width of 375px. Current browsers have a built in function to test this called Responsive Design Mode or Device Mode
Happy coding!
0 - @fikymarSubmitted almost 4 years ago
The background images are in different places on different devices. I have struggle with its correct responsivity. Any help or criticism will be appreciated!
@hagureshinmaPosted almost 4 years agoHello Marcela, good work!
I think you handle the challenge pretty well.
- For the background images you can use more flexible values like % instead of rem to keep better positioning between breakpoints.
- Give a read to HTML semantics to write better html code (learning this myself as well), the browsers don't understand very well the page content if there is a bunch of divs as structure.
Keep the good work & happy codding!
1 - @macamonperSubmitted almost 4 years ago
no logro hacer el media query
@hagureshinmaPosted almost 4 years ago¡Hola macarena! buen trabajo.
Primero que todo revisa el reporte que te genera el sitio, actualmente tienes algunos problemas menores ya que tus etiquetas "img" necesitan el atributo "alt", dicho atributo puede dejarse vacío en las estrellas que son meramente adorno (img src="images/star.svg" alt=""). Por otro lado estás usando un id="avatar" multiples veces, pero "id" es un identificador único para un solo elemento, debe ser reemplazado por una clase (class).
Tu media query si está funcionando, pero tienes que sobreecribir los atributos de todos los elementos que necesitan ajustarse al tamaño deseado y su posicionamiento en la pantalla.
Happy coding!
0 - @ramkrishnaghosh834Submitted almost 4 years ago@hagureshinmaPosted almost 4 years ago
Hi!
Take a good look at the style-guide text provided, to get the correct font and other requirements for the challenge, this one requiere you to import the social icons from some other place: "For the social icons, you can use a font icon library. Some suggestions can be found below:
I noticed that you added an em value to your font-weight for the heading, wich is invalid, on the other hand instead of having that text in a p tag use the more adecuate heading tag (they range from h1 to h6).
For the page, a logo.svg was provided that contains the chat box and text so you can replace the h2 in the header for the image.
1 - @JonesovoSubmitted almost 4 years ago
I would like comments and criticism on this project and how to position very well and write clean code. Thanks
@hagureshinmaPosted almost 4 years agoHello Jones!
Good attempt, try to improve your solution separating elements more logically, for example instead of using a div to hold your background bubble images you can use the background property of the container "main-page" (tip: you can apply multiple backgrounds to a single element). And make your div "profile" only contain elements that belong inside it.
Give a read to HTML semantics to improve your html code as well.
Happy coding!
0 - @Prayanshu1308Submitted almost 4 years ago
I was facing problems in making profile card centred on screen by setting margins around it and also in font size of Followers, Likes and Photos at last.
@hagureshinmaPosted almost 4 years agoHi Prayanshu!
Good attempt, i recommend to you to read about html markup and semantics, an then try to improve your solution. Also i'm not sure about your desicion to make the card children of the background container element.
There are several ways to center content, you can apply "auto" to the left and right margins (if the width is less than 100%). If you set the container to "display: flex" then use the properties "align-items" and "justify-content" set to center. for an image you can set the display to block and in the parent set align-text to center as well.
The base font size for the web is 16px, so 1em and 1rem are that normally, you can read about it to understand better how it works and the difference between rem and em.
I strongly sugest to eliminate the "style" from the html in "user-details-title>p", just asign a class to the elements and handle the styles in the css.
Happy coding!
1 - @tatialvesoSubmitted almost 4 years ago
hey, this is the first time i'm doing a challenge so if anyone has a feedback, feel free to send me! i felt some difficult with ajusting some sizes because my screen is not that wide like the design requested, so if anyone has a tip for coding for big screens on medium screens...
@hagureshinmaPosted almost 4 years agoHi Tati. Good work.
Check the report the site generates about your solution to fix some minor issues.
Notice that there are 2 different background images, one for mobile and one for desktop, you can change it in your media query.
It's recommendable to change the aproach to mobile first, that means making your base code for small screens and use the media queries to add and acomodate content 'till screen size reach desktop.
To anwer your question, while previewing your site in the browser turn on the "developer tools" options and use responsible design mode (https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode) (https://developers.google.com/web/tools/chrome-devtools/device-mode) that way you can increase the viewport size to the minimun and maximun required.
Happy coding!
1 - @codebyfauzanSubmitted almost 4 years ago
Hello Everyone! Took a long time for me to build this and I need some help with this project
-
I wanted to know the best way to put the background, is my way is good enough to make the background is above all elements?
-
In project design looks like the 3 review items set to justify-content: space-evenly in the desktop display but if I do that, I can't give a different margin-top value for each review item. Do you guys have the best solution to this?
-
Also how to put 5 stars efficiently, I put 5 img tag in picture, is it okay?
Your feedback will be appreciated, Thanks
@hagureshinmaPosted almost 4 years agoHi Fauzan. First of all, take a look at the report generated for your solution, to fix some html issues.
It would be perfectly fine to use background in the body as you have tried. I can´t help you with #2 as i´m learning as well. I think is ok to use the 5 img tags, you just wrapped them incorrectly (that's in the report), you can show the as background element as well but that way there is no way to control the space between stars without messing the svg directly. Kevin Powell did uploaded this challenge in his youtube channel, you can give it a try to learn some more concepts and a different take on the solution, i certainly did :)
Overall great work, keep improving & Happy coding!
1 -
