Skip to content

Commit 63dc27d

Browse files
tjgrathwelltjgrathwell
committed
Merge branch 'front-end-fiddling' of https://github.com/RailsBridge-CapeTown/docs 
2 parents 5a8167f + 7b13f3c commit 63dc27d

17 files changed

+205
-204
lines changed

‎sites/en/frontend/HTML_attributes.step

+3-4
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ steps do
8383
<li>Soccer</li>
8484
<li>Programming</li>
8585
</ul>
86-
<p>I hear RailsBridge needs volunteers, should I volunteer!?!</p>
86+
<p>I hear RailsBridge needs volunteers, should I volunteer? :)</p>
8787
HTML
8888
end
8989

@@ -98,10 +98,10 @@ HTML
9898
<li>Soccer</li>
9999
<li>Programming</li>
100100
</ul>
101-
<p>I hear RailsBridge needs volunteers, should I volunteer!?!</p>
101+
<p>I hear RailsBridge needs volunteers, should I volunteer? :)</p>
102102
HTML
103103
message "Refresh the page in the browser. You should see the new paragraphs you added, but no styling changes."
104-
message "Many HTML attributes, like classes and ids, don't directly convey visual information. Your site will look the exact same until we use the class to add CSS styling."
104+
message "Many HTML attributes, like classes and ids, don't convey visual information. Your site will look the exact same until we use the class to add CSS styling."
105105
end
106106

107107
step do
@@ -164,4 +164,3 @@ MARKDOWN
164164
end
165165

166166
next_step "developer_tools"
167-

‎sites/en/frontend/HTML_structure.step

+7-11
Original file line numberDiff line numberDiff line change
@@ -28,23 +28,19 @@ The `<html>` encloses all the rest of your page and states "Here is my HTML!"
2828
<!-- Important invisible details will go here! -->
2929
</head>
3030
<body>
31-
Actual Visible Content
31+
Visible Content
3232
</body>
3333
</html>
3434
HTML
3535
message <<-MARKDOWN
3636

3737
### The Head
3838

39-
The `head` contains information that is not displayed in your browser. It has metadata tags that can tell a search engine or another program more about the file, like who wrote it or what keywords are relevant, such as:
39+
The `head` contains information that is not displayed in your browser. It has metadata (data about data) tags that can tell a search engine or another program more about the file, like who wrote it or what keywords are relevant, such as:
4040

41-
What language or character set you're using: `<meta charset="utf-8">`
42-
43-
What the page title should be: `<title>HTML!</title>`
44-
45-
What CSS and JavaScript files to include (and where they are):
46-
47-
`<link rel="stylesheet" href="style.css">`
41+
* What language or character set you're using: `<meta charset="utf-8">`
42+
* What the page title should be: `<title>HTML!</title>`
43+
* What CSS and JavaScript files to include (and where they are): `<link rel="stylesheet" href="style.css">`
4844

4945
MARKDOWN
5046
source_code :html, <<HTML
@@ -65,7 +61,7 @@ HTML
6561

6662
### The Body
6763

68-
The Body contains the actual content of your file, the things you'll want your users
64+
The body contains the actual content of your file, the things you'll want your users
6965
to be able to see, read, or interact with!
7066

7167
MARKDOWN
@@ -76,7 +72,7 @@ steps do
7672

7773
step do
7874
message <<-MARKDOWN
79-
Let's add the doctype, HTML, head, and body tags to your file. It should look something like this:
75+
Let's add the doctype, HTML, head, and body tags to your hello.html file. It should look something like this:
8076

8177
<img src='img/hello_structure.png'>
8278

‎sites/en/frontend/HTML_tags.step

+16-16
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ overview do
1212

1313
Tags convey meaning. And in order to display your content well, everything should be inside of a tag, not just words you want emphasized. So let's use the paragraph tag `<p>` and the header 1 tag `<h1>`.
1414

15-
You'll notice that even if you put in extra lines and spaces, HTML will treat any number of
15+
You'll notice that even if you put in extra lines and spaces, browsers will treat any number of
1616
new line or space characters like there's just one space there. When you're getting started
1717
with HTML, this can seem like a pain, because you have to type
1818
MARKDOWN
@@ -60,7 +60,7 @@ My name is Rachel.
6060
end
6161

6262
step do
63-
message "Even though we put in some blank lines, the browser ignored them. So we'll have to use tags to break up our content."
63+
message "The browser ignored the new lines and the blank line because we didn't use any tags. Let's use some to break up our content."
6464
message "Update your HTML with an `h1` tag and a `p` tag:"
6565

6666
source_code :html, <<-HTML
@@ -121,7 +121,7 @@ are a ton of other tags you might use:
121121
td "A link (the 'a' stands for Anchor)."
122122
}
123123
tr {
124-
td "h1-h6"
124+
td "h1 to h6"
125125
td "Various headers, h1 is the most important, h6 the least."
126126
}
127127
tr {
@@ -138,7 +138,7 @@ are a ton of other tags you might use:
138138
}
139139
tr {
140140
td "table, tr, td"
141-
td "You can make tables (like this one) with table rows and data cells."
141+
td "Tables (like this one) with table rows and data cells."
142142
}
143143
tr {
144144
td "form"
@@ -150,7 +150,7 @@ are a ton of other tags you might use:
150150
}
151151
tr {
152152
td "div"
153-
td "A section marker that doesn't do anything specific to the contents itself, but does make a new line after. (More on this later.)"
153+
td "A section marker that doesn't do anything specific to the contents itself, but does make a new line after. (a 'division'. More on this later)"
154154
}
155155
tr {
156156
td "span"
@@ -160,7 +160,7 @@ are a ton of other tags you might use:
160160

161161
message <<-MARKDOWN
162162

163-
And HTML5 introduced lots of new HTML tags to make the HTML more *semantic*, meaning the tags should describe the content they describe. Some of the new elements introduced by HTML5 include:
163+
HTML5 introduced lots of new tags to make the HTML more *semantic*, meaning the tags should describe the content they describe. Some of the new elements introduced by HTML5 include:
164164

165165
MARKDOWN
166166

@@ -171,43 +171,43 @@ are a ton of other tags you might use:
171171
}
172172
tr {
173173
td "section"
174-
td "A section of a document."
174+
td "A section of a document: a thematic grouping of content."
175175
}
176176
tr {
177177
td "nav"
178-
td "A navigation section."
178+
td "A navigation section, containing links to other pages or to parts within the current page."
179179
}
180180
tr {
181181
td "header"
182-
td "The header for a page. (This is different from the head element, which contains metadata about the page!)."
182+
td "The header for a page or section of a page. (This is different from the head element, which contains metadata about the page!)."
183183
}
184184
tr {
185185
td "footer"
186-
td "The footer for a page."
186+
td "The footer for a page or section of a page."
187187
}
188188
tr {
189189
td "main"
190-
td "The important content on a page."
190+
td "The main content of a page."
191191
}
192192
tr{
193193
td "aside"
194-
td "Content not essential to the main content."
194+
td "Content that's related to the main content, but could be considered separate from it."
195195
}
196196
end
197197

198198
message <<-MARKDOWN
199199

200-
Don't try to memorize all the tags! You can always look them up on sites like:
200+
You don't need to memorize all the tags! You can always look them up on sites like:
201201

202-
* [Sitepoint](http://reference.sitepoint.com/html)
203-
* [Mozilla Developer Network](https://developer.mozilla.org/en/HTML/Element)
204202
* [WebPlatform.org](http://webplatform.org/)
203+
* [Mozilla Developer Network](https://developer.mozilla.org/en/HTML/Element)
204+
* [Sitepoint](http://reference.sitepoint.com/html)
205205

206206
## Try This
207207

208208
What happens if you change the `<ul>` in your **hello.html** to `<ol>`? (Don't forget to change the closing tag, too.)
209209

210-
Can you link your favorite things to their respective Wikipedia pages? Here's an example link for you: `<a href="http://en.wikipedia.org/wiki/Ruby_(programming_language)">Ruby</a>`
210+
Can you link your favorite things to their Wikipedia pages? Here's an example link for you: `<a href="http://en.wikipedia.org/wiki/Ruby_(programming_language)">Ruby</a>`
211211

212212
What are all the individual parts of the code to add a link?
213213

‎sites/en/frontend/_consider_deploying_to_github.step

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
div :class => "deploying" do
2-
h1 "Deploying"
2+
h1 "Optional Step: Deploying to GitHub"
33
blockquote do
4-
message "Before the next step, you could try deploying your page to GitHub! If you haven't used Git or GitHub before, you might prefer to do this later."
5-
link 'deploying_to_github_pages'
4+
message "Before the next step, you could try deploying (sending your code) your page to GitHub! If you haven't used Git or GitHub before, **it's okay to do this later**."
5+
link 'deploying_to_github'
66
end
77
end

‎sites/en/frontend/_consider_deploying_to_github_again.step

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
div :class => "deploying" do
2+
h1 "Optional Step: Deploying to GitHub again"
3+
blockquote do
4+
5+
message <<-MARKDOWN
6+
Before the next step, you could try deploying your page to GitHub!
7+
8+
* If you have already deployed to GitHub, go on to [Deploying to GitHub again](deploying_to_github_again).
9+
* If this is your first time deploying, start at [Deploying to GitHub](deploying_to_github)
10+
MARKDOWN
11+
12+
end
13+
end

‎sites/en/frontend/_developer_tools.step

+1-1
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ explanation do
6161

6262
With good browser developer tools, you can pick apart every website you visit. If you see cool
6363
CSS styles or JavaScript animations, you can always look under the hood and figure out how
64-
they're done. It's a great way to keep learning as a front end developer.
64+
they're done. It's a great way to keep learning as a front-end developer.
6565

6666
MARKDOWN
6767
end

‎sites/en/frontend/add_more_elements.step

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
goals do
2-
message "Now we'll switch from simple steps to doing **challenges**. There will still be something to do at each step, but it will take some figuring out to do correctly. (If you get stuck, you can still ask a TA or instructor for hints.) You will:"
2+
message "Now we'll switch from simple steps to doing **challenges**. There will still be something to do at each step, but it will take some figuring out to do correctly. If you get stuck, ask a volunteer for hints. You will:"
33
goal "Fill in more content"
44
goal "Add an image tag"
55
goal "Use two different kinds of anchor tags"
@@ -60,6 +60,6 @@ Now that you know the basics of working with HTML, the trickiest part is remembe
6060
MARKDOWN
6161
end
6262

63-
insert 'consider_deploying_to_github'
63+
insert 'consider_deploying_to_github_again'
6464

6565
next_step 'make_columns'

‎sites/en/frontend/add_starter_files.step

+1-2
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,7 @@ explanation do
2727
## What Are These Files?
2828

2929
Just to save you some time, we've supplied a bare bones HTML document, a CSS stylesheet,
30-
a JavaScript file, and a placeholder image. But you could have typed up these files yourself
31-
with your text editor, if you'd wanted to.
30+
a JavaScript file, and a placeholder image.
3231

3332
If you are starting a new project in the future, try typing it all out by hand a few times
3433
to get the hang of it, and then try starting with some other people's HTML boilerplate code

‎sites/en/frontend/basic_CSS.step

+6-6
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@ overview do
77
message <<-MARKDOWN
88
## What is CSS?
99

10-
CSS stands for __C__ascading __S__tyle__s__heets. It's a language for creating **rules** that
10+
CSS stands for *C*ascading *S*tyle*s*heets. It's a language for creating **rules** that
1111
can **select** various elements on the page and change their **visual properties**.
1212

13-
* __C__ascading - this is how the browser determines the correct style rules to apply to
13+
* *C*ascading - this is how the browser determines the correct style rules to apply to
1414
each element on the page. As we'll see, CSS has many ways to match rules to elements, and
1515
some of those ways count for more than others. The browser allows more important rules to
1616
_cascade_ over less important ones.
1717

18-
* __S__tyle__s__heets - CSS files are called 'stylesheets' because they are separate documents - their
18+
* *S*tyle*s*heets - CSS files are called 'stylesheets' because they are separate documents - their
1919
file type is .css - that only deal with styling information. We add special tags in our HTML files to
2020
link them to our stylesheets.
2121

@@ -40,7 +40,7 @@ MARKDOWN
4040
message <<-MARKDOWN
4141
## CSS Rules Are Made of a Selector and Attributes
4242

43-
The **selector** is the first part of a CSS rule - it tells the browser how to find, or _select_, the element we want to style.
43+
The **selector** is the first part of a CSS rule - it tells the browser how to find, or *select*, the element we want to style.
4444
On this page, we'll use `h1` and `p` as our selectors, which match the `h1` and `p` elements in our HTML.
4545

4646
<img src='img/css.png'>
@@ -112,9 +112,9 @@ explanation do
112112

113113
## CSS is super powerful
114114

115-
Here are two screen shots of the same HTML page, but on the right side, we've turned off all the CSS. Almost all of the color and formatting disappear, and the code snippets and buttons that were obvious with CSS styles now just look like text.
115+
Here are two screen shots of the same HTML page. On the left is just the HTML. On the right side, we've added lots of CSS. Almost all of the color and formatting are applied using CSS, and the code snippets and buttons now look great.
116116

117-
### Bundler: With and Without CSS (the horror!)
117+
### Bundler: Before and After CSS
118118

119119
<img src='img/css_bundler.png'>
120120

‎sites/en/frontend/basic_javascript.step

+3-3
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ HTML
1818
end
1919

2020
step do
21-
message "Type in this short script. Javascript is case-specific (it treats `mynewname` and `myNewName` as two different things) and picky about syntax, so if your script doesn't run, check carefully for typos."
21+
message "Type in this short script. Javascript is case-specific (it treats `mynewname` and `myNewName` as two different things) and picky about syntax. If your script doesn't run, check carefully for typos."
2222

2323
source_code :html, <<HTML
2424
<script>
@@ -50,11 +50,11 @@ explanation do
5050

5151
message <<-MARKDOWN
5252

53-
## Wherefore JavaScript?
53+
## Why JavaScript?
5454

5555
Javascript allows you to make your pages interactive. You can use it to build
5656
anything from a simple animation to a giant web application like Twitter
57-
or Github. It gives you total control to add, remove, or modify content you've
57+
or GitHub. It gives you total control to add, remove, or modify content you've
5858
made with HTML. You can also use it to change styles and add or remove
5959
classes.
6060

0 commit comments

Comments
 (0)