Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions27Comments24

All comments

  • Priyanka Roy Choudhury• 100

    @PriyankaRC16

    Submitted

    Hi everyone!

    I hope this message finds you well.

    I have completed my fourth project on the Product Preview Card Component. These challenges are helping me build my coding skills.

    Please feel free to share your feedback for the following:

    • How can I improve the responsiveness of the design?

    • Any other feedback will be greatly appreciated. Your considered feedback is of great importance to me, and I genuinely look forward to your expert insights.

    Thank you for your time.

    Warm regards,

    Priyanka

    Product Preview Card Component using HTML and CSS

    1

    Anar• 700

    @anar-sol

    Posted

    Hello =)

    You are opening a div element before the body, it's an invalid HTML. body is supposed to be the main element containing all the content of the page.

    You can use the W3C HTML validator to check your HTML.

    Marked as helpful

    0
  • Anar• 700

    @anar-sol

    Posted

    Hello =)

    If you want to include the image as HTML content instead of using CSS background, you can use picture and source to specify different images for mobile and desktop depending on the viewport size.

    In my solution, I've set the mobile version as the default image and the desktop one starting at 640px width viewport.

    <picture>
    <source media="(min-width: 640px)" srcset="images/image-product-desktop.jpg" width="600" height="900">
    <img src="./images/image-product-mobile.jpg" alt="Gabrielle Essence Eau De Parfum bottle" width="686" height="480" class="card__image">
</picture>

    As you'll see in these MDN and web.dev articles, there are many other situations where picture and source can be useful.

    Marked as helpful

    0
  • Anar• 700

    @anar-sol

    Posted

    Hello =)

    Instead of using two separate img elements, you can use picture and source to specify different images for mobile and desktop depending on the viewport size.

    In my solution, I've set the mobile version as the default image and the desktop one starting at 640px width viewport.

    <picture>
    <source media="(min-width: 640px)" srcset="images/image-product-desktop.jpg" width="600" height="900">
    <img src="./images/image-product-mobile.jpg" alt="Gabrielle Essence Eau De Parfum bottle" width="686" height="480" class="card__image">
</picture>

    As you'll see in these MDN and web.dev articles, there are many other situations where picture and source can be useful.

    0
  • Anar• 700

    @anar-sol

    Posted

    Hello =)

    Instead of using CSS background to set the image, you can use picture and source HTML elements to specify different images for mobile and desktop depending on the viewport size.

    In my solution, I've set the mobile version as the default image and the desktop one starting at 640px width viewport.

    <picture>
    <source media="(min-width: 640px)" srcset="images/image-product-desktop.jpg" width="600" height="900">
    <img src="./images/image-product-mobile.jpg" alt="Gabrielle Essence Eau De Parfum bottle" width="686" height="480" class="card__image">
</picture>

    As you'll see in these MDN and web.dev articles, there are many other situations where picture and source can be useful.

    0
  • Anar• 700

    @anar-sol

    Posted

    Hi =)

    Instead of using CSS to change the image, you can use picture and source HTML elements to specify different images for mobile and desktop depending on the viewport size.

    In my solution, I've set the mobile version as the default image and the desktop one starting at 640px width viewport.

    <picture>
    <source media="(min-width: 640px)" srcset="images/image-product-desktop.jpg" width="600" height="900">
    <img src="./images/image-product-mobile.jpg" alt="Gabrielle Essence Eau De Parfum bottle" width="686" height="480" class="card__image">
</picture>

    As you'll see in these MDN and web.dev articles, there are many other situations where picture and source can be useful.

    Marked as helpful

    0
  • Grunt395• 40

    @Grunt395

    Submitted

    I used Flexbox for the first time in this project and struggled to center the main content of the page. Is there a best way to center the content with or without Flexbox?

    This project involved a desktop and a mobile image included. I ended up displaying both images at the same time on the page, but would hide one of them using display: none; for the respective layout. Is there a better way to display either the desktop or mobile image without having to manually hide one of them?

    Product Preview Card with HTML and CSS

    4

    Anar• 700

    @anar-sol

    Posted

    Hello =)

    Instead of using two separate img elements, you can use picture and source to specify different images for mobile and desktop depending on the viewport size.

    In my solution, I've set the mobile version as the default image and the desktop one starting at 640px width viewport.

    <picture>
    <source media="(min-width: 640px)" srcset="images/image-product-desktop.jpg" width="600" height="900">
    <img src="./images/image-product-mobile.jpg" alt="Gabrielle Essence Eau De Parfum bottle" width="686" height="480" class="card__image">
</picture>

    As you'll see in these MDN and web.dev articles, there are many other situations where picture and source can be useful.

    Marked as helpful

    2
  • Anar• 700

    @anar-sol

    Posted

    Hello =)

    Instead of using two separate img elements, you can use picture and source to specify different images for mobile and desktop depending on the viewport size.

    In my solution, I've set the mobile version as the default image and the desktop one starting at 640px width viewport.

    <picture>
    <source media="(min-width: 640px)" srcset="images/image-product-desktop.jpg" width="600" height="900">
    <img src="./images/image-product-mobile.jpg" alt="Gabrielle Essence Eau De Parfum bottle" width="686" height="480" class="card__image">
</picture>

    As you'll see in these MDN and web.dev articles, there are many other situations where picture and source can be useful.

    Marked as helpful

    0
  • Anar• 700

    @anar-sol

    Posted

    Hi!

    • As shown by the accessibility and structure reports, you are using ids with the same value, multiple times in your code.
    • On medium viewports, the profile section isn't aligned to the top with the other blocks, is this done on purpose?
    • You have problems with the images, they're not displayed

    I hope this will help you =)

    0
  • Anar• 700

    @anar-sol

    Posted

    Hi =)

    I think you are passing too early to the 3 column layout, at 768px when there's not enough space to display the content correctly. You can remove the width: 70% from .container to let it take all the available space.

    Marked as helpful

    1
  • Adrian• 190

    @ohsite

    Submitted

    Hello community! The top image is in the of class "card__image", In desktop version it has the size of an svg image. When i try to cale it's height down for the mobile version weird things happen. Any help would be appreciated!

    Order summary components challenge using SASS

    2

    Anar• 700

    @anar-sol

    Posted

    Hello!

    What problem do you have with the card__image? If you want the image to be exactly the size of its container, add this:

    .card__image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

    MDN object-fit page: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

    0
  • Anar• 700

    @anar-sol

    Posted

    Hi!

    I haven't done this challenge yet, but I'll try to give you my opinion

    According to MDN <progress> page, this element is intended to represent the completion progress of a task. Do you think this is the most suitable element to represent the amount of storage space used? I could be wrong, but I think <meter> is more appropriate in this context.

    Concerning the style, both <pregress> and <meter> seem to be difficult to customize consistently across different browsers...I haven't looked into this subject yet.

    You can add overflow='hidden' to the <progress> element to prevent the blue bar from overflowing

    MDN progress page: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress MDN meter page: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter

    Marked as helpful

    0
  • Anar• 700

    @anar-sol

    Posted

    Hi =)

    The styling is good on large screens, but when the viewport width is <= 1000px the component become larger than the screen, because you are setting a fixed width for the container and moving to the horizontal (or desktop) style too early, when the viewport is 376px wide.

    0
  • Anar• 700

    @anar-sol

    Posted

    Hi =)

    As shown in the accessibility and structure reports, you are using the same id='column' three times. An id attribute is supposed to identify a unique element in the page. I don't think you need id for styling.

    You set the container height to 60vh, 60% of the viewport height and it becomes too high compared to the original design. Don't set a fixed height on the container, let the height be automatically calculated from the contained elements.

    If you want a certain amount of space between the elements in each column, try to use some margins / paddings or any other method to lay them out locally.

    You are also, setting each column width to 42vh, I don't think it's the best way to do.

    Why not just use a flex container, make it vertical on mobile (and perhaps tablet) and when there's enough space, make it horizontal with the same space for each column?

    1
  • Anar• 700

    @anar-sol

    Posted

    Hello! The overall styling looks good, but I have some remarks:

    • Why not use the HTML5 built-in form validation? https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation

    • You are using a simple <input type='text'> for the email, and you are not checking if it's a well formed email.

    • You use hard codded error messages in your HTML code, what would you do to report two different error messages for one entry? (supposed to be the case for the email)

    • Instead of using inline css to style error stat, you could just add a css class (with JS) when there's an error.

    Marked as helpful

    1
  • Alif• 40

    @alifjs

    Submitted

    In chrome dev tools my website looks fine in iphone Se.But in real life it doesn't. Any help regarding that would be much appreciated.

    Order Summary content

    3

    Anar• 700

    @anar-sol

    Posted

    Hello!

    • I don't think this component needs to bigger on large viewports. You can set a max-width, the same for all viewports.
    • Don't set the height for the component, but let it be automatically calculated from the content. You set it to 90vh on mobile, but it isn't sufficient to contain all the elements, the cancel button is overflowing.

    Marked as helpful

    1
  • Anar• 700

    @anar-sol

    Posted

    Hello, you've done a good job =)

    I have some suggestions:

    • On a viewport of 1023px, just before it switches to a multicolumns grid, the elements are too wide which make lines of text really too long.
    • From 1024px and above, there isn't enough space for the four columns, so some elements are too narrow.

    You can create an intermediate layout with only two columns or set a max-width on the container to restrict the element from becoming too wide.

    Marked as helpful

    0
  • Klaudia• 50

    @Haraved

    Submitted

    I'm learning so any feedback would be nice, what u guys think about code. Is it fine? :)

    Thanks in advance, have a nice day!

    Order summary component

    3

    Anar• 700

    @anar-sol

    Posted

    Hello!

    The overall styling is fine, but i have some comments:

    • As suggested in accessibility and structure reports:

      • You have to set a title for the page using <title> in the <head>, don't let it empty.

      • Images must have an alternative text using the alt attribute. If it is just a decorative image, you can let the alt attribute empty alt="".

    • I don't think main the best name for this component, why not card or order-summary-card?

    • the plan box, as named in your code, has a background color of #F7F9FF in the original design

    Marked as helpful

    1
  • Anar• 700

    @anar-sol

    Posted

    Good job, everything seems to work well.

    • I have a remark concerning the design. Compared to the original design, you have put too little space between input fields and not enough padding inside them (on mobile).

    • To make it little more challenging, you can add a real time data validation as it is entered by the user.

    • To learn more about built-in HTML5 form validation, which is very useful, I suggest you this article on MDN https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation

    Marked as helpful

    0
  • Nick Alldredge• 70

    @NickAlldredge

    Submitted

    Hello world! I wasn't sure what was the most acceptable way to add spacing to the page. For example, I used "em" in some cases, "rem" in others. Is there a best practice for when to use "em" vs. "rem" vs. "px"? Thank you!

    Order Summary Page

    1

    Anar• 700

    @anar-sol

    Posted

    Hello!

    What I'm pretty sure of is that for text, an absolute pixel value should not be used, to allow users to change the text size to suit their needs. You can use rem instead.

    Marked as helpful

    1
  • Anar• 700

    @anar-sol

    Posted

    Hello!

    • I could be wrong, but I think the block containing "Try it for free 7 days..." is a simple message, not button.

    • Do you know that you can use a specific type for input element? An input element with type="password", for example, hide the taped text, an input element with type="email" can natively check that the value entered is a valid email, etc.

    • You can validate form data, natively using built-in form validation https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation

    Marked as helpful

    0
  • Anar• 700

    @anar-sol

    Posted

    Hello!

    • I think there's a problem with small viewports (mobile). The first section content is not displayed due to this rule .typemaster__content { display: none; }

    • You use a translation to make the images appear close to the edge, but because they take more space, it creates a horizontal scrollbar. You can fix that with an overflow: hidden on their container.

    • It's good to have responsive images, I could be wrong but, isn't it better to make them responsive and respect a certain aspect ratio? At 1024px viewport, for example, the image with keyboard and glass become too long.

    I uploaded a solution to this challenge yesterday. Feel free to give me feedback and suggestions =)

    Marked as helpful

    0
  • Anar• 700

    @anar-sol

    Posted

    Hello! You can center an element by adding theses rules to its container .container { display: flex; justify-content: center; align-items: center; }

    To center the element on the screen add this rule to its container .container { min-height: 100vh; }

    Marked as helpful

    0
  • Irina• 50

    @Createira

    Submitted

    Hello everyone! I would like to know if I can make my code more semantic. I was thinking about /section/ tag, but I was not sure.

    Stats preview card component

    1

    Anar• 700

    @anar-sol

    Posted

    Hello! For the semantic, I personally used "article" tag for the card, as I saw it as an independent content. I also used a list for the stats and a heading "h2" for each stat name, not for the stat value.

    Marked as helpful

    0
  • Anar• 700

    @anar-sol

    Posted

    Hello! For the picture, I used a background with color and image, then, I used "background-blend-mode: multiply" to specify how to blend the image with the color of the background. Here's the link to the two CSS lines to achieve it: https://github.com/anar-sol/stats-preview-card-component/blob/d0c18aaa1cd1ec712b032fdba1156affec788e57/scss/style.scss#L69

    0