week1/Order desktop #46
Conversation
…and add new index.html
…homework into order-desktop
There was a problem hiding this comment.
Well done. The design looks nice. The CSS can be optimized quite a lot, tho. There are many properties that are not setting anything or are introducing unnecessary limitations in width and height. Have a look at those.
You are welcome to make corrections and then merge to your own repositories main branch.
There was a problem hiding this comment.
A big part of the Front-end Development craft is connected to performance optimization. This is not only related to the code, but often to all other assets. The images can be optimized in multiple ways.
- they can be resized in a more fitting way. You would avoid loading a 1200 x 1200 px image in a container that might be just 250 x 250 px
- they can be compressed
- they can be exported in a more efficient format as lets say WebP
To achieve some of those improvements you can explore tools as TinyPNG and Squoosh.
There was a problem hiding this comment.
You can delete this file, as it's not used anywhere in your HTML.
| <header> | ||
| <h1>ready to pay</h1> | ||
| <p>Fill in your payment details</p> | ||
| </header> |
| <p class="total">Total</p> | ||
| <p class="per">$333/month</p> | ||
| </div> | ||
| <hr class="order-line"> |
There was a problem hiding this comment.
This can be done a bit more simple. Instead of a <hr> tag you could use border-top: 2px solid white; on the .row2 div ;)
| width: 55px; | ||
| height: 20px; |
| font-family: Arial; | ||
| font-size: 18px; | ||
| font-weight: 400; | ||
| line-height: 20.7px; |
There was a problem hiding this comment.
Avoid using fractions of a pixel, as browsers might round differently - some up, others down, and then your design won't look the same across browsers. Us for example either 20px or 21 here.
| .total-bold { | ||
| width: 55px; | ||
| height: 20px; | ||
| top: 81px; | ||
| left: 307px; | ||
| gap: 0px; | ||
| font-family: Arial; | ||
| font-size: 18px; | ||
| font-weight: 700; | ||
| line-height: 20.7px; | ||
| text-align: left; | ||
| } |
There was a problem hiding this comment.
Some properties don't take any effect as they are already set, others don't work as they take effect only on a special display type. Toggle on and off in the browser inspector to see what can be deleted.
| text-align: left; | ||
| } | ||
|
|
||
| .per { |
There was a problem hiding this comment.
Please, use more descriptive class names.
| width: 55px; | ||
| height: 20px; | ||
| top: 81px; | ||
| left: 1012px; | ||
| gap: 0px; |
There was a problem hiding this comment.
Using the previous comments, review the rest of your CSS and see what could be fixed. I see the same repeated issues.
No description provided.