6th Project - Product Preview Card Component

Community feedback

• 

  FrontEndHighRoller•170

  @FrontEndHighRollerPosted 11 months ago

  Honestly, it was kind of a challenge. I was able to finish the project with help from community members and it helped me learn a lot of new things.

  What I have learned:

  1. <picture> tag in HTML Really useful when you use multiple images on the webpage and want to display each on a certain page width breakpoint. One of the attributes inside <souce> tag is "media", this is where you can set the width of the page where you want the certain picture to be shown (like media query, but in HTML).

  2. handy <s> tag in HTML if you wrap a text inside the whole text will be crossed horizontally with the line. Same as you would apply property text-decoration: line-through in CSS

  3. column-gap: CSS property equal space between elements in the container applies on the container with display: flex together with gap property No need to write extra code writing separately padding/margin on each of the child elements

  4.object-fit: cover CSS property We didn't have to use it in this project, but when I was trying to tame moving images I discovered this great property, which keeps the aspect ratio the same when the image is resized (It might crop the edges, but the image is not squeezed on the sides when manipulating)

  5.Icon image - next to the text HTML

  • HTML <button class="button"><span class="cart-icon"></span>Add to Cart</button>
  • CSS: .button{display: flex; align-items; justify-content: center; column-gap: 0.31rem; } .cart-icon{content: url(images/icon-cart.svg); height: 0.87rem;} make sure you apply column gap instead of padding to .cart-icon

  6. replace absolute units px with relative units rem em for accessibility reasons

  • especially in HTML
  • media queries
  • font-size
  • line-height

  7.When to use <button> and when <a>

  • <button> tag is only when action is needed
  • <a> tag used when you need to redirect to the other page

  8. Only accessible for screen readers, not visible on the page HTML

  • HTML <span class="sr-only">Old price</span> <s class="crossed-price"> $169.99</s>
  • CSS: .sr-only { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

  9. <hgroup> element creates a more semantically structured heading structure

  • introduced in HTML5 to group a set of <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> elements when they are part of a heading.

  10. how to use units property values properly

  • Letter spacing property in em unit - it scales with the text size
  • Line-height property - use unitless values or % (line-height: 1.5)

  11. CSS reset Use CSS reset every time, it will help you style easier

  12. use class selectors, not element selectors for styling

  • (do not target div, but create a class and then in CSS target the class)

  13. max-width property, (In responsive design absolute MUST!)

  • instead of defining height, width, and margin on .container in media queries

  14. two divs inside one container in one line using flexbox

  • if you want 2 divs inside the container to be equally spread use flex: 0 1 50%

  15. flexbox works best on its direct children

  • make sure when applying Flexbox, only its direct children work as expected. it might not work properly on grandchildren.

  0