Skip to content
OverviewSolutions
4
Comments
8
Felipe Salazar
@andressalazar08

All comments

  • Felipe Salazar•140
    @andressalazar08Posted almost 2 years ago

    @EAgard-34

    Hello Eric,

    First of all, I congratulate you on the delivery. I share some observations about the project.

    1.Check the image path as it is not rendering on deploy.

    2.Try to customize the README with your project description and the corresponding release links.

    3.Review the use of the color definition in root. These can be accessed later with var in your style sheet. I share a link about it:link_to_root_in_css

    4.the font size property and some length units are recommended to be defined in relative way using rem. That is for responsive and accessibility aspects in browsers. Check the following link on the subject: link to rem units.

    I think that for now is what I can recommend. Happy coding!!

    best regards,

    Felipe

    0
  • Felipe Salazar•140
    @andressalazar08Posted almost 2 years ago

    @maxibrain4

    Hello Friend, first of all I congratulate you on the delivery. I have tackled this challenge and I could recommend a couple of things.

    1.Take advantage of the README-template that is shared to give a description to the delivery. It is an aspect that will greatly help whoever visits your github to understand what the project is about.

    2.I see that you are not using the recommended family-font. Check the style guide to find out which one to use on the projects. In this case: - Family: Outfit Weights: 300, 400, 600

    3.It is convenient to define colors in root to access them as variables. I see that you define the colors in each case and for each element. Using the variables will help you to be more precise in the tone of the suggested design. On the other hand you can make a global change that applies to various elements of your DOM by making an adjustment in root. I share an article on the subject. Link to variables in root

    4.You use font-size in pixels. Use relative measures like rem to define these units of length. This helps accessibility and responsive design aspects. By default 1rem ==16px. I share an article about it. article about rem.

    I think that for now is what I can contribute. Happy coding!! Felipe.

    0
  • geo•30
    @cloak-codesSubmitted almost 2 years ago

    My solution for the Front End Mentor NFT Preview Card Challenge. Although I'm sure it is far from perfect, I am proud of how this one turned out. Helpful critique is appreciated!

    NFT Preview Card Solution | HTML + CSS

    2
    Felipe Salazar•140
    @andressalazar08Posted almost 2 years ago

    Hello Geo,

    First of all, I congratulate you on the delivery. I also tackled this challenge and I can suggest a few things to you.

    1.Try to include the README in a custom way in each repository. I see you have a few on your github and it would be helpful to anyone who visits your site if a description of each project is provided. Ideal also that in the README you use the links to the deploy.

    2.You can use variables as colors in root. This way it is easier to control multiple elements that share the color. It helps you to be more precise and avoid possible errors. Colors defined in root are accessed with var(). I share an article that compares the traditional way and the use of it: Link to variables in root

    3.You can use relative measures of length like rem in properties associated with length like width or height. Note that by default 1rem equals 16px. Because a pixel is an absolute measurement and rem is relative. If you use this, it can help not only for accessibility aspects but also for responsive design.

    4.One last detail related to the aspect of relevance in your html. The text "Our Equilibrium collection promotes balance and calm." it should be a <p> instead of a header.

    I think that for now is what I can offer you. Keep delivering projects. Happy coding!!

    0
  • Felipe Salazar•140
    @andressalazar08Posted almost 2 years ago

    Hello Ivan, I congratulate you on the delivery.

    I just have a couple of aspects that I hope will be helpful:

    -Take the opportunity to customize the README, it really helps whoever visits your repository to understand what the project is about. I see that in the previous project on frontend mentor you don't have the README detailed either.

    -Take into account in this project and for those who follow the mobile design that is expected.

    I think that would be all for now.

    Happy coding!!

    Marked as helpful
    0
  • Luis•30
    @Pike1868Submitted almost 2 years ago

    I learned a lot by tackling this challenge,and took a whole course because I was frustrated when I couldn't figure it out before. I learned that I am good at getting the easier parts of css, like colors and fonts, since they're provided. I still struggled with the layout but after taking the Kevin Powell's course when I tried different things I had a bit more understanding of the things I attempted. Adding css grid helped tremendously as I had tried to stay away from it before because I didn't understand it. I finally arrived at a solution I felt good about but I think it could still be better. If any one would like to take a look at my code and provide any feedback I would greatly appreciate it. Lastly I learned that I still have a long way to go with css but I do feel like I made some progress with this challenge.

    3-column-preview-card-component

    1
    Felipe Salazar•140
    @andressalazar08Posted almost 2 years ago

    @Pike1868 Hi Luis,

    First of all, I congratulate you on your solution. I have addressed this challenge as well and could suggest some things that you can improve.

    • Your design is up at the top in the browser. If you apply the following property on the body min-height: 100vh; You will see that the card is located in the center of the vieport high. this means that it will be located occupying the entire view of the browser. I share an article that complements my observation:

    link to min-height explanation

    -You are mixing px and rem. Try to use relative measures of length (rem) instead of pixels for properties related with length units. These will perform better if you need to make a global change to your design. By default 1rem == 16px

    -It will be very useful in future projects to use the colors and define them as variables. In this way from the root you can manage with a single change the colors of several elements. This is also useful in using fonts if you want to define them in root as well.

    :root {
  --main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
}

.two {
  background-color: var(--main-bg-color);
}

    I think that for now is what I can contribute to you, I congratulate you, Happy coding!!.

    Marked as helpful
    1
  • Aiqin Gu•10
    @Aiqin-GuSubmitted almost 2 years ago

    I just learned 3 weeks about html and CSS. I found it is difficult to adjust the styles especially the huge bold font which I am not sure of how to make it similar as the design. And I also don't know how to add the shopping cart. The one I used is a unicode which is not the designed look. Hope I can learn more from others and get all above correct in the challenge.

    Product Preview Card with HTML and CSS

    2
    Felipe Salazar•140
    @andressalazar08Posted almost 2 years ago

    @Aiqin-Gu Hi Aigin,

    Let me first congratulate you on submitting the challenge. This is the start of something big for you if you review and improve your solution. I've been going through your code and can suggest a few things.

    -Take into account the warnings that the Frontend Mentor platform tells you. For example, one of them is that you should not include a <p> tag inside an <h2> tag.

    -In the Readme of the repo you have a link that is not well related.

    -All the content is inside the body. for this reason the page extends to the entire screen. You must use the <div> tag appropriately to include the elements to be displayed there. It defines a division or a section in an HTML document.

    -In general I would recommend creating a section for the main card first. Manage to position it in the center of the screen and then, create within it two additional sections that allow you to manage the image and the description and price of the product.

    -I see that you mix the use of pixels and rem for units of length in your code. Always try to use relative measures like rem. In that case 1rem==16px which is the default value. If you need to make any changes in the units of length, it will be easier for you to work with relative units.

    -One aspect that will help you a lot in your projects with Frontend Mentor is the use of the definition of color or font variables in the root.

    :root {
  --main-bg-color: brown;
  --color-for-text:  hsl(0, 0%, 100%);
 }

.one {
   background-color: var(--main-bg-color);
}

.two{
  color: var(--color-for-text);

}

    You can also review the solutions of other members of the community to train and improve.

    For now you can start with these suggestions, I hope they are useful for you.

    Best regards, Felipe

    Marked as helpful
    1
  • Felipe Salazar•140
    @andressalazar08Posted almost 2 years ago

    Hi Simone,

    Great Solution, I also addresses this challenge and I would like to suggest some things that you can check.

    -Follow the recommendation to customize the Readme on your github. In this way you will ensure that those who visit your github can understand what the project is about.

    -Check the warnings. One of them refers to the image. All images must have an alt="" to describe it in case browsers can't render it. It also helps the positioning and description of your site for screen readers.

    -Use the length units in the relative way. Try to use rem, it has a default correspondence with pixels 1rem == 16px. If you need to make a change to the default value, you can do it from the html tag. I leave you an article from the Docs that explains about the subject: https://developer.mozilla.org/en-US/docs/Web/CSS/length

    -One aspect that will help you a lot in your projects with Frontend Mentor is the use of the definition of color or font variables in the root.

    :root {
  --main-bg-color: brown;
  --color-for-text:  hsl(0, 0%, 100%);
 }

.one {
   background-color: var(--main-bg-color);
}

.two{
  color: var(--color-for-text);

}
    • Identifiers (including element names, classes, and IDs in selectors) are case-sensitive in css. Take that in mind when you define your clasess in the html.

    I guess that is for now. Happy coding!!.

    Marked as helpful
    0
  • Felipe Salazar•140
    @andressalazar08Posted almost 2 years ago

    Hi Friend, I congratulate you on the project. I have done this same project and there are a few things I would like to help you improve.

    -The repository would be more eye-catching if you edit the Readme to better present the visitor. Also share the links in the Readme so everyone can check your solution.

    -The images must have an alt="some description" to improve the position in search engines and in case is not rendered by web browsers.

    -You can try replacing the <h6>0.041ETH</h6> tag with a <p class="price-days-p"> and style it
    .price-days-p{ font-size: 1rem; } In this way you can better control the font-size

    -Try to use relative length units like rem instead of px. In this way you can alter the size of the fonts if you change it in the root in a global way. For example font-size: 1rem means 16px. I share with you this article to see why. https://wisdmlabs.com/blog/css-fixed-relative-units-measurement-font-size/

    -To be close to the design the box-shadow on the card is not necessary.

    -You need to add the hover effect on the image. You can do this by using a div with background-image: none; then in the hover effect you can add the opacity required. something like this:

    .hidden-image:hover{
    background-image: url("images/icon-view.svg");
    background-color: var(--Cyan);
    opacity: 0.5;
}

    That would be all, have a nice day. Happy coding!!

    Marked as helpful
    0