diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.md new file mode 100644 index 0000000000..5be456e6e6 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.md @@ -0,0 +1,146 @@ +--- +id: 587d781b367417b2b2512abc +title: Adjust the background-color Property of Text +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cEDqwA6' +forumTopicId: 301032 +dashedName: adjust-the-background-color-property-of-text +--- + +# --description-- + +Instead of adjusting your overall background or the color of the text to make the foreground easily readable, you can add a `background-color` to the element holding the text you want to emphasize. This challenge uses `rgba()` instead of `hex` codes or normal `rgb()`. + +
rgba stands for:
  r = red
  g = green
  b = blue
  a = alpha/level of opacity
+ +The RGB values can range from 0 to 255. The alpha value can range from 1, which is fully opaque or a solid color, to 0, which is fully transparent or clear. `rgba()` is great to use in this case, as it allows you to adjust the opacity. This means you don't have to completely block out the background. + +You'll use `background-color: rgba(45, 45, 45, 0.1)` for this challenge. It produces a dark gray color that is nearly transparent given the low opacity value of 0.1. + +# --instructions-- + +To make the text stand out more, adjust the `background-color` of the `h4` element to the given `rgba()` value. + +Also for the `h4`, remove the `height` property and add `padding` of 10px. + +# --hints-- + +Your code should add a `background-color` property to the `h4` element set to `rgba(45, 45, 45, 0.1)`. + +```js +assert( + /(background-color|background):rgba\(45,45,45,0?\.1\)(;?}|;)/gi.test( + code.replace(/\s/g, '') + ) +); +``` + +Your code should add a `padding` property to the `h4` element and set it to 10 pixels. + +```js +assert( + $('h4').css('padding-top') == '10px' && + $('h4').css('padding-right') == '10px' && + $('h4').css('padding-bottom') == '10px' && + $('h4').css('padding-left') == '10px' +); +``` + +The `height` property on the `h4` element should be removed. + +```js +assert(!($('h4').css('height') == '25px')); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+
+
+

Alphabet

+
+

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

+
+
+ Larry Page

+ Sergey Brin +
+
+
+``` + +# --solutions-- + +```html + +
+
+
+

Alphabet

+
+

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

+
+
+ Larry Page

+ Sergey Brin +
+
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.md new file mode 100644 index 0000000000..430655f120 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.md @@ -0,0 +1,130 @@ +--- +id: 587d78a4367417b2b2512ad3 +title: Adjust the Color of Various Elements to Complementary Colors +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cWmPpud' +forumTopicId: 301033 +dashedName: adjust-the-color-of-various-elements-to-complementary-colors +--- + +# --description-- + +The Complementary Colors challenge showed that opposite colors on the color wheel can make each other appear more vibrant when placed side-by-side. However, the strong visual contrast can be jarring if it's overused on a website, and can sometimes make text harder to read if it's placed on a complementary-colored background. In practice, one of the colors is usually dominant and the complement is used to bring visual attention to certain content on the page. + +# --instructions-- + +This page will use a shade of teal (`#09A7A1`) as the dominant color, and its orange (`#FF790E`) complement to visually highlight the sign-up buttons. Change the `background-color` of both the `header` and `footer` from black to the teal color. Then change the `h2` text `color` to teal as well. Finally, change the `background-color` of the `button` to the orange color. + +# --hints-- + +The `header` element should have a `background-color` of #09A7A1. + +```js +assert($('header').css('background-color') == 'rgb(9, 167, 161)'); +``` + +The `footer` element should have a `background-color` of #09A7A1. + +```js +assert($('footer').css('background-color') == 'rgb(9, 167, 161)'); +``` + +The `h2` element should have a `color` of #09A7A1. + +```js +assert($('h2').css('color') == 'rgb(9, 167, 161)'); +``` + +The `button` element should have a `background-color` of #FF790E. + +```js +assert($('button').css('background-color') == 'rgb(255, 121, 14)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+

Cooking with FCC!

+
+
+
+

Machine Learning in the Kitchen

+

Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like fetch Pringles.

+ +
+
+

Bisection Vegetable Chopping

+

This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.

+ +
+
+
+ +``` + +# --solutions-- + +```html + +
+

Cooking with FCC!

+
+
+
+

Machine Learning in the Kitchen

+

Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like fetch Pringles.

+ +
+
+

Bisection Vegetable Chopping

+

This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.

+ +
+
+
+ +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.md new file mode 100644 index 0000000000..f89a363afb --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.md @@ -0,0 +1,118 @@ +--- +id: 587d7791367417b2b2512ab5 +title: Adjust the Height of an Element Using the height Property +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cEDaDTN' +forumTopicId: 301034 +dashedName: adjust-the-height-of-an-element-using-the-height-property +--- + +# --description-- + +You can specify the height of an element using the `height` property in CSS, similar to the `width` property. Here's an example that changes the height of an image to 20px: + +```css +img { + height: 20px; +} +``` + +# --instructions-- + +Add a `height` property to the `h4` tag and set it to 25px. + +**Note:** You may need to be at 100% zoom to pass the test on this challenge. + +# --hints-- + +Your code should change the `h4` `height` property to a value of 25 pixels. + +```js +assert( + Math.round(document.querySelector('h4').getBoundingClientRect().height) === + 25 && + /h4{\S*height:25px(;\S*}|})/.test($('style').text().replace(/\s/g, '')) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+
+
+

Google

+

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

+
+
+ Larry Page + Sergey Brin +
+
+
+``` + +# --solutions-- + +```html + +
+
+
+

Google

+

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

+
+
+ Larry Page + Sergey Brin +
+
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.md new file mode 100644 index 0000000000..308491804b --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.md @@ -0,0 +1,72 @@ +--- +id: 587d781d367417b2b2512ac8 +title: Adjust the Hover State of an Anchor Tag +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cakRGcm' +forumTopicId: 301035 +dashedName: adjust-the-hover-state-of-an-anchor-tag +--- + +# --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 `:hover` pseudo-class selector. Here's the CSS to change the `color` of the anchor tag to red during its hover state: + +```css +a:hover { + color: red; +} +``` + +# --instructions-- + +The code editor has a CSS rule to style all `a` tags black. Add a rule so that when the user hovers over the `a` tag, the `color` is blue. + +# --hints-- + +The anchor tag `color` should remain black, only add CSS rules for the `:hover` state. + +```js +assert($('a').css('color') == 'rgb(0, 0, 0)'); +``` + +The anchor tag should have a `color` of blue on hover. + +```js +assert( + code.match( + /a:hover\s*?{\s*?color:\s*?(blue|rgba\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?,\s*?1\s*?\)|#00F|rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\))\s*?;\s*?}/gi + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +CatPhotoApp +``` + +# --solutions-- + +```html + +CatPhotoApp +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md new file mode 100644 index 0000000000..9af8149dca --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md @@ -0,0 +1,129 @@ +--- +id: 587d78a4367417b2b2512ad4 +title: Adjust the Hue of a Color +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cPp38TZ' +forumTopicId: 301036 +dashedName: adjust-the-hue-of-a-color +--- + +# --description-- + +Colors have several characteristics including hue, saturation, and lightness. CSS3 introduced the `hsl()` property as an alternative way to pick a color by directly stating these characteristics. + +**Hue** is what people generally think of as 'color'. If you picture a spectrum of colors starting with red on the left, moving through green in the middle, and blue on right, the hue is where a color fits along this line. In `hsl()`, hue uses a color wheel concept instead of the spectrum, where the angle of the color on the circle is given as a value between 0 and 360. + +**Saturation** is the amount of gray in a color. A fully saturated color has no gray in it, and a minimally saturated color is almost completely gray. This is given as a percentage with 100% being fully saturated. + +**Lightness** is the amount of white or black in a color. A percentage is given ranging from 0% (black) to 100% (white), where 50% is the normal color. + +Here are a few examples of using `hsl()` with fully-saturated, normal lightness colors: + +
ColorHSL
redhsl(0, 100%, 50%)
yellowhsl(60, 100%, 50%)
greenhsl(120, 100%, 50%)
cyanhsl(180, 100%, 50%)
bluehsl(240, 100%, 50%)
magentahsl(300, 100%, 50%)
+ +# --instructions-- + +Change the `background-color` of each `div` element based on the class names (`green`, `cyan`, or `blue`) using `hsl()`. All three should have full saturation and normal lightness. + +# --hints-- + +Your code should use the `hsl()` property to declare the color `green`. + +```js +assert(code.match(/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi)); +``` + +Your code should use the `hsl()` property to declare the color `cyan`. + +```js +assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi)); +``` + +Your code should use the `hsl()` property to declare the color `blue`. + +```js +assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi)); +``` + +The `div` element with class `green` should have a `background-color` of green. + +```js +assert($('.green').css('background-color') == 'rgb(0, 255, 0)'); +``` + +The `div` element with class `cyan` should have a `background-color` of cyan. + +```js +assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)'); +``` + +The `div` element with class `blue` should have a `background-color` of blue. + +```js +assert($('.blue').css('background-color') == 'rgb(0, 0, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
+
+``` + +# --solutions-- + +```html + +
+
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.md new file mode 100644 index 0000000000..526d93f650 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.md @@ -0,0 +1,118 @@ +--- +id: 587d781b367417b2b2512abd +title: Adjust the Size of a Header Versus a Paragraph Tag +challengeType: 0 +videoUrl: 'https://scrimba.com/c/c3bRPTz' +forumTopicId: 301037 +dashedName: adjust-the-size-of-a-header-versus-a-paragraph-tag +--- + +# --description-- + +The font size of header tags (`h1` through `h6`) should generally be larger than the font size of paragraph tags. This makes it easier for the user to visually understand the layout and level of importance of everything on the page. You use the `font-size` property to adjust the size of the text in an element. + +# --instructions-- + +To make the heading significantly larger than the paragraph, change the `font-size` of the `h4` tag to 27 pixels. + +# --hints-- + +Your code should add a `font-size` property to the `h4` element set to 27 pixels. + +```js +assert($('h4').css('font-size') == '27px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+
+
+

Alphabet

+
+

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

+
+
+ Larry Page

+ Sergey Brin +
+
+
+``` + +# --solutions-- + +```html + +
+
+
+

Alphabet

+
+

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

+
+
+ Larry Page

+ Sergey Brin +
+
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.md new file mode 100644 index 0000000000..b8ea590246 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.md @@ -0,0 +1,119 @@ +--- +id: 587d78a4367417b2b2512ad5 +title: Adjust the Tone of a Color +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cEDJvT7' +forumTopicId: 301038 +dashedName: adjust-the-tone-of-a-color +--- + +# --description-- + +The `hsl()` option in CSS also makes it easy to adjust the tone of a color. Mixing white with a pure hue creates a tint of that color, and adding black will make a shade. Alternatively, a tone is produced by adding gray or by both tinting and shading. Recall that the 's' and 'l' of `hsl()` stand for saturation and lightness, respectively. The saturation percent changes the amount of gray and the lightness percent determines how much white or black is in the color. This is useful when you have a base hue you like, but need different variations of it. + +# --instructions-- + +All elements have a default `background-color` of `transparent`. Our `nav` element currently appears to have a `cyan` background, because the element behind it has a `background-color` set to `cyan`. Add a `background-color` to the `nav` element so it uses the same `cyan` hue, but has `80%` saturation and `25%` lightness values to change its tone and shade. + +# --hints-- + +The `nav` element should have a `background-color` of the adjusted cyan tone using the `hsl()` property. + +```js +assert( + code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+

Cooking with FCC!

+ +
+``` + +# --solutions-- + +```html + +
+

Cooking with FCC!

+ +
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.md new file mode 100644 index 0000000000..7ed75a1ea5 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.md @@ -0,0 +1,115 @@ +--- +id: 587d7791367417b2b2512ab4 +title: Adjust the Width of an Element Using the width Property +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cvVLPtN' +forumTopicId: 301039 +dashedName: adjust-the-width-of-an-element-using-the-width-property +--- + +# --description-- + +You can specify the width of an element using the `width` 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: + +```css +img { + width: 220px; +} +``` + +# --instructions-- + +Add a `width` property to the entire card and set it to an absolute value of 245px. Use the `fullCard` class to select the element. + +# --hints-- + +Your code should change the `width` property of the card to 245 pixels by using the `fullCard` class selector. + +```js +const fullCard = code.match(/\.fullCard\s*{[\s\S]+?[^}]}/g); +assert( + fullCard && + /width\s*:\s*245px\s*(;|})/gi.test(fullCard[0]) && + $('.fullCard').css('maxWidth') === 'none' +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+
+
+

Google

+

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

+
+
+ Larry Page + Sergey Brin +
+
+
+``` + +# --solutions-- + +```html + +
+
+
+

Google

+

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

+
+
+ Larry Page + Sergey Brin +
+
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.md new file mode 100644 index 0000000000..da2020f4d5 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.md @@ -0,0 +1,141 @@ +--- +id: 587d78a8367417b2b2512ae5 +title: Animate Elements at Variable Rates +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cZ89WA4' +forumTopicId: 301040 +dashedName: animate-elements-at-variable-rates +--- + +# --description-- + +There are a variety of ways to alter the animation rates of similarly animated elements. So far, this has been achieved by applying an `animation-iteration-count` property and setting `@keyframes` rules. + +To illustrate, the animation on the right consists of two stars that each decrease in size and opacity at the 20% mark in the `@keyframes` rule, which creates the twinkle animation. You can change the `@keyframes` rule for one of the elements so the stars twinkle at different rates. + +# --instructions-- + +Alter the animation rate for the element with the class name of `star-1` by changing its `@keyframes` rule to 50%. + +# --hints-- + +The `@keyframes` rule for the `star-1` class should be 50%. + +```js +assert(code.match(/twinkle-1\s*?{\s*?50%/g)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
+
+``` + +# --solutions-- + +```html + +
+
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.md new file mode 100644 index 0000000000..f3280fddbc --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.md @@ -0,0 +1,107 @@ +--- +id: 587d78a8367417b2b2512ae3 +title: Animate Elements Continually Using an Infinite Animation Count +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cVJDVfq' +forumTopicId: 301041 +dashedName: animate-elements-continually-using-an-infinite-animation-count +--- + +# --description-- + +The previous challenges covered how to use some of the animation properties and the `@keyframes` rule. Another animation property is the `animation-iteration-count`, which allows you to control how many times you would like to loop through the animation. Here's an example: + +```css +animation-iteration-count: 3; +``` + +In this case the animation will stop after running 3 times, but it's possible to make the animation run continuously by setting that value to `infinite`. + +# --instructions-- + +To keep the ball bouncing on the right on a continuous loop, change the `animation-iteration-count` property to `infinite`. + +# --hints-- + +The `animation-iteration-count` property should have a value of `infinite`. + +```js +assert($('#ball').css('animation-iteration-count') == 'infinite'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+``` + +# --solutions-- + +```html + +
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.md new file mode 100644 index 0000000000..7baaef275c --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.md @@ -0,0 +1,155 @@ +--- +id: 587d78a8367417b2b2512ae6 +title: Animate Multiple Elements at Variable Rates +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cnpWZc9' +forumTopicId: 301042 +dashedName: animate-multiple-elements-at-variable-rates +--- + +# --description-- + +In the previous challenge, you changed the animation rates for two similarly animated elements by altering their `@keyframes` rules. You can achieve the same goal by manipulating the `animation-duration` of multiple elements. + +In the animation running in the code editor, there are three stars in the sky that twinkle at the same rate on a continuous loop. To make them twinkle at different rates, you can set the `animation-duration` property to different values for each element. + +# --instructions-- + +Set the `animation-duration` of the elements with the classes `star-1`, `star-2`, and `star-3` to 1s, 0.9s, and 1.1s, respectively. + +# --hints-- + +The `animation-duration` property for the star with class `star-1` should remain at 1s. + +```js +assert($('.star-1').css('animation-duration') == '1s'); +``` + +The `animation-duration` property for the star with class `star-2` should be 0.9s. + +```js +assert($('.star-2').css('animation-duration') == '0.9s'); +``` + +The `animation-duration` property for the star with class `star-3` should be 1.1s. + +```js +assert($('.star-3').css('animation-duration') == '1.1s'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
+
+
+``` + +# --solutions-- + +```html + +
+
+
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.md new file mode 100644 index 0000000000..0fdf546832 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.md @@ -0,0 +1,56 @@ +--- +id: 587d78a3367417b2b2512ad0 +title: Center an Element Horizontally Using the margin Property +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cyLJqU4' +forumTopicId: 301043 +dashedName: center-an-element-horizontally-using-the-margin-property +--- + +# --description-- + +Another positioning technique is to center a block element horizontally. One way to do this is to set its `margin` to a value of auto. + +This method works for images, too. Images are inline elements by default, but can be changed to block elements when you set the `display` property to `block`. + +# --instructions-- + +Center the `div` on the page by adding a `margin` property with a value of `auto`. + +# --hints-- + +The `div` should have a `margin` set to `auto`. + +```js +assert(code.match(/margin:\s*?auto;/g)); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+``` + +# --solutions-- + +```html + +
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.md new file mode 100644 index 0000000000..91d8545abd --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.md @@ -0,0 +1,77 @@ +--- +id: 587d781e367417b2b2512ac9 +title: Change an Element's Relative Position +challengeType: 0 +videoUrl: 'https://scrimba.com/c/czVmMtZ' +forumTopicId: 301044 +dashedName: change-an-elements-relative-position +--- + +# --description-- + +CSS treats each HTML element as its own box, which is usually referred to as the CSS Box Model. 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 normal flow of a document, but CSS offers the position property to override it. + +When the position of an element is set to `relative`, it allows you to specify how CSS should move it *relative* to its current position in the normal flow of the page. It pairs with the CSS offset properties of `left` or `right`, and `top` or `bottom`. These say how many pixels, percentages, or ems to move the item *away* from where it is normally positioned. The following example moves the paragraph 10 pixels away from the bottom: + +```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. + +**Note:** 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. + +# --instructions-- + +Change the `position` of the `h2` to `relative`, and use a CSS offset to move it 15 pixels away from the `top` of where it sits in the normal flow. Notice there is no impact on the positions of the surrounding h1 and p elements. + +# --hints-- + +The `h2` element should have a `position` property set to `relative`. + +```js +assert($('h2').css('position') == 'relative'); +``` + +Your code should use a CSS offset to relatively position the `h2` 15px away from the `top` of where it normally sits. + +```js +assert($('h2').css('top') == '15px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

On Being Well-Positioned

+

Move me!

+

I still think the h2 is where it normally sits.

+ +``` + +# --solutions-- + +```html + + +

On Being Well-Positioned

+

Move me!

+

I still think the h2 is where it normally sits.

+ +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.md new file mode 100644 index 0000000000..f4bc236532 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.md @@ -0,0 +1,127 @@ +--- +id: 587d78a8367417b2b2512ae7 +title: Change Animation Timing with Keywords +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cJKvwCM' +forumTopicId: 301045 +dashedName: change-animation-timing-with-keywords +--- + +# --description-- + +In CSS animations, the `animation-timing-function` property controls how quickly an animated element changes over the duration of the animation. If the animation is a car moving from point A to point B in a given time (your `animation-duration`), the `animation-timing-function` says how the car accelerates and decelerates over the course of the drive. + +There are a number of predefined keywords available for popular options. For example, the default value is `ease`, which starts slow, speeds up in the middle, and then slows down again in the end. Other options include `ease-out`, which is quick in the beginning then slows down, `ease-in`, which is slow in the beginning, then speeds up at the end, or `linear`, which applies a constant animation speed throughout. + +# --instructions-- + +For the elements with id of `ball1` and `ball2`, add an `animation-timing-function` property to each, and set `#ball1` to `linear`, and `#ball2` to `ease-out`. Notice the difference between how the elements move during the animation but end together, since they share the same `animation-duration` of 2 seconds. + +# --hints-- + +The value of the `animation-timing-function` property for the element with the id `ball1` should be `linear`. + +```js +const ball1Animation = __helpers.removeWhiteSpace( + $('#ball1').css('animation-timing-function') +); +assert(ball1Animation == 'linear' || ball1Animation == 'cubic-bezier(0,0,1,1)'); +``` + +The value of the `animation-timing-function` property for the element with the id `ball2` should be `ease-out`. + +```js +const ball2Animation = __helpers.removeWhiteSpace( + $('#ball2').css('animation-timing-function') +); +assert( + ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)' +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
+``` + +# --solutions-- + +```html + +
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.md new file mode 100644 index 0000000000..1cc3f61037 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.md @@ -0,0 +1,81 @@ +--- +id: 587d78a3367417b2b2512acf +title: Change the Position of Overlapping Elements with the z-index Property +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cM94aHk' +forumTopicId: 301046 +dashedName: change-the-position-of-overlapping-elements-with-the-z-index-property +--- + +# --description-- + +When elements are positioned to overlap (i.e. using `position: absolute | relative | fixed | sticky`), the element coming later in the HTML markup will, by default, appear on the top of the other elements. However, the `z-index` property can specify the order of how elements are stacked on top of one another. It must be an integer (i.e. a whole number and not a decimal), and higher values for the `z-index` property of an element move it higher in the stack than those with lower values. + +# --instructions-- + +Add a `z-index` property to the element with the class name of `first` (the red rectangle) and set it to a value of 2 so it covers the other element (blue rectangle). + +# --hints-- + +The element with class `first` should have a `z-index` value of 2. + +```js +assert($('.first').css('z-index') == '2'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
+``` + +# --solutions-- + +```html + +
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.md new file mode 100644 index 0000000000..35787cfba3 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.md @@ -0,0 +1,76 @@ +--- +id: 587d78a5367417b2b2512ad6 +title: Create a Gradual CSS Linear Gradient +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cg4dpt9' +forumTopicId: 301047 +dashedName: create-a-gradual-css-linear-gradient +--- + +# --description-- + +Applying a color on HTML elements is not limited to one flat hue. CSS provides the ability to use color transitions, otherwise known as gradients, on elements. This is accessed through the `background` property's `linear-gradient()` function. Here is the general syntax: + +```css +background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...); +``` + +The first argument specifies the direction from which color transition starts - it can be stated as a degree, where `90deg` makes a horizontal gradient (from left to right) and `45deg` makes a diagonal gradient (from bottom left to top right). The following arguments specify the order of colors used in the gradient. + +Example: + +```css +background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255)); +``` + +# --instructions-- + +Use a `linear-gradient()` for the `div` element's `background`, and set it from a direction of 35 degrees to change the color from `#CCFFFF` to `#FFCCCC`. + +# --hints-- + +The `div` element should have a `linear-gradient` `background` with the specified direction and colors. + +```js +assert( + $('div') + .css('background-image') + .match( + /linear-gradient\(35deg, rgb\(204, 255, 255\), rgb\(255, 204, 204\)\)/gi + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+``` + +# --solutions-- + +```html + +
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md new file mode 100644 index 0000000000..7b46659742 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md @@ -0,0 +1,89 @@ +--- +id: 587d78a6367417b2b2512add +title: Create a Graphic Using CSS +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cEDWPs6' +forumTopicId: 301048 +dashedName: create-a-graphic-using-css +--- + +# --description-- + +By manipulating different selectors and properties, you can make interesting shapes. One of the easier ones to try is a crescent moon shape. For this challenge you need to work with the `box-shadow` property that sets the shadow of an element, along with the `border-radius` property that controls the roundness of the element's corners. + +You will create a round, transparent object with a crisp shadow that is slightly offset to the side - the shadow is actually going to be the moon shape you see. + +In order to create a round object, the `border-radius` property should be set to a value of 50%. + +You may recall from an earlier challenge that the `box-shadow` property takes values for `offset-x`, `offset-y`, `blur-radius`, `spread-radius` and a color value in that order. The `blur-radius` and `spread-radius` values are optional. + +# --instructions-- + +Manipulate the square element in the editor to create the moon shape. First, change the `background-color` to `transparent`, then set the `border-radius` property to 50% to make the circular shape. Finally, change the `box-shadow` property to set the `offset-x` to 25px, the `offset-y` to 10px, `blur-radius` to 0, `spread-radius` to 0, and color to `blue`. + +# --hints-- + +The value of the `background-color` property should be set to `transparent`. + +```js +assert(code.match(/background-color:\s*?transparent;/gi)); +``` + +The value of the `border-radius` property should be set to `50%`. + +```js +assert(code.match(/border-radius:\s*?50%;/gi)); +``` + +The value of the `box-shadow` property should be set to 25px for `offset-x`, 10px for `offset-y`, 0 for `blur-radius`, 0 for `spread-radius`, and finally `blue` for the color. + +```js +assert( + code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+``` + +# --solutions-- + +```html + +
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.md new file mode 100644 index 0000000000..2db0b3baa5 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.md @@ -0,0 +1,122 @@ +--- +id: 587d781b367417b2b2512abb +title: Create a Horizontal Line Using the hr Element +challengeType: 0 +videoUrl: 'https://scrimba.com/c/c3bR8t7' +forumTopicId: 301049 +dashedName: create-a-horizontal-line-using-the-hr-element +--- + +# --description-- + +You can use the `hr` tag to add a horizontal line across the width of its containing element. This can be used to define a change in topic or to visually separate groups of content. + +# --instructions-- + +Add an `hr` tag underneath the `h4` which contains the card title. + +**Note:** In HTML, `hr` is a self-closing tag, and therefore doesn't need a separate closing tag. + +# --hints-- + +Your code should add an `hr` tag to the markup. + +```js +assert($('hr').length == 1); +``` + +The `hr` tag should come between the title and the paragraph. + +```js +assert(code.match(/<\/h4>\s*?|\s*?\/>)\s*?

/gi)); +``` + +# --seed-- + +## --seed-contents-- + +```html + +

+
+
+

GoogleAlphabet

+ +

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

+
+
+ Larry Page

+ Sergey Brin +
+
+
+``` + +# --solutions-- + +```html + +
+
+
+

GoogleAlphabet

+
+

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

+
+
+ Larry Page

+ Sergey Brin +
+
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.md new file mode 100644 index 0000000000..5cf78250d4 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.md @@ -0,0 +1,146 @@ +--- +id: 587d78a6367417b2b2512ade +title: Create a More Complex Shape Using CSS and HTML +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cPpz4fr' +forumTopicId: 301050 +dashedName: create-a-more-complex-shape-using-css-and-html +--- + +# --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 `::before` and `::after` pseudo-elements. These pseudo-elements are used to add something before or after a selected element. In the following example, a `::before` pseudo-element is used to add a rectangle to an element with the class `heart`: + +```css +.heart::before { + content: ""; + background-color: yellow; + border-radius: 25%; + position: absolute; + height: 50px; + width: 70px; + top: -50px; + left: 5px; +} +``` + +For the `::before` and `::after` pseudo-elements to function properly, they must have a defined `content` property. This property is usually used to add things like a photo or text to the selected element. When the `::before` and `::after` pseudo-elements are used to make shapes, the `content` property is still required, but it's set to an empty string. In the above example, the element with the class of `heart` has a `::before` pseudo-element that produces a yellow rectangle with height and width of `50px` and `70px`, respectively. This rectangle has round corners due to its 25% `border-radius` and is positioned absolutely at `5px` from the left and `50px` above the top of the element. + +# --instructions-- + +Transform the element on the screen to a heart. In the `heart::after` selector, change the `background-color` to `pink` and the `border-radius` to 50%. + +Next, target the element with the class `heart` (just `heart`) and fill in the `transform` property. Use the `rotate()` function with -45 degrees. + +Finally, in the `heart::before` selector, set its `content` property to an empty string. + +# --hints-- + +The `background-color` property of the `heart::after` selector should be `pink`. + +```js +const heartAfter = code.match(/\.heart::after\s*{[\s\S]+?[^\}]}/g)[0]; +assert( + /({|;)\s*background-color\s*:\s*pink\s*(;|})/g.test(heartAfter) +); +``` + +The `border-radius` of the `heart::after` selector should be 50%. + +```js +assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2); +``` + +The `transform` property for the `heart` class should use a `rotate()` function set to -45 degrees. + +```js +assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi)); +``` + +The `content` of the `heart::before` selector should be an empty string. + +```js +assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi)); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+``` + +# --solutions-- + +```html + +
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.md new file mode 100644 index 0000000000..e962328bc6 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.md @@ -0,0 +1,136 @@ +--- +id: 587d78a7367417b2b2512ae1 +title: Create Movement Using CSS Animation +challengeType: 0 +videoUrl: 'https://scrimba.com/c/c7amZfW' +forumTopicId: 301051 +dashedName: create-movement-using-css-animation +--- + +# --description-- + +When elements have a specified `position`, such as `fixed` or `relative`, the CSS offset properties `right`, `left`, `top`, and `bottom` 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 `top` property of the `50%` keyframe to 50px, but having it set to 0px for the first (`0%`) and the last (`100%`) keyframe. + +```css +@keyframes rainbow { + 0% { + background-color: blue; + top: 0px; + } + 50% { + background-color: green; + top: 50px; + } + 100% { + background-color: yellow; + top: 0px; + } +} +``` + +# --instructions-- + +Add a horizontal motion to the `div` animation. Using the `left` offset property, add to the `@keyframes` rule so rainbow starts at 0 pixels at `0%`, moves to 25 pixels at `50%`, and ends at -25 pixels at `100%`. Don't replace the `top` property in the editor - the animation should have both vertical and horizontal motion. + +# --hints-- + +The `@keyframes` rule for `0%` should use the `left` offset of 0px. + +```js +assert(code.match(/[^50]0%\s*?{[\s\S]*?left:\s*?0px(;[\s\S]*?|\s*?)}/gi)); +``` + +The `@keyframes` rule for `50%` should use the `left` offset of 25px. + +```js +assert(code.match(/50%\s*?{[\s\S]*?left:\s*?25px(;[\s\S]*?|\s*?)}/gi)); +``` + +The `@keyframes` rule for `100%` should use the `left` offset of -25px. + +```js +assert(code.match(/100%\s*?{[\s\S]*?left:\s*?-25px(;[\s\S]*?|\s*?)}/gi)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+``` + +# --solutions-- + +```html + +
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md new file mode 100644 index 0000000000..6a0f81eee7 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md @@ -0,0 +1,50 @@ +--- +id: 587d78a5367417b2b2512ad8 +title: Create Texture by Adding a Subtle Pattern as a Background Image +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cQdwJC8' +forumTopicId: 301052 +dashedName: create-texture-by-adding-a-subtle-pattern-as-a-background-image +--- + +# --description-- + +One way to add texture and interest to a background and have it stand out more is to add a subtle pattern. The key is balance, as you don't want the background to stand out too much, and take away from the foreground. The `background` property supports the `url()` function in order to link to an image of the chosen texture or pattern. The link address is wrapped in quotes inside the parentheses. + +# --instructions-- + +Using the url of `https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png`, set the `background` of the whole page with the `body` selector. + +# --hints-- + +Your `body` element should have a `background` property set to a `url()` with the given link. + +```js +assert( + code.match( + /background:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.md new file mode 100644 index 0000000000..217de2709f --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.md @@ -0,0 +1,118 @@ +--- +id: 587d7791367417b2b2512ab3 +title: Create Visual Balance Using the text-align Property +challengeType: 0 +videoUrl: 'https://scrimba.com/c/c3b4EAp' +forumTopicId: 301053 +dashedName: create-visual-balance-using-the-text-align-property +--- + +# --description-- + +This section of the curriculum focuses on Applied Visual Design. The first group of challenges build on the given card layout to show a number of core principles. + +Text is often a large part of web content. CSS has several options for how to align it with the `text-align` property. + +`text-align: justify;` causes all lines of text except the last line to meet the left and right edges of the line box. + +`text-align: center;` centers the text + +`text-align: right;` right-aligns the text + +And `text-align: left;` (the default) left-aligns the text. + +# --instructions-- + +Align the `h4` tag's text, which says "Google", to the center. Then justify the paragraph tag which contains information about how Google was founded. + +# --hints-- + +Your code should use the text-align property on the `h4` tag to set it to `center`. + +```js +assert($('h4').css('text-align') == 'center'); +``` + +Your code should use the text-align property on the `p` tag to set it to `justify`. + +```js +assert($('p').css('text-align') == 'justify'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+
+
+

Google

+

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

+
+
+ Larry Page + Sergey Brin +
+
+
+``` + +# --solutions-- + +```html + +
+
+
+

Google

+

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

+
+
+ Larry Page + Sergey Brin +
+
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.md new file mode 100644 index 0000000000..288fc8ce76 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.md @@ -0,0 +1,95 @@ +--- +id: 587d78a7367417b2b2512ae2 +title: Create Visual Direction by Fading an Element from Left to Right +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cGJqqAE' +forumTopicId: 301054 +dashedName: create-visual-direction-by-fading-an-element-from-left-to-right +--- + +# --description-- + +For this challenge, you'll change the `opacity` of an animated element so it gradually fades as it reaches the right side of the screen. + +In the displayed animation, the round element with the gradient background moves to the right by the 50% mark of the animation per the `@keyframes` rule. + +# --instructions-- + +Target the element with the id of `ball` and add the `opacity` property set to 0.1 at `50%`, so the element fades as it moves to the right. + +# --hints-- + +The `keyframes` rule for fade should set the `opacity` property to 0.1 at 50%. + +```js +assert( + code.match( + /@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+``` + +# --solutions-- + +```html + +
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.md new file mode 100644 index 0000000000..b1f5680625 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.md @@ -0,0 +1,134 @@ +--- +id: 587d781c367417b2b2512abf +title: Decrease the Opacity of an Element +challengeType: 0 +videoUrl: 'https://scrimba.com/c/c7aKqu4' +forumTopicId: 301055 +dashedName: decrease-the-opacity-of-an-element +--- + +# --description-- + +The `opacity` property in CSS is used to adjust the opacity, or conversely, the transparency for an item. + +
A value of 1 is opaque, which isn't transparent at all.
A value of 0.5 is half see-through.
A value of 0 is completely transparent.
+ +The value given will apply to the entire element, whether that's an image with some transparency, or the foreground and background colors for a block of text. + +# --instructions-- + +Set the `opacity` of the anchor tags to 0.7 using `links` class to select them. + +# --hints-- + +Your code should set the `opacity` property to 0.7 on the anchor tags by selecting the class of `links`. + +```js +assert( + /\.links\s*{([\s\S]*?;)*\s*opacity\s*:\s*0*\.70*\s*(;[\s\S]*?|\s*)}/.test( + $('style').text() + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+
+
+

Alphabet

+
+

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

+
+
+ Larry Page

+ Sergey Brin +
+
+
+``` + +# --solutions-- + +```html + +
+
+
+

Alphabet

+
+

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

+
+
+ Larry Page

+ Sergey Brin +
+
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.md new file mode 100644 index 0000000000..9c80077317 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.md @@ -0,0 +1,90 @@ +--- +id: 587d78a3367417b2b2512ad1 +title: Learn about Complementary Colors +challengeType: 0 +videoUrl: 'https://scrimba.com/c/c2MD3Tr' +forumTopicId: 301056 +dashedName: learn-about-complementary-colors +--- + +# --description-- + +Color theory and its impact on design is a deep topic and only the basics are covered in the following challenges. On a website, color can draw attention to content, evoke emotions, or create visual harmony. Using different combinations of colors can really change the look of a website, and a lot of thought can go into picking a color palette that works with your content. + +The color wheel is a useful tool to visualize how colors relate to each other - it's a circle where similar hues are neighbors and different hues are farther apart. When two colors are opposite each other on the wheel, they are called complementary colors. They have the characteristic that if they are combined, they "cancel" each other out and create a gray color. However, when placed side-by-side, these colors appear more vibrant and produce a strong visual contrast. + +Some examples of complementary colors with their hex codes are: + +
red (#FF0000) and cyan (#00FFFF)
green (#00FF00) and magenta (#FF00FF)
blue (#0000FF) and yellow (#FFFF00)
+ +This is different than the outdated RYB color model that many of us were taught in school, which has different primary and complementary colors. Modern color theory uses the additive RGB model (like on a computer screen) and the subtractive CMY(K) model (like in printing). Read [here](https://en.wikipedia.org/wiki/Color_model) for more information on this complex subject. + +There are many color picking tools available online that have an option to find the complement of a color. + +**Note:** Using color can be a powerful way to add visual interest to a page. However, color alone should not be used as the only way to convey important information because users with visual impairments may not understand that content. This issue will be covered in more detail in the Applied Accessibility challenges. + +# --instructions-- + +Change the `background-color` property of the `blue` and `yellow` classes to their respective colors. Notice how the colors look different next to each other than they do compared against the white background. + +# --hints-- + +The `div` element with class `blue` should have a `background-color` of blue. + +```js +assert($('.blue').css('background-color') == 'rgb(0, 0, 255)'); +``` + +The `div` element with class `yellow` should have a `background-color` of yellow. + +```js +assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+
+``` + +# --solutions-- + +```html + +
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.md new file mode 100644 index 0000000000..7f4bbbd27c --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.md @@ -0,0 +1,114 @@ +--- +id: 587d78a4367417b2b2512ad2 +title: Learn about Tertiary Colors +challengeType: 0 +forumTopicId: 301057 +dashedName: learn-about-tertiary-colors +--- + +# --description-- + +Computer monitors and device screens create different colors by combining amounts of red, green, and blue light. This is known as the RGB additive color model in modern color theory. Red (R), green (G), and blue (B) are called primary colors. Mixing two primary colors creates the secondary colors cyan (G + B), magenta (R + B) and yellow (R + G). You saw these colors in the Complementary Colors challenge. These secondary colors happen to be the complement to the primary color not used in their creation, and are opposite to that primary color on the color wheel. For example, magenta is made with red and blue, and is the complement to green. + +Tertiary colors are the result of combining a primary color with one of its secondary color neighbors. For example, within the RGB color model, red (primary) and yellow (secondary) make orange (tertiary). This adds six more colors to a simple color wheel for a total of twelve. + +There are various methods of selecting different colors that result in a harmonious combination in design. One example that can use tertiary colors is called the split-complementary color scheme. This scheme starts with a base color, then pairs it with the two colors that are adjacent to its complement. The three colors provide strong visual contrast in a design, but are more subtle than using two complementary colors. + +Here are three colors created using the split-complement scheme: + +
ColorHex Code
orange#FF7F00
cyan#00FFFF
raspberry#FF007F
+ +# --instructions-- + +Change the `background-color` property of the `orange`, `cyan`, and `raspberry` classes to their respective colors. Make sure to use the hex codes and not the color names. + +# --hints-- + +The `div` element with class `orange` should have a `background-color` of orange. + +```js +assert($('.orange').css('background-color') == 'rgb(255, 127, 0)'); +``` + +The `div` element with class `cyan` should have a `background-color` of cyan. + +```js +assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)'); +``` + +The `div` element with class `raspberry` should have a `background-color` of raspberry. + +```js +assert($('.raspberry').css('background-color') == 'rgb(255, 0, 127)'); +``` + +All `background-color` values for the color classes should be hex codes and not color names. + +```js +assert(!/background-color:\s(orange|cyan|raspberry)/.test(code)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
+
+``` + +# --solutions-- + +```html + +
+
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.md new file mode 100644 index 0000000000..14f512c553 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.md @@ -0,0 +1,136 @@ +--- +id: 587d78a9367417b2b2512ae8 +title: Learn How Bezier Curves Work +challengeType: 0 +videoUrl: 'https://scrimba.com/c/c9bDrs8' +forumTopicId: 301058 +dashedName: learn-how-bezier-curves-work +--- + +# --description-- + +The last challenge introduced the `animation-timing-function` property and a few keywords that change the speed of an animation over its duration. CSS offers an option other than keywords that provides even finer control over how the animation plays out, through the use of Bezier curves. + +In CSS animations, Bezier curves are used with the `cubic-bezier` function. The shape of the curve represents how the animation plays out. The curve lives on a 1 by 1 coordinate system. The X-axis of this coordinate system is the duration of the animation (think of it as a time scale), and the Y-axis is the change in the animation. + +The `cubic-bezier` function consists of four main points that sit on this 1 by 1 grid: `p0`, `p1`, `p2`, and `p3`. `p0` and `p3` are set for you - they are the beginning and end points which are always located respectively at the origin (0, 0) and (1, 1). You set the x and y values for the other two points, and where you place them in the grid dictates the shape of the curve for the animation to follow. This is done in CSS by declaring the x and y values of the `p1` and `p2` "anchor" points in the form: `(x1, y1, x2, y2)`. Pulling it all together, here's an example of a Bezier curve in CSS code: + +```css +animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75); +``` + +In the example above, the x and y values are equivalent for each point (x1 = 0.25 = y1 and x2 = 0.75 = y2), which if you remember from geometry class, results in a line that extends from the origin to point (1, 1). This animation is a linear change of an element during the length of an animation, and is the same as using the `linear` keyword. In other words, it changes at a constant speed. + +# --instructions-- + +For the element with the id of `ball1`, change the value of the `animation-timing-function` property from `linear` to its equivalent `cubic-bezier` function value. Use the point values given in the example above. + +# --hints-- + +The value of the `animation-timing-function` property for the element with the id `ball1` should be the linear-equivalent `cubic-bezier` function. + +```js +assert( + $('#ball1').css('animation-timing-function') == + 'cubic-bezier(0.25, 0.25, 0.75, 0.75)' +); +``` + +The value of the `animation-timing-function` property for the element with the id `ball2` should not change. + +```js +const ball2Animation = __helpers.removeWhiteSpace( + $('#ball2').css('animation-timing-function') +); +assert( + ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)' +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
+``` + +# --solutions-- + +```html + +
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.md new file mode 100644 index 0000000000..e91a65e334 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.md @@ -0,0 +1,136 @@ +--- +id: 587d78a7367417b2b2512adf +title: Learn How the CSS @keyframes and animation Properties Work +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cakprhv' +forumTopicId: 301059 +dashedName: learn-how-the-css-keyframes-and-animation-properties-work +--- + +# --description-- + +To animate an element, you need to know about the animation properties and the `@keyframes` rule. The animation properties control how the animation should behave and the `@keyframes` rule controls what happens during that animation. There are eight animation properties in total. This challenge will keep it simple and cover the two most important ones first: + +`animation-name` sets the name of the animation, which is later used by `@keyframes` to tell CSS which rules go with which animations. + +`animation-duration` sets the length of time for the animation. + +`@keyframes` 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 `@keyframes` and the animation properties: + +```css +#anim { + animation-name: colorful; + animation-duration: 3s; +} + +@keyframes colorful { + 0% { + background-color: blue; + } + 100% { + background-color: yellow; + } +} +``` + +For the element with the `anim` id, the code snippet above sets the `animation-name` to `colorful` and sets the `animation-duration` to 3 seconds. Then the `@keyframes` rule links to the animation properties with the name `colorful`. 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%. + +# --instructions-- + +Create an animation for the element with the id `rect`, by setting the `animation-name` to `rainbow` and the `animation-duration` to 4 seconds. Next, declare a `@keyframes` rule, and set the `background-color` at the beginning of the animation (`0%`) to blue, the middle of the animation (`50%`) to green, and the end of the animation (`100%`) to yellow. + +# --hints-- + +The element with id of `rect` should have an `animation-name` property with a value of `rainbow`. + +```js +assert($('#rect').css('animation-name') == 'rainbow'); +``` + +The element with id of `rect` should have an `animation-duration` property with a value of 4s. + +```js +assert($('#rect').css('animation-duration') == '4s'); +``` + +The `@keyframes` rule should use the `animation-name` of `rainbow`. + +```js +assert(code.match(/@keyframes\s+?rainbow\s*?{/g)); +``` + +The `@keyframes` rule for `rainbow` should use a `background-color` of `blue` at 0%. + +```js +assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi)); +``` + +The `@keyframes` rule for `rainbow` should use a `background-color` of `green` at 50%. + +```js +assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi)); +``` + +The `@keyframes` rule for rainbow should use a `background-color` of `yellow` at 100%. + +```js +assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi)); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+``` + +# --solutions-- + +```html + +
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.md new file mode 100644 index 0000000000..0eb38a456a --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.md @@ -0,0 +1,90 @@ +--- +id: 587d781e367417b2b2512acb +title: Lock an Element to its Parent with Absolute Positioning +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cyLJ7c3' +forumTopicId: 301060 +dashedName: lock-an-element-to-its-parent-with-absolute-positioning +--- + +# --description-- + +The next option for the CSS `position` property is `absolute`, which locks the element in place relative to its parent container. Unlike the `relative` position, this removes the element from the normal flow of the document, so surrounding items ignore it. The CSS offset properties (top or bottom and left or right) are used to adjust the position. + +One nuance with absolute positioning is that it will be locked relative to its closest *positioned* ancestor. If you forget to add a position rule to the parent item, (this is typically done using `position: relative;`), the browser will keep looking up the chain and ultimately default to the `body` tag. + +# --instructions-- + +Lock the `#searchbar` element to the top-right of its `section` parent by declaring its `position` as `absolute`. Give it `top` and `right` offsets of 50 pixels each. + +# --hints-- + +The `#searchbar` element should have a `position` set to `absolute`. + +```js +assert($('#searchbar').css('position') == 'absolute'); +``` + +Your code should use the `top` CSS offset of 50 pixels on the `#searchbar` element. + +```js +assert($('#searchbar').css('top') == '50px'); +``` + +Your code should use the `right` CSS offset of 50 pixels on the `#searchbar` element. + +```js +assert($('#searchbar').css('right') == '50px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

Welcome!

+
+ +
+ +``` + +# --solutions-- + +```html + + +

Welcome!

+
+ +
+ +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.md new file mode 100644 index 0000000000..3909a6ce24 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.md @@ -0,0 +1,120 @@ +--- +id: 587d781e367417b2b2512acc +title: Lock an Element to the Browser Window with Fixed Positioning +challengeType: 0 +videoUrl: 'https://scrimba.com/c/c2MDNUR' +forumTopicId: 301061 +dashedName: lock-an-element-to-the-browser-window-with-fixed-positioning +--- + +# --description-- + +The next layout scheme that CSS offers is the `fixed` position, which is a type of absolute positioning that locks an element relative to the browser window. Similar to absolute positioning, it's used with the CSS offset properties and also removes the element from the normal flow of the document. Other items no longer "realize" where it is positioned, which may require some layout adjustments elsewhere. + +One key difference between the `fixed` and `absolute` positions is that an element with a fixed position won't move when the user scrolls. + +# --instructions-- + +The navigation bar in the code is labeled with an id of `navbar`. Change its `position` to `fixed`, and offset it 0 pixels from the `top` and 0 pixels from the `left`. After you have added the code, scroll the preview window to see how the navigation stays in place. + +# --hints-- + +The `#navbar` element should have a `position` set to `fixed`. + +```js +assert($('#navbar').css('position') == 'fixed'); +``` + +Your code should use the `top` CSS offset of 0 pixels on the `#navbar` element. + +```js +assert($('#navbar').css('top') == '0px'); +``` + +Your code should use the `left` CSS offset of 0 pixels on the `#navbar` element. + +```js +assert($('#navbar').css('left') == '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+

Welcome!

+ +
+

I shift up when the #navbar is fixed to the browser window.

+ +``` + +# --solutions-- + +```html + + +
+

Welcome!

+ +
+

I shift up when the #navbar is fixed to the browser window.

+ +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.md new file mode 100644 index 0000000000..651d36a0dd --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.md @@ -0,0 +1,181 @@ +--- +id: 587d78a8367417b2b2512ae4 +title: Make a CSS Heartbeat using an Infinite Animation Count +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cDZpDUr' +forumTopicId: 301062 +dashedName: make-a-css-heartbeat-using-an-infinite-animation-count +--- + +# --description-- + +Here's one more continuous animation example with the `animation-iteration-count` property that uses the heart you designed in a previous challenge. + +The one-second long heartbeat animation consists of two animated pieces. The `heart` elements (including the `:before` and `:after` pieces) are animated to change size using the `transform` property, and the background `div` is animated to change its color using the `background` property. + +# --instructions-- + +Keep the heart beating by adding the `animation-iteration-count` property for both the `back` class and the `heart` class and setting the value to `infinite`. The `heart:before` and `heart:after` selectors do not need any animation properties. + +# --hints-- + +The `animation-iteration-count` property for the `heart` class should have a value of `infinite`. + +```js +assert($('.heart').css('animation-iteration-count') == 'infinite'); +``` + +The `animation-iteration-count` property for the `back` class should have a value of `infinite`. + +```js +assert($('.back').css('animation-iteration-count') == 'infinite'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+
+``` + +# --solutions-- + +```html + +
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.md new file mode 100644 index 0000000000..85932dd7b3 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.md @@ -0,0 +1,121 @@ +--- +id: 587d78a9367417b2b2512aea +title: Make Motion More Natural Using a Bezier Curve +challengeType: 0 +videoUrl: 'https://scrimba.com/c/c7akWUv' +forumTopicId: 301063 +dashedName: make-motion-more-natural-using-a-bezier-curve +--- + +# --description-- + +This challenge animates an element to replicate the movement of a ball being juggled. Prior challenges covered the `linear` and `ease-out` cubic Bezier curves, however neither depicts the juggling movement accurately. You need to customize a Bezier curve for this. + +The `animation-timing-function` automatically loops at every keyframe when the `animation-iteration-count` is set to infinite. Since there is a keyframe rule set in the middle of the animation duration (at `50%`), it results in two identical animation progressions at the upward and downward movement of the ball. + +The following cubic Bezier curve simulates a juggling movement: + +```css +cubic-bezier(0.3, 0.4, 0.5, 1.6); +``` + +Notice that the value of y2 is larger than 1. Although the cubic Bezier curve is mapped on a 1 by 1 coordinate system, and it can only accept x values from 0 to 1, the y value can be set to numbers larger than one. This results in a bouncing movement that is ideal for simulating the juggling ball. + +# --instructions-- + +Change value of the `animation-timing-function` of the element with the id of `green` to a `cubic-bezier` function with x1, y1, x2, y2 values set respectively to 0.311, 0.441, 0.444, 1.649. + +# --hints-- + +The value of the `animation-timing-function` property for the element with the id `green` should be a `cubic-bezier` function with x1, y1, x2, y2 values as specified. + +```js +assert( + $('#green').css('animation-timing-function') == + 'cubic-bezier(0.311, 0.441, 0.444, 1.649)' +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+
+
+``` + +# --solutions-- + +```html + +
+
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.md new file mode 100644 index 0000000000..ec59324e6d --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.md @@ -0,0 +1,92 @@ +--- +id: 58a7a6ebf9a6318348e2d5aa +title: Modify Fill Mode of an Animation +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cVJDmcE' +forumTopicId: 301064 +dashedName: modify-fill-mode-of-an-animation +--- + +# --description-- + +That's great, but it doesn't work right yet. Notice how the animation resets after `500ms` has passed, causing the button to revert back to the original color. You want the button to stay highlighted. + +This can be done by setting the `animation-fill-mode` property to `forwards`. The `animation-fill-mode` specifies the style applied to an element when the animation has finished. You can set it like so: + +```css +animation-fill-mode: forwards; +``` + +# --instructions-- + +Set the `animation-fill-mode` property of `button:hover` to `forwards` so the button stays highlighted when a user hovers over it. + +# --hints-- + +`button:hover` should have a `animation-fill-mode` property with a value of `forwards`. + +```js +assert( + code.match( + /button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi + ) && + code.match( + /button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi + ) && + code.match( + /button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.md new file mode 100644 index 0000000000..1ebc81473a --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.md @@ -0,0 +1,72 @@ +--- +id: 587d781e367417b2b2512aca +title: Move a Relatively Positioned Element with CSS Offsets +challengeType: 0 +videoUrl: 'https://scrimba.com/c/c9bQEA4' +forumTopicId: 301065 +dashedName: move-a-relatively-positioned-element-with-css-offsets +--- + +# --description-- + +The CSS offsets of `top` or `bottom`, and `left` or `right` tell the browser how far to offset an item relative to where it would sit in the normal flow of the document. You're offsetting an element away from a given spot, which moves the element away from the referenced side (effectively, the opposite direction). As you saw in the last challenge, using the `top` offset moved the `h2` downwards. Likewise, using a `left` offset moves an item to the right. + + + +# --instructions-- + +Use CSS offsets to move the `h2` 15 pixels to the right and 10 pixels up. + +# --hints-- + +Your code should use a CSS offset to relatively position the `h2` 10px upwards. In other words, move it 10px away from the `bottom` of where it normally sits. + +```js +assert($('h2').css('bottom') == '10px'); +``` + +Your code should use a CSS offset to relatively position the `h2` 15px towards the right. In other words, move it 15px away from the `left` of where it normally sits. + +```js +assert($('h2').css('left') == '15px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +

On Being Well-Positioned

+

Move me!

+

I still think the h2 is where it normally sits.

+ +``` + +# --solutions-- + +```html + + + + +

On Being Well-Positioned

+

Move me!

+

I still think the h2 is where it normally sits.

+ +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.md new file mode 100644 index 0000000000..a57caba304 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.md @@ -0,0 +1,100 @@ +--- +id: 587d78a3367417b2b2512ace +title: Push Elements Left or Right with the float Property +challengeType: 0 +videoUrl: 'https://scrimba.com/c/c2MDqu2' +forumTopicId: 301066 +dashedName: push-elements-left-or-right-with-the-float-property +--- + +# --description-- + +The next positioning tool does not actually use `position`, but sets the `float` property of an element. Floating elements are removed from the normal flow of a document and pushed to either the `left` or `right` of their containing parent element. It's commonly used with the `width` property to specify how much horizontal space the floated element requires. + +# --instructions-- + +The given markup would work well as a two-column layout, with the `section` and `aside` elements next to each other. Give the `#left` item a `float` of `left` and the `#right` item a `float` of `right`. + +# --hints-- + +The element with id `left` should have a `float` value of `left`. + +```js +assert($('#left').css('float') == 'left'); +``` + +The element with id `right` should have a `float` value of `right`. + +```js +assert($('#right').css('float') == 'right'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + +
+

Welcome!

+
+
+

Content

+

Good stuff

+
+ + +``` + +# --solutions-- + +```html + + + + +
+

Welcome!

+
+
+

Content

+

Good stuff

+
+ + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.md new file mode 100644 index 0000000000..34ffb58433 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.md @@ -0,0 +1,116 @@ +--- +id: 587d781c367417b2b2512ac2 +title: Set the font-size for Multiple Heading Elements +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cPpQNT3' +forumTopicId: 301067 +dashedName: set-the-font-size-for-multiple-heading-elements +--- + +# --description-- + +The `font-size` property is used to specify how large the text is in a given element. This rule can be used for multiple elements to create visual consistency of text on a page. In this challenge, you'll set the values for all `h1` through `h6` tags to balance the heading sizes. + +# --instructions-- + +

In the style tags, set the font-size of the:

+ + + +# --hints-- + +Your code should set the `font-size` property for the `h1` tag to 68 pixels. + +```js +assert($('h1').css('font-size') == '68px'); +``` + +Your code should set the `font-size` property for the `h2` tag to 52 pixels. + +```js +assert($('h2').css('font-size') == '52px'); +``` + +Your code should set the `font-size` property for the `h3` tag to 40 pixels. + +```js +assert($('h3').css('font-size') == '40px'); +``` + +Your code should set the `font-size` property for the `h4` tag to 32 pixels. + +```js +assert($('h4').css('font-size') == '32px'); +``` + +Your code should set the `font-size` property for the `h5` tag to 21 pixels. + +```js +assert($('h5').css('font-size') == '21px'); +``` + +Your code should set the `font-size` property for the `h6` tag to 14 pixels. + +```js +const regex = /h6\s*\{\s*font-size\s*:\s*14px\s*(;\s*\}|\})/i; +assert.strictEqual(true, regex.test(code)); +``` + +# --seed-- + +## --seed-contents-- + +```html + +

This is h1 text

+

This is h2 text

+

This is h3 text

+

This is h4 text

+
This is h5 text
+
This is h6 text
+``` + +# --solutions-- + +```html + +

This is h1 text

+

This is h2 text

+

This is h3 text

+

This is h4 text

+
This is h5 text
+
This is h6 text
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text.md new file mode 100644 index 0000000000..d50c75f67b --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text.md @@ -0,0 +1,52 @@ +--- +id: 587d781c367417b2b2512ac4 +title: Set the font-size of Paragraph Text +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cVJ36Cr' +forumTopicId: 301068 +dashedName: set-the-font-size-of-paragraph-text +--- + +# --description-- + +The `font-size` property in CSS is not limited to headings, it can be applied to any element containing text. + +# --instructions-- + +Change the value of the `font-size` property for the paragraph to 16px to make it more visible. + +# --hints-- + +Your `p` tag should have a `font-size` of 16 pixels. + +```js +assert($('p').css('font-size') == '16px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +

+``` + +# --solutions-- + +```html + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +

+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements.md new file mode 100644 index 0000000000..aec407d16e --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements.md @@ -0,0 +1,132 @@ +--- +id: 587d781c367417b2b2512ac3 +title: Set the font-weight for Multiple Heading Elements +challengeType: 0 +videoUrl: 'https://scrimba.com/c/crVWRHq' +forumTopicId: 301069 +dashedName: set-the-font-weight-for-multiple-heading-elements +--- + +# --description-- + +You set the `font-size` of each heading tag in the last challenge, here you'll adjust the `font-weight`. + +The `font-weight` property sets how thick or thin characters are in a section of text. + +# --instructions-- + + + +# --hints-- + +Your code should set the `font-weight` property for the `h1` tag to 800. + +```js +assert($('h1').css('font-weight') == '800'); +``` + +Your code should set the `font-weight` property for the `h2` tag to 600. + +```js +assert($('h2').css('font-weight') == '600'); +``` + +Your code should set the `font-weight` property for the `h3` tag to 500. + +```js +assert($('h3').css('font-weight') == '500'); +``` + +Your code should set the `font-weight` property for the `h4` tag to 400. + +```js +assert($('h4').css('font-weight') == '400'); +``` + +Your code should set the `font-weight` property for the `h5` tag to 300. + +```js +assert($('h5').css('font-weight') == '300'); +``` + +Your code should set the `font-weight` property for the `h6` tag to 200. + +```js +assert($('h6').css('font-weight') == '200'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +

This is h1 text

+

This is h2 text

+

This is h3 text

+

This is h4 text

+
This is h5 text
+
This is h6 text
+``` + +# --solutions-- + +```html + +

This is h1 text

+

This is h2 text

+

This is h3 text

+

This is h4 text

+
This is h5 text
+
This is h6 text
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs.md new file mode 100644 index 0000000000..950e5d4c77 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs.md @@ -0,0 +1,54 @@ +--- +id: 587d781d367417b2b2512ac5 +title: Set the line-height of Paragraphs +challengeType: 0 +videoUrl: 'https://scrimba.com/c/crVWdcv' +forumTopicId: 301070 +dashedName: set-the-line-height-of-paragraphs +--- + +# --description-- + +CSS offers the `line-height` property to change the height of each line in a block of text. As the name suggests, it changes the amount of vertical space that each line of text gets. + +# --instructions-- + +Add a `line-height` property to the `p` tag and set it to 25px. + +# --hints-- + +Your code should set the `line-height` of the `p` tag to 25 pixels. + +```js +assert($('p').css('line-height') == '25px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +

+``` + +# --solutions-- + +```html + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +

+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md new file mode 100644 index 0000000000..63d9325115 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md @@ -0,0 +1,128 @@ +--- +id: 587d78a9367417b2b2512ae9 +title: Use a Bezier Curve to Move a Graphic +challengeType: 0 +videoUrl: 'https://scrimba.com/c/c6bnRCK' +forumTopicId: 301071 +dashedName: use-a-bezier-curve-to-move-a-graphic +--- + +# --description-- + +A previous challenge discussed the `ease-out` keyword that describes an animation change that speeds up first and then slows down at the end of the animation. On the right, the difference between the `ease-out` keyword (for the blue element) and `linear` keyword (for the red element) is demonstrated. Similar animation progressions to the `ease-out` keyword can be achieved by using a custom cubic Bezier curve function. + +In general, changing the `p1` and `p2` anchor points drives the creation of different Bezier curves, which controls how the animation progresses through time. Here's an example of a Bezier curve using values to mimic the ease-out style: + +```css +animation-timing-function: cubic-bezier(0, 0, 0.58, 1); +``` + +Remember that all `cubic-bezier` functions start with `p0` at (0, 0) and end with `p3` at (1, 1). In this example, the curve moves faster through the Y-axis (starts at 0, goes to `p1` y value of 0, then goes to `p2` y value of 1) than it moves through the X-axis (0 to start, then 0 for `p1`, up to 0.58 for `p2`). As a result, the change in the animated element progresses faster than the time of the animation for that segment. Towards the end of the curve, the relationship between the change in x and y values reverses - the y value moves from 1 to 1 (no change), and the x values move from 0.58 to 1, making the animation changes progress slower compared to the animation duration. + +# --instructions-- + +To see the effect of this Bezier curve in action, change the `animation-timing-function` of the element with id of `red` to a `cubic-bezier` function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1. This will make both elements progress through the animation similarly. + +# --hints-- + +The value of the `animation-timing-function` property of the element with the id `red` should be a `cubic-bezier` function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 . + +```js +assert( + $('#red').css('animation-timing-function') == 'cubic-bezier(0, 0, 0.58, 1)' +); +``` + +The element with the id `red` should no longer have the `animation-timing-function` property of `linear`. + +```js +assert($('#red').css('animation-timing-function') !== 'linear'); +``` + +The value of the `animation-timing-function` property for the element with the id `blue` should not change. + +```js +const blueBallAnimation = __helpers.removeWhiteSpace( + $('#blue').css('animation-timing-function') +); +assert( + blueBallAnimation == 'ease-out' || + blueBallAnimation == 'cubic-bezier(0,0,0.58,1)' +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+
+``` + +# --solutions-- + +```html + +
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.md new file mode 100644 index 0000000000..60907efc65 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.md @@ -0,0 +1,113 @@ +--- +id: 587d78a5367417b2b2512ad7 +title: Use a CSS Linear Gradient to Create a Striped Element +challengeType: 0 +videoUrl: 'https://scrimba.com/c/c6bmQh2' +forumTopicId: 301072 +dashedName: use-a-css-linear-gradient-to-create-a-striped-element +--- + +# --description-- + +The `repeating-linear-gradient()` function is very similar to `linear-gradient()` with the major difference that it repeats the specified gradient pattern. `repeating-linear-gradient()` accepts a variety of values, but for simplicity, you'll work with an angle value and color stop values in this challenge. + +The angle value is the direction of the gradient. Color stops are like width values that mark where a transition takes place, and are given with a percentage or a number of pixels. + +In the example demonstrated in the code editor, the gradient starts with the color `yellow` at 0 pixels which blends into the second color `blue` at 40 pixels away from the start. Since the next color stop is also at 40 pixels, the gradient immediately changes to the third color `green`, which itself blends into the fourth color value `red` as that is 80 pixels away from the beginning of the gradient. + +For this example, it helps to think about the color stops as pairs where every two colors blend together. + +```css +0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px +``` + +If every two color stop values are the same color, the blending isn't noticeable because it's between the same color, followed by a hard transition to the next color, so you end up with stripes. + +# --instructions-- + +Make stripes by changing the `repeating-linear-gradient()` to use a gradient angle of `45deg`, then set the first two color stops to `yellow`, and finally the second two color stops to `black`. + +# --hints-- + +The angle of the `repeating-linear-gradient()` should be 45deg. + +```js +assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi)); +``` + +The angle of the `repeating-linear-gradient()` should no longer be 90deg + +```js +assert(!code.match(/90deg/gi)); +``` + +The color stop at 0 pixels should be `yellow`. + +```js +assert(code.match(/yellow\s+?0(px)?/gi)); +``` + +One color stop at 40 pixels should be `yellow`. + +```js +assert(code.match(/yellow\s+?40px/gi)); +``` + +The second color stop at 40 pixels should be `black`. + +```js +assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi)); +``` + +The last color stop at 80 pixels should be `black`. + +```js +assert(code.match(/black\s+?80px/gi)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+``` + +# --solutions-- + +```html + +
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.md new file mode 100644 index 0000000000..44e322f70c --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.md @@ -0,0 +1,100 @@ +--- +id: 587d78a7367417b2b2512ae0 +title: Use CSS Animation to Change the Hover State of a Button +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cg4vZAa' +forumTopicId: 301073 +dashedName: use-css-animation-to-change-the-hover-state-of-a-button +--- + +# --description-- + +You can use CSS `@keyframes` to change the color of a button in its hover state. + +Here's an example of changing the width of an image on hover: + +```html + + +Google's Logo +``` + +# --instructions-- + +Note that `ms` stands for milliseconds, where 1000ms is equal to 1s. + +Use CSS `@keyframes` to change the `background-color` of the `button` element so it becomes `#4791d0` when a user hovers over it. The `@keyframes` rule should only have an entry for `100%`. + +# --hints-- + +The @keyframes rule should use the `animation-name` background-color. + +```js +assert(code.match(/@keyframes\s+?background-color\s*?{/g)); +``` + +There should be one rule under `@keyframes` that changes the `background-color` to `#4791d0` at 100%. + +```js +assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis.md new file mode 100644 index 0000000000..f474134e45 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis.md @@ -0,0 +1,77 @@ +--- +id: 587d78a6367417b2b2512adb +title: Use the CSS Transform Property skewX to Skew an Element Along the X-Axis +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cyLP8Sr' +forumTopicId: 301074 +dashedName: use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis +--- + +# --description-- + +The next function of the `transform` property is `skewX()`, 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. + +```css +p { + transform: skewX(-32deg); +} +``` + +# --instructions-- + +Skew the element with the id of `bottom` by 24 degrees along the X-axis by using the `transform` property. + +# --hints-- + +The element with id `bottom` should be skewed by 24 degrees along its X-axis. + +```js +assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
+``` + +# --solutions-- + +```html + +
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis.md new file mode 100644 index 0000000000..2874000540 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis.md @@ -0,0 +1,71 @@ +--- +id: 587d78a6367417b2b2512adc +title: Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis +challengeType: 0 +videoUrl: 'https://scrimba.com/c/c2MZ2uB' +forumTopicId: 301075 +dashedName: use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis +--- + +# --description-- + +Given that the `skewX()` function skews the selected element along the X-axis by a given degree, it is no surprise that the `skewY()` property skews an element along the Y (vertical) axis. + +# --instructions-- + +Skew the element with the id of `top` -10 degrees along the Y-axis by using the `transform` property. + +# --hints-- + +The element with id `top` should be skewed by -10 degrees along its Y-axis. + +```js +assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
+``` + +# --solutions-- + +```html + +
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element.md new file mode 100644 index 0000000000..6c30fe6ee7 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element.md @@ -0,0 +1,95 @@ +--- +id: 587d78a5367417b2b2512ad9 +title: Use the CSS Transform scale Property to Change the Size of an Element +challengeType: 0 +videoUrl: 'https://scrimba.com/c/c2MZVSg' +forumTopicId: 301076 +dashedName: use-the-css-transform-scale-property-to-change-the-size-of-an-element +--- + +# --description-- + +To change the scale of an element, CSS has the `transform` property, along with its `scale()` function. The following code example doubles the size of all the paragraph elements on the page: + +```css +p { + transform: scale(2); +} +``` + +# --instructions-- + +Increase the size of the element with the id of `ball2` to 1.5 times its original size. + +# --hints-- + +The `transform` property for `#ball2` should be set to scale it to 1.5 times its size. + +```js +assert( + code.match( + /#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
+``` + +# --solutions-- + +```html + +
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.md new file mode 100644 index 0000000000..2c55192985 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.md @@ -0,0 +1,79 @@ +--- +id: 587d78a5367417b2b2512ada +title: Use the CSS Transform scale Property to Scale an Element on Hover +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cyLPJuM' +forumTopicId: 301077 +dashedName: use-the-css-transform-scale-property-to-scale-an-element-on-hover +--- + +# --description-- + +The `transform` property has a variety of functions that let you scale, move, rotate, skew, etc., your elements. When used with pseudo-classes such as `:hover` that specify a certain state of an element, the `transform` 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: + +```css +p:hover { + transform: scale(2.1); +} +``` + +**Note:** Applying a transform to a `div` element will also affect any child elements contained in the div. + +# --instructions-- + +Add a CSS rule for the `hover` state of the `div` and use the `transform` property to scale the `div` element to 1.1 times its original size when a user hovers over it. + +# --hints-- + +The size of the `div` element should scale 1.1 times when the user hovers over it. + +```js +assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+``` + +# --solutions-- + +```html + +
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.md new file mode 100644 index 0000000000..cccc37ef21 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.md @@ -0,0 +1,118 @@ +--- +id: 587d781a367417b2b2512ab9 +title: Use the em Tag to Italicize Text +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cVJRBtp' +forumTopicId: 301078 +dashedName: use-the-em-tag-to-italicize-text +--- + +# --description-- + +To emphasize text, you can use the `em` tag. This displays text as italicized, as the browser applies the CSS of `font-style: italic;` to the element. + +# --instructions-- + +Wrap an `em` tag around the contents of the paragraph tag to give it emphasis. + +# --hints-- + +Your code should add an `em` tag to the markup. + +```js +assert($('em').length == 1); +``` + +The `em` tag should wrap around the contents of the `p` tag but not the `p` tag itself. + +```js +assert($('p').children().length == 1 && $('em').children().length == 2); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+
+
+

Google

+

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

+
+
+ Larry Page

+ Sergey Brin +
+
+
+``` + +# --solutions-- + +```html + +
+
+
+

Google

+

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

+
+
+ Larry Page

+ Sergey Brin +
+
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.md new file mode 100644 index 0000000000..509cf6ea7d --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.md @@ -0,0 +1,135 @@ +--- +id: 587d781b367417b2b2512aba +title: Use the s Tag to Strikethrough Text +challengeType: 0 +videoUrl: '' +forumTopicId: 301079 +dashedName: use-the-s-tag-to-strikethrough-text +--- + +# --description-- + +To strikethrough text, which is when a horizontal line cuts across the characters, you can use the `s` tag. It shows that a section of text is no longer valid. With the `s` tag, the browser applies the CSS of `text-decoration: line-through;` to the element. + +# --instructions-- + +Wrap the `s` tag around `Google` inside the `h4` tag and then add the word `Alphabet` beside it, which should not have the strikethrough formatting. + +# --hints-- + +Your code should add one `s` tag to the markup. + +```js +assert($('s').length == 1); +``` + +A `s` tag should wrap around the `Google` text in the `h4` tag. It should not contain the word `Alphabet`. + +```js +assert( + $('h4 > s') + .text() + .match(/Google/gi) && + !$('h4 > s') + .text() + .match(/Alphabet/gi) +); +``` + +You should include the word `Alphabet` in the `h4` tag, without strikethrough formatting. + +```js +assert( + $('h4') + .html() + .match(/Alphabet/gi) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+
+
+

Google

+

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

+
+
+ Larry Page

+ Sergey Brin +
+
+
+``` + +# --solutions-- + +```html + +
+
+
+

Google Alphabet

+

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

+
+
+ Larry Page

+ Sergey Brin +
+
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.md new file mode 100644 index 0000000000..d0e3d85209 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.md @@ -0,0 +1,128 @@ +--- +id: 587d781a367417b2b2512ab7 +title: Use the strong Tag to Make Text Bold +challengeType: 0 +videoUrl: 'https://scrimba.com/c/ceJNBSb' +forumTopicId: 301080 +dashedName: use-the-strong-tag-to-make-text-bold +--- + +# --description-- + +To make text bold, you can use the `strong` tag. This is often used to draw attention to text and symbolize that it is important. With the `strong` tag, the browser applies the CSS of `font-weight: bold;` to the element. + +# --instructions-- + +Wrap a `strong` tag around `Stanford University` text inside the `p` tag (do not include the period). + +# --hints-- + +Your code should add one `strong` tag to the markup. + +```js +assert($('strong').length == 1); +``` + +The `strong` tag should be inside the `p` tag. + +```js +assert($('p').children('strong').length == 1); +``` + +The `strong` tag should wrap around the words `Stanford University`. + +```js +assert( + $('strong') + .text() + .match(/^Stanford University\.?$/gi) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+
+
+

Google

+

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

+
+
+ Larry Page

+ Sergey Brin +
+
+
+``` + +# --solutions-- + +```html + +
+
+
+

Google

+

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

+
+
+ Larry Page

+ Sergey Brin +
+
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.md new file mode 100644 index 0000000000..e5dc9362c6 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.md @@ -0,0 +1,138 @@ +--- +id: 587d781c367417b2b2512ac0 +title: Use the text-transform Property to Make Text Uppercase +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cvVZQSP' +forumTopicId: 301081 +dashedName: use-the-text-transform-property-to-make-text-uppercase +--- + +# --description-- + +The `text-transform` property in CSS is used to change the appearance of text. It's a convenient way to make sure text on a webpage appears consistently, without having to change the text content of the actual HTML elements. + +The following table shows how the different `text-transform`values change the example text "Transform me". + +
ValueResult
lowercase"transform me"
uppercase"TRANSFORM ME"
capitalize"Transform Me"
initialUse the default value
inheritUse the text-transform value from the parent element
noneDefault: Use the original text
+ +# --instructions-- + +Transform the text of the `h4` to be uppercase using the `text-transform` property. + +# --hints-- + +The `h4` text should be `uppercase`. + +```js +assert($('h4').css('text-transform') === 'uppercase'); +``` + +The original text of the h4 should not be changed. + +```js +assert($('h4').text() !== $('h4').text().toUpperCase()); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+
+
+

Alphabet

+
+

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

+
+
+ Larry Page

+ Sergey Brin +
+
+
+``` + +# --solutions-- + +```html + +
+
+
+

Alphabet

+
+

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

+
+
+ Larry Page

+ Sergey Brin +
+
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.md new file mode 100644 index 0000000000..a0444987da --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.md @@ -0,0 +1,120 @@ +--- +id: 587d781a367417b2b2512ab8 +title: Use the u Tag to Underline Text +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cN6aQCL' +forumTopicId: 301082 +dashedName: use-the-u-tag-to-underline-text +--- + +# --description-- + +To underline text, you can use the `u` tag. This is often used to signify that a section of text is important, or something to remember. With the `u` tag, the browser applies the CSS of `text-decoration: underline;` to the element. + +# --instructions-- + +Wrap the `u` tag only around the text `Ph.D. students`. + +**Note:** Try to avoid using the `u` tag when it could be confused for a link. Anchor tags also have a default underlined formatting. + +# --hints-- + +Your code should add a `u` tag to the markup. + +```js +assert($('u').length === 1); +``` + +The `u` tag should wrap around the text `Ph.D. students`. + +```js +assert($('u').text() === 'Ph.D. students'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+
+
+

Google

+

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

+
+
+ Larry Page

+ Sergey Brin +
+
+
+``` + +# --solutions-- + +```html + +
+
+
+

Google

+

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.

+
+
+ Larry Page

+ Sergey Brin +
+
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.md new file mode 100644 index 0000000000..200db3a443 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.md @@ -0,0 +1,115 @@ +--- +id: bad87fee1348bd9aedf08823 +title: Add a Negative Margin to an Element +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cnpyGs3' +forumTopicId: 16166 +dashedName: add-a-negative-margin-to-an-element +--- + +# --description-- + +An element's `margin` controls the amount of space between an element's `border` and surrounding elements. + +If you set an element's `margin` to a negative value, the element will grow larger. + +# --instructions-- + +Try to set the `margin` to a negative value like the one for the red box. + +Change the `margin` of the blue box to `-15px`, so it fills the entire horizontal width of the yellow box around it. + +# --hints-- + +Your `blue-box` class should give elements `-15px` of `margin`. + +```js +assert($('.blue-box').css('margin-top') === '-15px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
padding
+
padding
+
+``` + +# --solutions-- + +```html + + +
+
padding
+
padding
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/add-borders-around-your-elements.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/add-borders-around-your-elements.md new file mode 100644 index 0000000000..d8cd9ce2f3 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/add-borders-around-your-elements.md @@ -0,0 +1,190 @@ +--- +id: bad87fee1348bd9bedf08813 +title: Add Borders Around Your Elements +challengeType: 0 +videoUrl: 'https://scrimba.com/c/c2MvnHZ' +forumTopicId: 16630 +dashedName: add-borders-around-your-elements +--- + +# --description-- + +CSS borders have properties like `style`, `color` and `width`. + +For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class: + +```html + +``` + +# --instructions-- + +Create a class called `thick-green-border`. This class should add a 10px, solid, green border around an HTML element. Apply the class to your cat photo. + +Remember that you can apply multiple classes to an element using its `class` attribute, by separating each class name with a space. For example: + +```html + +``` + +# --hints-- + +Your `img` element should have the class `smaller-image`. + +```js +assert($('img').hasClass('smaller-image')); +``` + +Your `img` element should have the class `thick-green-border`. + +```js +assert($('img').hasClass('thick-green-border')); +``` + +Your image should have a border width of `10px`. + +```js +assert( + $('img').hasClass('thick-green-border') && + parseInt($('img').css('border-top-width'), 10) >= 8 && + parseInt($('img').css('border-top-width'), 10) <= 12 +); +``` + +Your image should have a border style of `solid`. + +```js +assert($('img').css('border-right-style') === 'solid'); +``` + +The border around your `img` element should be green. + +```js +assert($('img').css('border-left-color') === 'rgb(0, 128, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` + +# --solutions-- + +```html + + + +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.md new file mode 100644 index 0000000000..f73e198f20 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.md @@ -0,0 +1,136 @@ +--- +id: bad87fee1248bd9aedf08824 +title: Add Different Margins to Each Side of an Element +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cg4RWh4' +forumTopicId: 16633 +dashedName: add-different-margins-to-each-side-of-an-element +--- + +# --description-- + +Sometimes you will want to customize an element so that it has a different `margin` on each of its sides. + +CSS allows you to control the `margin` of all four individual sides of an element with the `margin-top`, `margin-right`, `margin-bottom`, and `margin-left` properties. + +# --instructions-- + +Give the blue box a `margin` of `40px` on its top and left side, but only `20px` on its bottom and right side. + +# --hints-- + +Your `blue-box` class should give the top of elements `40px` of `margin`. + +```js +assert($('.blue-box').css('margin-top') === '40px'); +``` + +Your `blue-box` class should give the right of elements `20px` of `margin`. + +```js +assert($('.blue-box').css('margin-right') === '20px'); +``` + +Your `blue-box` class should give the bottom of elements `20px` of `margin`. + +```js +assert($('.blue-box').css('margin-bottom') === '20px'); +``` + +Your `blue-box` class should give the left of elements `40px` of `margin`. + +```js +assert($('.blue-box').css('margin-left') === '40px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
margin
+ +
+
padding
+
padding
+
+``` + +# --solutions-- + +```html + +
margin
+ +
+
padding
+
padding
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.md new file mode 100644 index 0000000000..b0699d0fc8 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.md @@ -0,0 +1,136 @@ +--- +id: bad87fee1348bd9aedf08824 +title: Add Different Padding to Each Side of an Element +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cB7mwUw' +forumTopicId: 16634 +dashedName: add-different-padding-to-each-side-of-an-element +--- + +# --description-- + +Sometimes you will want to customize an element so that it has different amounts of `padding` on each of its sides. + +CSS allows you to control the `padding` of all four individual sides of an element with the `padding-top`, `padding-right`, `padding-bottom`, and `padding-left` properties. + +# --instructions-- + +Give the blue box a `padding` of `40px` on its top and left side, but only `20px` on its bottom and right side. + +# --hints-- + +Your `blue-box` class should give the top of the elements `40px` of `padding`. + +```js +assert($('.blue-box').css('padding-top') === '40px'); +``` + +Your `blue-box` class should give the right of the elements `20px` of `padding`. + +```js +assert($('.blue-box').css('padding-right') === '20px'); +``` + +Your `blue-box` class should give the bottom of the elements `20px` of `padding`. + +```js +assert($('.blue-box').css('padding-bottom') === '20px'); +``` + +Your `blue-box` class should give the left of the elements `40px` of `padding`. + +```js +assert($('.blue-box').css('padding-left') === '40px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
margin
+ +
+
padding
+
padding
+
+``` + +# --solutions-- + +```html + +
margin
+ +
+
padding
+
padding
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.md new file mode 100644 index 0000000000..aee5ef2731 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.md @@ -0,0 +1,164 @@ +--- +id: bad87fee1348bd9aedf08814 +title: Add Rounded Corners with border-radius +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cbZm2hg' +forumTopicId: 16649 +dashedName: add-rounded-corners-with-border-radius +--- + +# --description-- + +Your cat photo currently has sharp corners. We can round out those corners with a CSS property called `border-radius`. + +# --instructions-- + +You can specify a `border-radius` with pixels. Give your cat photo a `border-radius` of `10px`. + +**Note:** This challenge allows for multiple possible solutions. For example, you may add `border-radius` to either the `.thick-green-border` class or the `.smaller-image` class. + +# --hints-- + +Your image element should have the class `thick-green-border`. + +```js +assert($('img').hasClass('thick-green-border')); +``` + +Your image should have a border radius of `10px`. + +```js +assert( + $('img').css('border-top-left-radius') === '10px' && + $('img').css('border-top-right-radius') === '10px' && + $('img').css('border-bottom-left-radius') === '10px' && + $('img').css('border-bottom-right-radius') === '10px' +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` + +# --solutions-- + +```html + + + +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.md new file mode 100644 index 0000000000..31a48593e0 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.md @@ -0,0 +1,116 @@ +--- +id: bad87fee1348bd9aedf08822 +title: Adjust the Margin of an Element +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cVJarHW' +forumTopicId: 16654 +dashedName: adjust-the-margin-of-an-element +--- + +# --description-- + +An element's `margin` controls the amount of space between an element's `border` and surrounding elements. + +Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has a bigger `margin` than the blue box, making it appear smaller. + +When you increase the blue box's `margin`, it will increase the distance between its border and surrounding elements. + +# --instructions-- + +Change the `margin` of the blue box to match that of the red box. + +# --hints-- + +Your `blue-box` class should give elements `20px` of `margin`. + +```js +assert($('.blue-box').css('margin-top') === '20px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
margin
+ +
+
padding
+
padding
+
+``` + +# --solutions-- + +```html + +
margin
+ +
+
padding
+
padding
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.md new file mode 100644 index 0000000000..cbbd38c5d8 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.md @@ -0,0 +1,118 @@ +--- +id: bad88fee1348bd9aedf08825 +title: Adjust the Padding of an Element +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cED8ZC2' +forumTopicId: 301083 +dashedName: adjust-the-padding-of-an-element +--- + +# --description-- + +Now let's put our Cat Photo App away for a little while and learn more about styling HTML. + +You may have already noticed this, but all HTML elements are essentially little rectangles. + +Three important properties control the space that surrounds each HTML element: `padding`, `border`, and `margin`. + +An element's `padding` controls the amount of space between the element's content and its `border`. + +Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has more `padding` than the blue box. + +When you increase the blue box's `padding`, it will increase the distance (`padding`) between the text and the border around it. + +# --instructions-- + +Change the `padding` of your blue box to match that of your red box. + +# --hints-- + +Your `blue-box` class should give elements `20px` of `padding`. + +```js +assert($('.blue-box').css('padding-top') === '20px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
margin
+ +
+
padding
+
padding
+
+``` + +# --solutions-- + +```html + +
margin
+ +
+
padding
+
padding
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.md new file mode 100644 index 0000000000..1d49492240 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.md @@ -0,0 +1,272 @@ +--- +id: 5a9d7286424fe3d0e10cad13 +title: Attach a Fallback value to a CSS Variable +challengeType: 0 +videoUrl: 'https://scrimba.com/c/c6bDNfp' +forumTopicId: 301084 +dashedName: attach-a-fallback-value-to-a-css-variable +--- + +# --description-- + +When using your variable as a CSS property value, you can attach a fallback value that your browser will revert to if the given variable is invalid. + +**Note:** This fallback is not used to increase browser compatibility, and it will not work on IE browsers. Rather, it is used so that the browser has a color to display if it cannot find your variable. + +Here's how you do it: + +```css +background: var(--penguin-skin, black); +``` + +This will set background to `black` if your variable wasn't set. Note that this can be useful for debugging. + +# --instructions-- + +It looks like there is a problem with the variables supplied to the `.penguin-top` and `.penguin-bottom` classes. Rather than fix the typo, add a fallback value of `black` to the `background` property of the `.penguin-top` and `.penguin-bottom` classes. + +# --hints-- + +The fallback value of `black` should be used in the `background` property of the `penguin-top` class. + +```js +assert( + code.match( + /.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi + ) +); +``` + +The fallback value of `black` should be used in `background` property of the `penguin-bottom` class. + +```js +assert( + code.match( + /.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.md new file mode 100644 index 0000000000..33646c3e90 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.md @@ -0,0 +1,254 @@ +--- +id: 5a9d72a1424fe3d0e10cad15 +title: Change a variable for a specific area +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cdRwbuW' +forumTopicId: 301085 +dashedName: change-a-variable-for-a-specific-area +--- + +# --description-- + +When you create your variables in `:root` they will set the value of that variable for the whole page. + +You can then over-write these variables by setting them again within a specific element. + +# --instructions-- + +Change the value of `--penguin-belly` to `white` in the `penguin` class. + +# --hints-- + +The `penguin` class should reassign the `--penguin-belly` variable to `white`. + +```js +assert( + code.match(/\.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi) +); +``` + +The `penguin` class should not contain the `background-color` property + +```js +assert( + code.match(/^((?!background-color\s*?:\s*?)[\s\S])*$/g) +); +``` + + +# --seed-- + +## --seed-contents-- + +```html + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/change-the-color-of-text.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/change-the-color-of-text.md new file mode 100644 index 0000000000..cb1529dddb --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/change-the-color-of-text.md @@ -0,0 +1,122 @@ +--- +id: bad87fee1348bd9aedf08803 +title: Change the Color of Text +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cRkVmSm' +forumTopicId: 16775 +dashedName: change-the-color-of-text +--- + +# --description-- + +Now let's change the color of some of our text. + +We can do this by changing the `style` of your `h2` element. + +The property that is responsible for the color of an element's text is the `color` style property. + +Here's how you would set your `h2` element's text color to blue: + +```html +

CatPhotoApp

+``` + +Note that it is a good practice to end inline `style` declarations with a `;` . + +# --instructions-- + +Change your `h2` element's style so that its text color is red. + +# --hints-- + +Your `h2` element should have a `style` declaration. + +```js +assert($('h2').attr('style')); +``` + +Your `h2` element should have color set to `red`. + +```js +assert($('h2')[0].style.color === 'red'); +``` + +Your `style` declaration should end with a `;` . + +```js +assert($('h2').attr('style') && $('h2').attr('style').endsWith(';')); +``` + +# --seed-- + +## --seed-contents-- + +```html +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` + +# --solutions-- + +```html +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.md new file mode 100644 index 0000000000..93152eeae6 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.md @@ -0,0 +1,119 @@ +--- +id: bad87fee1348bd9aedf08806 +title: Change the Font Size of an Element +challengeType: 0 +videoUrl: 'https://scrimba.com/c/c3bvDc8' +forumTopicId: 16777 +dashedName: change-the-font-size-of-an-element +--- + +# --description-- + +Font size is controlled by the `font-size` CSS property, like this: + +```css +h1 { + font-size: 30px; +} +``` + +# --instructions-- + +Inside the same ` + +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` + +# --solutions-- + +```html + + +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/create-a-custom-css-variable.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/create-a-custom-css-variable.md new file mode 100644 index 0000000000..59c863ab23 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/create-a-custom-css-variable.md @@ -0,0 +1,241 @@ +--- +id: 5a9d726c424fe3d0e10cad11 +title: Create a custom CSS Variable +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cQd27Hr' +forumTopicId: 301086 +dashedName: create-a-custom-css-variable +--- + +# --description-- + +To create a CSS variable, you just need to give it a name with two hyphens in front of it and assign it a value like this: + +```css +--penguin-skin: gray; +``` + +This will create a variable named `--penguin-skin` and assign it the value of `gray`. Now you can use that variable elsewhere in your CSS to change the value of other elements to gray. + +# --instructions-- + +In the `penguin` class, create a variable name `--penguin-skin` and give it a value of `gray`. + +# --hints-- + +`penguin` class should declare the `--penguin-skin` variable and assign it to `gray`. + +```js +assert( + code.match(/\.penguin\s*\{[^{}]*?--penguin-skin\s*:\s*gr[ae]y\s*;[^{}]*?\}/gi) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md new file mode 100644 index 0000000000..9b29ee1a86 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md @@ -0,0 +1,176 @@ +--- +id: bad87fed1348bd9aede07836 +title: Give a Background Color to a div Element +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cdRKMCk' +forumTopicId: 18190 +dashedName: give-a-background-color-to-a-div-element +--- + +# --description-- + +You can set an element's background color with the `background-color` property. + +For example, if you wanted an element's background color to be `green`, you'd put this within your `style` element: + +```css +.green-background { + background-color: green; +} +``` + +# --instructions-- + +Create a class called `silver-background` with the `background-color` of `silver`. Assign this class to your `div` element. + +# --hints-- + +Your`div` element should have the class `silver-background`. + +```js +assert($('div').hasClass('silver-background')); +``` + +Your `div` element should have a silver background. + +```js +assert($('div').css('background-color') === 'rgb(192, 192, 192)'); +``` + +A class named `silver-background` should be defined within the `style` element and the value of `silver` should be assigned to the `background-color` property. + +```js +assert(code.match(/\.silver-background\s*{\s*background-color\s*:\s*silver\s*;?\s*}/)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` + +# --solutions-- + +```html + + + +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/import-a-google-font.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/import-a-google-font.md new file mode 100644 index 0000000000..a946db2393 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/import-a-google-font.md @@ -0,0 +1,175 @@ +--- +id: bad87fee1348bd9aedf08807 +title: Import a Google Font +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cM9MRsJ' +forumTopicId: 18200 +dashedName: import-a-google-font +--- + +# --description-- + +In addition to specifying common fonts that are found on most operating systems, we can also specify non-standard, custom web fonts for use on our website. There are many sources for web fonts on the Internet. For this example we will focus on the Google Fonts library. + +[Google Fonts](https://fonts.google.com/) is a free library of web fonts that you can use in your CSS by referencing the font's URL. + +So, let's go ahead and import and apply a Google font (note that if Google is blocked in your country, you will need to skip this challenge). + +To import a Google Font, you can copy the font's URL from the Google Fonts library and then paste it in your HTML. For this challenge, we'll import the `Lobster` font. To do this, copy the following code snippet and paste it into the top of your code editor (before the opening `style` element): + +```html + +``` + +Now you can use the `Lobster` font in your CSS by using `Lobster` as the FAMILY_NAME as in the following example: + +```css +font-family: FAMILY_NAME, GENERIC_NAME; +``` + +The GENERIC_NAME is optional, and is a fallback font in case the other specified font is not available. This is covered in the next challenge. + +Family names are case-sensitive and need to be wrapped in quotes if there is a space in the name. For example, you need quotes to use the `"Open Sans"` font, but not to use the `Lobster` font. + +# --instructions-- + +Import the `Lobster` font to your web page. Then, use an element selector to set `Lobster` as the `font-family` for your `h2` element. + +# --hints-- + +You should import the `Lobster` font. + +```js +assert($('link[href*="googleapis" i]').length); +``` + +Your `h2` element should use the font `Lobster`. + +```js +assert( + $('h2') + .css('font-family') + .match(/lobster/i) +); +``` + +You should only use an `h2` element selector to change the font. + +```js +assert( + /\s*[^\.]h2\s*\{\s*font-family\s*:\s*('|"|)Lobster\1\s*(,\s*('|"|)[a-z -]+\3\s*)?(;\s*\}|\})/gi.test( + code + ) +); +``` + +Your `p` element should still use the font `monospace`. + +```js +assert( + $('p') + .css('font-family') + .match(/monospace/i) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` + +# --solutions-- + +```html + + + +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.md new file mode 100644 index 0000000000..214fac94d8 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.md @@ -0,0 +1,70 @@ +--- +id: 5b7d72c338cd7e35b63f3e14 +title: Improve Compatibility with Browser Fallbacks +challengeType: 0 +videoUrl: '' +forumTopicId: 301087 +dashedName: improve-compatibility-with-browser-fallbacks +--- + +# --description-- + +When working with CSS you will likely run into browser compatibility issues at some point. This is why it's important to provide browser fallbacks to avoid potential problems. + +When your browser parses the CSS of a webpage, it ignores any properties that it doesn't recognize or support. For example, if you use a CSS variable to assign a background color on a site, Internet Explorer will ignore the background color because it does not support CSS variables. In that case, the browser will use whatever value it has for that property. If it can't find any other value set for that property, it will revert to the default value, which is typically not ideal. + +This means that if you do want to provide a browser fallback, it's as easy as providing another more widely supported value immediately before your declaration. That way an older browser will have something to fall back on, while a newer browser will just interpret whatever declaration comes later in the cascade. + +# --instructions-- + +It looks like a variable is being used to set the background color of the `.red-box` class. Let's improve our browser compatibility by adding another `background` declaration right before the existing declaration and set its value to `red`. + +# --hints-- + +Your `.red-box` rule should include a fallback with the `background` set to `red` immediately before the existing `background` declaration. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /\.red-box{background:(red|#ff0000|#f00|rgb\(255,0,0\)|rgb\(100%,0%,0%\)|hsl\(0,100%,50%\));background:var\(--red-color\);height:200px;width:200px;}/gi + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+``` + +# --solutions-- + +```html + +
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/inherit-css-variables.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/inherit-css-variables.md new file mode 100644 index 0000000000..5bc6b580ab --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/inherit-css-variables.md @@ -0,0 +1,244 @@ +--- +id: 5a9d7295424fe3d0e10cad14 +title: Inherit CSS Variables +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cyLZZhZ' +forumTopicId: 301088 +dashedName: inherit-css-variables +--- + +# --description-- + +When you create a variable, it is available for you to use inside the selector in which you create it. It also is available in any of that selector's descendants. This happens because CSS variables are inherited, just like ordinary properties. + +To make use of inheritance, CSS variables are often defined in the :root element. + +`:root` is a pseudo-class selector that matches the root element of the document, usually the `html` element. By creating your variables in `:root`, they will be available globally and can be accessed from any other selector in the style sheet. + +# --instructions-- + +Define a variable named `--penguin-belly` in the `:root` selector and give it the value of `pink`. You can then see that the variable is inherited and that all the child elements which use it get pink backgrounds. + +# --hints-- + +The `--penguin-belly` variable should be declared in the `:root` and assigned the value `pink`. + +```js +assert( + code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.md new file mode 100644 index 0000000000..8a7b1baba4 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.md @@ -0,0 +1,111 @@ +--- +id: bad87fee1348bd9aedf08746 +title: Inherit Styles from the Body Element +challengeType: 0 +videoUrl: 'https://scrimba.com/c/c9bmdtR' +forumTopicId: 18204 +dashedName: inherit-styles-from-the-body-element +--- + +# --description-- + +Now we've proven that every HTML page has a `body` element, and that its `body` element can also be styled with CSS. + +Remember, you can style your `body` element just like any other HTML element, and all your other elements will inherit your `body` element's styles. + +# --instructions-- + +First, create a `h1` element with the text `Hello World` + +Then, let's give all elements on your page the color of `green` by adding `color: green;` to your `body` element's style declaration. + +Finally, give your `body` element the font-family of `monospace` by adding `font-family: monospace;` to your `body` element's style declaration. + +# --hints-- + +You should create an `h1` element. + +```js +assert($('h1').length > 0); +``` + +Your `h1` element should have the text `Hello World`. + +```js +assert( + $('h1').length > 0 && + $('h1') + .text() + .match(/hello world/i) +); +``` + +Your `h1` element should have a closing tag. + +```js +assert( + code.match(/<\/h1>/g) && + code.match(/

/g).length === code.match(/

0 && + $('h1') + .css('font-family') + .match(/monospace/i) +); +``` + +Your `h1` element should inherit the color green from your `body` element. + +```js +assert($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +

Hello World!

+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.md new file mode 100644 index 0000000000..8798810955 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.md @@ -0,0 +1,159 @@ +--- +id: bad87fee1348bd9aedf08815 +title: Make Circular Images with a border-radius +challengeType: 0 +videoUrl: 'https://scrimba.com/c/c2MvrcB' +forumTopicId: 18229 +dashedName: make-circular-images-with-a-border-radius +--- + +# --description-- + +In addition to pixels, you can also specify the `border-radius` using a percentage. + +# --instructions-- + +Give your cat photo a `border-radius` of `50%`. + +# --hints-- + +Your image should have a border radius of `50%`, making it perfectly circular. + +```js +assert(parseInt($('img').css('border-top-left-radius')) > 48); +``` + +The `border-radius` value should use a percentage value of `50%`. + +```js +assert(code.match(/50%/g)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` + +# --solutions-- + +```html + + + +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.md new file mode 100644 index 0000000000..4c4c24d79d --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.md @@ -0,0 +1,114 @@ +--- +id: bad87fee1348bd9aedf07756 +title: Override All Other Styles by using Important +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cm24rcp' +forumTopicId: 18249 +dashedName: override-all-other-styles-by-using-important +--- + +# --description-- + +Yay! We just proved that inline styles will override all the CSS declarations in your `style` element. + +But wait. There's one last way to override CSS. This is the most powerful method of all. But before we do it, let's talk about why you would ever want to override CSS. + +In many situations, you will use CSS libraries. These may accidentally override your own CSS. So when you absolutely need to be sure that an element has specific CSS, you can use `!important`. + +Let's go all the way back to our `pink-text` class declaration. Remember that our `pink-text` class was overridden by subsequent class declarations, id declarations, and inline styles. + +# --instructions-- + +Let's add the keyword `!important` to your pink-text element's color declaration to make 100% sure that your `h1` element will be pink. + +An example of how to do this is: + +```css +color: red !important; +``` + +# --hints-- + +Your `h1` element should have the class `pink-text`. + +```js +assert($('h1').hasClass('pink-text')); +``` + +Your `h1` element should have the class `blue-text`. + +```js +assert($('h1').hasClass('blue-text')); +``` + +Your `h1` element should have the `id` of `orange-text`. + +```js +assert($('h1').attr('id') === 'orange-text'); +``` + +Your `h1` element should have the inline style of `color: white`. + +```js +assert(code.match(/ + body { + background-color: black; + font-family: monospace; + color: green; + } + #orange-text { + color: orange; + } + .pink-text { + color: pink; + } + .blue-text { + color: blue; + } + +

Hello World!

+``` + +# --solutions-- + +```html + +

Hello World!

+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.md new file mode 100644 index 0000000000..5ab79faf82 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.md @@ -0,0 +1,123 @@ +--- +id: bad87fee1348bd8aedf06756 +title: Override Class Declarations by Styling ID Attributes +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cRkpDhB' +forumTopicId: 18251 +dashedName: override-class-declarations-by-styling-id-attributes +--- + +# --description-- + +We just proved that browsers read CSS from top to bottom in order of their declaration. That means that, in the event of a conflict, the browser will use whichever CSS declaration came last. Notice that if we even had put `blue-text` before `pink-text` in our `h1` element's classes, it would still look at the declaration order and not the order of their use! + +But we're not done yet. There are other ways that you can override CSS. Do you remember id attributes? + +Let's override your `pink-text` and `blue-text` classes, and make your `h1` element orange, by giving the `h1` element an id and then styling that id. + +# --instructions-- + +Give your `h1` element the `id` attribute of `orange-text`. Remember, id styles look like this: + +```html +

+``` + +Leave the `blue-text` and `pink-text` classes on your `h1` element. + +Create a CSS declaration for your `orange-text` id in your `style` element. Here's an example of what this looks like: + +```css +#brown-text { + color: brown; +} +``` + +**Note:** It doesn't matter whether you declare this CSS above or below `pink-text` class, since the `id` attribute will always take precedence. + +# --hints-- + +Your `h1` element should have the class `pink-text`. + +```js +assert($('h1').hasClass('pink-text')); +``` + +Your `h1` element should have the class `blue-text`. + +```js +assert($('h1').hasClass('blue-text')); +``` + +Your `h1` element should have the id of `orange-text`. + +```js +assert($('h1').attr('id') === 'orange-text'); +``` + +There should be only one `h1` element. + +```js +assert($('h1').length === 1); +``` + +Your `orange-text` id should have a CSS declaration. + +```js +assert(code.match(/#orange-text\s*{/gi)); +``` + +Your `h1` should not have any `style` attributes. + +```js +assert(!code.match(//gi)); +``` + +Your `h1` element should be orange. + +```js +assert($('h1').css('color') === 'rgb(255, 165, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +

Hello World!

+``` + +# --solutions-- + +```html + +

Hello World!

+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md new file mode 100644 index 0000000000..b74bc03043 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md @@ -0,0 +1,102 @@ +--- +id: bad87fee1348bd9aedf06756 +title: Override Class Declarations with Inline Styles +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cGJDRha' +forumTopicId: 18252 +dashedName: override-class-declarations-with-inline-styles +--- + +# --description-- + +So we've proven that id declarations override class declarations, regardless of where they are declared in your `style` element CSS. + +There are other ways that you can override CSS. Do you remember inline styles? + +# --instructions-- + +Use an inline style to try to make our `h1` element white. Remember, inline styles look like this: + +```html +

+``` + +Leave the `blue-text` and `pink-text` classes on your `h1` element. + +# --hints-- + +Your `h1` element should have the class `pink-text`. + +```js +assert($('h1').hasClass('pink-text')); +``` + +Your `h1` element should have the class `blue-text`. + +```js +assert($('h1').hasClass('blue-text')); +``` + +Your `h1` element should have the id of `orange-text`. + +```js +assert($('h1').attr('id') === 'orange-text'); +``` + +Your `h1` element should have an inline style. + +```js +assert(document.querySelector('h1[style]')); +``` + +Your `h1` element should be white. + +```js +assert($('h1').css('color') === 'rgb(255, 255, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +

Hello World!

+``` + +# --solutions-- + +```html + +

Hello World!

+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md new file mode 100644 index 0000000000..55ccdf3c48 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md @@ -0,0 +1,94 @@ +--- +id: bad87fee1348bd9aedf04756 +title: Override Styles in Subsequent CSS +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cGJDQug' +forumTopicId: 18253 +dashedName: override-styles-in-subsequent-css +--- + +# --description-- + +Our `pink-text` class overrode our `body` element's CSS declaration! + +We just proved that our classes will override the `body` element's CSS. So the next logical question is, what can we do to override our `pink-text` class? + +# --instructions-- + +Create an additional CSS class called `blue-text` that gives an element the color blue. Make sure it's below your `pink-text` class declaration. + +Apply the `blue-text` class to your `h1` element in addition to your `pink-text` class, and let's see which one wins. + +Applying multiple class attributes to a HTML element is done with a space between them like this: + +```html +class="class1 class2" +``` + +**Note:** It doesn't matter which order the classes are listed in the HTML element. + +However, the order of the `class` declarations in the ` +

Hello World!

+``` + +# --solutions-- + +```html + +

Hello World!

+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md new file mode 100644 index 0000000000..2f040b7d6a --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md @@ -0,0 +1,73 @@ +--- +id: bad87fee1348bd9aedf08756 +title: Prioritize One Style Over Another +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cZ8wnHv' +forumTopicId: 18258 +dashedName: prioritize-one-style-over-another +--- + +# --description-- + +Sometimes your HTML elements will receive multiple styles that conflict with one another. + +For example, your `h1` element can't be both green and pink at the same time. + +Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class *override* the `body` element's `color: green;` CSS property? + +# --instructions-- + +Create a CSS class called `pink-text` that gives an element the color pink. + +Give your `h1` element the class of `pink-text`. + +# --hints-- + +Your `h1` element should have the class `pink-text`. + +```js +assert($('h1').hasClass('pink-text')); +``` + +Your ` +

Hello World!

+``` + +# --solutions-- + +```html + +

Hello World!

+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.md new file mode 100644 index 0000000000..5e221db546 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.md @@ -0,0 +1,132 @@ +--- +id: bad87fee1348bd9aede08807 +title: Set the Font Family of an Element +challengeType: 0 +videoUrl: 'https://scrimba.com/c/c3bvpCg' +forumTopicId: 18278 +dashedName: set-the-font-family-of-an-element +--- + +# --description-- + +You can set which font an element should use, by using the `font-family` property. + +For example, if you wanted to set your `h2` element's font to `sans-serif`, you would use the following CSS: + +```css +h2 { + font-family: sans-serif; +} +``` + +# --instructions-- + +Make all of your `p` elements use the `monospace` font. + +# --hints-- + +Your `p` elements should use the font `monospace`. + +```js +assert( + $('p') + .not('.red-text') + .css('font-family') + .match(/monospace/i) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` + +# --solutions-- + +```html + + +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/set-the-id-of-an-element.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/set-the-id-of-an-element.md new file mode 100644 index 0000000000..933ce15b19 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/set-the-id-of-an-element.md @@ -0,0 +1,170 @@ +--- +id: bad87eee1348bd9aede07836 +title: Set the id of an Element +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cN6MEc2' +forumTopicId: 18279 +dashedName: set-the-id-of-an-element +--- + +# --description-- + +In addition to classes, each HTML element can also have an `id` attribute. + +There are several benefits to using `id` attributes: You can use an `id` to style a single element and later you'll learn that you can use them to select and modify specific elements with JavaScript. + +`id` attributes should be unique. Browsers won't enforce this, but it is a widely agreed upon best practice. So please don't give more than one element the same `id` attribute. + +Here's an example of how you give your `h2` element the id of `cat-photo-app`: + +```html +

+``` + +# --instructions-- + +Give your `form` element the id `cat-photo-form`. + +# --hints-- + +Your `form` element should have the id of `cat-photo-form`. + +```js +assert($('form').attr('id') === 'cat-photo-form'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` + +# --solutions-- + +```html + + + +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/size-your-images.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/size-your-images.md new file mode 100644 index 0000000000..c1e7b85f02 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/size-your-images.md @@ -0,0 +1,156 @@ +--- +id: bad87fee1348bd9acdf08812 +title: Size Your Images +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cM9MmCP' +forumTopicId: 18282 +dashedName: size-your-images +--- + +# --description-- + +CSS has a property called `width` that controls an element's width. Just like with fonts, we'll use `px` (pixels) to specify the image's width. + +For example, if we wanted to create a CSS class called `larger-image` that gave HTML elements a width of 500 pixels, we'd use: + +```html + +``` + +# --instructions-- + +Create a class called `smaller-image` and use it to resize the image so that it's only 100 pixels wide. + +# --hints-- + +Your `img` element should have the class `smaller-image`. + +```js +assert( + $("img[src='https://bit.ly/fcc-relaxing-cat']").attr('class') + .trim().split(/\s+/g).includes('smaller-image') +); +``` + +Your image should be 100 pixels wide. + +```js +assert( + $('img').width() < 200 && + code.match(/\.smaller-image\s*{\s*width\s*:\s*100px\s*(;\s*}|})/i) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` + +# --solutions-- + +```html + + + +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md new file mode 100644 index 0000000000..963681932a --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md @@ -0,0 +1,172 @@ +--- +id: bad87fee1348bd9aedf08808 +title: Specify How Fonts Should Degrade +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cpVKBfQ' +forumTopicId: 18304 +dashedName: specify-how-fonts-should-degrade +--- + +# --description-- + +There are several default fonts that are available in all browsers. These generic font families include `monospace`, `serif` and `sans-serif`. + +When one font isn't available, you can tell the browser to "degrade" to another font. + +For example, if you wanted an element to use the `Helvetica` font, but degrade to the `sans-serif` font when `Helvetica` isn't available, you will specify it as follows: + +```css +p { + font-family: Helvetica, sans-serif; +} +``` + +Generic font family names are not case-sensitive. Also, they do not need quotes because they are CSS keywords. + +# --instructions-- + +To begin, apply the `monospace` font to the `h2` element, so that it now has two fonts - `Lobster` and `monospace`. + +In the last challenge, you imported the `Lobster` font using the `link` tag. Now comment out that import of the `Lobster` font (using the HTML comments you learned before) from Google Fonts so that it isn't available anymore. Notice how your `h2` element degrades to the `monospace` font. + +**Note:** If you have the `Lobster` font installed on your computer, you won't see the degradation because your browser is able to find the font. + +# --hints-- + +Your h2 element should use the font `Lobster`. + +```js +assert( + $('h2') + .css('font-family') + .match(/^"?lobster/i) +); +``` + +Your h2 element should degrade to the font `monospace` when `Lobster` is not available. + +```js +assert( + /\s*h2\s*\{\s*font-family\s*\:\s*(\'|"|)Lobster\1\s*,\s*monospace\s*;?\s*\}/gi.test( + code + ) +); +``` + +You should comment out your call to Google for the `Lobster` font by putting ``. + +```js +assert(new RegExp('[^fc]-->', 'gi').test(code)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` + +# --solutions-- + +```html + + + +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.md new file mode 100644 index 0000000000..0db1bcf0bf --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.md @@ -0,0 +1,133 @@ +--- +id: bad87fee1348bd9aefe08806 +title: Style Multiple Elements with a CSS Class +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cRkVbsQ' +forumTopicId: 18311 +dashedName: style-multiple-elements-with-a-css-class +--- + +# --description-- + +Classes allow you to use the same CSS styles on multiple HTML elements. You can see this by applying your `red-text` class to the first `p` element. + +# --hints-- + +Your `h2` element should be red. + +```js +assert($('h2').css('color') === 'rgb(255, 0, 0)'); +``` + +Your `h2` element should have the class `red-text`. + +```js +assert($('h2').hasClass('red-text')); +``` + +Your first `p` element should be red. + +```js +assert($('p:eq(0)').css('color') === 'rgb(255, 0, 0)'); +``` + +Your second and third `p` elements should not be red. + +```js +assert( + !($('p:eq(1)').css('color') === 'rgb(255, 0, 0)') && + !($('p:eq(2)').css('color') === 'rgb(255, 0, 0)') +); +``` + +Your first `p` element should have the class `red-text`. + +```js +assert($('p:eq(0)').hasClass('red-text')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` + +# --solutions-- + +```html + + +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/style-the-html-body-element.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/style-the-html-body-element.md new file mode 100644 index 0000000000..26a469c1d1 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/style-the-html-body-element.md @@ -0,0 +1,70 @@ +--- +id: bad87fee1348bd9aedf08736 +title: Style the HTML Body Element +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cB77PHW' +forumTopicId: 18313 +dashedName: style-the-html-body-element +--- + +# --description-- + +Now let's start fresh and talk about CSS inheritance. + +Every HTML page has a `body` element. + +# --instructions-- + +We can prove that the `body` element exists here by giving it a `background-color` of black. + +We can do this by adding the following to our `style` element: + +```css +body { + background-color: black; +} +``` + +# --hints-- + +Your `body` element should have the `background-color` of black. + +```js +assert($('body').css('background-color') === 'rgb(0, 0, 0)'); +``` + +Your CSS rule should be properly formatted with both opening and closing curly brackets. + +```js +assert( + code.match(/ +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.md new file mode 100644 index 0000000000..f9e32b8b40 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.md @@ -0,0 +1,123 @@ +--- +id: bad82fee1322bd9aedf08721 +title: Understand Absolute versus Relative Units +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cN66JSL' +forumTopicId: 301089 +dashedName: understand-absolute-versus-relative-units +--- + +# --description-- + +The last several challenges all set an element's margin or padding with pixels (`px`). Pixels are a type of length unit, which is what tells the browser how to size or space an item. In addition to `px`, CSS has a number of different length unit options that you can use. + +The two main types of length units are absolute and relative. Absolute units tie to physical units of length. For example, `in` and `mm` refer to inches and millimeters, respectively. Absolute length units approximate the actual measurement on a screen, but there are some differences depending on a screen's resolution. + +Relative units, such as `em` or `rem`, are relative to another length value. For example, `em` is based on the size of an element's font. If you use it to set the `font-size` property itself, it's relative to the parent's `font-size`. + +**Note:** There are several relative unit options that are tied to the size of the viewport. They are covered in the Responsive Web Design Principles section. + +# --instructions-- + +Add a `padding` property to the element with class `red-box` and set it to `1.5em`. + +# --hints-- + +Your `red-box` class should have a `padding` property. + +```js +assert( + $('.red-box').css('padding-top') != '0px' && + $('.red-box').css('padding-right') != '0px' && + $('.red-box').css('padding-bottom') != '0px' && + $('.red-box').css('padding-left') != '0px' +); +``` + +Your `red-box` class should give elements 1.5em of `padding`. + +```js +assert(code.match(/\.red-box\s*?{[\s\S]*padding\s*:\s*?1\.5em/gi)); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
margin
+ +
+
padding
+
padding
+
+``` + +# --solutions-- + +```html + +
margin
+ +
+
padding
+
padding
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md new file mode 100644 index 0000000000..04afa43ecd --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md @@ -0,0 +1,142 @@ +--- +id: bad87fee1348bd9aecf08806 +title: Use a CSS Class to Style an Element +challengeType: 0 +videoUrl: 'https://scrimba.com/c/c2MvDtV' +forumTopicId: 18337 +dashedName: use-a-css-class-to-style-an-element +--- + +# --description-- + +Classes are reusable styles that can be added to HTML elements. + +Here's an example CSS class declaration: + +```html + +``` + +You can see that we've created a CSS class called `blue-text` within the ` + +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` + +# --solutions-- + +```html + + +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-a-custom-css-variable.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-a-custom-css-variable.md new file mode 100644 index 0000000000..fca17c44c6 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-a-custom-css-variable.md @@ -0,0 +1,287 @@ +--- +id: 5a9d727a424fe3d0e10cad12 +title: Use a custom CSS Variable +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cM989ck' +forumTopicId: 301090 +dashedName: use-a-custom-css-variable +--- + +# --description-- + +After you create your variable, you can assign its value to other CSS properties by referencing the name you gave it. + +```css +background: var(--penguin-skin); +``` + +This will change the background of whatever element you are targeting to gray because that is the value of the `--penguin-skin` variable. Note that styles will not be applied unless the variable names are an exact match. + +# --instructions-- + +Apply the `--penguin-skin` variable to the `background` property of the `penguin-top`, `penguin-bottom`, `right-hand` and `left-hand` classes. + +# --hints-- + +The `--penguin-skin` variable should be applied to the `background` property of the `penguin-top` class. + +```js +assert( + code.match( + /.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi + ) +); +``` + +The `--penguin-skin` variable should be applied to the `background` property of the `penguin-bottom` class. + +```js +assert( + code.match( + /.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi + ) +); +``` + +The `--penguin-skin` variable should be applied to the `background` property of the `right-hand` class. + +```js +assert( + code.match( + /.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi + ) +); +``` + +The `--penguin-skin` variable should be applied to the `background` property of the `left-hand` class. + +```js +assert( + code.match( + /.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.md new file mode 100644 index 0000000000..645245fd47 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.md @@ -0,0 +1,281 @@ +--- +id: 5a9d72ad424fe3d0e10cad16 +title: Use a media query to change a variable +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cWmL8UP' +forumTopicId: 301091 +dashedName: use-a-media-query-to-change-a-variable +--- + +# --description-- + +CSS Variables can simplify the way you use media queries. + +For instance, when your screen is smaller or larger than your media query break point, you can change the value of a variable, and it will apply its style wherever it is used. + +# --instructions-- + +In the `:root` selector of the `media query`, change it so `--penguin-size` is redefined and given a value of `200px`. Also, redefine `--penguin-skin` and give it a value of `black`. Then resize the preview to see this change in action. + +# --hints-- + +`:root` should reassign the `--penguin-size` variable to `200px`. + +```js +assert( + code.match( + /media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi + ) +); +``` + +`:root` should reassign the `--penguin-skin` variable to `black`. + +```js +assert( + code.match( + /media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md new file mode 100644 index 0000000000..562f498da5 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md @@ -0,0 +1,128 @@ +--- +id: bad87fee1348bd9aedf08719 +title: Use Abbreviated Hex Code +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cRkpKAm' +forumTopicId: 18338 +dashedName: use-abbreviated-hex-code +--- + +# --description-- + +Many people feel overwhelmed by the possibilities of more than 16 million colors. And it's difficult to remember hex code. Fortunately, you can shorten it. + +For example, red's hex code `#FF0000` can be shortened to `#F00`. This shortened form gives one digit for red, one digit for green, and one digit for blue. + +This reduces the total number of possible colors to around 4,000. But browsers will interpret `#FF0000` and `#F00` as exactly the same color. + +# --instructions-- + +Go ahead, try using the abbreviated hex codes to color the correct elements. + +
ColorShort Hex Code
Cyan#0FF
Green#0F0
Red#F00
Fuchsia#F0F
+ +# --hints-- + +Your `h1` element with the text `I am red!` should be given the `color` red. + +```js +assert($('.red-text').css('color') === 'rgb(255, 0, 0)'); +``` + +The abbreviated `hex code` for the color red should be used instead of the hex code `#FF0000`. + +```js +assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi)); +``` + +Your `h1` element with the text `I am green!` should be given the `color` green. + +```js +assert($('.green-text').css('color') === 'rgb(0, 255, 0)'); +``` + +The abbreviated `hex code` for the color green should be used instead of the hex code `#00FF00`. + +```js +assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi)); +``` + +Your `h1` element with the text `I am cyan!` should be given the `color` cyan. + +```js +assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)'); +``` + +The abbreviated `hex code` for the color cyan should be used instead of the hex code `#00FFFF`. + +```js +assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi)); +``` + +Your `h1` element with the text `I am fuchsia!` should be given the `color` fuchsia. + +```js +assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)'); +``` + +The abbreviated `hex code` for the color fuchsia should be used instead of the hex code `#FF00FF`. + +```js +assert(code.match(/\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

I am red!

+ +

I am fuchsia!

+ +

I am cyan!

+ +

I am green!

+``` + +# --solutions-- + +```html + + +

I am red!

+ +

I am fuchsia!

+ +

I am cyan!

+ +

I am green!

+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.md new file mode 100644 index 0000000000..9523b540b6 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.md @@ -0,0 +1,197 @@ +--- +id: bad87dee1348bd9aede07836 +title: Use an id Attribute to Style an Element +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cakyZfL' +forumTopicId: 18339 +dashedName: use-an-id-attribute-to-style-an-element +--- + +# --description-- + +One cool thing about `id` attributes is that, like classes, you can style them using CSS. + +However, an `id` is not reusable and should only be applied to one element. An `id` also has a higher specificity (importance) than a class so if both are applied to the same element and have conflicting styles, the styles of the `id` will be applied. + +Here's an example of how you can take your element with the `id` attribute of `cat-photo-element` and give it the background color of green. In your `style` element: + +```css +#cat-photo-element { + background-color: green; +} +``` + +Note that inside your `style` element, you always reference classes by putting a `.` in front of their names. You always reference ids by putting a `#` in front of their names. + +# --instructions-- + +Try giving your form, which now has the `id` attribute of `cat-photo-form`, a green background. + +# --hints-- + +Your `form` element should have the id of `cat-photo-form`. + +```js +assert($('form').attr('id') === 'cat-photo-form'); +``` + +Your `form` element should have the `background-color` of green. + +```js +assert($('#cat-photo-form').css('background-color') === 'rgb(0, 128, 0)'); +``` + +Your `form` element should have an `id` attribute. + +```js +assert( + code.match(//gi) && + code.match(//gi).length > 0 +); +``` + +You should not give your `form` any `class` or `style` attributes. + +```js +assert(!code.match(//gi) && !code.match(//gi)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` + +# --solutions-- + +```html + + + +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.md new file mode 100644 index 0000000000..168cb6005c --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.md @@ -0,0 +1,210 @@ +--- +id: 58c383d33e2e3259241f3076 +title: Use Attribute Selectors to Style Elements +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cnpymfJ' +forumTopicId: 301092 +dashedName: use-attribute-selectors-to-style-elements +--- + +# --description-- + +You have been adding `id` or `class` attributes to elements that you wish to specifically style. These are known as ID and class selectors. There are other CSS Selectors you can use to select custom groups of elements to style. + +Let's bring out CatPhotoApp again to practice using CSS Selectors. + +For this challenge, you will use the `[attr=value]` attribute selector to style the checkboxes in CatPhotoApp. This selector matches and styles elements with a specific attribute value. For example, the below code changes the margins of all elements with the attribute `type` and a corresponding value of `radio`: + +```css +[type='radio'] { + margin: 20px 0px 20px 0px; +} +``` + +# --instructions-- + +Using the `type` attribute selector, try to give the checkboxes in CatPhotoApp a top margin of 10px and a bottom margin of 15px. + +# --hints-- + +The `type` attribute selector should be used to select the checkboxes. + +```js +assert( + code.match( + / + +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` + +# --solutions-- + +```html + + + +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.md new file mode 100644 index 0000000000..00c60af541 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.md @@ -0,0 +1,143 @@ +--- +id: bad87fee1348bd9afdf08726 +title: Use Clockwise Notation to Specify the Margin of an Element +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cnpybAd' +forumTopicId: 18345 +dashedName: use-clockwise-notation-to-specify-the-margin-of-an-element +--- + +# --description-- + +Let's try this again, but with `margin` this time. + +Instead of specifying an element's `margin-top`, `margin-right`, `margin-bottom`, and `margin-left` properties individually, you can specify them all in one line, like this: + +```css +margin: 10px 20px 10px 20px; +``` + +These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions. + +# --instructions-- + +Use Clockwise Notation to give the element with the `blue-box` class a margin of `40px` on its top and left side, but only `20px` on its bottom and right side. + +# --hints-- + +Your `blue-box` class should give the top of elements `40px` of `margin`. + +```js +assert($('.blue-box').css('margin-top') === '40px'); +``` + +Your `blue-box` class should give the right of elements `20px` of `margin`. + +```js +assert($('.blue-box').css('margin-right') === '20px'); +``` + +Your `blue-box` class should give the bottom of elements `20px` of `margin`. + +```js +assert($('.blue-box').css('margin-bottom') === '20px'); +``` + +Your `blue-box` class should give the left of elements `40px` of `margin`. + +```js +assert($('.blue-box').css('margin-left') === '40px'); +``` + +You should use the clockwise notation to set the margin of `blue-box` class. + +```js +assert( + /\.blue-box\s*{[\s\S]*margin[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test( + __helpers.removeCssComments($('style').text()) + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
margin
+ +
+
padding
+
padding
+
+``` + +# --solutions-- + +```html + +
margin
+ +
+
padding
+
padding
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.md new file mode 100644 index 0000000000..569d65f3b9 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.md @@ -0,0 +1,141 @@ +--- +id: bad87fee1348bd9aedf08826 +title: Use Clockwise Notation to Specify the Padding of an Element +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cB7mBS9' +forumTopicId: 18346 +dashedName: use-clockwise-notation-to-specify-the-padding-of-an-element +--- + +# --description-- + +Instead of specifying an element's `padding-top`, `padding-right`, `padding-bottom`, and `padding-left` properties individually, you can specify them all in one line, like this: + +```css +padding: 10px 20px 10px 20px; +``` + +These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions. + +# --instructions-- + +Use Clockwise Notation to give the `.blue-box` class a `padding` of `40px` on its top and left side, but only `20px` on its bottom and right side. + +# --hints-- + +Your `blue-box` class should give the top of elements `40px` of `padding`. + +```js +assert($('.blue-box').css('padding-top') === '40px'); +``` + +Your `blue-box` class should give the right of elements `20px` of `padding`. + +```js +assert($('.blue-box').css('padding-right') === '20px'); +``` + +Your `blue-box` class should give the bottom of elements `20px` of `padding`. + +```js +assert($('.blue-box').css('padding-bottom') === '20px'); +``` + +Your `blue-box` class should give the left of elements `40px` of `padding`. + +```js +assert($('.blue-box').css('padding-left') === '40px'); +``` + +You should use the clockwise notation to set the padding of `blue-box` class. + +```js +assert( + /\.blue-box\s*{[\s\S]*padding[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test( + __helpers.removeCssComments($('style').text()) + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
margin
+ +
+
padding
+
padding
+
+``` + +# --solutions-- + +```html + +
margin
+ +
+
padding
+
padding
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.md new file mode 100644 index 0000000000..da7162df0f --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.md @@ -0,0 +1,158 @@ +--- +id: bad87fee1348bd9aedf08805 +title: Use CSS Selectors to Style Elements +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cJKMBT2' +forumTopicId: 18349 +dashedName: use-css-selectors-to-style-elements +--- + +# --description-- + +With CSS, there are hundreds of CSS properties that you can use to change the way an element looks on your page. + +When you entered `

CatPhotoApp

`, you were styling that individual `h2` element with inline CSS, which stands for Cascading Style Sheets. + +That's one way to specify the style of an element, but there's a better way to apply CSS. + +At the top of your code, create a `style` block like this: + +```html + +``` + +Inside that style block, you can create a CSS selector for all `h2` elements. For example, if you wanted all `h2` elements to be red, you would add a style rule that looks like this: + +```html + +``` + +Note that it's important to have both opening and closing curly braces (`{` and `}`) around each element's style rule(s). You also need to make sure that your element's style definition is between the opening and closing style tags. Finally, be sure to add a semicolon to the end of each of your element's style rules. + +# --instructions-- + +Delete your `h2` element's style attribute, and instead create a CSS `style` block. Add the necessary CSS to turn all `h2` elements blue. + +# --hints-- + +The `style` attribute should be removed from your `h2` element. + +```js +assert(!$('h2').attr('style')); +``` + +You should create a `style` element. + +```js +assert($('style') && $('style').length >= 1); +``` + +Your `h2` element should be blue. + +```js +assert($('h2').css('color') === 'rgb(0, 0, 255)'); +``` + +Your stylesheet `h2` declaration should be valid with a semicolon and closing brace. + +```js +assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g)); +``` + +All your `style` elements should be valid and have closing tags. + +```js +assert( + code.match(/<\/style>/g) && + code.match(/<\/style>/g).length === + ( + code.match( + //g + ) || [] + ).length +); +``` + +# --seed-- + +## --seed-contents-- + +```html +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` + +# --solutions-- + +```html + +

CatPhotoApp

+
+

Click here to view more cat photos.

+ + A cute orange cat lying on its back. + +
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ +
+ +
+ + +
+ + +
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.md new file mode 100644 index 0000000000..61f62132c6 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.md @@ -0,0 +1,257 @@ +--- +id: 5a9d725e424fe3d0e10cad10 +title: Use CSS Variables to change several elements at once +challengeType: 0 +videoUrl: 'https://scrimba.com/c/c6bDECm' +forumTopicId: 301093 +dashedName: use-css-variables-to-change-several-elements-at-once +--- + +# --description-- + +CSS Variables are a powerful way to change many CSS style properties at once by changing only one value. + +Follow the instructions below to see how changing just three values can change the styling of many elements. + +# --instructions-- + +In the `penguin` class, change the `black` value to `gray`, the `gray` value to `white`, and the `yellow` value to `orange`. + +# --hints-- + +`penguin` class should declare the `--penguin-skin` variable and assign it to `gray`. + +```js +assert( + code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi) +); +``` + +`penguin` class should declare the `--penguin-belly` variable and assign it to `white`. + +```js +assert( + code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi) +); +``` + +`penguin` class should declare the `--penguin-beak` variable and assign it to `orange`. + +```js +assert( + code.match(/.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md new file mode 100644 index 0000000000..dba4e9ded8 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md @@ -0,0 +1,66 @@ +--- +id: bad87fee1348bd9aedf08726 +title: Use Hex Code for Specific Colors +challengeType: 0 +videoUrl: 'https://scrimba.com/c/c8W9mHM' +forumTopicId: 18350 +dashedName: use-hex-code-for-specific-colors +--- + +# --description-- + +Did you know there are other ways to represent colors in CSS? One of these ways is called hexadecimal code, or hex code for short. + +We usually use decimals, or base 10 numbers, which use the symbols 0 to 9 for each digit. Hexadecimals (or hex) are base 16 numbers. This means it uses sixteen distinct symbols. Like decimals, the symbols 0-9 represent the values zero to nine. Then A,B,C,D,E,F represent the values ten to fifteen. Altogether, 0 to F can represent a digit in hexadecimal, giving us 16 total possible values. You can find more information about [hexadecimal numbers here](https://en.wikipedia.org/wiki/Hexadecimal). + +In CSS, we can use 6 hexadecimal digits to represent colors, two each for the red (R), green (G), and blue (B) components. For example, `#000000` is black and is also the lowest possible value. You can find more information about the [RGB color system here](https://en.wikipedia.org/wiki/RGB_color_model). + +```css +body { + color: #000000; +} +``` + +# --instructions-- + +Replace the word `black` in our `body` element's background-color with its hex code representation, `#000000`. + +# --hints-- + +Your `body` element should have the background-color of black. + +```js +assert($('body').css('background-color') === 'rgb(0, 0, 0)'); +``` + +The `hex code` for the color black should be used instead of the word `black`. + +```js +assert( + code.match( + /body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.md new file mode 100644 index 0000000000..c72783eba8 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.md @@ -0,0 +1,132 @@ +--- +id: bad87fee1348bd9aedf08721 +title: Use Hex Code to Mix Colors +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cK89PhP' +forumTopicId: 18359 +dashedName: use-hex-code-to-mix-colors +--- + +# --description-- + +To review, hex codes use 6 hexadecimal digits to represent colors, two each for red (R), green (G), and blue (B) components. + +From these three pure colors (red, green, and blue), we can vary the amounts of each to create over 16 million other colors! + +For example, orange is pure red, mixed with some green, and no blue. In hex code, this translates to being `#FFA500`. + +The digit `0` is the lowest number in hex code, and represents a complete absence of color. + +The digit `F` is the highest number in hex code, and represents the maximum possible brightness. + +# --instructions-- + +Replace the color words in our `style` element with their correct hex codes. + +
ColorHex Code
Dodger Blue#1E90FF
Green#00FF00
Orange#FFA500
Red#FF0000
+ +# --hints-- + +Your `h1` element with the text `I am red!` should be given the `color` red. + +```js +assert($('.red-text').css('color') === 'rgb(255, 0, 0)'); +``` + +The `hex code` for the color red should be used instead of the word `red`. + +```js +assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?(#FF0000|#F00)\s*?;?\s*?}/gi)); +``` + +Your `h1` element with the text `I am green!` should be given the `color` green. + +```js +assert($('.green-text').css('color') === 'rgb(0, 255, 0)'); +``` + +The `hex code` for the color green should be used instead of the word `green`. + +```js +assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?(#00FF00|#0F0)\s*?;?\s*?}/gi)); +``` + +Your `h1` element with the text `I am dodger blue!` should be given the `color` dodger blue. + +```js +assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)'); +``` + +The `hex code` for the color dodger blue should be used instead of the word `dodgerblue`. + +```js +assert(code.match(/\.dodger-blue-text\s*?{\s*?color\s*:\s*?#1E90FF\s*?;?\s*?}/gi)); +``` + +Your `h1` element with the text `I am orange!` should be given the `color` orange. + +```js +assert($('.orange-text').css('color') === 'rgb(255, 165, 0)'); +``` + +The `hex code` for the color orange should be used instead of the word `orange`. + +```js +assert(code.match(/\.orange-text\s*?{\s*?color\s*:\s*?#FFA500\s*?;?\s*?}/gi)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

I am red!

+ +

I am green!

+ +

I am dodger blue!

+ +

I am orange!

+``` + +# --solutions-- + +```html + + +

I am red!

+ +

I am green!

+ +

I am dodger blue!

+ +

I am orange!

+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.md new file mode 100644 index 0000000000..65af4b7769 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.md @@ -0,0 +1,140 @@ +--- +id: bad82fee1348bd9aedf08721 +title: Use RGB to Mix Colors +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cm24JU6' +forumTopicId: 18368 +dashedName: use-rgb-to-mix-colors +--- + +# --description-- + +Just like with hex code, you can mix colors in RGB by using combinations of different values. + +# --instructions-- + +Replace the hex codes in our `style` element with their correct RGB values. + +
ColorRGB
Bluergb(0, 0, 255)
Redrgb(255, 0, 0)
Orchidrgb(218, 112, 214)
Siennargb(160, 82, 45)
+ +# --hints-- + +Your `h1` element with the text `I am red!` should have the `color` red. + +```js +assert($('.red-text').css('color') === 'rgb(255, 0, 0)'); +``` + +You should use `rgb` for the color red. + +```js +assert( + code.match( + /\.red-text\s*{\s*color\s*:\s*rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)\s*;?\s*}/gi + ) +); +``` + +Your `h1` element with the text `I am orchid!` should have the `color` orchid. + +```js +assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)'); +``` + +You should use `rgb` for the color orchid. + +```js +assert( + code.match( + /\.orchid-text\s*{\s*color\s*:\s*rgb\(\s*218\s*,\s*112\s*,\s*214\s*\)\s*;?\s*}/gi + ) +); +``` + +Your `h1` element with the text `I am blue!` should have the `color` blue. + +```js +assert($('.blue-text').css('color') === 'rgb(0, 0, 255)'); +``` + +You should use `rgb` for the color blue. + +```js +assert( + code.match( + /\.blue-text\s*{\s*color\s*:\s*rgb\(\s*0\s*,\s*0\s*,\s*255\s*\)\s*;?\s*}/gi + ) +); +``` + +Your `h1` element with the text `I am sienna!` should have the `color` sienna. + +```js +assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)'); +``` + +You should use `rgb` for the color sienna. + +```js +assert( + code.match( + /\.sienna-text\s*{\s*color\s*:\s*rgb\(\s*160\s*,\s*82\s*,\s*45\s*\)\s*;?\s*}/gi + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

I am red!

+ +

I am orchid!

+ +

I am sienna!

+ +

I am blue!

+``` + +# --solutions-- + +```html + + +

I am red!

+ +

I am orchid!

+ +

I am sienna!

+ +

I am blue!

+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.md b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.md new file mode 100644 index 0000000000..a280b1cfad --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.md @@ -0,0 +1,76 @@ +--- +id: bad87fee1348bd9aede08718 +title: Use RGB values to Color Elements +challengeType: 0 +videoUrl: 'https://scrimba.com/c/cRkp2fr' +forumTopicId: 18369 +dashedName: use-rgb-values-to-color-elements +--- + +# --description-- + +Another way you can represent colors in CSS is by using `RGB` values. + +The `RGB` value for black looks like this: + +```css +rgb(0, 0, 0) +``` + +The `RGB` value for white looks like this: + +```css +rgb(255, 255, 255) +``` + +Instead of using six hexadecimal digits like you do with hex code, with `RGB` you specify the brightness of each color with a number between 0 and 255. + +If you do the math, the two digits for one color equal 16 times 16, which gives us 256 total values. So `RGB`, which starts counting from zero, has the exact same number of possible values as hex code. + +Here's an example of how you'd change the `body` background to orange using its RGB code. + +```css +body { + background-color: rgb(255, 165, 0); +} +``` + +# --instructions-- + +Let's replace the hex code in our `body` element's background color with the RGB value for black: `rgb(0, 0, 0)` + +# --hints-- + +Your `body` element should have a black background. + +```js +assert($('body').css('background-color') === 'rgb(0, 0, 0)'); +``` + +You should use `rgb` to give your `body` element a background of black. + +```js +assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/gi)); +``` + +# --seed-- + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md new file mode 100644 index 0000000000..a57c1732b6 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md @@ -0,0 +1,258 @@ +--- +id: 587d78ab367417b2b2512af1 +title: Add Flex Superpowers to the Tweet Embed +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pVaDAv/c9W7MhM' +forumTopicId: 301100 +dashedName: add-flex-superpowers-to-the-tweet-embed +--- + +# --description-- + +To the right is the tweet embed that will be used as a practical example. Some of the elements would look better with a different layout. The last challenge demonstrated `display: flex`. Here you'll add it to several components in the tweet embed to start adjusting their positioning. + +# --instructions-- + +Add the CSS property `display: flex` to all of the following items - note that the selectors are already set up in the CSS: + +`header`, the header's `.profile-name`, the header's `.follow-btn`, the header's `h3` and `h4`, the `footer`, and the footer's `.stats`. + +# --hints-- + +Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers. + +```js +assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none'); +``` + +Your `header` should have a `display` property set to `flex`. + +```js +assert($('header').css('display') == 'flex'); +``` + +Your `footer` should have a `display` property set to `flex`. + +```js +assert($('footer').css('display') == 'flex'); +``` + +Your `h3` should have a `display` property set to `flex`. + +```js +assert($('h3').css('display') == 'flex'); +``` + +Your `h4` should have a `display` property set to `flex`. + +```js +assert($('h4').css('display') == 'flex'); +``` + +Your `.profile-name` should have a `display` property set to `flex`. + +```js +assert($('.profile-name').css('display') == 'flex'); +``` + +Your `.follow-btn` should have a `display` property set to `flex`. + +```js +assert($('.follow-btn').css('display') == 'flex'); +``` + +Your `.stats` should have a `display` property set to `flex`. + +```js +assert($('.stats').css('display') == 'flex'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+ Quincy Larson's profile picture +
+

Quincy Larson

+

@ossia

+
+ +
+
+

I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.

+ 1:32 PM - 12 Jan 2018 +
+
+
+
+
+ 107 Retweets +
+ +
+
+ + + +
+
+``` + +# --solutions-- + +```html + +
+ Quincy Larson's profile picture +
+

Quincy Larson

+

@ossia

+
+ +
+
+

I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.

+ 1:32 PM - 12 Jan 2018 +
+
+
+
+
+ 107 Retweets +
+ +
+
+ + + +
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.md new file mode 100644 index 0000000000..c285cfb745 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.md @@ -0,0 +1,95 @@ +--- +id: 587d78ad367417b2b2512af8 +title: Align Elements Using the align-items Property +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pVaDAv/c8aggtk' +forumTopicId: 301101 +dashedName: align-elements-using-the-align-items-property +--- + +# --description-- + +The `align-items` property is similar to `justify-content`. Recall that the `justify-content` property aligned flex items along the main axis. For rows, the main axis is a horizontal line and for columns it is a vertical line. + +Flex containers also have a **cross axis** which is the opposite of the main axis. For rows, the cross axis is vertical and for columns, the cross axis is horizontal. + +CSS offers the `align-items` property to align flex items along the cross axis. For a row, it tells CSS how to push the items in the entire row up or down within the container. And for a column, how to push all the items left or right within the container. + +The different values available for `align-items` include: + +
  • flex-start: aligns items to the start of the flex container. For rows, this aligns items to the top of the container. For columns, this aligns items to the left of the container.
  • flex-end: aligns items to the end of the flex container. For rows, this aligns items to the bottom of the container. For columns, this aligns items to the right of the container.
  • center: align items to the center. For rows, this vertically aligns items (equal space above and below the items). For columns, this horizontally aligns them (equal space to the left and right of the items).
  • stretch: stretch the items to fill the flex container. For example, rows items are stretched to fill the flex container top-to-bottom. This is the default value if no align-items value is specified.
  • baseline: align items to their baselines. Baseline is a text concept, think of it as the line that the letters sit on.
+ +# --instructions-- + +An example helps show this property in action. Add the CSS property `align-items` to the `#box-container` element, and give it a value of `center`. + +**Bonus** +Try the other options for the `align-items` property in the code editor to see their differences. But note that a value of `center` is the only one that will pass this challenge. + +# --hints-- + +The `#box-container` element should have an `align-items` property set to a value of `center`. + +```js +assert($('#box-container').css('align-items') == 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+

Hello

+

Goodbye

+
+``` + +# --solutions-- + +```html + + +
+

Hello

+

Goodbye

+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md new file mode 100644 index 0000000000..8639b8d144 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md @@ -0,0 +1,95 @@ +--- +id: 587d78ac367417b2b2512af6 +title: Align Elements Using the justify-content Property +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pVaDAv/c43gnHm' +forumTopicId: 301102 +dashedName: align-elements-using-the-justify-content-property +--- + +# --description-- + +Sometimes the flex items within a flex container do not fill all the space in the container. It is common to want to tell CSS how to align and space out the flex items a certain way. Fortunately, the `justify-content` property has several options to do this. But first, there is some important terminology to understand before reviewing those options. + +[Here is a useful image showing a row to illustrate the concepts below.](https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg) + +Recall that setting a flex container as a row places the flex items side-by-side from left-to-right. A flex container set as a column places the flex items in a vertical stack from top-to-bottom. For each, the direction the flex items are arranged is called the **main axis**. For a row, this is a horizontal line that cuts through each item. And for a column, the main axis is a vertical line through the items. + +There are several options for how to space the flex items along the line that is the main axis. One of the most commonly used is `justify-content: center;`, which aligns all the flex items to the center inside the flex container. Other options include: + +
  • flex-start: aligns items to the start of the flex container. For a row, this pushes the items to the left of the container. For a column, this pushes the items to the top of the container. This is the default alignment if no justify-content is specified.
  • flex-end: aligns items to the end of the flex container. For a row, this pushes the items to the right of the container. For a column, this pushes the items to the bottom of the container.
  • space-between: aligns items to the center of the main axis, with extra space placed between the items. The first and last items are pushed to the very edge of the flex container. For example, in a row the first item is against the left side of the container, the last item is against the right side of the container, then the remaining space is distributed evenly among the other items.
  • space-around: similar to space-between but the first and last items are not locked to the edges of the container, the space is distributed around all the items with a half space on either end of the flex container.
  • space-evenly: Distributes space evenly between the flex items with a full space at either end of the flex container
+ +# --instructions-- + +An example helps show this property in action. Add the CSS property `justify-content` to the `#box-container` element, and give it a value of `center`. + +**Bonus** +Try the other options for the `justify-content` property in the code editor to see their differences. But note that a value of `center` is the only one that will pass this challenge. + +# --hints-- + +The `#box-container` element should have a `justify-content` property set to a value of `center`. + +```js +assert($('#box-container').css('justify-content') == 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
+
+
+``` + +# --solutions-- + +```html + + +
+
+
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.md new file mode 100644 index 0000000000..ae884b649a --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.md @@ -0,0 +1,218 @@ +--- +id: 587d78ac367417b2b2512af5 +title: Apply the flex-direction Property to Create a Column in the Tweet Embed +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pVaDAv/cnzdVC9' +forumTopicId: 301103 +dashedName: apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed +--- + +# --description-- + +The tweet embed `header` and `footer` used the `flex-direction` property earlier with a row value. Similarly, the items inside the `.profile-name` element would work well stacked as a column. + +# --instructions-- + +Add the CSS property `flex-direction` to the header's `.profile-name` element and set the value to `column`. + +# --hints-- + +Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers. + +```js +assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none'); +``` + +The `.profile-name` element should have a `flex-direction` property set to `column`. + +```js +assert($('.profile-name').css('flex-direction') == 'column'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+ Quincy Larson's profile picture +
+

Quincy Larson

+

@ossia

+
+ +
+
+

I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.

+ 1:32 PM - 12 Jan 2018 +
+
+
+
+
+ 107 Retweets +
+ +
+
+ + + +
+
+``` + +# --solutions-- + +```html + +
+ Quincy Larson's profile picture +
+

Quincy Larson

+

@ossia

+
+ +
+
+

I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.

+ 1:32 PM - 12 Jan 2018 +
+
+
+
+
+ 107 Retweets +
+ +
+
+ + + +
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.md new file mode 100644 index 0000000000..8458c968c3 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.md @@ -0,0 +1,230 @@ +--- +id: 587d78ab367417b2b2512af3 +title: Apply the flex-direction Property to Create Rows in the Tweet Embed +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pVaDAv/cJb8yuq' +forumTopicId: 301104 +dashedName: apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed +--- + +# --description-- + +The `header` and `footer` in the tweet embed example have child items that could be arranged as rows using the `flex-direction` property. This tells CSS to align the children horizontally. + +# --instructions-- + +Add the CSS property `flex-direction` to both the `header` and `footer` and set the value to `row`. + +# --hints-- + +Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers. + +```js +assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none'); +``` + +The `header` should have a `flex-direction` property set to `row`. + +```js +assert(code.match(/header\s*?{[^}]*?flex-direction:\s*?row;/g)); +``` + +The `footer` should have a `flex-direction` property set to `row`. + +```js +assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g)); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+ Quincy Larson's profile picture +
+

Quincy Larson

+

@ossia

+
+ +
+
+

I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.

+ 1:32 PM - 12 Jan 2018 +
+
+
+
+
+ 107 Retweets +
+ +
+
+ + + +
+
+``` + +# --solutions-- + +```html + +
+ Quincy Larson's profile picture +
+

Quincy Larson

+

@ossia

+
+ +
+
+

I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.

+ 1:32 PM - 12 Jan 2018 +
+
+
+
+
+ 107 Retweets +
+ +
+
+ + + +
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.md new file mode 100644 index 0000000000..501416b7c2 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.md @@ -0,0 +1,82 @@ +--- +id: 587d78ab367417b2b2512af0 +title: 'Use display: flex to Position Two Boxes' +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pVaDAv/cgz3QS7' +forumTopicId: 301105 +dashedName: use-display-flex-to-position-two-boxes +--- + +# --description-- + +This section uses alternating challenge styles to show how to use CSS to position elements in a flexible way. First, a challenge will explain theory, then a practical challenge using a simple tweet component will apply the flexbox concept. + +Placing the CSS property `display: flex;` on an element allows you to use other flex properties to build a responsive page. + +# --instructions-- + +Add the CSS property `display` to `#box-container` and set its value to `flex`. + +# --hints-- + +`#box-container` should have the `display` property set to a value of `flex`. + +```js +assert($('#box-container').css('display') == 'flex'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+
+
+
+``` + +# --solutions-- + +```html + +
+
+
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.md new file mode 100644 index 0000000000..98b3d28d95 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.md @@ -0,0 +1,222 @@ +--- +id: 587d78ad367417b2b2512af9 +title: Use the align-items Property in the Tweet Embed +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pVaDAv/cd3PNfq' +forumTopicId: 301106 +dashedName: use-the-align-items-property-in-the-tweet-embed +--- + +# --description-- + +The last challenge introduced the `align-items` property and gave an example. This property can be applied to a few tweet embed elements to align the flex items inside them. + +# --instructions-- + +Add the CSS property `align-items` to the header's `.follow-btn` element. Set the value to `center`. + +# --hints-- + +Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers. + +```js +assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none'); +``` + +The `.follow-btn` element should have the `align-items` property set to a value of `center`. + +```js +assert($('.follow-btn').css('align-items') == 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+ Quincy Larson's profile picture +
+

Quincy Larson

+

@ossia

+
+ +
+
+

I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.

+ 1:32 PM - 12 Jan 2018 +
+
+
+
+
+ 107 Retweets +
+ +
+
+ + + +
+
+``` + +# --solutions-- + +```html + +
+ Quincy Larson's profile picture +
+

Quincy Larson

+

@ossia

+
+ +
+
+

I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.

+ 1:32 PM - 12 Jan 2018 +
+
+
+
+
+ 107 Retweets +
+ +
+
+ + + +
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-align-self-property.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-align-self-property.md new file mode 100644 index 0000000000..acfa330961 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-align-self-property.md @@ -0,0 +1,92 @@ +--- +id: 587d78af367417b2b2512b00 +title: Use the align-self Property +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pVaDAv/cMbvzfv' +forumTopicId: 301107 +dashedName: use-the-align-self-property +--- + +# --description-- + +The final property for flex items is `align-self`. This property allows you to adjust each item's alignment individually, instead of setting them all at once. This is useful since other common adjustment techniques using the CSS properties `float`, `clear`, and `vertical-align` do not work on flex items. + +`align-self` accepts the same values as `align-items` and will override any value set by the `align-items` property. + +# --instructions-- + +Add the CSS property `align-self` to both `#box-1` and `#box-2`. Give `#box-1` a value of `center` and give `#box-2` a value of `flex-end`. + +# --hints-- + +The `#box-1` element should have the `align-self` property set to a value of `center`. + +```js +assert($('#box-1').css('align-self') == 'center'); +``` + +The `#box-2` element should have the `align-self` property set to a value of `flex-end`. + +```js +assert($('#box-2').css('align-self') == 'flex-end'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
+
+
+``` + +# --solutions-- + +```html + + +
+
+
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item.md new file mode 100644 index 0000000000..905c259fa4 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item.md @@ -0,0 +1,102 @@ +--- +id: 587d78ae367417b2b2512afd +title: Use the flex-basis Property to Set the Initial Size of an Item +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pVaDAv/c3d9nCa' +forumTopicId: 301108 +dashedName: use-the-flex-basis-property-to-set-the-initial-size-of-an-item +--- + +# --description-- + +The `flex-basis` property specifies the initial size of the item before CSS makes adjustments with `flex-shrink` or `flex-grow`. + +The units used by the `flex-basis` property are the same as other size properties (`px`, `em`, `%`, etc.). The value `auto` sizes items based on the content. + +# --instructions-- + +Set the initial size of the boxes using `flex-basis`. Add the CSS property `flex-basis` to both `#box-1` and `#box-2`. Give `#box-1` a value of `10em` and `#box-2` a value of `20em`. + +# --hints-- + +The `#box-1` element should have the `flex-basis` property. + +```js +assert($('#box-1').css('flex-basis') != 'auto'); +``` + +The `#box-1` element should have a `flex-basis` value of `10em`. + +```js +assert(code.match(/#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g)); +``` + +The `#box-2` element should have the `flex-basis` property. + +```js +assert($('#box-2').css('flex-basis') != 'auto'); +``` + +The `#box-2` element should have a `flex-basis` value of `20em`. + +```js +assert(code.match(/#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
+
+
+``` + +# --solutions-- + +```html + + +
+
+
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.md new file mode 100644 index 0000000000..3c4d4ed9ec --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.md @@ -0,0 +1,82 @@ +--- +id: 587d78ac367417b2b2512af4 +title: Use the flex-direction Property to Make a Column +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pVaDAv/cZmWeA4' +forumTopicId: 301109 +dashedName: use-the-flex-direction-property-to-make-a-column +--- + +# --description-- + +The last two challenges used the `flex-direction` property set to `row`. This property can also create a column by vertically stacking the children of a flex container. + +# --instructions-- + +Add the CSS property `flex-direction` to the `#box-container` element, and give it a value of `column`. + +# --hints-- + +The `#box-container` element should have a `flex-direction` property set to `column`. + +```js +assert($('#box-container').css('flex-direction') == 'column'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
+
+
+``` + +# --solutions-- + +```html + + +
+
+
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.md new file mode 100644 index 0000000000..0820808a7f --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.md @@ -0,0 +1,86 @@ +--- +id: 587d78ab367417b2b2512af2 +title: Use the flex-direction Property to Make a Row +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pVaDAv/cBEkbfJ' +forumTopicId: 301110 +dashedName: use-the-flex-direction-property-to-make-a-row +--- + +# --description-- + +Adding `display: flex` to an element turns it into a flex container. This makes it possible to align any children of that element into rows or columns. You do this by adding the `flex-direction` property to the parent item and setting it to row or column. Creating a row will align the children horizontally, and creating a column will align the children vertically. + +Other options for `flex-direction` are `row-reverse` and `column-reverse`. + +**Note:** The default value for the `flex-direction` property is `row`. + +# --instructions-- + +Add the CSS property `flex-direction` to the `#box-container` element, and give it a value of `row-reverse`. + +# --hints-- + +The `#box-container` element should have a `flex-direction` property set to `row-reverse`. + +```js +assert($('#box-container').css('flex-direction') == 'row-reverse'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
+
+
+``` + +# --solutions-- + +```html + + +
+
+
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.md new file mode 100644 index 0000000000..7a2a099946 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.md @@ -0,0 +1,90 @@ +--- +id: 587d78ae367417b2b2512afc +title: Use the flex-grow Property to Expand Items +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pVaDAv/c2p78cg' +forumTopicId: 301111 +dashedName: use-the-flex-grow-property-to-expand-items +--- + +# --description-- + +The opposite of `flex-shrink` is the `flex-grow` property. Recall that `flex-shrink` controls the size of the items when the container shrinks. The `flex-grow` property controls the size of items when the parent container expands. + +Using a similar example from the last challenge, if one item has a `flex-grow` value of `1` and the other has a `flex-grow` value of `3`, the one with the value of `3` will grow three times as much as the other. + +# --instructions-- + +Add the CSS property `flex-grow` to both `#box-1` and `#box-2`. Give `#box-1` a value of `1` and `#box-2` a value of `2`. + +# --hints-- + +The `#box-1` element should have the `flex-grow` property set to a value of `1`. + +```js +assert($('#box-1').css('flex-grow') == '1'); +``` + +The `#box-2` element should have the `flex-grow` property set to a value of `2`. + +```js +assert($('#box-2').css('flex-grow') == '2'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
+
+
+``` + +# --solutions-- + +```html + + +
+
+
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.md new file mode 100644 index 0000000000..69cbf5e74c --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.md @@ -0,0 +1,106 @@ +--- +id: 587d78ae367417b2b2512afe +title: Use the flex Shorthand Property +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pVaDAv/cbpW2tE' +forumTopicId: 301112 +dashedName: use-the-flex-shorthand-property +--- + +# --description-- + +There is a shortcut available to set several flex properties at once. The `flex-grow`, `flex-shrink`, and `flex-basis` properties can all be set together by using the `flex` property. + +For example, `flex: 1 0 10px;` will set the item to `flex-grow: 1;`, `flex-shrink: 0;`, and `flex-basis: 10px;`. + +The default property settings are `flex: 0 1 auto;`. + +# --instructions-- + +Add the CSS property `flex` to both `#box-1` and `#box-2`. Give `#box-1` the values so its `flex-grow` is `2`, its `flex-shrink` is `2`, and its `flex-basis` is `150px`. Give `#box-2` the values so its `flex-grow` is `1`, its `flex-shrink` is `1`, and its `flex-basis` is `150px`. + +These values will cause `#box-1` to grow to fill the extra space at twice the rate of `#box-2` when the container is greater than 300px and shrink at twice the rate of `#box-2` when the container is less than 300px. 300px is the combined size of the `flex-basis` values of the two boxes. + +# --hints-- + +The `#box-1` element should have the `flex` property set to a value of `2 2 150px`. + +```js +assert( + $('#box-1').css('flex-grow') == '2' && + $('#box-1').css('flex-shrink') == '2' && + $('#box-1').css('flex-basis') == '150px' +); +``` + +The `#box-2` element should have the `flex` property set to a value of `1 1 150px`. + +```js +assert( + $('#box-2').css('flex-grow') == '1' && + $('#box-2').css('flex-shrink') == '1' && + $('#box-2').css('flex-basis') == '150px' +); +``` + +Your code should use the `flex` property for `#box-1` and `#box-2`. + +```js +assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
+
+
+``` + +# --solutions-- + +```html + + +
+
+
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.md new file mode 100644 index 0000000000..fc9b59ab23 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.md @@ -0,0 +1,94 @@ +--- +id: 587d78ad367417b2b2512afb +title: Use the flex-shrink Property to Shrink Items +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pVaDAv/cd3PBfr' +forumTopicId: 301113 +dashedName: use-the-flex-shrink-property-to-shrink-items +--- + +# --description-- + +So far, all the properties in the challenges apply to the flex container (the parent of the flex items). However, there are several useful properties for the flex items. + +The first is the `flex-shrink` property. When it's used, it allows an item to shrink if the flex container is too small. Items shrink when the width of the parent container is smaller than the combined widths of all the flex items within it. + +The `flex-shrink` property takes numbers as values. The higher the number, the more it will shrink compared to the other items in the container. For example, if one item has a `flex-shrink` value of `1` and the other has a `flex-shrink` value of `3`, the one with the value of `3` will shrink three times as much as the other. + +# --instructions-- + +Add the CSS property `flex-shrink` to both `#box-1` and `#box-2`. Give `#box-1` a value of `1` and `#box-2` a value of `2`. + +# --hints-- + +The `#box-1` element should have the `flex-shrink` property set to a value of `1`. + +```js +assert($('#box-1').css('flex-shrink') == '1'); +``` + +The `#box-2` element should have the `flex-shrink` property set to a value of `2`. + +```js +assert($('#box-2').css('flex-shrink') == '2'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
+
+
+``` + +# --solutions-- + +```html + + +
+
+
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.md new file mode 100644 index 0000000000..64b7286f8d --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.md @@ -0,0 +1,138 @@ +--- +id: 587d78ad367417b2b2512afa +title: Use the flex-wrap Property to Wrap a Row or Column +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pVaDAv/cQv9ZtG' +forumTopicId: 301114 +dashedName: use-the-flex-wrap-property-to-wrap-a-row-or-column +--- + +# --description-- + +CSS flexbox has a feature to split a flex item into multiple rows (or columns). By default, a flex container will fit all flex items together. For example, a row will all be on one line. + +However, using the `flex-wrap` property tells CSS to wrap items. This means extra items move into a new row or column. The break point of where the wrapping happens depends on the size of the items and the size of the container. + +CSS also has options for the direction of the wrap: + +
  • nowrap: this is the default setting, and does not wrap items.
  • wrap: wraps items onto multiple lines from top-to-bottom if they are in rows and left-to-right if they are in columns.
  • wrap-reverse: wraps items onto multiple lines from bottom-to-top if they are in rows and right-to-left if they are in columns.
+ +# --instructions-- + +The current layout has too many boxes for one row. Add the CSS property `flex-wrap` to the `#box-container` element, and give it a value of `wrap`. + +# --hints-- + +The `#box-container` element should have the `flex-wrap` property set to a value of `wrap`. + +```js +assert($('#box-container').css('flex-wrap') == 'wrap'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
+
+
+
+
+
+
+``` + +# --solutions-- + +```html + + +
+
+
+
+
+
+
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed.md new file mode 100644 index 0000000000..367ec16ba6 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed.md @@ -0,0 +1,224 @@ +--- +id: 587d78ac367417b2b2512af7 +title: Use the justify-content Property in the Tweet Embed +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pVaDAv/c43GgTa' +forumTopicId: 301115 +dashedName: use-the-justify-content-property-in-the-tweet-embed +--- + +# --description-- + +The last challenge showed an example of the `justify-content` property. For the tweet embed, this property can be applied to align the items in the `.profile-name` element. + +# --instructions-- + +Add the CSS property `justify-content` to the header's `.profile-name` element and set the value to any of the options from the last challenge. + +# --hints-- + +Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers. + +```js +assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none'); +``` + +The `.profile-name` element should have the `justify-content` property set to any of these values: `center`, `flex-start`, `flex-end`, `space-between`, `space-around`, or `space-evenly`. + +```js +assert( + code.match( + /header\s.profile-name\s*{\s*?.*?\s*?.*?\s*?\s*?.*?\s*?justify-content\s*:\s*(center|flex-start|flex-end|space-between|space-around|space-evenly)\s*;/g + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+ Quincy Larson's profile picture +
+

Quincy Larson

+

@ossia

+
+ +
+
+

I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.

+ 1:32 PM - 12 Jan 2018 +
+
+
+
+
+ 107 Retweets +
+ +
+
+ + + +
+
+``` + +# --solutions-- + +```html + +
+ Quincy Larson's profile picture +
+

Quincy Larson

+

@ossia

+
+ +
+
+

I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.

+ 1:32 PM - 12 Jan 2018 +
+
+
+
+
+ 107 Retweets +
+ +
+
+ + + +
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.md new file mode 100644 index 0000000000..600e75391c --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.md @@ -0,0 +1,90 @@ +--- +id: 587d78ae367417b2b2512aff +title: Use the order Property to Rearrange Items +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pVaDAv/cMbvNAG' +forumTopicId: 301116 +dashedName: use-the-order-property-to-rearrange-items +--- + +# --description-- + +The `order` property is used to tell CSS the order of how flex items appear in the flex container. By default, items will appear in the same order they come in the source HTML. The property takes numbers as values, and negative numbers can be used. + +# --instructions-- + +Add the CSS property `order` to both `#box-1` and `#box-2`. Give `#box-1` a value of `2` and give `#box-2` a value of `1`. + +# --hints-- + +The `#box-1` element should have the `order` property set to a value of `2`. + +```js +assert($('#box-1').css('order') == '2'); +``` + +The `#box-2` element should have the `order` property set to a value of `1`. + +```js +assert($('#box-2').css('order') == '1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
+
+
+``` + +# --solutions-- + +```html + + +
+
+
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.md new file mode 100644 index 0000000000..d5680637d8 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.md @@ -0,0 +1,76 @@ +--- +id: 5a9036d038fddaf9a66b5d32 +title: Add Columns with grid-template-columns +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pByETK/c7NzDHv' +forumTopicId: 301117 +dashedName: add-columns-with-grid-template-columns +--- + +# --description-- + +Simply creating a grid element doesn't get you very far. You need to define the structure of the grid as well. To add some columns to the grid, use the `grid-template-columns` property on a grid container as demonstrated below: + +```css +.container { + display: grid; + grid-template-columns: 50px 50px; +} +``` + +This will give your grid two columns that are each 50px wide. The number of parameters given to the `grid-template-columns` property indicates the number of columns in the grid, and the value of each parameter indicates the width of each column. + +# --instructions-- + +Give the grid container three columns that are each `100px` wide. + +# --hints-- + +`container` class should have a `grid-template-columns` property with three units of `100px`. + +```js +assert( + code.match( + /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?100px\s*?100px\s*?100px\s*?;[\s\S]*}/gi + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
1
+
2
+
3
+
4
+
5
+
+``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.md new file mode 100644 index 0000000000..4a96f7fd57 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.md @@ -0,0 +1,69 @@ +--- +id: 5a9036ee38fddaf9a66b5d37 +title: Add Gaps Faster with grid-gap +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pByETK/ca2qVtv' +forumTopicId: 301118 +dashedName: add-gaps-faster-with-grid-gap +--- + +# --description-- + +`grid-gap` is a shorthand property for `grid-row-gap` and `grid-column-gap` from the previous two challenges that's more convenient to use. If `grid-gap` has one value, it will create a gap between all rows and columns. However, if there are two values, it will use the first one to set the gap between the rows and the second value for the columns. + +# --instructions-- + +Use `grid-gap` to introduce a `10px` gap between the rows and `20px` gap between the columns. + +# --hints-- + +`container` class should have a `grid-gap` property that introduces a `10px` gap between the rows and a `20px` gap between the columns. + +```js +assert( + code.match( + /.container\s*?{[\s\S]*grid-gap\s*?:\s*?10px\s+?20px\s*?;[\s\S]*}/gi + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+
1
+
2
+
3
+
4
+
5
+
+``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.md new file mode 100644 index 0000000000..80cc7894d3 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.md @@ -0,0 +1,68 @@ +--- +id: 5a9036e138fddaf9a66b5d33 +title: Add Rows with grid-template-rows +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pByETK/cbp9Pua' +forumTopicId: 301119 +dashedName: add-rows-with-grid-template-rows +--- + +# --description-- + +The grid you created in the last challenge will set the number of rows automatically. To adjust the rows manually, use the `grid-template-rows` property in the same way you used `grid-template-columns` in the previous challenge. + +# --instructions-- + +Add two rows to the grid that are `50px` tall each. + +# --hints-- + +`container` class should have a `grid-template-rows` property with two units of `50px`. + +```js +assert( + code.match( + /.container\s*?{[\s\S]*grid-template-rows\s*?:\s*?50px\s*?50px\s*?;[\s\S]*}/gi + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
1
+
2
+
3
+
4
+
5
+
+``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.md new file mode 100644 index 0000000000..eaecfedfb8 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.md @@ -0,0 +1,71 @@ +--- +id: 5a90376038fddaf9a66b5d3c +title: Align All Items Horizontally using justify-items +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pByETK/cJbpECn' +forumTopicId: 301120 +dashedName: align-all-items-horizontally-using-justify-items +--- + +# --description-- + +Sometimes you want all the items in your CSS Grid to share the same alignment. You can use the previously learned properties and align them individually, or you can align them all at once horizontally by using `justify-items` on your grid container. This property can accept all the same values you learned about in the previous two challenges, the difference being that it will move **all** the items in our grid to the desired alignment. + +# --instructions-- + +Use this property to center all our items horizontally. + +# --hints-- + +`container` class should have a `justify-items` property that has the value of `center`. + +```js +assert( + code.match( + /.container\s*?{[\s\S]*justify-items\s*?:\s*?center\s*?;[\s\S]*}/gi + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
1
+
2
+
3
+
4
+
5
+
+``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.md new file mode 100644 index 0000000000..9299195765 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.md @@ -0,0 +1,69 @@ +--- +id: 5a94fdf869fb03452672e45b +title: Align All Items Vertically using align-items +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pByETK/ckzPeUv' +forumTopicId: 301121 +dashedName: align-all-items-vertically-using-align-items +--- + +# --description-- + +Using the `align-items` property on a grid container will set the vertical alignment for all the items in our grid. + +# --instructions-- + +Use it now to move all the items to the end of each cell. + +# --hints-- + +`container` class should have a `align-items` property that has the value of `end`. + +```js +assert( + code.match(/.container\s*?{[\s\S]*align-items\s*?:\s*?end\s*?;[\s\S]*}/gi) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
1
+
2
+
3
+
4
+
5
+
+``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.md new file mode 100644 index 0000000000..dd069b37ff --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.md @@ -0,0 +1,79 @@ +--- +id: 5a90374338fddaf9a66b5d3a +title: Align an Item Horizontally using justify-self +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pByETK/cJbpKHq' +forumTopicId: 301122 +dashedName: align-an-item-horizontally-using-justify-self +--- + +# --description-- + +In CSS Grid, the content of each item is located in a box which is referred to as a cell. You can align the content's position within its cell horizontally using the `justify-self` property on a grid item. By default, this property has a value of `stretch`, which will make the content fill the whole width of the cell. This CSS Grid property accepts other values as well: + +`start`: aligns the content at the left of the cell, + +`center`: aligns the content in the center of the cell, + +`end`: aligns the content at the right of the cell. + +# --instructions-- + +Use the `justify-self` property to center the item with the class `item2`. + +# --hints-- + +`item2` class should have a `justify-self` property that has the value of `center`. + +```js +assert( + code.match(/.item2\s*?{[\s\S]*justify-self\s*?:\s*?center\s*?;[\s\S]*}/gi) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
1
+
2
+
3
+
4
+
5
+
+``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.md new file mode 100644 index 0000000000..82c8018e92 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.md @@ -0,0 +1,71 @@ +--- +id: 5a90375238fddaf9a66b5d3b +title: Align an Item Vertically using align-self +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pByETK/cmzd4fz' +forumTopicId: 301123 +dashedName: align-an-item-vertically-using-align-self +--- + +# --description-- + +Just as you can align an item horizontally, there's a way to align an item vertically as well. To do this, you use the `align-self` property on an item. This property accepts all of the same values as `justify-self` from the last challenge. + +# --instructions-- + +Align the item with the class `item3` vertically at the `end`. + +# --hints-- + +`item3` class should have a `align-self` property that has the value of `end`. + +```js +assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
1
+
2
+
3
+
4
+
5
+
+``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.md new file mode 100644 index 0000000000..1e10343ff9 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.md @@ -0,0 +1,76 @@ +--- +id: 5a9036ee38fddaf9a66b5d35 +title: Create a Column Gap Using grid-column-gap +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pByETK/cVZ8vfD' +forumTopicId: 301124 +dashedName: create-a-column-gap-using-grid-column-gap +--- + +# --description-- + +So far in the grids you have created, the columns have all been tight up against each other. Sometimes you want a gap in between the columns. To add a gap between the columns, use the `grid-column-gap` property like this: + +```css +grid-column-gap: 10px; +``` + +This creates 10px of empty space between all of our columns. + +# --instructions-- + +Give the columns in the grid a `20px` gap. + +# --hints-- + +`container` class should have a `grid-column-gap` property that has the value of `20px`. + +```js +assert( + code.match( + /.container\s*?{[\s\S]*grid-column-gap\s*?:\s*?20px\s*?;[\s\S]*}/gi + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
1
+
2
+
3
+
4
+
5
+
+``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.md new file mode 100644 index 0000000000..5244c13abd --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.md @@ -0,0 +1,68 @@ +--- +id: 5a9036ee38fddaf9a66b5d36 +title: Create a Row Gap using grid-row-gap +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pByETK/cPbJ2Cv' +forumTopicId: 301125 +dashedName: create-a-row-gap-using-grid-row-gap +--- + +# --description-- + +You can add a gap in between the rows of a grid using `grid-row-gap` in the same way that you added a gap in between columns in the previous challenge. + +# --instructions-- + +Create a gap for the rows that is `5px` tall. + +# --hints-- + +`container` class should have a `grid-row-gap` property that has the value of `5px`. + +```js +assert( + code.match(/.container\s*?{[\s\S]*grid-row-gap\s*?:\s*?5px\s*?;[\s\S]*}/gi) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
1
+
2
+
3
+
4
+
5
+
+``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.md new file mode 100644 index 0000000000..cadf60f646 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.md @@ -0,0 +1,140 @@ +--- +id: 5a94fe5469fb03452672e461 +title: Create Flexible Layouts Using auto-fill +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pByETK/cmzdycW' +forumTopicId: 301126 +dashedName: create-flexible-layouts-using-auto-fill +--- + +# --description-- + +The repeat function comes with an option called auto-fill. This allows you to automatically insert as many rows or columns of your desired size as possible depending on the size of the container. You can create flexible layouts when combining `auto-fill` with `minmax`, like this: + +```css +repeat(auto-fill, minmax(60px, 1fr)); +``` + +When the container changes size, this setup keeps inserting 60px columns and stretching them until it can insert another one. **Note:** If your container can't fit all your items on one row, it will move them down to a new one. + +# --instructions-- + +In the first grid, use `auto-fill` with `repeat` to fill the grid with columns that have a minimum width of `60px` and maximum of `1fr`. Then resize the preview to see auto-fill in action. + +# --hints-- + +`container` class should have a `grid-template-columns` property with `repeat` and `auto-fill` that will fill the grid with columns that have a minimum width of `60px` and maximum of `1fr`. + +```js +assert( + code.match( + /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fill\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +
+
1
+
2
+
3
+
4
+
5
+
+
+
1
+
2
+
3
+
4
+
5
+
+``` + +# --solutions-- + +```html + +
+
1
+
2
+
3
+
4
+
5
+
+
+
1
+
2
+
3
+
4
+
5
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.md new file mode 100644 index 0000000000..89449f45de --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.md @@ -0,0 +1,91 @@ +--- +id: 5a94fe6269fb03452672e462 +title: Create Flexible Layouts Using auto-fit +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pByETK/c3dPph8' +forumTopicId: 301127 +dashedName: create-flexible-layouts-using-auto-fit +--- + +# --description-- + +`auto-fit` works almost identically to `auto-fill`. The only difference is that when the container's size exceeds the size of all the items combined, `auto-fill` keeps inserting empty rows or columns and pushes your items to the side, while `auto-fit` collapses those empty rows or columns and stretches your items to fit the size of the container. + +**Note:** If your container can't fit all your items on one row, it will move them down to a new one. + +# --instructions-- + +In the second grid, use `auto-fit` with `repeat` to fill the grid with columns that have a minimum width of `60px` and maximum of `1fr`. Then resize the preview to see the difference. + +# --hints-- + +`container2` class should have a `grid-template-columns` property with `repeat` and `auto-fit` that will fill the grid with columns that have a minimum width of `60px` and a maximum of `1fr`. + +```js +assert( + code.match( + /.container2\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fit\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
1
+
2
+
3
+
4
+
5
+
+
+
1
+
2
+
3
+
4
+
5
+
+``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/create-grids-within-grids.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/create-grids-within-grids.md new file mode 100644 index 0000000000..a980e76eae --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/create-grids-within-grids.md @@ -0,0 +1,106 @@ +--- +id: 5a94fe8569fb03452672e464 +title: Create Grids within Grids +challengeType: 0 +forumTopicId: 301128 +dashedName: create-grids-within-grids +--- + +# --description-- + +Turning an element into a grid only affects the behavior of its direct descendants. So by turning a direct descendant into a grid, you have a grid within a grid. + +For example, by setting the `display` and `grid-template-columns` properties of the element with the `item3` class, you create a grid within your grid. + +# --instructions-- + +Turn the element with the `item3` class into a grid with two columns with a width of `auto` and `1fr` using `display` and `grid-template-columns`. + +# --hints-- + +`item3` class should have a `grid-template-columns` property with `auto` and `1fr` as values. + +```js +assert( + code.match( + /.item3\s*?{[\s\S]*grid-template-columns\s*?:\s*?auto\s*?1fr\s*?;[\s\S]*}/gi + ) +); +``` + +`item3` class should have a `display` property with the value of `grid`. + +```js +assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
header
+
advert
+
+
paragraph1
+
paragraph2
+
+
footer
+
+``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/create-your-first-css-grid.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/create-your-first-css-grid.md new file mode 100644 index 0000000000..3d7f7e2d3a --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/create-your-first-css-grid.md @@ -0,0 +1,64 @@ +--- +id: 5a858944d96184f06fd60d61 +title: Create Your First CSS Grid +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pByETK/cqwREC4' +forumTopicId: 301129 +dashedName: create-your-first-css-grid +--- + +# --description-- + +Turn any HTML element into a grid container by setting its `display` property to `grid`. This gives you the ability to use all the other properties associated with CSS Grid. + +**Note:** In CSS Grid, the parent element is referred to as the container and its children are called items. + +# --instructions-- + +Change the display of the div with the `container` class to `grid`. + +# --hints-- + +`container` class should have a `display` property with a value of `grid`. + +```js +assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
1
+
2
+
3
+
4
+
5
+
+``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.md new file mode 100644 index 0000000000..4f600eb51c --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.md @@ -0,0 +1,114 @@ +--- +id: 5a94fe0569fb03452672e45c +title: Divide the Grid Into an Area Template +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pByETK/cLLpGAy' +forumTopicId: 301130 +dashedName: divide-the-grid-into-an-area-template +--- + +# --description-- + +You can group cells of your grid together into an area and give the area a custom name. Do this by using `grid-template-areas` on the container like this: + +```css +grid-template-areas: + "header header header" + "advert content content" + "footer footer footer"; +``` + +The code above merges the top three cells together into an area named `header`, the bottom three cells into a `footer` area, and it makes two areas in the middle row; `advert` and `content`. **Note:** Every word in the code represents a cell and every pair of quotation marks represent a row. In addition to custom labels, you can use a period (`.`) to designate an empty cell in the grid. + +# --instructions-- + +Place the area template so that the cell labeled `advert` becomes an empty cell. + +# --hints-- + +`container` class should have a `grid-template-areas` property similar to the preview but with`.` instead of the `advert` area. + +```js +assert( + __helpers + .removeCssComments(code) + .match( + /.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?header\s*?"\s*?"\s*?.\s*?content\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
1
+
2
+
3
+
4
+
5
+
+``` + +# --solutions-- + +```html + + +
+
1
+
2
+
3
+
4
+
5
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.md new file mode 100644 index 0000000000..12edd170d7 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.md @@ -0,0 +1,77 @@ +--- +id: 5a94fe4469fb03452672e460 +title: Limit Item Size Using the minmax Function +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pByETK/cD97RTv' +forumTopicId: 301131 +dashedName: limit-item-size-using-the-minmax-function +--- + +# --description-- + +There's another built-in function to use with `grid-template-columns` and `grid-template-rows` called `minmax`. It's used to limit the size of items when the grid container changes size. To do this you need to specify the acceptable size range for your item. Here is an example: + +```css +grid-template-columns: 100px minmax(50px, 200px); +``` + +In the code above, `grid-template-columns` is set to create two columns; the first is 100px wide, and the second has the minimum width of 50px and the maximum width of 200px. + +# --instructions-- + +Using the `minmax` function, replace the `1fr` in the `repeat` function with a column size that has the minimum width of `90px` and the maximum width of `1fr`, and resize the preview panel to see the effect. + +# --hints-- + +`container` class should have a `grid-template-columns` property that is set to repeat 3 columns with the minimum width of `90px` and maximum width of `1fr`. + +```js +assert( + code.match( + /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?minmax\s*?\(\s*?90px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
1
+
2
+
3
+
4
+
5
+
+``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.md new file mode 100644 index 0000000000..61f66cc3bf --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.md @@ -0,0 +1,86 @@ +--- +id: 5a94fe1369fb03452672e45d +title: Place Items in Grid Areas Using the grid-area Property +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pByETK/cRrqmtV' +forumTopicId: 301132 +dashedName: place-items-in-grid-areas-using-the-grid-area-property +--- + +# --description-- + +After creating an area template for your grid container, as shown in the previous challenge, you can place an item in your custom area by referencing the name you gave it. To do this, you use the `grid-area` property on an item like this: + +```css +.item1 { + grid-area: header; +} +``` + +This lets the grid know that you want the `item1` class to go in the area named `header`. In this case, the item will use the entire top row because that whole row is named as the header area. + +# --instructions-- + +Place an element with the `item5` class in the `footer` area using the `grid-area` property. + +# --hints-- + +`item5` class should have a `grid-area` property that has the value of `footer`. + +```js +assert( + __helpers + .removeCssComments(code) + .match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
1
+
2
+
3
+
4
+
5
+
+``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.md new file mode 100644 index 0000000000..866df68471 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.md @@ -0,0 +1,93 @@ +--- +id: 5a94fe3669fb03452672e45f +title: Reduce Repetition Using the repeat Function +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pByETK/cQvqyHR' +forumTopicId: 301133 +dashedName: reduce-repetition-using-the-repeat-function +--- + +# --description-- + +When you used `grid-template-columns` and `grid-template-rows` to define the structure of a grid, you entered a value for each row or column you created. + +Let's say you want a grid with 100 rows of the same height. It isn't very practical to insert 100 values individually. Fortunately, there's a better way - by using the `repeat` function to specify the number of times you want your column or row to be repeated, followed by a comma and the value you want to repeat. + +Here's an example that would create the 100 row grid, each row at 50px tall. + +```css +grid-template-rows: repeat(100, 50px); +``` + +You can also repeat multiple values with the repeat function and insert the function amongst other values when defining a grid structure. Here's what that looks like: + +```css +grid-template-columns: repeat(2, 1fr 50px) 20px; +``` + +This translates to: + +```css +grid-template-columns: 1fr 50px 1fr 50px 20px; +``` + +**Note:** The `1fr 50px` is repeated twice followed by 20px. + +# --instructions-- + +Use `repeat` to remove repetition from the `grid-template-columns` property. + +# --hints-- + +`container` class should have a `grid-template-columns` property that is set to repeat 3 columns with the width of `1fr`. + +```js +assert( + code.match( + /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?1fr\s*?\)\s*?;[\s\S]*}/gi + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
1
+
2
+
3
+
4
+
5
+
+``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.md new file mode 100644 index 0000000000..212dde3b5d --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.md @@ -0,0 +1,83 @@ +--- +id: 5a9036ee38fddaf9a66b5d34 +title: Use CSS Grid units to Change the Size of Columns and Rows +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pByETK/cvE8phd' +forumTopicId: 301134 +dashedName: use-css-grid-units-to-change-the-size-of-columns-and-rows +--- + +# --description-- + +You can use absolute and relative units like `px` and `em` in CSS Grid to define the size of rows and columns. You can use these as well: + +`fr`: sets the column or row to a fraction of the available space, + +`auto`: sets the column or row to the width or height of its content automatically, + +`%`: adjusts the column or row to the percent width of its container. + +Here's the code that generates the output in the preview: + +```css +grid-template-columns: auto 50px 10% 2fr 1fr; +``` + +This snippet creates five columns. The first column is as wide as its content, the second column is 50px, the third column is 10% of its container, and for the last two columns; the remaining space is divided into three sections, two are allocated for the fourth column, and one for the fifth. + +# --instructions-- + +Make a grid with three columns whose widths are as follows: 1fr, 100px, and 2fr. + +# --hints-- + +`container` class should have a `grid-template-columns` property that has three columns with the following widths: `1fr, 100px, and 2fr`. + +```js +assert( + code.match( + /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?1fr\s*?100px\s*?2fr\s*?;[\s\S]*}/gi + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
1
+
2
+
3
+
4
+
5
+
+``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.md new file mode 100644 index 0000000000..08aab8eb71 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.md @@ -0,0 +1,86 @@ +--- +id: 5a94fe2669fb03452672e45e +title: Use grid-area Without Creating an Areas Template +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pByETK/c6N7VhK' +forumTopicId: 301135 +dashedName: use-grid-area-without-creating-an-areas-template +--- + +# --description-- + +The `grid-area` property you learned in the last challenge can be used in another way. If your grid doesn't have an areas template to reference, you can create an area on the fly for an item to be placed like this: + +```css +item1 { grid-area: 1/1/2/4; } +``` + +This is using the line numbers you learned about earlier to define where the area for this item will be. The numbers in the example above represent these values: + +```css +grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at; +``` + +So the item in the example will consume the rows between lines 1 and 2, and the columns between lines 1 and 4. + +# --instructions-- + +Using the `grid-area` property, place the element with `item5` class between the third and fourth horizontal lines and between the first and fourth vertical lines. + +# --hints-- + +The `item5` class should have a `grid-area` property to make it fill the whole area between the third and fourth horizontal lines, and first and fourth vertical lines. + +```js +assert( + code.match( + /.item5\s*?{[\s\S]*grid-area\s*?:\s*?3\s*?\/\s*?1\s*?\/\s*?4\s*?\/\s*?4\s*?;[\s\S]*}/gi + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
1
+
2
+
3
+
4
+
5
+
+``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.md new file mode 100644 index 0000000000..42a72dcd35 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.md @@ -0,0 +1,139 @@ +--- +id: 5a90372638fddaf9a66b5d38 +title: Use grid-column to Control Spacing +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pByETK/cnzkDSr' +forumTopicId: 301136 +dashedName: use-grid-column-to-control-spacing +--- + +# --description-- + +Up to this point, all the properties that have been discussed are for grid containers. The `grid-column` property is the first one for use on the grid items themselves. + +The hypothetical horizontal and vertical lines that create the grid are referred to as lines. These lines are numbered starting with 1 at the top left corner of the grid and move right for columns and down for rows, counting upward. + +This is what the lines look like for a 3x3 grid: + +

column lines

1

2

3

4

row lines

1

2

3

4

+ +To control the number of columns an item will consume, you can use the `grid-column` property in conjunction with the line numbers you want the item to start and stop at. + +Here's an example: + +```css +grid-column: 1 / 3; +``` + +This will make the item start at the first vertical line of the grid on the left and span to the 3rd line of the grid, consuming two columns. + +# --instructions-- + +Make the item with the class `item5` consume the last two columns of the grid. + +# --hints-- + +`item5` class should have a `grid-column` property. + +```js +assert( + __helpers + .removeWhiteSpace($('style').text()) + .match(/\.item5{.*grid-column:.*}/g) +); +``` + +`item5` class should have a `grid-column` property which results in it consuming the last two columns of the grid. + +```js +const colStart = getComputedStyle($('.item5')[0]).gridColumnStart; +const colEnd = getComputedStyle($('.item5')[0]).gridColumnEnd; +const result = colStart.toString() + colEnd.toString(); +const correctResults = [ + '24', + '2-1', + '2span 2', + '2span2', + 'span 2-1', + '-12', + 'span 2span 2', + 'span 2auto', + 'autospan 2' +]; +assert(correctResults.includes(result)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
1
+
2
+
3
+
4
+
5
+
+``` + +# --solutions-- + +```html + + +
+
1
+
2
+
3
+
4
+
5
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.md new file mode 100644 index 0000000000..93a364f7da --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.md @@ -0,0 +1,122 @@ +--- +id: 5a90373638fddaf9a66b5d39 +title: Use grid-row to Control Spacing +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pByETK/c9WBLU4' +forumTopicId: 301137 +dashedName: use-grid-row-to-control-spacing +--- + +# --description-- + +Of course, you can make items consume multiple rows just like you can with columns. You define the horizontal lines you want an item to start and stop at using the `grid-row` property on a grid item. + +# --instructions-- + +Make the element with the `item5` class consume the last two rows. + +# --hints-- + +`item5` class should have a `grid-row` property. + +```js +assert( + __helpers.removeWhiteSpace($('style').text()).match(/\.item5{.*grid-row:.*}/g) +); +``` + +`item5` class should have a `grid-row` property which results in it consuming the last two rows of the grid. + +```js +const rowStart = getComputedStyle($('.item5')[0]).gridRowStart; +const rowEnd = getComputedStyle($('.item5')[0]).gridRowEnd; +const result = rowStart.toString() + rowEnd.toString(); +const correctResults = [ + '24', + '2-1', + '2span 2', + '2span2', + 'span 2-1', + '-12', + 'span 2span 2', + 'span 2auto', + 'autospan 2' +]; +assert(correctResults.includes(result)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
1
+
2
+
3
+
4
+
5
+
+``` + +# --solutions-- + +```html + + +
+
1
+
2
+
3
+
4
+
5
+
+``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.md new file mode 100644 index 0000000000..a973031154 --- /dev/null +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.md @@ -0,0 +1,174 @@ +--- +id: 5a94fe7769fb03452672e463 +title: Use Media Queries to Create Responsive Layouts +challengeType: 0 +videoUrl: 'https://scrimba.com/p/pByETK/cMbqeHk' +forumTopicId: 301138 +dashedName: use-media-queries-to-create-responsive-layouts +--- + +# --description-- + +CSS Grid can be an easy way to make your site more responsive by using media queries to rearrange grid areas, change dimensions of a grid, and rearrange the placement of items. + +In the preview, when the viewport width is 300px or more, the number of columns changes from 1 to 2. The advertisement area then occupies the left column completely. + +# --instructions-- + +When the viewport width is `400px` or more, make the header area occupy the top row completely and the footer area occupy the bottom row completely. + +# --hints-- + +When the viewport is `400px` or more, `container` class should have a `grid-template-areas` property in which the header and footer areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row. + +```js +assert( + __helpers + .removeCssComments(code) + .match( + /@media\s*?\(\s*?min-width\s*?:\s*?400px\s*?\)[\s\S]*.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?"\s*?"\s*?advert\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +
+
header
+
advert
+
content
+
footer
+
+``` + +# --solutions-- + +```html + + +
+
header
+
advert
+
content
+
footer
+
+```