Merge pull request #221 from codebar/kims-tweaks

made some little tweaks to the HTML tutorials

Author: despo

README.md

@@ -14,5 +14,5 @@ We encourage you to contribute with your suggestions and corrections, head to ou
 
 ## License
 
-Codebar Tutorials are released under the [Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)](http://creativecommons.org/licenses/by-nc-sa/4.0/).
+codebar Tutorials are released under the [Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)](http://creativecommons.org/licenses/by-nc-sa/4.0/).
 

_layouts/page.html

@@ -12,7 +12,7 @@ <h1 class="entry-title">{{ page.title }}</h1>
     {{ content }}
     <footer>
         <a href='http://tutorials.codebar.io/'>Back to tutorials</a>
-        <a href='http://codebar.io/'>Codebar mainpage</a>
+        <a href='http://codebar.io/'>codebar mainpage</a>
     </footer>
   </article>
 </div>

html/lesson2/tutorial.md

@@ -81,7 +81,7 @@ In the head of the html page define a style tag
 </head>
 ```
 
-Include the styling described below, within the style tag we defined.
+Include the styling in this tutorial, within the style tag we just created.
 
 ## Introductions to selectors
 
@@ -127,9 +127,11 @@ A useful resource for figuring out color codes is [http://0to255.com](http://0to
 
 **1px** defines the thickness of the border
 
-**dotted** the style of the line
+**dotted** defines the style of the line
 
-**#a369d5** the color of the border
+**#a369d5** defines the color of the border
+
+How about changing the border thickness to 5px to see what happens? 
 
 #### Selector: class
 
@@ -154,7 +156,7 @@ margin-left: auto;
 What we defined above is
 _margin: (top bottom) (left right)_
 
-> You can see the margin of an element by inspecting it and having a look at the computed tab
+> You can see the margin of an element by right clicking in your browser and selecting Inspect Element then having a look at the computed tab on the right hand site. (If you're using Safari this feature is not enabled by default like Chrome so go to your Safari preferences tab, then go to Advanced and check the box that says Show develop menu in menu bar).
 
 #### Selector: id
 
@@ -369,7 +371,7 @@ ol li {
 }
 ```
 
-**font-weight** thickness of displayed text
+**font-weight** is the thickness of displayed text
 
 **text-align** horizontal alignment of a text element
 
@@ -425,7 +427,7 @@ ol li {
 
 ### Pseudo classes
 
-A psedo class is a keyword added to a selector that specifies a special state of the element to be selected. [These](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) are the standard pseudo classes.
+A pseudo class is a keyword added to a selector that specifies a special state of the element to be selected. [These](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) are the standard pseudo classes.
 
 Let's add the code below to make sure we only apply a margin to the _first li element_ within the pictures class.
 
@@ -454,6 +456,8 @@ html, body, div, h1, h2, h3, h4, h5, h6, p, a, img, small, b, i, ol, ul, li {
 }
 ```
 
+If you have some time how about you go back through the tutorial making little amends to your CSS to see what things you can change. 
+
 -----
 
 This ends our second lesson. Is there something you don't understand? Try and go through the provided resources with your coach. If you have any feedback, or can think of ways to improve this tutorial [send us an email](mailto:[email protected]) and let us know.

html/lesson3/tutorial.md

@@ -93,7 +93,7 @@ Add an image wrapped in a `<div>` element
 
 ```html
 <div>
-  <img src="ada_lovelace.jpg"/>
+  <img src="ada_lovelace.jpg" alt="Ada Lovelace"/>
 </div>
 ```
 
@@ -115,7 +115,7 @@ Before you can manipulate the `<div>` surrounding the image, you must be able to
 
 ```html
 <div class="my-picture">
-  <img src="ada_lovelace.jpg"/>
+  <img src="ada_lovelace.jpg" alt="Ada Lovelace"/>
 </div>
 ```
 
@@ -184,7 +184,7 @@ Note: `padding`, `margin` and `border` can be applied to any combination of side
 
 ### Styling the header
 
-The page is gradually starting to come together. Make `<header>` a bit more distinct by setting a background color and aligning its contents in its center.
+Our page is gradually starting to come together. Make `<header>` a bit more distinct by setting a background color and aligning its contents in its center.
 
 ```css
 header {
@@ -262,7 +262,7 @@ margin-top: 55px;
 margin-left: 20px;
 ```
 
-###padding and margin
+###Padding and margin
 Padding and margin can be set in a number of different ways
 
 `padding: top right bottom left;` e.g. _padding: 10px 20px 30px 5px;_
@@ -275,9 +275,9 @@ Padding and margin can be set in a number of different ways
 
 Alternatively, you can only set the side you want `padding-right: 20px`
 
-_this also applies to the margin_
+_this method also applies to the margin_
 
-###more styling...
+###More styling...
 
 Specify a class `.social-media` in the `ul` element
 
@@ -306,7 +306,7 @@ Add a bottom border, to give the effect of a line, to the individual list items
 }
 ```
 
-> Tweak the properties using the inspector
+> Tweak the properties using the inspector.
 > What happens when you remove the width or increase the padding?
 
 ## Pseudo classes
@@ -346,7 +346,7 @@ We only want links that are within the list to be affected. So we will specifica
 
 We only want to change the border color when hovering over the link. To avoid repeating ourselves an easy way to do that is by being more specific and using `border-left-color`. Since we have no other borders, we could also use `border-color`
 
-**Remember to have a look [at the list of all CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference?redirectlocale=en-US&redirectslug=CSS%2FCSS_Reference) (mentioned in the previous tutorial) when working on styling. The properties are too many to remember!**
+**Remember to have a look [at the list of all CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference?redirectlocale=en-US&redirectslug=CSS%2FCSS_Reference) (mentioned in the previous tutorial) when working on styling. There are too many properties to remember!**
 
 ```css
 .social-media li a:hover {
@@ -381,7 +381,7 @@ box-shadow: 0 1px 1px 1px rgba(237, 235, 232, 0.4);
 
 ## Setting up the main container
 
-You've done a great job so far! The sidebar is done and you know about box properties.
+You've done a great job so far! The sidebar is done and you are familiar with box properties.
 Time to add some content to the page.
 
 Add a div, with the class main after `.sidebar`
@@ -434,7 +434,7 @@ Add a link so that anyone coming to the page can easily find out more about Char
 <a href="http://en.wikipedia.org/wiki/Charles_Babbage">Charles Babbage's </a>
 ```
 
-Ada was the world's first programmer. We want that content to stand out. Add a span around and specify a class `highlight`, so the intention is obvious and other people working on the code of the page can easily understand it.
+Ada was the world's first programmer therefore we want that to stand out. Add a span around it and specify a class `highlight`, so the intention is obvious and other people working on the code of the page can easily understand it.
 
 ```html
 <span class="highlight">I am the world's first programmer</span>

html/lesson4/tutorial.md

@@ -12,7 +12,7 @@ In the previous lessons, we spoke about **H**yper **T**ext **M**arkup **L**angua
 **HTML** defines the _structure_ of a website and **CSS** the _presentation_. We also discussed the box model, inline and block elements and pseudo classes.
 
 
-### Today we will be building a website and learn more about CSS layouts and formatting
+### Today we will be building a website and learning more about CSS layouts and formatting
 
 The page we will build will look similar to this [example page]( http://codebar.github.io/tutorials/html/lesson4/example.html "Grace Hopper")
 
@@ -58,7 +58,7 @@ Add a header element in the `<body>` of the page
 ```html
 <header>
   <div>
-    <img src="gracehopper.jpg"/>
+    <img src="gracehopper.jpg" alt="Grace Hopper"/>
   </div>
   <div>
     <h1>Grace Hopper</h1>
@@ -98,7 +98,7 @@ Set a CSS class `portrait` to the `<div>` wrapping the image
 
 ```html
 <div class="portrait">
-  <img src="gracehopper.jpg"/>
+  <img src="gracehopper.jpg" alt="Grace Hopper"/>
   ...
 ```
 
@@ -175,6 +175,12 @@ This should be placed before the header closing tag.
 
 Add an id `toolbar` to the outer `<div>`
 
+See what happens when you add a `target="_blank"` to your link
+
+```html
+  <li> <a href="http://www.personal.psu.edu/djd5202/ass6.html" target="_blank">Computer Scientist</a></li>
+```
+
 ### Styling the toolbar
 
 First let's remove the bullet from the list of links
@@ -230,7 +236,7 @@ Let's add the main content. Paste underneath the header. We will tweak things as
 <div id="content">
   <p>
   <div>
-    <img src="mark_i.jpg">
+    <img src="mark_i.jpg" alt="Mark">
     <span>Mark I</span>
   </div>
   Grace Hopper was born in 1906. Her parents, noticing her interest in math, made special arrangements for her to take classes reserved for boys in school. She received a Bachelors deegree in Mathematics and  physics from Vassar college and then moved onto Yale, where she did her Masters deegree in Math. She continued her education and begun a teaching career at Vassar. When she received her PhD she joined the navy, where she was assigned to work in the Bureau of Ordinance computation project at Harvard university. There, she became part of the programming team, who works on the Mark I; the first computer ever made.
@@ -244,7 +250,7 @@ Let's add the main content. Paste underneath the header. We will tweak things as
   </p>
   <p>
   <div>
-     <img src="cobol.jpg"/>
+     <img src="cobol.jpg" alt="Cobol"/>
      <span>Working with COBOL</span>
   </div>
   Grace loved the Navy, and was reluctant to retire, even at the age of 79. At her retirement ceremony she was recognized for all she contributed, and received the Distinguished Service Medal of the Defense Department, the department's highest honor, and a citation which stated
@@ -272,7 +278,7 @@ Style the container
 }
 ```
 
-> Before moving forward, spend 5 minutes reading the content. **Grace Hopper** was an amazing woman and her contributions to Computer Science and our world, invaluable.
+> Before moving forward, spend 5 minutes reading the content. **Grace Hopper** was an amazing woman and her contributions to Computer Science and our world are invaluable.
 
 ## Floating elements
 
@@ -302,7 +308,7 @@ Add a CSS class to the first image's wrapper
 
 ```html
 <div class="start-of-line">
-  <img  src="mark_i.jpg">
+  <img src="mark_i.jpg" alt="Mark I">
   <span>Mark I</span>
 </div>
 ```
@@ -319,7 +325,7 @@ Add a CSS class to the second image's wrapper
 
 ```html
 <div class="end-of-line">
-  <img src="cobol.jpg"/>
+  <img src="cobol.jpg" alt="Working with Cobol"/>
   <span>Working with COBOL</span>
 </div>
 ```
@@ -467,7 +473,7 @@ Fix this by setting the width
 width: 100%;
 ```
 
-And reposition the '#content' so it doesn't hide underneath the header. Change the padding property to have a padding-top
+And reposition the `#content` so it doesn't hide underneath the header. Change the padding property to have a padding-top
 
 ```css
 padding: 150px 30px 40px;
@@ -493,7 +499,7 @@ z-index: 99;
 
 ## Ending this lesson
 
-Before we finish the lesson, ensure that we have a minimum width set on the page. This way we can make sure that if the page collapses or is viewed in a much smaller screen, the content won't be hidden by the collapsing header.
+Before we finish the lesson, ensure that we have a minimum width set on the page. This way we can make sure that if the page collapses or is viewed using a much smaller screen, the content won't be hidden by the collapsing header.
 
 ```css
 min-width: 570px;

html/lesson5/tutorial.md

@@ -112,8 +112,8 @@ Add this right after the beginning of the element with the id `wrapper`
 
 ```html
 <div>
-  <img src="anita-top.jpg"/>
-  <img src="anita-bottom.jpg"/>
+  <img src="anita-top.jpg" alt="Anita Borg image 1"/>
+  <img src="anita-bottom.jpg" alt="Anita Borg image 2"/>
   <div>
     <a href="http://gos.sbc.edu/b/borg.html">reference</a>
     <a href="http://en.wikipedia.org/wiki/Anita_Borg">wikipedia</a>
@@ -154,7 +154,7 @@ Great! Now our images and links are on the left, and the main content on the rig
 
 ### Border-radius
 
-[border radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) enables us to create rounded corners for our elements. In the past, multiple divs and the use of images was required to achieve that effect.
+[Border radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) enables us to create rounded corners for our elements. In the past, multiple divs and the use of images was required to achieve that effect.
 
 `border-radius: arc`
 
@@ -179,7 +179,7 @@ As we only want the bottom right and bottom left corners to be rounded, we can b
   border-bottom-right-radius: 5px;
 ```
 
-Let's also round the corners of the second picture. First, a class `rounded` to it.
+Let's also round the corners of the second picture. First, let's add a class `rounded` to it.
 
 ```css
 .rounded {
@@ -211,7 +211,7 @@ Also add a top border to our page, to make it a bit more polished. Add this to t
 
 ### Background
 
-Background is not a new CSS property, but in CSS3 it had a lot more capabilities. You can set multiple images, specify their dimension,  position and attachment.
+Background is not a new CSS property, but in CSS3 it had a lot more capabilities. You can set multiple background images, specify their dimension, position and attachment.
 
 To set a background you can use
 
@@ -228,7 +228,7 @@ You can also set different properties for your backgrounds, by defining them in
 
 #### Let's try this out.
 
-First lets set two background images, the first positioned on the right and the second on the left.
+First let's set two background images, the first positioned on the right and the second on the left.
 
 ```
 background: url('assets/images/background-right.jpg') right top no-repeat,
@@ -259,7 +259,7 @@ Do you remember how we styled our links last time? Today we will try and make th
 
 First, let's give their container element a class called `references`
 
-Add a top margin, so there is some space between them and the image above and center them.
+Add a top margin so that there is some space between them and the image above. Let's center them too.
 
 ```css
 .references {
@@ -268,7 +268,7 @@ Add a top margin, so there is some space between them and the image above and ce
 }
 ```
 
-Now, set a class `btn` to both of the links inside the `references` div and style that.
+Now, set a class `btn` to both of the links inside the `references` div and style them.
 
 ```css
 a.btn {
@@ -307,15 +307,15 @@ a.btn:hover {
 
 ## A little more about Anita
 
-The text in our page, is one of Anita Borg's speeches. Lets add a brief biography, at the top of the page, just below the title `h1`
+The text in our page, is one of Anita Borg's speeches. Let's add a brief biography about her at the top of the page, just below the title `h1`
 
 ```html
 <p>
 Anita Borg believed that technology affects all aspects of our economic, political, social and personal lives. A technology rebel with a cause, in her life she fought tirelessly to ensure that technology's impact would be a positive one. It was this vision that inspired Anita in 1997 to found the Institute for Women and Technology. Today this organization continues on her legacy and bears her name, The Anita Borg Institute for Women and Technology.
 </p>
 ```
 
-Lets style that. First, let's assign it a class `about`
+Let's style that. First, give it a class `about`
 
 ```css
 p.about {
@@ -355,7 +355,7 @@ Also, add its title using an `h2` heading
 
 ### Achievements
 
-Anita was an amazing personality and a person who contributed greatly to women in technology.
+Anita had an amazing personality and was a person who contributed greatly to women in technology.
 Let's list some of her achievements, just after the `about` paragraph
 
 ```html
@@ -399,7 +399,7 @@ Making it prettier
 
 ### CSS - Even and Odd rules, applying styling to alternate elements
 
-We will finish off, by styling every second child element of our list.
+We will finish off by styling every second child element of our list.
 Thanks to some great CSS selectors, this is quite easy to do.
 
 We can use

html/lesson6/tutorial.md

@@ -8,7 +8,7 @@ footer: true
 
 ### Recap
 
-In the last lesson, we briefly introduced **HTML5** and **CSS3**. We focused on **CSS3**.
+In the last lesson, we introduced you to even more **HTML5** and **CSS3**.
 
 ### Today we will be focusing more on HTML5!
 
@@ -60,7 +60,7 @@ We've already seen that we can put images in our page using the `<img>` tag, but
 
 ```html
 <figure>
- <img src="assets/images/concerned-pug.png">
+ <img src="assets/images/concerned-pug.png" alt="Concerned pug">
  <figcaption>
   Concerned pug
  </figcaption>
@@ -133,8 +133,8 @@ img {
 
 
 -----
-This ends our sixth lesson. How did you find the introduction to HTML5? Is there something you don't understand? Try to use the provided resources with your coach. If you have any feedback, or can think of ways to improve this tutorial [send us an email](mailto:[email protected]) and let us know.
+This ends our sixth lesson. How did you find learning HTML5 and CSS? Is there something you don't understand? Try to use the provided resources with your coach. If you have any feedback, or can think of ways to improve this tutorial [send us an email](mailto:[email protected]) and let us know.
 
 ## Extras
 
-Now that you are familiar with HTML & CSS, how about you go away and create your own portfolio site. Think about the pages that you may include, such as home, about me and a portfolio or gallery page. You may even want to include a downloadable CV.
+Now that you are familiar with HTML & CSS, how about you go away and create your own little portfolio site. Think about the pages that you may include, such as home, about me and a portfolio or gallery page. You may even want to include a downloadable CV.