gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: test curriculum challenges (#24180)

Browse Source
This commit is contained in:
Valeriy
2018-10-23 16:21:53 +03:00
committed by mrugesh mohapatra
parent 7da04a348b
commit e099d6486d
29 changed files with 478 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.english.md
View File

@@ -79,9 +79,41 @@ tests:
## Solution
<section id='solution'>
```js
var code = ".fullCard {\nwidth: 245px; border: 1px solid #ccc; border-radius: 5px; margin: 10px 5px; padding: 4px;}"
```html
<style>
h4 {
text-align: center;
}
p {
text-align: justify;
}
.links {
margin-right: 20px;
text-align: left;
}
.fullCard {
width: 245px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px 5px;
padding: 4px;
}
.cardContent {
padding: 10px;
}
</style>
<div class="fullCard">
<div class="cardContent">
<div class="cardText">
<h4>Google</h4>
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
</div>
<div class="cardLinks">
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
</div>
</div>
</div>
```
</section>

39
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.english.md
View File

@@ -90,9 +90,42 @@ tests:
## Solution
<section id='solution'>
```js
var code = ".heart {transform: rotate(-45deg);} .heart::after {background-color: pink; border-radius: 50%;} .heart::before {content: \"\"; border-radius: 50%;}"
```html
<style>
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
}
.heart::after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart::before {
content: "";
background-color: pink;
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
</style>
<div class = "heart"></div>
```
</section>

41
curriculum/challenges/english/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.english.md
View File

@@ -84,7 +84,44 @@ tests:
## Solution
<section id='solution'>
```js
// solution required
```html
<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: crimson;
color: #fff;
padding: 20px;
margin: -15px;
}
.blue-box {
background-color: blue;
color: #fff;
padding: 20px;
margin: 20px;
margin-top: -15px;
}
</style>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box blue-box">padding</h5>
</div>
```
</section>

4
curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/say-hello-to-html-elements.english.md
View File

@@ -54,7 +54,7 @@ tests:
## Solution
<section id='solution'>
```js
// solution required
```html
<h1>Hello World</h1>
```
</section>

33
curriculum/challenges/english/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.english.md
View File

@@ -81,9 +81,38 @@ tests:
## Solution
<section id='solution'>
```html
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
```js
var code = ".container {grid-template-areas: \"header header header\" \". content content\" \"footer footer footer\";}"
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
grid-template-areas:
"header header header"
". content content"
"footer footer footer";
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
```
</section>

70
curriculum/challenges/english/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.english.md
View File

@@ -113,9 +113,75 @@ tests:
## Solution
<section id='solution'>
```html
<style>
.item1 {
background: LightSkyBlue;
grid-area: header;
}
```js
var code = "@media (min-width: 400px){.container{ grid-template-areas: \"header header\" \"advert content\" \"footer footer\";}}"
.item2 {
background: LightSalmon;
grid-area: advert;
}
.item3 {
background: PaleTurquoise;
grid-area: content;
}
.item4 {
background: lightpink;
grid-area: footer;
}
.container {
font-size: 1.5em;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 50px auto 1fr auto;
grid-gap: 10px;
grid-template-areas:
"header"
"advert"
"content"
"footer";
}
@media (min-width: 300px){
.container{
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"advert header"
"advert content"
"advert footer";
}
}
@media (min-width: 400px){
.container{
/* change the code below this line */
grid-template-areas:
"header header"
"advert content"
"footer footer";
/* change the code above this line */
}
}
</style>
<div class="container">
<div class="item1">header</div>
<div class="item2">advert</div>
<div class="item3">content</div>
<div class="item4">footer</div>
</div>
```
</section>