You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: CONTRIBUTING.md
+4-1
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,9 @@
1
1
# Contributing to Learn.co Curriculum
2
2
3
-
We're really exited that you're about to contribute to the [open curriculum](https://learn.co/content-license) on [Learn.co](https://learn.co). If this is your first time contributing, please continue reading to learn how to make the most meaningful and useful impact possible.
3
+
We're really exited that you're about to contribute to the [open
4
+
curriculum](https://learn.co/content-license) on [Learn.co](https://learn.co).
5
+
If this is your first time contributing, please continue reading to learn how
6
+
to make the most meaningful and useful impact possible.
The Flatiron School, Inc. owns this Educational Content. However, the Flatiron School supports the development and availability of educational materials in the public domain. Therefore, the Flatiron School grants Users of the Flatiron Educational Content set forth in this repository certain rights to reuse, build upon and share such Educational Content subject to the terms of the Educational Content License set forth here (http://learn.co/content-license). You must read carefully the terms and conditions contained in the Educational Content License as such terms govern access to and use of the Educational Content.
6
-
7
-
Flatiron School is willing to allow you access to and use of the Educational Content only on the condition that you accept all of the terms and conditions contained in the Educational Content License set forth here (http://learn.co/content-license). By accessing and/or using the Educational Content, you are agreeing to all of the terms and conditions contained in the Educational Content License. If you do not agree to any or all of the terms of the Educational Content License, you are prohibited from accessing, reviewing or using in any way the Educational Content.
5
+
The Flatiron School, Inc. owns this Educational Content. However, the Flatiron
6
+
School supports the development and availability of educational materials in
7
+
the public domain. Therefore, the Flatiron School grants Users of the Flatiron
8
+
Educational Content set forth in this repository certain rights to reuse, build
9
+
upon and share such Educational Content subject to the terms of the Educational
10
+
Content License set forth [here](http://learn.co/content-license)
11
+
(http://learn.co/content-license). You must read carefully the terms and
12
+
conditions contained in the Educational Content License as such terms govern
13
+
access to and use of the Educational Content.
8
14
15
+
Flatiron School is willing to allow you access to and use of the Educational
16
+
Content only on the condition that you accept all of the terms and conditions
17
+
contained in the Educational Content License set forth
18
+
[here](http://learn.co/content-license) (http://learn.co/content-license). By
19
+
accessing and/or using the Educational Content, you are agreeing to all of the
20
+
terms and conditions contained in the Educational Content License. If you do
21
+
not agree to any or all of the terms of the Educational Content License, you
22
+
are prohibited from accessing, reviewing or using in any way the Educational
* A folder with your previous work will appear in the IDE file tree, all
18
+
remote branches will be retrieved, and you will then switch to the
19
+
`main-pages` branch we started in the previous lesson.
10
20
11
21
Alternatively, if you are having trouble or do not have a repository
12
-
set up, you can access all the files you need to follow along by following the following steps to clone down the demo:
22
+
set up, you can access all the files you need to follow along by following
23
+
the following steps to clone down the demo:
13
24
14
25
* In your terminal, type `git clone https://github.com/learn-co-curriculum/exceptional-realty-demo`.
15
-
* Once the repository is cloned down, type `cd exceptional-realy-demo` to navigate into the repository folder.
16
-
* In the project folder, type `git fetch document-structure`. This will copy the branch `document-structure` to your local environment.
17
-
* To switch to this branch, type `git checkout document-structure`, and you should see files appear in your directory tree.
26
+
* Once the repository is cloned down, type `cd exceptional-realy-demo` to
27
+
navigate into the repository folder.
28
+
* In the project folder, type `git fetch --all`, then type
29
+
`git checkout document-structure` to switch over to the branch for this
30
+
repository, and you should see files appear in your directory tree.
18
31
19
-
These files mirror the files that exist at the start of this lesson, so use these to build from and follow along.
32
+
These files mirror the files that exist at the start of this lesson, so use
33
+
these to build from and follow along.
20
34
21
-
**Note:** To see your project live as you code, simply type `httpserver` in the terminal, and this will start a server for you. Now you can go to the IP address that the terminal gives you to view your web pages! (Check out [this Help Center article](http://help.learn.co/the-learn-ide/common-ide-questions/viewing-html-pages-in-the-learn-ide) for more information).
35
+
**Note:** To see your project live as you code, simply type `httpserver` in the terminal, and this will start a server for you. Now you can go to the IP
36
+
address that the terminal gives you to view your web pages! (Check out [this Help Center article](http://help.learn.co/the-learn-ide/common-ide-questions/viewing-html-pages-in-the-learn-ide) for more information).
@@ -30,13 +45,23 @@ These files mirror the files that exist at the start of this lesson, so use thes
30
45
31
46
#### `<!DOCTYPE html>`
32
47
33
-
At the top of every HTML document, you're always going to start off with the same element, `doctype`. The `doctype` element starts with a `<`, followed by an `!` and `doctype`, then specifies which version of HTML we want to use. In HTML5, we just say `html`, and the browser will interpret the rest of the document as HTML5. Go ahead and add `<!DOCTYPE html>` to your `index.html` file.
48
+
At the top of every HTML document, you're always going to start off with the
49
+
same element, `DOCTYPE`. The `DOCTYPE` element starts with a `<`, followed by
50
+
an `!` and `DOCTYPE`, then specifies which version of HTML we want to use. In
51
+
HTML5, we just say `html`, and the browser will interpret the rest of the
52
+
document as HTML5. To close the element, add a `>` at the end. Go ahead and
53
+
add `<!DOCTYPE html>` to your `index.html` file.
34
54
35
55
#### `<html> </html>`
36
56
37
-
The next element is also always required: `<html>`. This tells the browser that everything that falls between the opening and closing `html` tags is to be interpreted as HTML code.
57
+
The next element is also always required: `<html>`. This tells the browser
58
+
that everything that falls between the opening and closing `html` tags is to
59
+
be interpreted as HTML code.
38
60
39
-
One attribute that is important to include in the `<html>` tag is `lang`, which declares what language the webpage is written in. In our case, writing in English, we will use `lang="en"`. This helps search engines to know what language a page is in. Our `index.html` should now look like this:
61
+
One attribute that is important to include in the `<html>` tag is `lang`, which
62
+
declares what language the webpage is written in. In our case, writing in
63
+
English, we will use `lang="en"`. This helps search engines to know what
64
+
language a page is written in. Our `index.html` should now look like this:
40
65
41
66
```
42
67
<!DOCTYPE html>
@@ -46,45 +71,79 @@ One attribute that is important to include in the `<html>` tag is `lang`, which
46
71
47
72
#### `<!-- Comments -->`
48
73
49
-
Inside our HTML, sometimes we want to leave notes either for ourselves or for other developers. An example might be a brief explanation of what some part of the code is doing, or an important message or reminder. We can write comments by wrapping the text we want like so:
74
+
Inside our HTML, sometimes we want to leave notes either for ourselves or for
75
+
other developers. An example might be a brief explanation of what some part of
76
+
the code is doing, or an important message or reminder. We can write comments
77
+
by wrapping the text we want like so:
50
78
51
79
```
52
80
<!-- This is a comment! -->
53
81
```
54
82
55
-
Text included in a comment will not be visible on the webpage, but will be visible in the browser console and `.html` file.
83
+
Text included in a comment will not be visible on the webpage, but will be
84
+
visible in the browser console and `.html` file.
56
85
57
86
#### `<head> </head>`
58
87
59
-
Inside our `<html>` tags, we divide the page into two main sections, `<head>`, and `<body>`, which both play unique roles. Before we get to adding viewable content, there are some additional bits of information we need to declare about our webpage, and this information will be stored in the `<head>`.
88
+
Inside our `<html>` tags, we divide the page into two main sections, `<head>`,
89
+
and `<body>`, which both play unique roles. Before we get to adding viewable
90
+
content, there are some additional bits of information we need to declare about
91
+
our webpage, and this information will be stored in the `<head>`.
60
92
61
93
In the `<head>` section, we place a number of specific tags.
62
94
63
-
* The `<meta>` tag provides metadata about the document, including what character set to us, a description of the content, specific keywords, and the author. Adding this metadata on the content of the page helps search engines to know what the page contains. There is also a `viewport` method, which instructs the browser on how to control the page's dimensions and scaling. Examples of `<meta>` tags:
95
+
* The `<meta>` tag provides metadata about the document, including what
96
+
character set to us, a description of the content, specific keywords, and the
97
+
author. Adding this metadata on the content of the page helps search engines
98
+
to know what the page contains. There is also a `viewport` method, which
99
+
instructs the browser on how to control the page's dimensions and scaling.
100
+
Examples of `<meta>` tags we can add into our `head` section:
64
101
65
102
```
66
103
<meta charset="UTF-8">
67
-
<meta name="description" content="Exceptional Realty, your real estate agent for buying, selling, and renting in all of Rhode Island">
68
-
<meta name="keywords" content="Exceptional Realty, real estate, houses, property">
104
+
<meta name="description" content="Exceptional Realty Group, your real estate agent for buying, selling, and renting throughout New York City">
105
+
<meta name="keywords" content="Exceptional Realty Group, real estate, houses, property">
* The `<link>` tag is also used here, and is for importing in external files. Most commonly, we'll see this being used to import in CSS style sheets, fonts, and JavaScript files and libraries.
74
-
* Another common tag in the `<head>` is `<title>`. The `<title>`, as its name implies, is where the title of the webpage should be entered. Text added inside the `<title>` tags will appear up on your browser tab.
110
+
* The `<link>` tag is also used here, and is for importing in external files.
111
+
Most commonly, we'll see this being used to import in CSS style sheets, fonts,
112
+
and JavaScript files and libraries. In the below example, `link` is used to
* Another common tag in the `<head>` is `<title>`. The `<title>`, as its name
120
+
implies, is where the title of the webpage should be entered. Text added inside
121
+
the `<title>` tags will appear up on your browser tab. Let's add a title for
122
+
our `index.html` page:
123
+
124
+
```
125
+
<title>Exceptional Realty Group - Luxury Homes - About</title>
126
+
```
75
127
76
-
### `<body> </body>`
128
+
If you spin up `httpserver` and check out the site, it'll still be blank, but
129
+
notice that the tab has our title in it!
77
130
78
-
All viewable content of a webpage is contained within the `<body>` section of the page. In the next lesson, we'll go into some of the basic text elements that go into the `<body>`.
131
+
In the next lesson, we'll go into some of the basic text elements that go into
132
+
the `<body>` section!
79
133
80
134
### Add, Commit and Push!
81
135
82
-
If you're following along on your own repository, when you're finished, make sure that your work is saved remotely before moving on to the next lesson!
136
+
If you're following along on your own repository, when you're finished, make
137
+
sure that your work is saved remotely before moving on to the next lesson!
git commit -m 'added document structure and head content to index.html'
87
142
git push
88
143
```
89
144
145
+
Notice, too, that since you've already set up tracking on your branch from the
146
+
previous lesson, you can now just use `git push` and the `main-pages` branch
147
+
will be updated remotely.
148
+
90
149
<pclass='util--hide'>View <ahref='https://learn.co/lessons/document-structure'>Document Structure</a> on Learn.co and start learning to code for free.</p>
0 commit comments