@victoriaalia
I specialize in creating web applications and user interfaces that are not only visually appealing but also easy to use and navigate. My experience includes HTML, CSS, JavaScript, TypeScript, frameworks like Tailwind CSS, Bootstrap, and Material UI, and libraries like React JS and Next.js.
I’m currently learning...API Integration
Latest solutions
Latest comments
- @Miguelaeb
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 helpful - @developerabz@Miguelaeb
Hi @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 helpful - @Laila-Haddad@Miguelaeb
Hi @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 helpful - @GuiGC03@Miguelaeb
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!
- @erickvl@Miguelaeb
Hi @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!
- @Hardcore01@Miguelaeb
Hola @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.
