Skip to content
This repository has been archived by the owner on Aug 28, 2019. It is now read-only.

Add "Get a hint" article for Applied Visual Design: Create a Horizontal Line Using the hr Element #8341

Merged
merged 3 commits into from
Aug 5, 2018
Merged

Add "Get a hint" article for Applied Visual Design: Create a Horizontal Line Using the hr Element #8341

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
55e49cf
Replace stub with article
morganda Aug 5, 2018
d13ffac
style code snippets
morganda Aug 5, 2018
5eb0216
fix: grammar
amandeepmittal Aug 5, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 23 additions & 3 deletions ...gn/applied-visual-design/create-a-horizontal-line-using-the-hr-element/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,28 @@ title: Create a Horizontal Line Using the hr Element
---
## Create a Horizontal Line Using the hr Element

This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
The `hr` tag is one of the simplest HTML elements. It creates a thin horizontal line line across its parent element.

<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
This lesson uses the `hr` tag to separate the title and content of a "card". So how do you create an `hr` element?

<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
```html
<!-- It's this easy -->
<hr>
```

This element is self-closing, but to be friendly to parsers and style checkers you should add an explicit closing marker.
```html
<hr />
```

Whichever format you choose it will create a horizontal line as in [this lesson](https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element/) on [freeCodeCamp](https://www.freecodecamp.org/). Here is a screenshot from that lesson showing an `hr` element contained within a div.

![Example hr](https://i.imgur.com/RMTqXPw.png)

### Bug in the lesson
If you come across the "the hr tag should appear between the title and the paragraph" issue and you're certain that you completed the objective correctly, check out [this useful suggestion](https://forum.freecodecamp.org/t/trouble-with-create-a-horizontal-line-using-the-hr-element-lesson/214232) from @SpaceCadet on the forums.


## Resources:
* [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)
* [W3C](http://w3c.github.io/html-reference/hr.html)