Skip to content
OverviewSolutions
3
Comments
2
CoconutDev13
@CoconutDev13

All comments

  • CoconutDev13•50
    @CoconutDev13Posted over 1 year ago

    Hey really great job!

    I don't know if you realized that but checked number doesn't change at all (firefox browser). Also why you let the background white? Kinda one more css line and it will feel same as the design. You didn't set any hover effect on button.

    One suggestion to improve your code is adding css variables. Not hard to use and it gives you the freedom to make adjustments easily and fast in your project. For example you might need make the orange a little bit brighter in bigger project with multiple files. It will be annoying to navigate through all the files and searching for your old color and replacing it with the new one. In case of variables you will have all the colors defined in main.css and use them whenever you want. When you get bored or your designer decide to make some changes you just edit one value in your main.css.

    Also class could have the more abstract meaning than just naming tags. For example if you have a huge project and your orange capsule shaped button is your main button component that would make more sense naming the class button instead of submit.

    NIce job, keep coding and good luck in your next projects :-)

    0
  • SixcoolZ•90
    @SixcoolZSubmitted over 1 year ago

    while working on the project, I'd difficulty in aligning summary with the other items below it. Even taking summary to the left gave me an issue at first. The figures seems is not align in my eyes.

    Results summary component using HTML and CSS only

    1
    CoconutDev13•50
    @CoconutDev13Posted over 1 year ago

    Hello, nice try and there are few easy adjustments you could do to make it way more good than it is.

    First of all you need to have a concern that websites by default are 100% responsive( or almost 100% ). No overflows, no imbalanced containers, everything works fine. When you add some constant width or height or both in order to make the page look a little bit nicer you need to have in your mind "what would happen if I resize that page" or "what would happen if I add one sentence a little bit bigger in the same component"?

    So lets analyze your summary component:

    <div class="summary-contents bg1">
  <div class="summary-contents">
    <img src="./assets/images/icon-reaction.svg" alt="rection" loading="lazy">
    <h4 class="summary-text1">Reaction</h4>
  </div> 
  <div>
    <p><span class="summary-value">80</span> / 100</p>
  </div>
</div>

    First major problem here is that you have same class summary-contents on your wrapper div and div that contains icon and title. When you add some padding to that class your left side of this component would take twice that padding and the right side would take it once. That would end up having your contents a little bit shifted to right side of your component.

    Also I see that you use space-evenly to align items. That would lead to some issues as well because it will automatically calculate space on the left and right of component because contents are different widths and you won't be able to control that space with padding. So I suggest you to use space-between instead.

    Give it a try, and let me know if that works

    Marked as helpful
    0