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:
@@ -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.
|
||||
|
@@ -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)
|
||||
|
@@ -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
|
||||
|
@@ -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).
|
||||
|
@@ -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:
|
||||
|
@@ -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>
|
||||
|
@@ -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.
|
||||
|
@@ -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.
|
||||
|
@@ -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:
|
||||
|
||||
|
@@ -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:
|
||||
|
@@ -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 ):
|
||||
|
@@ -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.
|
||||
|
@@ -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/>
|
||||
|
@@ -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.
|
||||
|
@@ -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!
|
||||
|
@@ -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:
|
||||
|
||||
|
@@ -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 -->
|
||||
|
@@ -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)
|
||||
|
@@ -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>
|
@@ -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)
|
||||
|
@@ -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:
|
||||
|
@@ -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.
|
||||
|
@@ -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.
|
||||
|
||||
|
@@ -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.
|
||||
|
@@ -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/>
|
||||
|
@@ -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.
|
||||
|
@@ -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> -->
|
||||
|
@@ -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
|
||||
|
@@ -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:
|
||||
|
Reference in New Issue
Block a user