Step 16

<section role="region" aria-labelledby="student-info"><h2 id="student-info">Student Inf
o</h2></section>
Step
          <li><a href="#student-info">INFO</a></li>
To link to: <section role="region" aria-labelledby="student-info">
          <h2 id="student-info">Student Info</h2>
Step20
<section role="region" aria-labelledby="student-info">
           <h2 id="student-info">Student Info</h2>
            <div class="info">
             <label for="students-name">Name: </label>
             <input id="students-name" />
            </div>
         </section>
Step 23
Arguably, D.O.B. is not descriptive enough. This is especially true for visually impaired
users. One way to get around such an issue, without having to add visible text to the
label, is to add text only a screen reader can read.
            <label for="birth-date">D.O.B.<span class="sr-only"></span></label>

Step 25
The .sr-only text is still visible. There is a common pattern to visually hide text for only
screen readers to read.
This pattern is to set the following CSS properties:
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
Use the above to define the sr-only class.

Step 28
Give each fieldset an adequate name attribute.
            <fieldset name="question-1" class="question">
Step 32
<div class="question-block">
            <p>2</p>
            <fieldset class="question" name="html-question-two">
              <legend>
                A label element nesting an input element is required to have a
                for attribute with the same value as the input's id
              </legend>
              <ul class="answers-list">
                <li>
                  <label for="q2-a1">
                    <input type="radio" name="q2-a1" id="q2-a1" value="true" />
                    True
                  </label>
                </li>
                <li>
                  <label for="q2-a2">
                    <input type="radio" name="q2-a1" id="q2-a2" value="false" />
                    False
                  </label>
                </li>
              </ul>
            </fieldset>
          </div>
Step 33
To prevent unnecessary repetition, target the before pseudo-element of the p element,
and give it a content property of "Question #".

p:before {
  content: "Question #"
}

Step 49
On small screens, the unordered list in the navigation bar overflows the right side of the
screen.
Fix this by using Flexbox to wrap the ul content. Then, set the following CSS properties
to correctly align the text:
align-items: center;
padding-inline-start: 0;
margin-block: 0;
height: 100%;

step 56

.info input, .info label {
  display: inline-block;
  text-align: right;
}
.info input {
  width: 50%;
  text-align: left;
}
.info label {
  width: 10%;
  min-width: 55px;
}
Step 8
HTML tables use the caption element to describe what the table is about.
The caption element should always be the first child of a table, but can be positioned
with the caption-side CSS property.
Add a caption element to your first table, and give it the text Assets.

          <table>
            <caption>Assets</caption>
          </table>

Step 11
Within each of your new th elements, nest a span element with the class set to sr-
only year. Give them the following text (in order): 2019, 2020, and 2021.

Give your third th element the class attribute set to current.

Leave the td element empty. This element exists only to ensure your table has a four-
column layout and associate the headers with the correct columns.

<thead>
              <tr>
                <td></td>
                <th><span class=" year sr-only">2019</span></th>
                <th><span class=" year sr-only">2020</span></th>
                <th><span class="current year sr-only">2021</span></th>
              </tr>
            </thead>

Step 52
Create a selector to target your td elements within your table body. Give them a width to
fill the viewport, with a minimum and maximum of 4rem. This approach ensures that the
width is fixed, whereas setting width specifically would allow the elements to shrink to
the container (because we are using flexbox).

tbody td {
  width: 100vw;
  min-width: 4rem;
  max-width: 4rem;
}

Step 53
Now target the th elements within your table body, and give them a width of the entire
container, less 12rem.

tbody th {
  width: calc(100% - 12rem);
}

Step 56
The key difference between tr[class="total"] and tr.total is that the first will
select tr elements where the only class is total. The second will select tr elements
where the class includes total.

Learning intermediate CSS by building a Picasso Painting

Learn css variables by building a city skyline

Step 40
Gradients in CSS are a way to transition between colors across the distance of an
element. They are applied to the background property and the syntax looks like this:
gradient-type(
color1,
color2
);
In the example, color1 is solid at the top, color2 is solid at the bottom, and in between
it transitions evenly from one to the next. In .bb1a, add a gradient of type linear-
gradient to the background property with --building-color1 as the first color
and --window-color1 as the second.
Step 51
Gradient transitions often gradually change from one color to another. You can make the
change a solid line like this:
linear-gradient(
var(--first-color) 0%,
var(--first-color) 40%,
var(--second-color) 40%,
var(--second-color) 80%
);
Add a linear-gradient to .bb2b that uses --building-
color2 from 0% to 6% and --window-color2 from 6% to 9%.

Step 113
At the top of the sky gradient color list, where you would put a direction for the gradient;
add circle closest-corner at 15% 15%,. This will move the start of the
gradient to 15% from the top and left. It will make it end at the closest-corner and it
will maintain a circle shape. These are some keywords built into gradients to describe
how it behaves.
.sky {
  background: radial-gradient(
      circle closest-corner at 15% 15%,
      #ffcf33,
      #ffcf33 20%,
      #ffff66 21%,
      #bbeeff 100%
    );
}
Learn css grid by building a magazine
Step 8
The Referer HTTP header contains information about the address or URL of a page
that a user might be visiting from. This information can be used in analytics to track how
many users from your page visit freecodecamp.org, for example. Setting the rel attribute
to noreferrer omits this information from the HTTP request. Give your a element
a rel attribute set to noreferrer.

<a href="https://freecodecamp.org" rel="noreferrer" target="_blank"
              >freeCodeCamp</a
            >

Learn css animation by building a Ferris Wheel

Step 8
The transform-origin property is used to set the point around which a CSS
transformation is applied. For example, when performing a rotate (which you will do
later in this project), the transform-origin determines around which point the
element is rotated.
Give the .line selector a transform-origin property of 0% 0%. This will offset the
origin point by 0% from the left and 0% from the top, setting it to the top left corner of the
element.
.line {
  background-color: black;
  width: 50%;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
 transform-origin: 0% 0%;}

Step 16
The @keyframes at-rule is used to define the flow of a CSS animation. Within
the @keyframes rule, you can create selectors for specific points in the animation
sequence, such as 0% or 25%, or use from and to to define the start and end of the
sequence.
@keyframes rules require a name to be assigned to them, which you use in other rules to
reference. For example, the @keyframes freeCodeCamp { } rule would be
named freeCodeCamp.
Time to start animating. Create a @keyframes rule named wheel