@FrontEndHighRoller
Posted
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 inem
unit - it scales with the text sizeLine-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 aclass
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.