diff --git a/asking-questions/index.html b/asking-questions/index.html index d307abb9..229a95ae 100644 --- a/asking-questions/index.html +++ b/asking-questions/index.html @@ -26,6 +26,7 @@

🧪 The scientific method

🎩 Our formal language

  1. What I did
    2. +
  2. What I expected
  3. What actually happened
@@ -70,8 +71,12 @@

  • If you delete all the CSS from the styles.css in the Sources - panel, what styles will be applied to this page? -

    + panel, what styles will be applied to this page?

    +
      +
    1. what i did i remove all the css from style.css Using the browser tools.
      2. +
    2. what i expected i expected the page to look plain and no color no design.
      3. +
    3. what actually happened the page used default styles like (white background,black text, normal font)
      4. +

  • @@ -80,31 +85,74 @@

    Why isn't this paragraph red?

    -

    • +
      +
    1. whai i did i write the code on css
      2. +
    2. what i expected i expected the second paragraph inside li will be red
      3. +
    3. what actually happened the paragraph was not red because the li was not actually the nth-child(2)
      4. +
    +

  • What colour is this text?

    +
      +
    1. what i did i checked the css code
      2. +
    2. what i expected i expected it will be black
      3. +
    3. what actually happened actually it's black but not because the color inside css
      + was color:var(--black); but it shown the default style of the page because the root dose not has(--black) value
      4. +
    +

  • There's a transition on this text. Why isn't it working?

    +
      + +
    1. what i did i search on css code
      2. +
    2. what i expected i expected not working because of display:none;
      3. +
    3. what actually happened it happened what i expected because i do searching online about this transition code
      4. +

  • Why isn't this paragraph a grid item?

    +
      +
    1. what i did i try to resolve the problem by searching
      2. +
    2. what i expected i expected the paragraph to be a grid item?
      3. +
    3. the paragraph was not a grid item because its parent does not have display: grid;
      4. +
    • -
  • +

  • Before running Lighthouse, write down the errors it will give you on this page. Now validate the HTML.

    +
      +
    1. what i did i checked the code in index.html
      2. +
    2. what i expected i expected 1 error that was i did it
      3. +
    3. what actually happened i found 3 errors and i fixe them 2 from my side and one it was two li it has same id
      4. +

  • This text is 100% width. 100% of what?

    +
      +
    1. What I did: I checked the CSS and saw that the element has width: 100%.
      2. +
    2. What I expected: I expected the element to fill the whole page.
      3. +
    3. What actually happened: The element filled 100% of its parent container, not the whole page. Width: 100% means 100% of the parent element's width.
      4. +

  • If you add the rule !important to line 8 of styles.css, what colour will this text be? Why?

    +
      +
    1. What I did: I added !important to the color rule in line 8 of styles.css, targeting the element with id="important".
      2. + +
    2. What I expected: I expected the text inside the element to turn red, because I used !important which should override other styles.
      3. + +
    3. What actually happened: The text did not change color because the rule was targeting the <li> only, not the <p> tag. + The color from another rule (like #important p { color: var(--ink); }) was still applied. To fix it, + I changed the rule to #important p { color: red !important; } and then the text became red.
      4. +
    +
    • diff --git a/asking-questions/styles.css b/asking-questions/styles.css index 4959f39d..30996f6e 100644 --- a/asking-questions/styles.css +++ b/asking-questions/styles.css @@ -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); @@ -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 {