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

* 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

View File

@@ -1,8 +1,10 @@
---
title: Add a Submit Button to a Form
---
## Add a Submit Button to a Form
# Add a Submit Button to a Form
---
## Problem Explanation
In this challenge you want to insert the submit button as the last element of the form ( just before the `</form>` closing tag) and to give it the attribute `type="submit"` (everything lowercase) and a text content of "Submit" (first letter uppercase) as specified in the challenge instruction.
1) the value `submit` of the attribute `type` is valid also inside an `input` tag and it will render a button with almost the same behaviour, but this is not the tag you want to use in this challenge.

View File

@@ -1,13 +1,14 @@
---
title: Add Images to Your Website
---
## Add Images to Your Website
<!--
# Add Images to Your Website
---
## Problem Explanation
Img HTML elements belongs to the group of the "self-closing" HTML elements: it means that they do not follow the ordinary structure - open tag, put content, close tag - but they have just one tag which works as opening and closing tag: <img />
As all opening tag it still can receive attributes though, and these are the tools you can use to manipulate the tag, put some content in, enhance accessibility, etc.
The main attributes of an img tag are src and alt:
<img src="https://linkToAnImage.jpg" alt="Put here a brief description of the image" />
-->
Attributes are key value pairs inserted into the tag. The syntax is `<tag key1="value1" key2="value2"> </tag>` or, in case of self-closing tags, `<tag key1="value1" key2="value2" />` - notice that the pairs are separated by a space character, not by a comma.
@@ -16,5 +17,5 @@ Attributes are key value pairs inserted into the tag. The syntax is `<tag key1="
```
### Resources
#### Relevant Links
- [HTML attributes](https://guide.freecodecamp.org/html/attributes)

View File

@@ -1,8 +1,10 @@
---
title: Add Placeholder Text to a Text Field
---
## Add Placeholder Text to a Text Field
# Add Placeholder Text to a Text Field
---
## Problem Explanation
`placeholder` is an attribute, not a tag. It can be used together with the attribute `text` of the `input` tag to create a text to visualize when the input box is empty.
```HTML

View File

@@ -1,8 +1,10 @@
---
title: Check Radio Buttons and Checkboxes by Default
---
## Check Radio Buttons and Checkboxes by Default
# Check Radio Buttons and Checkboxes by Default
---
## Problem Explanation
The `checked` attribute, exclusively usable with `type="radio"` and the `type="checkbox"`, is a boolean attribute ( you can check the challenge about the `required` attribute, boolean aswell, at this link: [use html5 to require a field](https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5/use-html5-to-require-a-field/)).
As boolean attribute you simply have to add the word `checked` to the `input` HTML element you want to set checked by default (the challenge requires you to set by default _the first_ of the checkbox and radio-buttons already present in the code).

View File

@@ -1,8 +1,10 @@
---
title: Comment out HTML
---
## Comment out HTML
# Comment out HTML
---
## Problem Explanation
Comment syntax is the same of every other HTML element:
Example:

View File

@@ -1,8 +1,10 @@
---
title: Create a Bulleted Unordered List
---
## Create a Bulleted Unordered List
# Create a Bulleted Unordered List
---
## Problem Explanation
To pass the challenge the first operation you should do is to remove the `p` elements with all their content.
After that you have to implement the list: it must contains at least three `li` element inside the `ul` element and these `li` must be on the same level, not nested into each other:
@@ -26,16 +28,21 @@ Not correct:
Good luck!
### Solution
---
## Solutions
<details><summary>Solution 1 (Click to Show/Hide)</summary>
Firstly, we need to remove the `<p>` elements and replace it with `<li>`, as well as add a third `<li>` as shown below:
#### Before removal of `<p>` and replacement with `<li>`
**Before removal of `<p>` and replacement with `<li>`**
```html
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
```
#### After removal of `<p>` and replacement with `<li>`
**After removal of `<p>` and replacement with `<li>`**
```html
<li>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</li>
<li>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</li>
@@ -43,7 +50,7 @@ Firstly, we need to remove the `<p>` elements and replace it with `<li>`, as wel
```
Afterwards, we need to place a `<ul>` element with a closing `<li>` tag inside these 3 `<li>` elements within the `<main>` element as shown below:
#### Before adding `<ul>` element
**Before adding `<ul>` element**
```html
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
@@ -57,7 +64,7 @@ Afterwards, we need to place a `<ul>` element with a closing `<li>` tag inside t
</main>
```
#### After adding `<ul>` element
**After adding `<ul>` element**
```html
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
@@ -70,7 +77,8 @@ Afterwards, we need to place a `<ul>` element with a closing `<li>` tag inside t
</ul> <!-- The <ul> closing tag has been added -->
</main>
```
### Final Solution
**Final Solution**
```html
<h2>CatPhotoApp</h2>
<main>
@@ -84,3 +92,4 @@ Afterwards, we need to place a `<ul>` element with a closing `<li>` tag inside t
</ul>
</main>
```
</details>

View File

@@ -2,6 +2,10 @@
title: Create a Form Element
---
# Create a Form Element
---
## Problem Explanation
A `<form>` is an element used to gather infomation directly from the user's input. When you use this HTML element you are identifying a section used to collect the user choices.
Inside this HTML element, you might insert a few `input` tags, used to collect data in different ways based on the `type` attribute.

View File

@@ -1,8 +1,10 @@
---
title: Create a Set of Checkboxes
---
## Create a Set of Checkboxes
# Create a Set of Checkboxes
---
## Problem Explanation
The `type="checkbox"`attribute works basically as the `type="radio"` attribute does: the main difference is that checkboxes are used to collect one OR MORE choices, radio-buttons are used when you want exclusive choices ( one OR another ).
The `name` attribute indicates the group the checkbox belongs to, and to be part of a group will make easier to manage the data on the server-side.

View File

@@ -1,7 +1,7 @@
---
title: Create a Set of Radio Buttons
---
## Create a Set of Radio Buttons
# Create a Set of Radio Buttons
To solve this challenge you can break it into pieces to better understand the steps:

View File

@@ -1,8 +1,10 @@
---
title: Create a Text Field
---
## Create a Text Field
# Create a Text Field
---
## Problem Explanation
`input` could be classified as a generic tag: indeed it is characterized by its attribute `type`, which can assume a range of different values and based on that value then `input` will be rendered as a different object.
A few example of different `type` values:

View File

@@ -1,8 +1,10 @@
---
title: Create an Ordered List
---
## Create an Ordered List
# Create an Ordered List
---
## Problem Explanation
Sometimes people overthink this kind of challenge: the ordered lists has the exact same pattern of the unordered ones, it simply changes the tag: `<ul>` for the unordered, `<ol>` for the ordered.
The different effect is that one has the bullets, the other has numbers ( or other progressive marks ):

View File

@@ -1,8 +1,10 @@
---
title: Declare the Doctype of an HTML Document
---
## Declare the Doctype of an HTML Document
# Declare the Doctype of an HTML Document
---
## Problem Explanation
The declaration of the Doctype must be in the first line since it gives instructions to the browser on how to interpret the following lines of code.
It might be followed by a `<html>` element, even if is not mandatory; this is the root element of the document and if you do not write it most of the browser will infer it. However, it's a good practice to write it explicitly.

View File

@@ -1,8 +1,10 @@
---
title: Define the Head and Body of an HTML Document
---
## Define the Head and Body of an HTML Document
# Define the Head and Body of an HTML Document
---
## Problem Explanation
The `head` element is used to group all the metadata of the document, the `body` to display the document's content.
Into the `head` you can find any kind of tag used to _describe_ the document: what language it will use, what style rules (through the stylesheet link), its title, a literal description, ...<br/>

View File

@@ -1,7 +1,10 @@
---
title: Delete HTML Elements
---
## Delete HTML Elements
# Delete HTML Elements
---
## Problem Explanation
To remove an HTML element you must remove its tag subelements: the content, whatever it is, can be kept since it's not representative of any HTML element.
Remember: if some code other than the part you are asked to modify has been changed you can restart your challenge by clicking the `reset all code` button.

View File

@@ -1,8 +1,10 @@
---
title: Fill in the Blank with Placeholder Text
---
## Fill in the Blank with Placeholder Text
# Fill in the Blank with Placeholder Text
---
## Problem Explanation
You are asked to replace the text you see into the paragraph (the `p` element) with the text provided by the challenge introduction (when you read about <em>few words</em> it means at least 2, at most all); if, by chance, you have removed or modified some of the code other than the paragraph text you can click on `reset all code` button to restart with a clean code.
Good luck!

View File

@@ -1,8 +1,10 @@
---
title: Headline with the h2 Element
---
## Headline with the h2 Element
# Headline with the h2 Element
---
## Problem Explanation
In the first lesson you have learned what an HTML element is and you have modified one. <br/>
Now you are asked to write your own! The first HTML element already present in your code editor (`<h1>Hello World</h1>` ) uses the h1 tag, check the others:

View File

@@ -1,7 +1,7 @@
---
title: Basic HTML and HTML5
---
## Basic HTML and HTML5
# Basic HTML and HTML5
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 -->

View File

@@ -2,6 +2,10 @@
title: Inform with the Paragraph Element
---
# Inform with the Paragraph Element
---
## Problem Explanation
You are asked to create another HTML element. A brief recap on how to achieve that:
- Create an opening tag.
- Write some content (usually plain text)

View File

@@ -1,8 +1,10 @@
---
title: Introduction to HTML5 Elements
---
## Introduction to HTML5 Elements
# Introduction to HTML5 Elements
---
## Problem Explanation
The example below represent a `h1` element and a `h4` element wrapped into a `header` element:
```
<header>
@@ -13,17 +15,22 @@ The example below represent a `h1` element and a `h4` element wrapped into a `he
As you can see the `header` contains the other elements that ends up on the same level ( the `h1` ends before the `h4` starts and both are nested into the `header`).
## Solution
---
## Solutions
<details><summary>Solution 1 (Click to Show/Hide)</summary>
Firstly, we will need to add a second `<p>` element below the first `<p>` element, which needs to say `Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.`, as shown below:
### Before adding 2nd `<p>` element
**Before adding 2nd `<p>` element**
```html
<h2>CatPhotoApp</h2>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
```
### After adding 2nd `<p>` element
**After adding 2nd `<p>` element**
```html
<h2>CatPhotoApp</h2>
@@ -33,7 +40,7 @@ Firstly, we will need to add a second `<p>` element below the first `<p>` elemen
```
However, the objective also requires the user to add the `<main>` elements between the `<p>` elements as shown below:
### Before adding `<main>` element
**Before adding `<main>` element**
```html
<h2>CatPhotoApp</h2>
@@ -42,7 +49,7 @@ However, the objective also requires the user to add the `<main>` elements betwe
```
### After adding `<main>` element
**After adding `<main>` element**
```html
<h2>CatPhotoApp</h2>
<main> <!-- The opening <main> element has been added -->
@@ -51,7 +58,7 @@ However, the objective also requires the user to add the `<main>` elements betwe
</main> <!-- The closing <main> element has been added -->
```
## Full Solution
**Full Solution**
```html
<h2>CatPhotoApp</h2>
<main>
@@ -59,3 +66,5 @@ However, the objective also requires the user to add the `<main>` elements betwe
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. </p>
</main>
```
</details>

View File

@@ -1,8 +1,10 @@
---
title: Link to External Pages with Anchor Elements
---
## Link to External Pages with Anchor Elements
# Link to External Pages with Anchor Elements
---
## Problem Explanation
In this challenge you should use everything you have learned so far.
The HTML elements syntax:
- Opening tag
@@ -16,5 +18,5 @@ And the tag attributes syntax:
You are asked to give to an `a` tag the attribute (key) `href` with the value of `"http://freecatphotoapp.com"` and to use the text "cat photos" as content of the same `a` tag
### Resources
#### Relevant Links
- [`<a>` tag - href attribute](https://guide.freecodecamp.org/html/attributes/a-href-attribute)

View File

@@ -1,8 +1,10 @@
---
title: Link to Internal Sections of a Page with Anchor Elements
---
## Link to Internal Sections of a Page with Anchor Elements
# Link to Internal Sections of a Page with Anchor Elements
---
## Problem Explanation
As stated in the instructions the internal link is composed of two elements: the `a` tag and the html element with the `id` used in the `href` attribute of the `a` tag.
All of these are valid internal links:

View File

@@ -1,8 +1,10 @@
---
title: Make Dead Links Using the Hash Symbol
---
## Make Dead Links Using the Hash Symbol
# Make Dead Links Using the Hash Symbol
---
## Problem Explanation
A dead link is just an anchor element in place, syntactically correct, clickable that point to the top of the page when clicked without refreshing the content ( you can check this question on FCC forum for more in-depth analysis: <a href='https://forum.freecodecamp.org/t/what-does-dead-link-on-html-and-css-do/164550/7' target='_blank' rel='nofollow'>What does Dead Link on HTML and CSS do?</a>)
<!-- [What does Dead Link on HTML and CSS do?](https://forum.freecodecamp.org/t/what-does-dead-link-on-html-and-css-do/164550/7) ) -->
To create a dead link you first should write a normal anchor element (the challenge provides one, do not rewrite it) and then modify the `href` attribute as stated in the instructions.

View File

@@ -1,8 +1,10 @@
---
title: Nest an Anchor Element within a Paragraph
---
## Nest an Anchor Element within a Paragraph
# Nest an Anchor Element within a Paragraph
---
## Problem Explanation
Read the instruction carefully: even if this is a challenge about the `a` tag it does not necessarily means that you should manipulate it! <br/>
The challenge introduction speaks about the existing `a` element and it asks you to write the paragraph into which it will be nested: in other words you just need to write the `p` HTML element, where the content is composed by some text - "View more " (double check the capitalization and the final space) - and the `a` HTML element already present in the page.

View File

@@ -1,8 +1,10 @@
---
title: Nest Many Elements within a Single div Element
---
## Nest Many Elements within a Single div Element
# Nest Many Elements within a Single div Element
---
## Problem Explanation
Using a generic purpose tag as `div` to wrap multiple elements allows the developer to apply a common style to each of the wrapped element, to group elements with the same meaning, to create different layout 'pack' and so on.
About this challenge you have to group the lists already present in the code: you can use the opening div tag just before the paragraph used as header of the unordered list and put the closing tag right below the ordered one.

View File

@@ -1,8 +1,10 @@
---
title: Say Hello to HTML Elements
---
## Say Hello to HTML Elements
# Say Hello to HTML Elements
---
## Problem Explanation
Consider the following example: <br/>
`<p>This is a paragraph</p>` <br/>

View File

@@ -1,8 +1,10 @@
---
title: Turn an Image into a Link
---
## Turn an Image into a Link
# Turn an Image into a Link
---
## Problem Explanation
In a previous challenge you already achieved the task to nest a HTML element into another (e.g. [Nest an anchor element within a paragraph](https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph) )
Now you are asked to solve the same problem with different tags: just put the image url within an img element inside the anchor element and it will become the clickable content of that anchor.

View File

@@ -1,8 +1,10 @@
---
title: Uncomment HTML
---
## Uncomment HTML
# Uncomment HTML
---
## Problem Explanation
The comment topic is often a bit confusing in the beginning.
Let's look at an example:
@@ -18,7 +20,7 @@ You can use comments in-line too: `<!-- Note about html goes here so you can rem
The only thing to consider is that when you see this set of characters `<!--` everything from there is commented out until you see this `-->`; these are the opening and closing tag of an HTML element!
##### UNCOMMENT
**UNCOMMENT**
Uncomment means to take things out from the comment text: to uncomment the h3 element of the following sentence (which is all commented out):
```
<!-- <h1>Comment header</h1> <h3>Comment subtle</h3> <article>I am the text of the comment</article> -->

View File

@@ -1,8 +1,10 @@
---
title: Use HTML5 to Require a Field
---
## Use HTML5 to Require a Field
# Use HTML5 to Require a Field
---
## Problem Explanation
The `required` attribute works with almost all possible types of the `input` tag ( it doesn't works because it doesn't make sense for the buttons-like types or the ones with a default value e.g. `type=range`) and force the user to leave at least a minimum mark of the interaction with the required input when submitting ( select _at least_ one checkbox, type _at least_ one character into a text box, etc..)
Its use block the form form submission until the the `required` condition woudn't be fullfilled

View File

@@ -1,7 +1,10 @@
---
title: Use the value attribute with Radio Buttons and Checkboxes
---
## Use the value attribute with Radio Buttons and Checkboxes
# Use the value attribute with Radio Buttons and Checkboxes
---
## Problem Explanation
To pass the challenge, add the `value` attribute to the `input` elements of type `checkbox` and `radio`. Use the `input` label text, in lowercase, as the value for the attribute. The `value` attribute will make sure the choices are identifiable when the form is submitted.
Example form with value attributes: