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

fix(guide): restructure curriculum guide articles (#36501)

Browse Source 
* fix: restructure certifications guide articles
* fix: added 3 dashes line before prob expl
* fix: added 3 dashes line before hints
* fix: added 3 dashes line before solutions
This commit is contained in:
Randell Dawson
2019-07-24 00:59:27 -07:00
committed by mrugesh
parent c911e77eed
commit 1494a50123
990 changed files with 13202 additions and 8628 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
guide/english/certifications/responsive-web-design/responsive-web-design-principles/create-a-media-query/index.md
View File

@@ -1,7 +1,13 @@
---
title: Create a Media Query
---
## Create a Media Query
# Create a Media Query
---
## Solutions
<details><summary>Solution 1 (Click to Show/Hide)</summary>
Following the instructions:
@@ -18,3 +24,5 @@ the media query is:
}
```
and the size of the text will be 10px when the device's width is less than or equal to 800px.
</details>

4
guide/english/certifications/responsive-web-design/responsive-web-design-principles/index.md
View File

@@ -1,7 +1,7 @@
---
title: Responsive Web Design Principles
---
## Responsive Web Design Principles
# Responsive Web Design Principles
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/mathematics/quadratic-equations/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
@@ -9,5 +9,5 @@ This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### More Information:
#### Relevant Links
<!-- Please add any articles you think might be helpful to read before writing the article -->

10
guide/english/certifications/responsive-web-design/responsive-web-design-principles/make-an-image-responsive/index.md
View File

@@ -1,7 +1,13 @@
---
title: Make an Image Responsive
---
## Make an Image Responsive
# Make an Image Responsive
---
## Solutions
<details><summary>Solution 1 (Click to Show/Hide)</summary>
Following the instructions:
@@ -18,3 +24,5 @@ the style becomes:
}
</style>
```
</details>

20
guide/english/certifications/responsive-web-design/responsive-web-design-principles/make-typography-responsive/index.md
View File

@@ -2,27 +2,22 @@
title: Make Typography Responsive
---
![:triangular_flag_on_post:](https://forum.freecodecamp.com/images/emoji/emoji_one/triangular_flag_on_post.png?v=3 ":triangular_flag_on_post:") Remember to use <a>**`Read-Search-Ask`**</a> if you get stuck. Try to pair program ![:busts_in_silhouette:](https://forum.freecodecamp.com/images/emoji/emoji_one/busts_in_silhouette.png?v=3 ":busts_in_silhouette:") and write your own code ![:pencil:](https://forum.freecodecamp.com/images/emoji/emoji_one/pencil.png?v=3 ":pencil:")
# Make Typography Responsive
## Make Typography Responsive
## ![:speech_balloon:](https://forum.freecodecamp.com/images/emoji/emoji_one/speech_balloon.png?v=3 ":speech_balloon:") Hint: 1
---
## Hints
### Hint 1
For viewport width use the `vw` unit.
> _try to solve the problem now_
## ![:speech_balloon:](https://forum.freecodecamp.com/images/emoji/emoji_one/speech_balloon.png?v=3 ":speech_balloon:") Hint: 2
### Hint 2
For the smaller viewport measurement use the `vmin` unit.
> _try to solve the problem now_
## Spoiler Alert!
![warning sign](//discourse-user-assets.s3.amazonaws.com/original/2X/2/2d6c412a50797771301e7ceabd554cef4edcd74d.gif)
**Solution ahead!**
<details><summary>Solution 1 (Click to Show/Hide)</summary>
```html
<style>
@@ -37,3 +32,4 @@ h2 {
<h2>Importantus Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
```
</details>

10
guide/english/certifications/responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays/index.md
View File

@@ -1,7 +1,13 @@
---
title: Use a Retina Image for Higher Resolution Displays
---
## Use a Retina Image for Higher Resolution Displays
# Use a Retina Image for Higher Resolution Displays
---
## Solutions
<details><summary>Solution 1 (Click to Show/Hide)</summary>
Following the instructions:
@@ -15,3 +21,5 @@ the style becomes:
</style>
```
note that the simplest way to make your images appear "retina" (and optimize them for retina displays) is to define their width and height values as only half of what the original file is.
</details>