fix(curriculum): Convert blockquote elements to triple backtick syntax for Responsive Web Design (#35993)
* fix: converted blockquotes to code fences
This commit is contained in:
Randell Dawson
committed by
Oliver Eyton-Williams
Oliver Eyton-Williams
parent
08c4807b09
commit
df8659ab8c
@ -19,7 +19,11 @@ The <code>box-shadow</code> property takes values for
|
||||
The <code>blur-radius</code> and <code>spread-radius</code> values are optional.
|
||||
Multiple box-shadows can be created by using commas to separate properties of each <code>box-shadow</code> element.
|
||||
Here's an example of the CSS to create multiple shadows with some blur, at mostly-transparent black colors:
|
||||
<blockquote>box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);</blockquote>
|
||||
|
||||
```css
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -8,7 +8,13 @@ videoUrl: 'https://scrimba.com/c/cEDaDTN'
|
||||
## Description
|
||||
<section id='description'>
|
||||
You can specify the height of an element using the <code>height</code> property in CSS, similar to the <code>width</code> property. Here's an example that changes the height of an image to 20px:
|
||||
<blockquote>img {<br> height: 20px;<br>}</blockquote>
|
||||
|
||||
```css
|
||||
img {
|
||||
height: 20px;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -9,7 +9,13 @@ videoUrl: 'https://scrimba.com/c/cakRGcm'
|
||||
<section id='description'>
|
||||
This challenge will touch on the usage of pseudo-classes. A pseudo-class is a keyword that can be added to selectors, in order to select a specific state of the element.
|
||||
For example, the styling of an anchor tag can be changed for its hover state using the <code>:hover</code> pseudo-class selector. Here's the CSS to change the <code>color</code> of the anchor tag to red during its hover state:
|
||||
<blockquote>a:hover {<br> color: red;<br>}</blockquote>
|
||||
|
||||
```css
|
||||
a:hover {
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -8,7 +8,13 @@ videoUrl: 'https://scrimba.com/c/cvVLPtN'
|
||||
## Description
|
||||
<section id='description'>
|
||||
You can specify the width of an element using the <code>width</code> property in CSS. Values can be given in relative length units (such as em), absolute length units (such as px), or as a percentage of its containing parent element. Here's an example that changes the width of an image to 220px:
|
||||
<blockquote>img {<br> width: 220px;<br>}</blockquote>
|
||||
|
||||
```css
|
||||
img {
|
||||
width: 220px;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -9,7 +9,14 @@ videoUrl: 'https://scrimba.com/c/czVmMtZ'
|
||||
<section id='description'>
|
||||
CSS treats each HTML element as its own box, which is usually referred to as the <code>CSS Box Model</code>. Block-level items automatically start on a new line (think headings, paragraphs, and divs) while inline items sit within surrounding content (like images or spans). The default layout of elements in this way is called the <code>normal flow</code> of a document, but CSS offers the position property to override it.
|
||||
When the position of an element is set to <code>relative</code>, it allows you to specify how CSS should move it <i>relative</i> to its current position in the normal flow of the page. It pairs with the CSS offset properties of <code>left</code> or <code>right</code>, and <code>top</code> or <code>bottom</code>. These say how many pixels, percentages, or ems to move the item <i>away</i> from where it is normally positioned. The following example moves the paragraph 10 pixels away from the bottom:
|
||||
<blockquote>p {<br> position: relative;<br> bottom: 10px;<br>}</blockquote>
|
||||
|
||||
```css
|
||||
p {
|
||||
position: relative;
|
||||
bottom: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
Changing an element's position to relative does not remove it from the normal flow - other elements around it still behave as if that item were in its default position.
|
||||
<strong>Note:</strong> Positioning gives you a lot of flexibility and power over the visual layout of a page. It's good to remember that no matter the position of elements, the underlying HTML markup should be organized and make sense when read from top to bottom. This is how users with visual impairments (who rely on assistive devices like screen readers) access your content.
|
||||
</section>
|
||||
|
||||
@ -8,7 +8,20 @@ videoUrl: 'https://scrimba.com/c/cPpz4fr'
|
||||
## Description
|
||||
<section id='description'>
|
||||
One of the most popular shapes in the world is the heart shape, and in this challenge you'll create one using pure CSS. But first, you need to understand the <code>::before</code> and <code>::after</code> pseudo-elements. These pseudo-elements are used to add something before or after a selected element. In the following example, a <code>::before</code> pseudo-element is used to add a rectangle to an element with the class <code>heart</code>:
|
||||
<blockquote>.heart::before {<br> content: "";<br> background-color: yellow;<br> border-radius: 25%;<br> position: absolute;<br> height: 50px;<br> width: 70px;<br> top: -50px;<br> left: 5px;<br>}</blockquote>
|
||||
|
||||
```css
|
||||
.heart::before {
|
||||
content: "";
|
||||
background-color: yellow;
|
||||
border-radius: 25%;
|
||||
position: absolute;
|
||||
height: 50px;
|
||||
width: 70px;
|
||||
top: -50px;
|
||||
left: 5px;
|
||||
}
|
||||
```
|
||||
|
||||
For the <code>::before</code> and <code>::after</code> pseudo-elements to function properly, they must have a defined <code>content</code> property. This property is usually used to add things like a photo or text to the selected element. When the <code>::before</code> and <code>::after</code> pseudo-elements are used to make shapes, the <code>content</code> property is still required, but it's set to an empty string.
|
||||
In the above example, the element with the class of <code>heart</code> has a <code>::before</code> pseudo-element that produces a yellow rectangle with <code>height</code> and <code>width</code> of 50px and 70px, respectively. This rectangle has round corners due to its 25% border radius and is positioned absolutely at 5px from the <code>left</code> and 50px above the <code>top</code> of the element.
|
||||
</section>
|
||||
|
||||
@ -9,7 +9,24 @@ videoUrl: 'https://scrimba.com/c/c7amZfW'
|
||||
<section id='description'>
|
||||
When elements have a specified <code>position</code>, such as <code>fixed</code> or <code>relative</code>, the CSS offset properties <code>right</code>, <code>left</code>, <code>top</code>, and <code>bottom</code> can be used in animation rules to create movement.
|
||||
As shown in the example below, you can push the item downwards then upwards by setting the <code>top</code> property of the <code>50%</code> keyframe to 50px, but having it set to 0px for the first (<code>0%</code>) and the last (<code>100%</code>) keyframe.
|
||||
<blockquote>@keyframes rainbow {<br> 0% {<br> background-color: blue;<br> top: 0px;<br> }<br> 50% {<br> background-color: green;<br> top: 50px;<br> }<br> 100% {<br> background-color: yellow;<br> top: 0px;<br> }<br>}</blockquote>
|
||||
|
||||
```css
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
background-color: blue;
|
||||
top: 0px;
|
||||
}
|
||||
50% {
|
||||
background-color: green;
|
||||
top: 50px;
|
||||
}
|
||||
100% {
|
||||
background-color: yellow;
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -11,7 +11,23 @@ To animate an element, you need to know about the animation properties and the <
|
||||
<code>animation-name</code> sets the name of the animation, which is later used by <code>@keyframes</code> to tell CSS which rules go with which animations.
|
||||
<code>animation-duration</code> sets the length of time for the animation.
|
||||
<code>@keyframes</code> is how to specify exactly what happens within the animation over the duration. This is done by giving CSS properties for specific "frames" during the animation, with percentages ranging from 0% to 100%. If you compare this to a movie, the CSS properties for 0% is how the element displays in the opening scene. The CSS properties for 100% is how the element appears at the end, right before the credits roll. Then CSS applies the magic to transition the element over the given duration to act out the scene. Here's an example to illustrate the usage of <code>@keyframes</code> and the animation properties:
|
||||
<blockquote>#anim {<br> animation-name: colorful;<br> animation-duration: 3s;<br>}<br>@keyframes colorful {<br> 0% {<br> background-color: blue;<br> }<br> 100% {<br> background-color: yellow;<br> }<br>}</blockquote>
|
||||
|
||||
```css
|
||||
#anim {
|
||||
animation-name: colorful;
|
||||
animation-duration: 3s;
|
||||
}
|
||||
|
||||
@keyframes colorful {
|
||||
0% {
|
||||
background-color: blue;
|
||||
}
|
||||
100% {
|
||||
background-color: yellow;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
For the element with the <code>anim</code> id, the code snippet above sets the <code>animation-name</code> to <code>colorful</code> and sets the <code>animation-duration</code> to 3 seconds. Then the <code>@keyframes</code> rule links to the animation properties with the name <code>colorful</code>. It sets the color to blue at the beginning of the animation (0%) which will transition to yellow by the end of the animation (100%). You aren't limited to only beginning-end transitions, you can set properties for the element for any percentage between 0% and 100%.
|
||||
</section>
|
||||
|
||||
|
||||
@ -9,7 +9,24 @@ videoUrl: 'https://scrimba.com/c/cg4vZAa'
|
||||
<section id='description'>
|
||||
You can use CSS <code>@keyframes</code> to change the color of a button in its hover state.
|
||||
Here's an example of changing the width of an image on hover:
|
||||
<blockquote><style><br> img:hover {<br> animation-name: width;<br> animation-duration: 500ms;<br> }<br><br> @keyframes width {<br> 100% {<br> width: 40px;<br> }<br> }<br></style><br><br><img src="https://bit.ly/smallgooglelogo" alt="Google's Logo" /></blockquote>
|
||||
|
||||
```html
|
||||
<style>
|
||||
img:hover {
|
||||
animation-name: width;
|
||||
animation-duration: 500ms;
|
||||
}
|
||||
|
||||
@keyframes width {
|
||||
100% {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<img src="https://bit.ly/smallgooglelogo" alt="Google's Logo" />
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -9,7 +9,13 @@ videoUrl: 'https://scrimba.com/c/cyLP8Sr'
|
||||
<section id='description'>
|
||||
The next function of the <code>transform</code> property is <code>skewX()</code>, which skews the selected element along its X (horizontal) axis by a given degree.
|
||||
The following code skews the paragraph element by -32 degrees along the X-axis.
|
||||
<blockquote>p {<br> transform: skewX(-32deg);<br>}</blockquote>
|
||||
|
||||
```css
|
||||
p {
|
||||
transform: skewX(-32deg);
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -8,7 +8,13 @@ videoUrl: 'https://scrimba.com/c/c2MZVSg'
|
||||
## Description
|
||||
<section id='description'>
|
||||
To change the scale of an element, CSS has the <code>transform</code> property, along with its <code>scale()</code> function. The following code example doubles the size of all the paragraph elements on the page:
|
||||
<blockquote>p {<br> transform: scale(2);<br>}</blockquote>
|
||||
|
||||
```css
|
||||
p {
|
||||
transform: scale(2);
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -9,7 +9,13 @@ videoUrl: 'https://scrimba.com/c/cyLPJuM'
|
||||
<section id='description'>
|
||||
The <code>transform</code> property has a variety of functions that let you scale, move, rotate, skew, etc., your elements. When used with pseudo-classes such as <code>:hover</code> that specify a certain state of an element, the <code>transform</code> property can easily add interactivity to your elements.
|
||||
Here's an example to scale the paragraph elements to 2.1 times their original size when a user hovers over them:
|
||||
<blockquote>p:hover {<br> transform: scale(2.1);<br>}</blockquote>
|
||||
|
||||
```css
|
||||
p:hover {
|
||||
transform: scale(2.1);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
<strong>Note:</strong> Applying a transform to a <code>div</code> element will also affect any child elements contained in the div.
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user