Skip to content

london | may2025 | mohammad | aldali | ask question #322

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

london | may2025 | mohammad | aldali | ask question #322

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 52 additions & 4 deletions asking-questions/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ <h3>🧪 The scientific method</h3>
<h3>🎩 Our formal language</h3>
<ol>
<li>What I <strong>did</strong></li>

<li>What I <strong>expected</strong></li>
<li>What actually <strong>happened</strong></li>
</ol>
Expand Down Expand Up @@ -70,8 +71,12 @@ <h2>
<li id="user" class="problem">
<p>
If you delete all the CSS from the styles.css in the Sources
panel, what styles will be applied to this page?
</p>
panel, what styles will be applied to this page?</p>
<ol>
<li><strong> what i did</strong> i remove all the css from style.css Using the browser tools.</li>
<li><strong>what i expected</strong> i expected the page to look plain and no color no design.</li>
<li><strong> what actually happened</strong> the page used default styles like (white background,black text, normal font)</li>
</ol>
</li>
<li id="infinite" class="problem">
<p>
Expand All @@ -80,31 +85,74 @@ <h2>

Why isn't this paragraph red?
</p>
</li>
<ol>
<li><strong> whai i did</strong> i write the code on css </li>
<li>what i <strong> expected</strong> i expected the second paragraph inside li will be red</li>
<li>what actually <strong> happened</strong> the paragraph was not red because the li was not actually the nth-child(2)</li>
</ol>

<li id="fallback" class="problem">
<p>What colour is this text?</p>
<ol>
<li>what i <strong>did</strong> i checked the css code</li>
<li>what i <strong>expected</strong> i expected it will be black</li>
<li> what actually <strong>happened</strong> actually it's black but not because the color inside css<br>
was <code>color:var(--black);</code> but it shown the default style of the page because the root dose not has(--black) value </li>
</ol>

</li>
<li id="boolean" class="problem">
<p>There's a transition on this text. Why isn't it working?</p>
<ol>

<li>what i <strong>did</strong> i search on css code </li>
<li>what i <strong>expected</strong> i expected not working because of <code>display:none;</code></li>
<li> what actually <strong>happened</strong> it happened what i expected because i do searching online about this transition code</li>
</ol>
</li>
<li id="grid" class="problem">
<p>Why <em>isn't</em> this paragraph a grid item?</p>
<ol>
<li><strong> what i did</strong> i try to resolve the problem by searching</li>
<li><strong> what i expected</strong> i expected the paragraph to be a grid item?</li>
<li><strong> the paragraph was not a grid item because its parent does not have display: grid;</strong></li>
</ol>
</li>
<li id="grid" class="problem">
<li id="grid-1" class="problem">
<p>
Before running Lighthouse, write down the errors it will give you
on this page. Now
<a href="https://validator.w3.org/">validate the HTML</a>.
</p>
<ol>
<li><strong> what i did</strong> i checked the code in index.html</li>
<li><strong> what i expected</strong> i expected 1 error that was i did it </li>
<li><strong> what actually happened</strong> i found 3 errors and i fixe them 2 from my side and one it was two li it has same id</li>
</ol>
</li>
<li id="hundred" class="problem">
<p>This text is 100% width. 100% of what?</p>
<ol>
<li><strong>What I did:</strong> I checked the CSS and saw that the element has width: 100%.</li>
<li><strong>What I expected:</strong> I expected the element to fill the whole page.</li>
<li><strong>What actually happened:</strong> The element filled 100% of its parent container, not the whole page. Width: 100% means 100% of the parent element's width.</li>
</ol>
</li>
<li id="important" class="problem">
<p>
If you add the rule <code>!important</code> to line 8 of
styles.css, what colour will this text be? Why?
</p>
<ol>
<li><strong>What I did:</strong> I added <code>!important</code> to the color rule in line 8 of styles.css, targeting the element with id="important".</li>

<li><strong>What I expected:</strong> I expected the text inside the element to turn red, because I used <code>!important</code> which should override other styles.</li>

<li><strong>What actually happened:</strong> The text did not change color because the rule was targeting the &lt;li&gt; only, not the &lt;p&gt; tag.
The color from another rule (like <code>#important p { color: var(--ink); }</code>) was still applied. To fix it,
I changed the rule to <code>#important p { color: red !important; }</code> and then the text became red.</li>
</ol>

</li>
</ul>
</details>
Expand Down
12 changes: 6 additions & 6 deletions asking-questions/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ Here are all the rules we are
looking at in this workshop
=========================== */
/* What would happen if you added !important to this color:red */
#important {
color: red;
#important {
color: red !important;
}
#important p {
color: var(--ink);
Expand All @@ -19,20 +19,20 @@ main ul {
#infinite {
color: var(--ink);
}
.problems li.problem:nth-child(2) {
.problems li.problem:nth-child(2) p {
color: red;
}
#boolean {
min-height: 1.5em;
}
#boolean p {
#boolean p{
opacity: 1;
transition: opacity 0.3s;
transition: opacity 2s;
display: block;
}
#boolean:hover p,
#boolean:focus p {
display: none;

opacity: 0;
}
#fallback {
Expand Down