From c05083091c4bb350cfc3ee70dfafbb92b3913538 Mon Sep 17 00:00:00 2001 From: Bettina Date: Mon, 9 Sep 2013 13:34:03 +0200 Subject: [PATCH 01/13] proofread and decided to all caps HTML and CSS --- index.md | 75 ++++++++++++++++++++++++++++---------------------------- 1 file changed, 37 insertions(+), 38 deletions(-) diff --git a/index.md b/index.md index b6be50e..5a87835 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?**TMLTML +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. From 11ed699b7fabe86ba18f79f35f64713901c2ee8d Mon Sep 17 00:00:00 2001 From: Bettina Date: Mon, 9 Sep 2013 15:14:01 +0200 Subject: [PATCH 02/13] changed all css to caps and proofread style.md --- README.md | 8 ++--- _config.yml | 34 +++++++++---------- _layouts/default.html | 14 ++++---- _layouts/ots.html | 12 +++---- bootstrap/css/bootstrap.css | 4 +-- bootstrap/css/bootstrap.min.css | 2 +- bootstrap/js/bootstrap.js | 48 +++++++++++++-------------- bootstrap/js/bootstrap.min.js | 2 +- core/README.md | 2 +- core/portfolio-2.md | 6 ++-- core/portfolio.md | 48 +++++++++++++-------------- core/structure.md | 28 ++++++++-------- core/style.md | 58 ++++++++++++++++----------------- extras/html5.md | 2 +- 14 files changed, 133 insertions(+), 135 deletions(-) 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 backgorund 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 sign 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? --- From 9db59eccfa96fbbbd8393a67db2b76702bed7c21 Mon Sep 17 00:00:00 2001 From: Bettina Date: Mon, 9 Sep 2013 15:41:47 +0200 Subject: [PATCH 03/13] proofread structure --- core/structure.md | 121 ++++++++++++++++++++++------------------------ 1 file changed, 58 insertions(+), 63 deletions(-) diff --git a/core/structure.md b/core/structure.md index 5196705..2d10d68 100644 --- a/core/structure.md +++ b/core/structure.md @@ -7,55 +7,53 @@ title: The template structure # Doctype -The first thing on an HTML page is the doctype, which tells the browser which +The first thing on a HTML page is the doctype, which tells the browser which version of the markup language the page is using. -Open a new file in your editor and write this line as first: +Open a new file in your editor and write this line first: The doctype is case-insensitive. -DOCtype, doctype, DocType and DoCtYpe are all valid +DOCtype, doctype, DocType and DoCtYpe are all valid code. # What is a tag? -We already have met the most important HTML elemnt: a tag. -Is a way to give a structure in an HTML document and a way to organize the +We have already met the most important HTML element: a tag. +This gives structure to an HTML document and organizes the content in a hierarchy. -Tags contain characters that indicate the tags purpose. Like

tag is -about paragraph or
  • stay for list. -Tags marks the beginning & end of an element and wrap the content of this element, -that's why is always foundamental open and close our tag as we just saw. +Tags contain characters that indicate the tags' purpose. For example, the

    tags open and close paragraphs and the
  • tags wrap around lists. +Tags mark the beginning & end of an element and wrap the content of this element; +that's why it is always necessary to open and close our tags as we just saw. -

    This is a paragraph

    +

    This is a paragraph.

    -Always double check if you closed all your tags, otherwise the browser can't understand what +Always double-check if you closed all your tags; otherwise, the browser can't understand what the code is about and will not display the content correctly. -There are also some exception, elements that cannot contain anything else like +There are also some tags that are exceptions to this rule. When elements cannot contain anything else, then they don't need to be closed. For example, the following tags do not need to be closed.
    -But they aren't so many and you could easily learn them writing more code :) +There aren't so many of such tags, and you could easily learn them by writing more code :) ## HTML and Head tag -Coming back to our file, after the doctype we need to tell to the browser that -this is a HTML file +Coming back to our file, after the doctype we need to tell the browser that +this is a HTML file with the following tags: -Inside the HTML tag we can write all our HTML elemnts. -We basically have two block: head and body. -Head contains the title of the page & meta information about the page. -Most of the information are not visible to the user, but has many purposes. -For example meta tag are also good to tell search engines about your page, -who created it, and a description. +Inside the HTML tag we can write all our HTML elements. +We basically have two blocks: head and body. +Head contains the title of the page & the meta information about the page. +Most of the meta information are not visible to the user but has many purposes. +For example, meta tags tell search engines information about your page, such as who created it and a description of your page's content. My first Portfolio @@ -63,40 +61,39 @@ who created it, and a description. -Inside our head tag, we first wrote a title of our website. -Give a first check, open your file in any browsers and look what is write -in your browser toolbar. That's also provides a title for the page when it is added to favorites. +Inside our head tag, we first write a title of our website. +Check your website by opening your file in any browser and looking at what is written in your browser toolbar. That also provides a title for the page when it is added to favorites. -At the end we write one of the different type of meta tag, the description. We define -which kind of meta tag is in name="description" and our description in content="". +At the end we write another type of a meta tag, the description. We define +what kind of meta tag it is in the name="description" and our description in the content="". -Last but not least there is a charset='utf-8'. -This one is the most important meta tag and without it your web site will not display -properly. Is always a good practice to include it right after the title tag. -Basically specifies to the browser the character encoding for the HTML document. -That's mean your browser will be able to read and correctly display all the special character as +Last but not least there is a charset='utf-8' meta tag. +This is the most important meta tag. Without it your website will not display +properly. It is always a good practice to include it right after the title tag. +Basically, it specifies to the browser the character encoding for the HTML document. +That means your browser will be able to read and correctly display all the special characters such as €, $, è and so on. -Head tag is also made for include external files or resource as CSS or javascript files. +Head tags can also include external files or resources, such as CSS or JavaScript files. We will see later how to do this. ## Body tag -Finally we are at the place where our content goes. +Finally, we are at the place where our content goes. The body contains the actual content of the page. Everything that is contained in the body is visible to the user. -Just after a head tag but still inside the HTML tag let's add the body. +Just after a head tag but still inside the HTML tag, let's add the body tags. -Now we can see that everything is written inside this tag will be displayed in +Everything that is written inside this tag will be displayed in the browser. -Try to write plain text and check the file in your browser. +Try to write some plain text between the body tags and check the file in your browser. There are differents HTML elements that we can use to give a default style to -our document like the

    that we already met. +our document like the

    tags which we have already met. Let's try to write a title followed by a paragraph. @@ -104,58 +101,56 @@ Let's try to write a title followed by a paragraph.

    I'm a paragraph

    -Titles are straightforward to understand. They starting from h1 with the biggest going -until h6 with the smaller. +Title tags are straightforward to understand. They start from h1 with the biggest font going +to h6 with the smallest font. ****** -Are you wondering why we wrote the h1 and p tags bit inside respect of body tag? +Are you wondering why we wrote the h1 and p tags inside the body tags? -That will not change at all how the browser read or interpretate the document but -is a good practice between developer write code like that in order to have more clear -document and still be able to work with it even after long time or when code lines -are a lot. +That will not change at all how the browser reads or interpretates the document, but it +is a good practice among developers to write code like that in order to have a more clear +document and still be able to work with it even after a long time or when ther are a lot of lines of code. ****** -HTML give us a chance to play little bit with the style without needing a CSS yet. -There are some default style like **< b >** for bold text or **< i >** for italic text. +HTML gives us a chance to play a little bit with the style without needing a CSS yet. +There are some default styles like **< b >** for bold text or **< i >** for italic text. These tags are intended to wrap the text and stay inside the main HTML elements which -they will stylize. +they style. -

    I'm a bold text

    +

    I'm a bold text.

    -**You can check on your HTML cheat sheet and try to play around with differents HTML -elements and default style.** +**You can check your HTML cheat sheet and play around with differents HTML +elements and default styles.** -Before move to make your file look nicer, we should introduce another relevant tag, +Before we move on to make your document look nicer, we should introduce another relevant tag, the image tag. - tag place an image in an HTML page. -The image tag not need to be closed because doesn't contain anything. Infact the image + tag places an image on a HTML page. +The image tag does not need to be closed, because it doesn't contain anything. In fact, the image carried by this tag will be linked thanks to one of the attributes. -Attributes is a modifier of an HTML element. It work like that: +Attributes are modifiers of a HTML element. It works like this: -Image tag has several attributes the most important is src, the one that will link the +Image tags have several attributes. The most important attribute is src, which links to the the image file. -The src attributes specifies the URL of an image. +The src attribute specifies the URL of an image. -There are at least other three important attributes: alt, width and height. -**Alt** specifies an alternate text for an image. Is important in particular if for some -reason the user can't see the image, and still can know what is about the missing image. -**Width** and **height** as you can image, will set the size of the image. +There are at least three other important attributes: alt, width and height. +**Alt** specifies an alternate text for an image. It is important especially if the user can't see the image, so that the user can still know what the missing image is about. +**Width** and **height,** as you can imagine, set the size of the image. Let's update our image tag. - little cat + little cat -Look in your browser and.. the image is there! +Look in your browser and... the image is there! -**Add another one or two image and play a little bit with them** +**Add another one or two images and play a little bit with them.** From 7035f4a2bf524d44677b6746a58a96106faea7fb Mon Sep 17 00:00:00 2001 From: Bettina Date: Mon, 9 Sep 2013 15:42:30 +0200 Subject: [PATCH 04/13] proofread readme --- core/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/README.md b/core/README.md index 8161ea8..5c13d6d 100644 --- a/core/README.md +++ b/core/README.md @@ -4,4 +4,4 @@ title: Core Content --- This directory is for core course content. -From basic HTML structure, through CSS selector and property until create a personal portfolio +From basic HTML structure, through CSS selector and property until learners create a personal portfolio. From 972cfbf24dd0bf6aab863b00e02831867500e4d1 Mon Sep 17 00:00:00 2001 From: Bettina Date: Mon, 9 Sep 2013 15:55:34 +0200 Subject: [PATCH 05/13] proofread up to line 61 --- core/portfolio.md | 63 +++++++++++++++++++++++------------------------ 1 file changed, 31 insertions(+), 32 deletions(-) diff --git a/core/portfolio.md b/core/portfolio.md index 63a4de8..1a824f8 100644 --- a/core/portfolio.md +++ b/core/portfolio.md @@ -1,61 +1,60 @@ --- layout: ots -title: Create your personal Portfolio +title: Create your Personal Portfolio --- -# HTML5 structure and CSS starter +# HTML5 structure and starter CSS ## Main Content -We will start building the main page, our personal presentation since is the one that will give the -main structure to the whole web site design. +We will start by building the main page of our personal presentation, since this will give the +main structure to the whole website design. **GOAL** -We are going to design a page with the main menu, the content and footer. -We fill in the content with an image next to some text. -We are going to do all of this with the HTML5 elements so keep open your HTML cheatsheet. +We are going to design a page with a main menu, content, and a footer. +We fill in the content with an image along with some text. +We are going to do all of this with HTML5 elements so keep your HTML cheatsheet open. -Taken file like the one we just wrote but without any content. (Head with meta-tag, title and -style.CSS linked and body but comletely empty.) +Take a file just like the one we just wrote but without any content. (Head with meta tags, title and +style.CSS linked but a completely empty body.) -Let's start wrapping all our page in a div for give a centered design to our page. - *"Div tag defines a section in an HTML file and is used to group element to format - them with CSS, to layout a web page."* +Let's start by wrapping our page in a div to give a centered design to our page. + *"A div tag defines a section in a HTML file and is used to group elements to format + them with CSS in order to lay out a web page."* -Div is a general tag and can be used in many different situation just to wrap up others HTML -elements and style them. For this reason we need to give to it a name, otherwise we can't style each one -in different way. -There are two way to give a name to a div tag. With a id or with a class. -Think about at id as a pesonal and UNIC name as your surname/name and about the class is like personal -characteristics as color of your hares or your age. -Id, the unique one, is used just when need to write specific style valid only for this element. -Class are more common and used for group different HTML elements and give them the same style and characteristics. +Div is a general tag and can be used in many different situations just to wrap together a group of HTML +elements and style them. For this reason we need to give it a name; otherwise, we can't style each one +in a different way. +There are two ways to give a name to a div tag: with an id or with a class. +Think about an id as a personal and unique name like your surname/name and think about the class as personal +characteristics, such as the color of your hair or your age. +Id, the unique one, is used when you need to write a specific style valid only for this element. +Classes are more common and used to give different HTML elements the same style and characteristics. -We can now start to write our main page content: +We can now write our main page content:
    -Since we have just one main content we can use id selector. +Since we have just one main content, we can use the selector id. -In style.CSS we make this div always centered in the middle. -In CSS for call the class we need to write "." and the class name just after it. -For the Id is the same but with " # " instead if "." +In style.css we make this div always centered in the middle. +To call the class in CSS, we need to write "." and the class name just after it. +For the Id it is the same but with " # " instead of "." .wrap-centered { width: 100%; margin: 0 auto; } -Defined the width of an element and than give to it "margin: 0 auto" is a common rules for make -the element centered. -We use 100% instead of 100px for the easily fact that we wont our page responsive or in other worlds we want -that the page resize when the browser windows change dimensions. -Now everything will stay inside this div will be centered. +Here we define the width of an element and then give it a "margin: 0 auto," which is a common rule to center +the element. +We use 100% instead of 100px because we want our page to be responsive or, in other words, we want the page to resize when the browser windows change dimensions. +Now everything inside this div will be centered. -In the CSS style, at the beginning of the file let's write also somehting like that: +At the beginning of the style.css file, let's write something like this: * { padding: 0; margin: 0; border: 0; } @@ -64,7 +63,7 @@ That's set all the elements "\*", with default padding, margin and border equal ======= That's set all the elements " * ", with default padding, margin and border equal to 0px. >>>>>>> Stashed changes -This is really important to do because everybrowser set a default size for some tags and without +This is really important to do because every browser sets a default size for some tags and without set all of them again to 0px will be impossible to calculate the position of HTML elements and to positioning them in the space, since every browser will interpeter that in a different way. From 94420c7c9a5b2c8a4c55ba76b21334e749be4d06 Mon Sep 17 00:00:00 2001 From: Bettina Date: Thu, 12 Sep 2013 16:22:30 +0200 Subject: [PATCH 06/13] proofread up to line 207 --- core/portfolio.md | 86 +++++++++++++++++++++++++---------------------- 1 file changed, 45 insertions(+), 41 deletions(-) diff --git a/core/portfolio.md b/core/portfolio.md index 1a824f8..f2f70d6 100644 --- a/core/portfolio.md +++ b/core/portfolio.md @@ -59,16 +59,16 @@ At the beginning of the style.css file, let's write something like this: * { padding: 0; margin: 0; border: 0; } <<<<<<< Updated upstream -That's set all the elements "\*", with default padding, margin and border equal to 0px. +That is to set all the elements "\*" with default padding, margin and border to 0px. ======= -That's set all the elements " * ", with default padding, margin and border equal to 0px. +That is to set all the elements " * " with default padding, margin and border to 0px. >>>>>>> Stashed changes This is really important to do because every browser sets a default size for some tags and without -set all of them again to 0px will be impossible to calculate the position of HTML elements and to -positioning them in the space, since every browser will interpeter that in a different way. +setting all of them again to 0px, it will be impossible to calculate the position of HTML elements and to +position them on the page, since every browser will interpret that in a different way. -## Menu -Time to write our menu. +## Navigation Menu +Time to write our navigation menu. Inside of the div we are going to write our first HTML5 element. -Here we have 3 new elements. First the nav tag. That's tag mean navigation and wrap up all the elements +Here we have 3 new elements. First, the nav tag. That tag means navigation and wraps up all the elements that are essential for the navigation in the website. -Ul is a type of list, unordered. In th list, has the world suggest, we keep elements that usually stay in -a list and each element are wrap up in a li tag. +Ul is a type of list--unordered. In an unordered list, as the word suggests, we have elements that usually stay in +a list and each element is wrapped in a li tag. -In style.CSS: +In style.css: nav { width: 100%; @@ -102,25 +102,28 @@ In style.CSS: color: ##08c; } -Nav ul is a way to specify that i'm talking about not all the ul in the page but just the one that is nav's child. -Most of the property we write here you already know or you can eaily check on the cheatsheet. -We want to talk about one of them, really particular and with big power: float: right. +Nav ul is a way to specify not all the ul elements on the page but just the one that is nav's child. +Most of the properties we write here you already know or you can eaily check on the cheatsheet. + +Now we want to talk about one of them in particular, because it's very powerful: float: right. -That's tell to the selector selected to get out from the normal flow of the HTML element (usually HTML element are block element, that's mean that they are displayed one after the other vertically in the page as a block.) and move to the most -right side of the div where is wrap up. +This tells the selected selector to get out from the normal flow of the HTML element (usually HTML elements are block elements, which means that they are displayed one after the other vertically in the page as a block) and move to the +right-most side of the div in which it is wrapped. If you check in your browser, the nav ul is displayed on the right. -Float can be set on the right or on the left. Always be carefull with that because this will change the flow of all the HTML -elements, not just the one that you are going to modify. +Float can be set on the right or on the left. Always be careful with that because this will change the flow of all the HTML +elements, not just the one that you are modifying. -We just said that usually the HTML element are like a block displayed in a vertical flow. And we can change this flow -thanks to float property. Another propery that allow us to change the flow is display: inline. -Actually thsi property don't change the flow, rather make an element inline (so will stay on one line instead folling down) -instead as a block. -Check your menu navigation. +We just said that usually HTML elements are like a block displayed in a vertical flow. We can change this flow +thanks to the float property. -Last thing we need to do before move on is to clear everything in order to restore the normal flow, since we -change it setting float to right. +Another propery that allows us to change the flow is display: inline. +Actually, this property doesn't change the flow, rather it displays an element inline (so that it will stay on one line instead dropping down) +instead of displaying within a block. +Check your navigation menu. + +Last thing we need to do before moving on is to clear everything in order to restore the normal flow, since we +changed the setting float to right.
    @@ -130,23 +133,24 @@ And in the CSS file: clear: both; } -Here we create a new div with class clear and call this one in CSS giving clear both. That will clear both value, right +Here we create a new div with class clear and call this one in our CSS file, giving clear both. That will clear both values, right and left. Other two possible values are "right" or "left". -When you mess up with floatting element, before starting a new design section is always a good practice put "clear:both" +When you mess with floating element, before starting a new design section it is always a good practice to put "clear:both" to be sure your flow is still the default one. ## The footer -Footer is called, as the name say, that part of the page that stay at the end of the page and give some general and +The footer is, as the name says, that part of the page that stays at the end of the page and gives some general and maybe secondary information, like in a book. -The interested tag is: +The tag for that is:

    -Inside the p tag you can write what you prefer. Maybe who made this website or your email. -In CSS file: +Inside the p tag you can write what you want, maybe who made this website or your email. + +In the CSS file, write: footer { margin-top: 50px; @@ -156,20 +160,20 @@ In CSS file: text-align: center; } -We don't really need to style the footer but is nice to give to it a space to breath with a margin-top: 50px. -Than we just set the alignament of the text in the p tag as center. -That's all what we need for the footer. +We don't really need to style the footer but it is nice to give it some space to breathe with a margin-top: 50px. +Then we just set the alignament of the text in the p tag as center. +That's all we need for the footer. ## Box Model and fonts -Finally we start to build our content. First of all some structure. We said we are going to design two coloum -design, one coloum is a kind of sidebar and this tag is called aside and the other one, the most important one, +Finally we start to build our content. First of all some structure. We are going to have a two-column +design: one column is a kind of sidebar and this tag is called aside and the other one, the most important one, is a section wrapping up several articles. -In order to have more control on this two-coloum design, contain all of it in a div.content and give to it some +In order to have more control of this two-column design, wrap all of it in a div.content and give it some basic CSS, as we already did it for the wrap div. -tips: When you are not sure if your CSS is working in the properly way and you want to check exactly the size, -margins or else of your element, give to it a casual background-color, so it display the element is all it's size. +Tips: When you are not sure if your CSS is working in the proper way and you want to check exactly the size, +margins or something else of your element, give it a casual background color, so that it displays the entire element.