practice htm and css#198
Conversation
devmentor-pl
left a comment
devmentor-pl
left a comment
There was a problem hiding this comment.
Sebastianie,
Kod wygląda dobrze! 👍
Trzeba jedynie poprawić zadanie 03 i popracować jeszcze trochę nad BEM :)
Szczegóły znajdziesz w komentarzach :)
| <li><a href="./">Element 1</a></li> | ||
| <ul> |
There was a problem hiding this comment.
Tutaj uwaga na zagnieżdżenie. Zawsze kolejny ul jest wew. li tj. <ul> <li> <a>...</a> <ul> ... tak jak robiłeś to wyżej.
| <span>Sebastian Pietrzykowski</span> | ||
| </div> | ||
|
|
||
| <div> |
There was a problem hiding this comment.
Często też dla img używa się figurę zamiast zwykłego div
| <div> | ||
| <p> | ||
| Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse | ||
| reprehenderit expedita rerum, voluptatum non quidem aliquam eaque | ||
| hic amet quam? | ||
| </p> | ||
| </div> | ||
| <div> | ||
| <p>Sylvester Stallone</p> | ||
| <p>data utworzenia</p> | ||
| </div> |
There was a problem hiding this comment.
Osobiście napisałbym to tak:
<article>
<p>komentarz</p>
<footer>
<a rel="author"></a>
<time datetime="2008-02-14 20:00">wczoraj</time>
</footer>
<article>
article- bo komentarz to niezależny element|footer- bo to element mniej istotny - dodatek do treścirel="author"- wskazuje, że to autortime- tworzę jasny znacznik czasowy dla robotów wyszukiwarek
| height: 230px; | ||
| } No newline at end of file | ||
| height: 230px; | ||
| } |
| .parent--inline-block { | ||
| display: flex; | ||
| } | ||
| .parent--float { | ||
| display: flex; | ||
| } | ||
| .parent--flexbox { | ||
| display: flex; |
There was a problem hiding this comment.
Każdy z tych elementów, miał być pozycjonowany we wskazany sposób tj. inline-block czy float, a nie zawsze flexbox - trzeba poprawić ;)
| <li class="nav__list--item menu__display"> | ||
| <a href="#items">Items <span class="arrow-down">▼</span></a> | ||
|
|
||
| <ul class="nav__under"> |
There was a problem hiding this comment.
Tutaj ul-le są dobrze zagnieżdżone! 👍
| /* Remove details summary webkit styles */ | ||
| ::-webkit-details-marker { | ||
| display: none; | ||
| } No newline at end of file |
| <li class="nav__list--under menu__display--right"> | ||
| <a href="">Item 2<span class="arrow-right">▶</span></a> | ||
| <ul class="nav__side"> | ||
| <li class="nav__list--side"><a href="">Item 2.1</a></li> |
There was a problem hiding this comment.
Modyfikator z BEM sam nie występuje, musi być też element tj. cała klasa powinna wyglądać tak: nav__list nav__list--side. Tutaj znajdziesz więcej informacji: https://devmentor.pl/b/metodologia-bem-w-css-i-sass
| <div class="header__nav--logo"></div> | ||
| <div class="header__nav--menu"></div> |
There was a problem hiding this comment.
Podobnie jak wcześniej Modyfikator z BEM nie występuje sam, bez Elementu czy Blocku.
| } | ||
| .section__about-us--two { | ||
| width: 50%; | ||
| height: 40vh; |
There was a problem hiding this comment.
Lepiej używać do wysokości wartości minimalny niż sztywnych tj. min-height ponieważ jak pojawi się więcej treści to nie będą się mieścić i będzie to brzydko wyglądać.
2 participants
Hi. I have made all your five exercises.