Sebastian• 160
@SebastianLaka
Submitted
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.
Rafael Takano
@rafaeltakano
All comments
- Rafael Takano• 180
@rafaeltakano
Posted
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 - Alessio• 140
@APdev88
Submitted
Did I use Sass well?
Rafael Takano• 180@rafaeltakano
Posted
Hello there 👋
Great job on your solution, it looks great!
About the accessibility issues, your
htmlshould have at least one main landmark and the page should be contained byhtmllandmarks.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
@briansegura15
Submitted
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.
Rafael Takano• 180@rafaeltakano
Posted
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 ofmargin: 0, not only one tagHope it helps!
Marked as helpful
1 - Daniel Dantas• 20
@DaniDanis
Submitted
You have some tips to me ? I want to learn more <3
Rafael Takano• 180@rafaeltakano
Posted
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 - PLuciano Lima• 1,290
@LucianoDLima
Submitted
Any feedback is welcome.
I tried to implement the BEM method but still not sure if that's how it works, so I'll keep working on that
Rafael Takano• 180@rafaeltakano
Posted
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 @gcapistrano
Submitted
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!
Rafael Takano• 180@rafaeltakano
Posted
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
.containerAnd the accessibility issue at the report card, its only about the
.attributionclass 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
