diff --git a/README.md b/README.md
index cf730ea..c0349f3 100644
--- a/README.md
+++ b/README.md
@@ -3,11 +3,11 @@ layout: ots
title: README
---
-This is a friendly how-to for contributors to the Html and Css workshop
+This is a friendly how-to for contributors to the HTML and CSS workshop
at OpenTechSchool.
About the course:
-An Html and css basic workshop for beginners that never write Html/css before and
+An HTML and CSS basic workshop for beginners that never write HTML/CSS before and
wnat to know how to start.
# Class format
@@ -88,7 +88,7 @@ And made of win.
[links for nerds](http://slashdot.org)
-[links for internal stuff](section8.html)
+[links for internal stuff](section8.HTML)
This is a horizonal rule:
@@ -106,5 +106,5 @@ Bit of command line:
get dolla
$
-For a more complete list of languages see [highlight.js](http://softwaremaniacs.org/media/soft/highlight/test.html)
+For a more complete list of languages see [highlight.js](http://softwaremaniacs.org/media/soft/highlight/test.HTML)
diff --git a/_config.yml b/_config.yml
index 3b35143..15023cb 100644
--- a/_config.yml
+++ b/_config.yml
@@ -1,38 +1,38 @@
permalinks: title
-baseurl: /html-css-beginners/
+baseurl: /HTML-CSS-beginners/
map:
- title: Home
path:
- caption: Get started with Html & css
+ caption: Get started with HTML & CSS
- title: Core
caption: The 'mandatory' workshop content
subpages:
- title: The template structure
- path: core/structure.html
+ path: core/structure.HTML
caption: From white page to a 'Hello World'
- title: Your first styled Hello World!
- path: core/style.html
- caption: Understanding css. What is class, Id and selector
+ path: core/style.HTML
+ caption: Understanding CSS. What is class, Id and selector
- title: Create your personal Portfolio - Part 1
- path: /core/portfolio.html
- caption: Html5 elements, float, box model and text style
+ path: /core/portfolio.HTML
+ caption: HTML5 elements, float, box model and text style
- title: Create your personal Portfolio - Part 2
- path: /core/portfolio-2.html
+ path: /core/portfolio-2.HTML
caption: Positioning, anchor and form elements
- title: Extras
caption: Additional workshop content
subpages:
- - title: Html5, what is new?
- path: extras/html5.html
- - title: Css3 transition and animation
- path: extras/css3.html
+ - title: HTML5, what is new?
+ path: extras/HTML5.HTML
+ - title: CSS3 transition and animation
+ path: extras/CSS3.HTML
- title: Cross Browsers and usual IE problems
- path: /extras/cross-browsers.html
+ path: /extras/cross-browsers.HTML
- title: Responsive Design and mobile approach
- path: /extras/responsive.html
+ path: /extras/responsive.HTML
- title: Sass and Less
- path: /extras/sass-less.html
+ path: /extras/sass-less.HTML
- title: Framework Twitter Boostrap
- path: /extras/framework.html
+ path: /extras/framework.HTML
- title: How to start with Javascript
- path: extras/javascript.html
+ path: extras/javascript.HTML
diff --git a/_layouts/default.html b/_layouts/default.html
index 2bfd878..ebd5a11 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -1,15 +1,15 @@
-
-
+
+
- Learn Html and Css with OpenTechSchool
-
-
+ Learn HTML and CSS with OpenTechSchool
+
+
@@ -35,4 +35,4 @@
{{ page.title }}
-
+
diff --git a/_layouts/ots.html b/_layouts/ots.html
index 0dfef09..f8d6a27 100644
--- a/_layouts/ots.html
+++ b/_layouts/ots.html
@@ -1,14 +1,14 @@
-
+
OpenTechSchool – {{ page.title }}
-
-
+
+
-
-This way is good to use when you not many style. In this case is easier
-to referred and browser not need to load another file.
+This way is good when you do not have many styles. In such a case, it is easier
+to refer to because the browser has no need to load another file.
-Or an "external" CSS file. First you need to open a new file in your editor
-and save it with .css extension.
-Than you can associated with an HTML document using the following syntax.
+The second way to write CSS for a document is with an "external" CSS file. First, you open a new file in your editor
+and save it with a .CSS extension.
+Then, you can link that to a HTML document using the following syntax.
Write it just after the meta tag.
-That's the best way if you have a lot of css to write and you want to
-keep it organize.
+This is the best way if you have a lot of CSS to write and you want to
+keep it organized.
-Once you linked your external css file, open yoout html file in the
-browser, open your console and go in the Network tab.
-You should see the path of your css file and under the STATUS coloum
+Once you link your external CSS file, open your HTML file in the
+browser, open your console and go to the Network tab.
+You should see the path of your CSS file and under the STATUS column
see a *200 OK* response.
-That mean your file is read from your browser and linked at your html
+That means your file is read from your browser and linked to your HTML document
in the right way.
Now we are ready to work with it.
-## Let's give some colors!
+## Let's add some colors!
CSS has a simple syntax.
The file consists of a list of rules. Each rule consists of one or more
-selectors, and a declaration block.
+selectors and a declaration block.
-**Selector** are used to declare which part of the markup a style applies to.
-Let's take the h1 title we wrote in our html file and give to it a nice red color.
+**Selectors** are used to declare which part of the markup a style applies to.
+Let's take the h1 title we wrote in our HTML file and give it a nice red color.
h1 {
color: red;
}
-h1 is the selector. The html elemnts we want to style.
-*color* is one of the property that we can give to our selector and *red* is the
+h1 is the selector, the HTML elemnt we want to style.
+*color* is one of the properties that we can give to our selector, and *red* is the
value of this property.
The right sytrax is:
@@ -60,10 +60,10 @@ The right sytrax is:
property: value;
}
-Refresh your browser and see how the color of you title is changed.
+Refresh your browser and see how the color of your title has changed.
Isn't it nice?
-For give a backgorund color to our paragph will write
+To give a background color to our paragraph, write
p {
background-color: #ddd;
@@ -74,30 +74,28 @@ For give a backgorund color to our paragph will write
Web colors are colors used in designing web pages.
Colors may be specified as an RGB triplet or in hexadecimal format (a hex triplet).
Hexadecimal color codes begin with a number sign (#).
-This number sign can be picked from a Graphics software or from some nice web tool.
-For example: [Color picker](http://www.colorpicker.com/)
-Choose the color, copy the number that start with # and than past in your css file.
+This number can be picked from a graphics software or from some nice web tool, such as, [Color picker](http://www.colorpicker.com/), for example.
+When you have chosen your color, copy the number that starts with # and paste that in your CSS file.
Good to know: #000 is black and #fff is white.
******
-Let's try now to give a nicer border to our images.
+Let's try now to give a nice border to our images.
img {
border: 1px solid #000;
}
-Here we are givin the style to all the img tags we have, giving 1px thicK,
-solid and black to all the four borders of our images.
-If we would like to give the style just to one of the four border we should write
+Here we are giving the following style to all the img tags we have: a 1-pixel thick, solid black border to all four edges of our images.
+If we want to give the style to just one of the four edges, for example, the top edge, we would write
img {
border-top: 1px solid #000;
}
-**Look at your css cheat sheet and giev some more style to your images. **
+**Look at your CSS cheat sheet and give some more styles to your images. **
diff --git a/extras/html5.md b/extras/html5.md
index 99f74ac..b999138 100644
--- a/extras/html5.md
+++ b/extras/html5.md
@@ -1,4 +1,4 @@
---
layout: ots
-title: Html5 what is new?
+title: HTML5 what is new?
---
diff --git a/index.md b/index.md
index b6be50e..a7a726f 100644
--- a/index.md
+++ b/index.md
@@ -1,49 +1,48 @@
---
layout: ots
-title: Get started with Html & css
+title: Get started with HTML & CSS
---
# Welcome
-Welcome to Html & Css workshop! This course is a simple and comprehensive
+Welcome to Open Tech School's HTML & CSS workshop! This course is a simple and comprehensive
guide dedicated to helping beginners learn HTML and CSS.
**HTML or HyperText Markup Language** is the main markup language for creating
web pages and other information that can be displayed in a web browser.
-You can write your web application in any programming languages but at the end
-will be always trasformed in Html because that's the languages of the browser.
-Is a hierarchical language.
+You can write your web application in any programming languages, but in the end it will always be transformed into HTML because that's the language of the browser.
+It is a hierarchical language.
-And **Html5**? What's that?
-This is just the last version of the Html. There is lot of interest about it
-because it bring big improvemnt to the Html making it easier to write and to use.
+And **HTML5**? What's that?
+This is just the last version of HTML. There is lot of interest about it,
+because it improves a lot the HTML, making it easier to write and to use.
-**What about css?**
-Css or Cascading Style Sheets is a style sheet language used for describing the
+**What about CSS?**
+CSS or Cascading Style Sheets is a language used for describing the
look and formatting of a document written in a markup language.
-Is closely connected with Html since it will give a style to html elements.
-In opposition of html, css have no hierarchity and can be written with the
-order that we prefer.
-**Css3** as a Html5 is the last released version of Css and it also bring big
-improvement liek possibility to animate an element.
-
-For check all our improvement we will use the console in our browser.
-Open any browser and check under 'Tool'. You shoudl find a 'eveloper tool'
-otion. Clicking it, the console will be opened.
-Here is the place where we will monitoring our code and whenever is correct or not.
-Don't worry we will explain better later, for now is important that you know where
-to find yoru console and how to open it.
+It is closely connected with HTML, since it gives a style to HTML elements.
+In contrast to HTML, CSS has no hierarchy and can be written with the
+order that we choose.
+**CSS3** as a HTML5 is the last released version of CSS, and it also improves CSS a lot
+improvement, for example, the possibility to animate an element.
+
+To check all our code, we will use the console in our browser.
+Open any browser and check under 'Tool'. You should find a 'Developer tool'
+option. Click it, and the console will be opened.
+Here is the place where we will monitor our code and whether it works or not.
+Don't worry! We will explain this better later; for now it is important that you know where
+to find your console and how to open it.
## What we'll do today
-Today we will learn how to write a web page with Html and make the style with css.
+Today we will learn how to write a web page with HTML and style it with CSS.
Our goal is to create a personal portfolio page with a presentation and contact page.
-If you are done with it, we linked for you some interesting link that you can find below
+Once you are done with your personal portfolio, you can explore some interesting links that you can find below
the 'Extra' section.
-There, there are some extra curiosity that once you are done with the material
-will help you to keep going coding with Html and css or just keep you update
+If you're extra curious once you are done with the portfolio, these resources
+will help you to keep coding with HTML and CSS or just keep you updated
about what's next.
## A bit of history
@@ -51,25 +50,25 @@ about what's next.
# The course
-* [The template structure](core/structure.html) - Create html page from white page to a 'Hello World'.
-* [Your first styled Hello World!](core/style.html) - Understanding css. What is class, Id and selector.
-* [Create your personal Portfolio - Part 1.](core/portfolio.html) - Html5 elements, float, box model and font-style.
-* [Create your personal Portfolio - Part 2.](core/portfolio-2.html) - positioning, anchor and form elements.
+* [The template structure](core/structure.HTML) - Using HTML, transform a white page to a 'Hello World'.
+* [Your first styled Hello World!](core/style.HTML) - Understanding CSS. What is class, ID and selector.
+* [Create your personal Portfolio - Part 1.](core/portfolio.HTML) - HTML5 elements, float, box model and font-style.
+* [Create your personal Portfolio - Part 2.](core/portfolio-2.HTML) - Positioning, anchor and form elements.
# Extra fun stuff
-* [Html5, what is new?](extras/html5.html)
-* [Css3 transition and animation](extras/html5.html)
-* [Cross Browsers and usual IE problems](extras/html5.html)
+* [HTML5, what is new?](extras/HTML5.HTML)
+* [CSS3 transition and animation](extras/HTML5.HTML)
+* [Cross-Browser and the usual IE problems](extras/HTML5.HTML)
# Reference material
-* [Html cheat sheet](#)
- - Here you can find all the html elements you need for start you project.
-* [Css cheat sheet](#) - here you can find all the css selector and properties
-for let your creativity goes free.
+* [HTML cheat sheet](#)
+ - Here you can find all the HTML elements you need to start your project.
+* [CSS cheat sheet](#) - Here you can find all the CSS selectors and properties
+to let your creativity go wild.
- * [codeacademy](#) - a good hands-on tutorial for keep you learn.
+ * [codeacademy](#) - A good hands-on tutorial to keep you learning.