Skip to content
OverviewSolutions
6
Comments
4
devkhrmnturk
@devkhrmnturk

All comments

  • tomhaeck•120
    @tomhaeckSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    CSS variables can be scoped globally by declaring them in a :root pseudo-element.

    Do not forget to do a CSS reset for cross-browser compatibility. ::before and ::after are pseudo-elements, as compared to :root which is a pseudo-class.

    *, *::before, *::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

    The font properties that are generally used in your document should be declared as generally as possible, i.e. in the `` element.

    Line height in percentage is the line height in pixels divided by the current font-size.

    To center the product card in the element, the element is declared a CSS flexbox. There are then two ways to center the card within.

    /* declaration of centering on the child element */
body {
  height: 100vh;
  display: flex;
}

.card {
  margin: auto;
}

/* declaration of centering on the parent element */
body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center; 
}

.card {
}

    For an `` element, if you set either one of the CSS width or height to a fixed width, and the other one is set to auto, then the aspect ratio of the image is preserved. When both the CSS width and height are fixed, use object-fit: cover to make sure that the aspect ratio of the image is preserved and that it covers the full area.

    Note that when spacing the items in the product info flexbox using justify-content: space-between, there is a small misalignment between our solution and the desktop design's jpg. This is solved by adding an ad hoc margin-top: -16px between product subtitle and product title.

    Media queries are used to change the layout of the product card for mobile screens, e.g.

    @media all and (max-width: 500px) {
    .product {
        flex-direction: column;
    }
}

    The .attribution element is positioned absolutely with respect to the `` element, using position: absolute and bottom: 0.

    What challenges did you encounter, and how did you overcome them?

    When using Google fonts, you only need to import the Google font URL to have the font-family name available. Importing the font URL returns a stylesheet that has declared the font-family name for you. This is in contrast to when you want to import a local font file (e.g. .ttf) yourself.

    /* Google font URL */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

p {
  font-family: Montserrat, sans-serif;
}

/* local font file */
@font-face {
  font-family: whatever-name;
  src: url("assets/fonts/local-file.ttf");
}

p {
  font-family: whatever-name, sans-serif;
}

    We use two different ways to vertically align inline elements with respect to one another:

    .product-price-original {
  vertical-align: super;
}

/* vs */

.product-add-to-cart {
  display: flex;
  align-items: center;
}

    Note that the src attribute of an `` element can be changed dynamically using CSS:

    .product-image img {
  content: url("...");
}

    005-product-preview-card-component - HTML, CSS, Flexbox

    1
    devkhrmnturk•60
    @devkhrmnturkPosted about 2 months ago

    Hello, congratulations on completing the challenge, I took a look at your codes and I have a few suggestions for you, text decoration: line transition; Using the <s> or <del> tag directly instead can keep your code more semantic and simple, you can convert it to rem values ​​instead of px values, you can directly add the line -height property without units such as 1 or 1.5. You can enter values.

    0
  • devkhrmnturk•60
    @devkhrmnturkPosted about 2 months ago

    Hello, first of all, I congratulate you for your solution. I have a few suggestions for your codes. The <section> tag may be meaningful for thematic grouping, but in this project, since it is an independent content rather than the content of any element or the main content itself is a card, defining it as <main> or <article> is a good idea for semantic and code understandability. I think it will do better. At the same time, using semantically strong tags such as <header>, <section>, <footer> instead of <div> tags in the content of the card can make your code more understandable. The fact that tags are classless can make it more difficult to understand exactly which CSS properties are given to which tag. You may prefer to use simple classifications for this. You can also take a look at BEM methodology!

    0
  • devkhrmnturk•60
    @devkhrmnturkPosted about 2 months ago

    I think it is very good that you are using the REM values. You may be converting these values ​​from px. If you do so, congratulations. it is not too far from the design in general (instead of giving the padding feature in every direction, you can give it in more detail, for example: padding: 16px 16px 40px 16px; clockwise, according to the features of the given design It might make sense to implement it this way. The border-radius you use corresponds to 10px, what I see in the design is 20px (1.25 rem)) I think these are the reasons for the slight difference from the general design, the structure you have established is simple, plain and understandable. I didn't have much difficulty understanding it. This is quite nice. I think you can give the class names in a little more detail, for example (text-content / text-contents), I think it will be more understandable, seeing similar names can be confusing.

    0