@victoriaaliaSubmitted almost 2 years ago
Miguel Evangelista
@MiguelaebAll comments
- @MiguelaebPosted almost 2 years ago
Hi @victoriaalia, congratulations on your solution!
Great solution and a great start! From what I saw you’re on the right track. I’ve a few suggestions for you that you can consider adding to your code:
Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images easier to work, see the link below where you can download this file which contains the normalize.css: https://necolas.github.io/normalize.css/
Add a margin of around margin: 20px to avoid the card touching the screen edges while it scales down.
Use relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. These units are better to make your website more accessible. REM does not just apply to font size, but to all sizes as well.
You should take a closer look at the style guide and the designs that they put in the project
Here's my solution for this challenge if you want to see how I build it: https://www.frontendmentor.io/solutions/order-summary-component-MoE3Zwo3Ln
I hope this helps you and happy coding!
Marked as helpful1 - @developerabzSubmitted almost 2 years ago
Not too sure if I did it the right way, was I meant to use html to switch the images and add alt tags or is putting it in css good enough? I don't exactly know how to get around putting alt text for background images. Any feedback is greatly appreciated.
@MiguelaebPosted almost 2 years agoHi @developerabz, congratulations on your solution!
Great solution and a great start! From what I saw you’re on the right track. I’ve a few suggestions for you that you can consider adding to your code:
Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images easier to work, see the link below where you can download this file which contains the normalize.css: https://necolas.github.io/normalize.css/
Replace the <p> containing the main title with <h1> note that this title is the main heading for this page and every page needs one h1 to show which is the most important heading. Use the sequence h1 h2 h3 h4 h5 to show the hierarchy of your titles in the level of importance, never jump a level.
You should have put the CSS code in an external file, that is a better practice and would have made the code easier to manage.
To switch the images depending on the size of the web you can use the picture tag:
<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>I also recommend you to add a min-height of 100vh to the main container to centralize it and add some padding left to the texts so that you can move the texts away because they are very close
Add a margin of around margin: 20px to avoid the card touching the screen edges while it scales down.
Use relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. These units are better to make your website more accessible. REM does not just apply to font size, but to all sizes as well.
Here's my solution for this challenge if you want to see how I build it: https://www.frontendmentor.io/solutions/product-preview-card-component-MCflXO_TZz
I hope this helps you and happy coding!
Marked as helpful1 - @Laila-HaddadSubmitted almost 2 years ago
Feel free to leave some feedback. Very much appreciated!
@MiguelaebPosted almost 2 years agoHi @Laila-Haddad, congratulations on your solution!
Great solution and a great start! From what I saw you’re on the right track. I’ve a few suggestions for you that you can consider adding to your code:
Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images easier to work, see the link below where you can download this file which contains the normalize.css: https://necolas.github.io/normalize.css/
Use <main> instead of a simple <div> this way you improve the semantics and accessibility showing which is the main block of content on this page. Remember that every page should have a <main> block and that <div> doesn't have any semantic meaning.
Replace the <h2> containing the main title with <h1> note that this title is the main heading for this page and every page needs one h1 to show which is the most important heading. Use the sequence h1 h2 h3 h4 h5 to show the hierarchy of your titles in the level of importance, never jump a level.
Add a margin of around margin: 20px to avoid the card touching the screen edges while it scales down.
Use relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. These units are better to make your website more accessible. REM does not just apply to font size, but to all sizes as well.
You should have put the CSS code in an external file, that would have made the code easier to manage.
Here is an example:
https://www.youtube.com/watch?v=WuvujA5facU
Also, you should have added a min-width of 100vh to the container in order to centralize the main box.
Here's my solution for this challenge if you want to see how I build it: https://www.frontendmentor.io/solutions/product-preview-card-component-MCflXO_TZz
I hope this helps you and happy coding!
Marked as helpful0 - @GuiGC03Submitted almost 2 years ago@MiguelaebPosted almost 2 years ago
Hi @GuiGC03, congratulations on your solution!
Great solution and a great start! From what I saw you’re on the right track. I’ve a few suggestions for you that you can consider adding to your code:
Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images easier to work, see the link below where you can download this file which contains the normalize.css: https://necolas.github.io/normalize.css/
You can use a <picture> tag when you need to change an image in different viewports. Using this tag will prevent the browser from loading both images, saving bandwidth and preventing you from utilizing a media query to modify the image.
Example:
<picture> <source media="(max-width: 768px)" srcset="./images/image-product-mobile.jpg"> <img src="./images/image-product-desktop.jpg" alt="your_alt_text"> </picture>Improve alternative texts by adding descriptive text to the alt attribute of the product image. The alt attribute enables screen readers to read the information about on-page images and will be displayed instead if an image file cannot load. You could use the <del> tag to display the old price:
<del class="old-price"> <span class="sr-only">Old price: </span>$169.99 </del>Note that I added the <span> with the sr-only class to the del element, this will provide more information about what your old price is about. The sr-only class is a class that you can add to hide content visually but is only visible to screen-readers.
Use <main> instead of a simple <div> this way you improve the semantics and accessibility showing which is the main block of content on this page. Remember that every page should have a <main> block and that <div> doesn't have any semantic meaning.
Replace the <h2> containing the main title with <h1> note that this title is the main heading for this page and every page needs one h1 to show which is the most important heading. Use the sequence h1 h2 h3 h4 h5 to show the hierarchy of your titles in the level of importance, never jump a level.
Add a margin of around margin: 20px to avoid the card touching the screen edges while it scales down.
Use relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. These units are better to make your website more accessible. REM does not just apply to font size, but to all sizes as well.
I hope this helps you and happy coding!
0 - @erickvlSubmitted about 2 years ago
Choosing which font size is quite difficult.
@MiguelaebPosted about 2 years agoHi @erickvl, congratulations on your solution!
Great solution and a great start! From what I saw you're on the right track. I've a few suggestions for you that you can consider adding to your code:
Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images easier to work, see the link below where you can download this file which contains the normalize.css: https:/ /necolas.github.io/normalize.css/
You should take a look at the style guide that they put on the files, there are specific styles and fit sizes that you have to use.
Also, I recommend you to create a new file for the styles and intend of having it with the HTML all together.
Add a margin of around 20px to avoid the card touching the screen edges while it scales down.
Use relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. These units are better for making your website more accessible. REM does not just apply to font size, but to all sizes.
Here's my solution for this challenge if you want to see how I build it: https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H/hub/qr-code-component-UGmSDEakFi
I hope this helps you and happy coding!
0 - @Hardcore01Submitted about 2 years ago
en el codigo de css para centrar los texto: no estoy seguro si es la mejor manera de utlizar en la class .texto para centrar la etiqueta h2 y h3 en la tarjeta.
en la etiqueta <picture>, siempre se le agrega la etiqueta <img> al final de las etiquetas <source>?
@MiguelaebPosted about 2 years agoHola @Hardcore01, bienvenido a Front end mentor, me gusta como se ve tu solucion, para poder darte algunas sugerencias debes subir los archivos de la pagina a github ya el repositorio esta vacio.
1 - @N11KK11Submitted about 2 years ago
Typography was a challenge , I need to practice more with box model.
Initially struggled to deploy and still unsure of the issue. It's seperate HTML & CSS files, they load correctly on my local browser.
Netlify & Vercel returned 404 errors, until I renamed HTML & CSS to 'index.html' & 'style.css'. I'm trying to understand why that is.
Thank you for any feedback!
@MiguelaebPosted about 2 years agoHi @N11KK11, congratulations on your solution!
Great solution and a great start! From what I saw you’re on the right track. I’ve a few suggestions for you that you can consider adding to your code:
Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images easier to work, see the link below where you can download this file which contains the normalize.css: https://necolas.github.io/normalize.css/
The main tag should contain all divs Replace the <h2> containing the main title with <h1> note that this title is the main heading for this page and every page needs one h1 to show which is the most important heading. Use the sequence h1 h2 h3 h4 h5 to show the hierarchy of your titles in the level of importance, never jump a level.
Add a margin of around margin: 20px to avoid the card touching the screen edges while it scales down.
Here's my solution for this challenge if you want to see how I build it: https://www.frontendmentor.io/solutions/single-price-grid-component-master-ynpfkgRCSb
I hope this helps you and happy coding!
Marked as helpful1 - @mazen-AhSubmitted about 2 years ago@MiguelaebPosted about 2 years ago
Hi @kirion13, congratulations on your solution!
Great solution and a great start! From what I saw you’re on the right track. I’ve a few suggestions for you that you can consider adding to your code:
Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images easier to work, see the link below where you can download this file which contains the normalize.css: https://necolas.github.io/normalize.css/
Use <main> instead of a simple <div> this way you improve the semantics and accessibility showing which is the main block of content on this page. Remember that every page should have a <main> block and that <div> doesn't have any semantic meaning.
Replace the <H3> containing the main title with <h1> note that this title is the main heading for this page and every page needs one h1 to show which is the most important heading. Use the sequence h1 h2 h3 h4 h5 to show the hierarchy of your titles in the level of importance, never jump a level.
Add a margin of around margin: 20px to avoid the card touching the screen edges while it scales down.
Use relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. These units are better to make your website more accessible. REM does not just apply to font size, but to all sizes as well.
I hope this helps you and happy coding!
Marked as helpful0 - @HR-TechnologySubmitted about 2 years ago@MiguelaebPosted about 2 years ago
Hi @HR-Technology, congratulations on your solution!
Great solution and a great start! From what I saw you’re on the right track. I’ve a few suggestions for you that you can consider adding to your code:
Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images easier to work, see the link below where you can download this file which contains the normalize.css: https://necolas.github.io/normalize.css/
Use <main> instead of a simple <div> this way you improve the semantics and accessibility showing which is the main block of content on this page. Remember that every page should have a <main> block and that <div> doesn't have any semantic meaning.
Add a margin of around margin: 20px to avoid the card touching the screen edges while it scales down.
Use relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. These units are better to make your website more accessible. REM does not just apply to font size, but to all sizes as well.
Here's my solution for this challenge if you want to see how I build it: https://www.frontendmentor.io/challenges/product-preview-card-component-GO7UmttRfa/hub/product-preview-card-component-MCflXO_TZz
I hope this helps you and happy coding!
0 - @A-l-i-h-oSubmitted about 2 years ago
Hi everyone! This is my second project.
I had a hard time with the size of the white frame and the image.
This project gave me a lot of knowledge in HTML and CSS and allowed me to use tags and rules that I didn't know before.
Feel free to give me feedback on what needs to be changed in the code and what can be improved.
Thanks in advance!
@MiguelaebPosted about 2 years agoHi @A-l-i-h-o, congratulations on your solution!
Great solution and a great start! From what I saw you’re on the right track. I’ve a few suggestions for you that you can consider adding to your code:
Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images easier to work, see the link below where you can download this file which contains the normalize.css: https://necolas.github.io/normalize.css/
Add a margin of around margin: 20px to avoid the card touching the screen edges while it scales down.
Use relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. These units are better to make your website more accessible. REM does not just apply to font size, but to all sizes as well.
To center the main div or container you can use display: flex; align-items: center; justify-content: center; min-height: 100vh
Also, you should have added some margin-top to the green button and always try to follow the style guide that is in the package.
Here's my solution for this challenge if you want to see how I build it: https://www.frontendmentor.io/solutions/product-preview-card-component-MCflXO_TZz
I hope this helps you and happy coding!
Marked as helpful0 - @bluey-mainSubmitted about 2 years ago@MiguelaebPosted about 2 years ago
Hi @bluey-main, congratulations on your solution!
Great solution and a great start! From what I saw you’re on the right track. I’ve a few suggestions for you that you can consider adding to your code:
Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images easier to work, see the link below where you can download this file which contains the normalize.css: https://necolas.github.io/normalize.css/
Use <main> instead of a simple <div> this way you improve the semantics and accessibility showing which is the main block of content on this page. Remember that every page should have a <main> block and that <div> doesn't have any semantic meaning.
Replace the <p> containing the main title with <h1> note that this title is the main heading for this page and every page needs one h1 to show which is the most important heading. Use the sequence h1 h2 h3 h4 h5 to show the hierarchy of your titles in the level of importance, never jump a level.
Add a margin of around margin: 20px to avoid the card touching the screen edges while it scales down.
Use relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. These units are better to make your website more accessible. REM does not just apply to font size, but to all sizes as well.
Here's my solution for this challenge if you want to see how I build it: https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H/hub/qr-code-component-UGmSDEakFi
I hope this helps you and happy coding!
0 - @mauricciorcostaSubmitted about 2 years ago
Your feedback is a huge motivation for me! Give me any tips and hints so I can always make my codes better! :)
@MiguelaebPosted about 2 years agoHi @mauricciorcosta, congratulations on your solution!
Great solution and a great start! From what I saw you’re on the right track. I’ve a few suggestions for you that you can consider adding to your code:
Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images easier to work, see the link below where you can download this file which contains the normalize.css: https://necolas.github.io/normalize.css/
Use <main> instead of a simple <div> this way you improve the semantics and accessibility showing which is the main block of content on this page. Remember that every page should have a <main> block and that <div> doesn't have any semantic meaning.
Replace the <p> containing the main title with <h1> note that this title is the main heading for this page and every page needs one h1 to show which is the most important heading. Use the sequence h1 h2 h3 h4 h5 to show the hierarchy of your titles in the level of importance, never jump a level.
Add a margin of around margin: 20px to avoid the card touching the screen edges while it scales down.
Use relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. These units are better to make your website more accessible. REM does not just apply to font size, but to all sizes as well.
Here's my solution for this challenge if you want to see how I build it: https://www.frontendmentor.io/solutions/nft-preview-card-PlL_d_Bl0w
I hope this helps you and happy coding!
Marked as helpful0
