Skip to content
OverviewSolutions
8
Comments
6
Rafael Takano
@rafaeltakano

All comments

  • Sebastian•220
    @SebastianLakaSubmitted over 2 years ago

    What can i do better with this code? It's my first component and exercise after watching courses :D Thank you for your coments and advices.

    HTML, SASS

    2
    Rafael Takano•180
    @rafaeltakanoPosted over 2 years ago

    Hello there 👋

    Great job on getting started, please keep going! There are a few things I think it would help.

    As pointed out, we can't see your exemple on the live site, the index.html file should be at the root of your project folder.

    After you replace the index.html file to the correct place do not forget to change url locations and stylesheet links like <link rel="stylesheet" href="/css/style.css"> to the correct path.

    Your BEM looks good and the structure is correct.

    Hope this helps 🤞

    Marked as helpful
    1
  • Rafael Takano•180
    @rafaeltakanoPosted over 2 years ago

    Hello there 👋

    Great job on your solution, it looks great!

    About the accessibility issues, your html should have at least one main landmark and the page should be contained by html landmarks.

    About sass, good job using sass, you used sass nestings really well. To make it shine even more, take a look at the BEM pattern design for css.

    Hope this helps ✌

    Marked as helpful
    0
  • Brian•60
    @briansegura15Submitted over 2 years ago

    I was wondering why this code piece worked, * { margin: 0 }..... but not html { margin: 0 }.... Had a hard time finding out what was messing up my spacing lol.

    Order Summary Card with HTML and CSS

    2
    Rafael Takano•180
    @rafaeltakanoPosted over 2 years ago

    Hi there! ✌

    Great job on your solution! It looks great and it's responsive!

    About your question, the html { margin: 0 } will make the <html> tag have margin of value zero.

    using the * selector, it will set all tags the value of margin: 0, not only one tag

    Hope it helps!

    Marked as helpful
    1
  • Rafael Takano•180
    @rafaeltakanoPosted over 2 years ago

    Hello There ✌

    Great job on your solution!

    The accessibility issues at your report are about not having landmarks elements on your page, if you include it it will be fine!

    Hope it helps, happy coding 😁

    0
  • Rafael Takano•180
    @rafaeltakanoPosted over 2 years ago

    Hi, Luciano! 👋

    Nice work on this challenge! ✌ Your solution is responsive and looks great! 👍

    About BEM, it is a methodology that has Blocks, Elements and Modifiers (B.E.M).

    Blocks that have Elements related to it should be named [Block]__[Element]

    And only modifiers should have the double dash [Block]__[Element]--[Modifier]

    An exemple:

    //css
.button {}

.button__text {}

.button--green {}

.button--blue {}

//html
<button class="button button--green">
      <p class="button__text"> Green Button </p>
</button>

<button class="button button--blue">
      <p class="button__text"> Blue Button </p>
</button>

    I hope this helps!

    Marked as helpful
    2
  • Ginaldo Capistrano•70
    @gcapistranoSubmitted over 2 years ago

    Hello, everybody! There is a problem with my solution, besides any others that you'll find, that is, when shrinking the window to make the transition to the mobile view, the left side of the container disappears swallowed by the window side. I've tried to use the overflow property but it didn't work. Any help will be welcome!

    Pure HTML & CSS solution.

    2
    Rafael Takano•180
    @rafaeltakanoPosted over 2 years ago

    Hello there ✌

    To fix the part of the container gonne missing at moblie view, you'll need to refactor your code to work without the position absolute on the class .container

    And the accessibility issue at the report card, its only about the .attribution class that it is not wrapped with a landmark tag, wrap it on a <footer> and it will be fixed!

    Hope It helps!

    Marked as helpful
    1