diff --git a/.gitignore b/.gitignore index 4c88d78..2aa80b8 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,3 @@ *.swp _site/ -*~ \ No newline at end of file +*~ diff --git a/README.md b/README.md index c0349f3..422f1de 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,14 @@ --- layout: ots -title: README +title: README --- This is a friendly how-to for contributors to the HTML and CSS workshop -at OpenTechSchool. +at OpenTechSchool. About the course: -An HTML and CSS basic workshop for beginners that never write HTML/CSS before and -wnat to know how to start. +An HTML and CSS basic workshop for beginners that never write HTML/CSS before and +want to know how to start. # Class format @@ -23,10 +23,10 @@ additional topics which are entirely optional. A class schedule looks like this: - 1100 - Students still arriving, writing name tags, setting up laptops. - 1230 - Introductions, wifi instructions and location of coursework. - 1235 - Students learn stuff. - 1800 - Thankyous, maybe demonstrations. + 11:00 - Students still arriving, writing name tags, setting up laptops. + 12:30 - Introductions, wifi instructions and location of coursework. + 12:35 - Students learn stuff. + 18:00 - Thankyous, maybe demonstrations. # Author Guide @@ -104,7 +104,7 @@ Bit of command line: $ holla holla get dolla - $ + $ For a more complete list of languages see [highlight.js](http://softwaremaniacs.org/media/soft/highlight/test.HTML) diff --git a/_layouts/default.html b/_layouts/default.html index a6a0da6..21adc31 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -33,6 +33,6 @@

{{ page.title }}

- + diff --git a/core/README.md b/core/README.md index cae87bf..22cda9c 100644 --- a/core/README.md +++ b/core/README.md @@ -1,7 +1,7 @@ --- layout: ots -title: Core Content +title: Core Content --- -This directory is for core course content. +This directory is for core course content. From basic HTML structure through different CSS selectors and properties so that learners create a personal portfolio. diff --git a/core/portfolio-2.md b/core/portfolio-2.md index 92c5276..b6e568e 100644 --- a/core/portfolio-2.md +++ b/core/portfolio-2.md @@ -13,17 +13,17 @@ Let's start from the home page. **Goal** -The home page is made by: +The home page is made by: - navigation menu - big centered and resizable image - two sentence intro text (on the top of the image) -So let's open a new file and set the basic structure. +So let's open a new file and set the basic structure. To make the nav menu we can just copy what we have done in the first part. Then, take an image that you like. It should be big enough and with good resolution. Just after the nav tag, include your image and give it a class name. -Now you need to set the width of just this image as full-width, which is 100%. +Now you need to set the width of just this image as full-width, which is 100%. .home-imag { width: 100% @@ -37,7 +37,7 @@ You can change it setting the height: 100%. But now you need to be sure that you height: 100% } -After the image, write another header tag within h1 and h2, add a class name to your header so you can style it +After the image, write another header tag within h1 and h2, add a class name to your header so you can style it and not be confused with the other one. (I will use header-home as the class name) In the CSS we are goint to write this: @@ -45,13 +45,13 @@ In the CSS we are goint to write this: position: relative; top: -300px; } -Here we are changing the position of this element by bringing it outside of the normal flow. Its position is +Here we are changing the position of this element by bringing it outside of the normal flow. Its position is now relative to its parent element (in our case the div#wrap-centered). Now you can move your element where you prefer in the page using the properties top, right, bottom and left. So, what is positioning? -When a box is taken out of the normal flow, all the content that is still within normal flow will ignore it -completely and not make space for it. Elements can be positioned using the top, bottom, left, and right +When a box is taken out of the normal flow, all the content that is still within normal flow will ignore it +completely and not make space for it. Elements can be positioned using the top, bottom, left, and right properties. These properties will not work, however, unless the position property is set first. They also work differently depending on the positioning method. @@ -62,24 +62,24 @@ A statically positioned box is one that is in normal flow, from top to bottom. **Fixed Positioning** An element with fixed position is positioned relative to the browser window. -What makes it possible is: position: fixed. +What makes it possible is: position: fixed. After setting this, you can play with changing the position, adding a different pixel value to top, bottom, left or right positioning. **Relative Positioning** A relatively positioned element is positioned relative to its normal position. Elements that come after a relatively-positioned element behave as if the relatively-positioned element was still in its ‘normal flow’ position - leaving a gap for it. -What makes it possible is: position: relative. +What makes it possible is: position: relative. After setting this, you can play with changing the position, adding a different pixel value to top, bottom, left or right positioning. **Absolute Positioning** An absolutely positioned box is moved out of the normal flow entirely. -What makes it possible is: position: absolute. +What makes it possible is: position: absolute. After setting this, you can play with changing the position, adding a different pixel value to top, bottom, left or right positioning. **Overlapping Elements: z-index property** When elements are positioned outside of the normal flow, they can overlap other elements. The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others). -What make it possible is: z-index: n°pixel. +What make it possible is: z-index: n°pixel. Knowing all that, create your own home page! diff --git a/core/portfolio.md b/core/portfolio.md index e4a07b9..9c1b356 100644 --- a/core/portfolio.md +++ b/core/portfolio.md @@ -8,7 +8,7 @@ title: Create your Personal Portfolio # HTML5 structure and starter CSS ## Main Content -We will start by building the main page of our personal presentation, since this will give the +We will start by building the main page of our personal presentation, since this will give the main structure to the whole website design. @@ -17,20 +17,20 @@ 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. -Take a file just like the one we just wrote but without any content. (Head with meta tags, title and +Take a file just like the one we just wrote but without any content. (Head with meta tags, title and `styles.css` linked but a completely empty body.) 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 + *"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 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 +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. +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 write our main page content: @@ -40,8 +40,8 @@ We can now write our main page content: Since we have just one main content, we can use the ID selector. -In styles.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. +In styles.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 { @@ -62,10 +62,10 @@ At the beginning of the `styles.css` file, let's write something like this: border: 0; } -That is to set all the elements `*` with default padding, margin and border to 0px. -This is really important to do because every browser sets a default size for some tags and without +That is to set all the elements `*` with default padding, margin and border to 0px. +This is really important to do because every browser sets a default size for some tags and without 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. +position them on the page, since every browser will interpret that in a different way. ## Navigation Menu Time to write our navigation menu. @@ -80,7 +80,7 @@ Inside of the div we are going to write our first HTML5 element. 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 an unordered list, as the word suggests, we have elements that usually stay in +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 styles.css: @@ -103,26 +103,26 @@ In styles.css: } 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. +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. 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. +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 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 HTML elements are like a block displayed in a vertical flow. We can change this flow -thanks to the float property. +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. -Another property 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) +Another property 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 +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.
@@ -134,13 +134,13 @@ And in the CSS file: } 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`. +and left. Other two possible values are `right` or `left`. 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 -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 +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 tag for that is: @@ -160,7 +160,7 @@ In the CSS file, write: text-align: center; } -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. +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. @@ -223,7 +223,7 @@ In the aside let's place an image, our personal profile image. } When you don't know the size of your image, you can place it and then open your console and check from there, -try out different width sizes and see what the best width is. +try out different width sizes and see what the best width is. Of course, the best way to do this work is to crop your image before, knowing the size, with some graphic editing rograms like Photoshop or GIMP but for now that is enough. @@ -236,10 +236,10 @@ Time to write your personal presentation!

Second title

Hello hello hello

- + -Here we put inside the section an article tag. Each article tag is composed of a header tag, a tag that is +Here we put inside the section an article tag. Each article tag is composed of a header tag, a tag that is made for wrapping up all the h tags. So we place inside of it an h1 and h2 tag. Followed by a p tag where finally all of our content is written. Write at least some text inside of your article, because we will need it later on. @@ -247,9 +247,9 @@ Before we make our article better looking, we need to know some basics about the What is a box model, and why is it so importan? Every element in web design is a rectangular box. (Yes, both block and inline elements. You can set paddings, -margins and borders on both of them.) +margins and borders on both of them.) In CSS, the term "box model" is used when talking about design and layout. -The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, +The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. The box model allows us to place a border around elements and margins and padding around this element too. How is the size of the box calculated exactly? Here is a diagram: @@ -272,14 +272,14 @@ The size of the box itself is calculated like this: Tips: Remember to set all of these elemnents to `0px` when you start your .CSS files as we did at the very beginning. -So, now that we know how to calculate the box around our elements, let's play with the boxes around the article, +So, now that we know how to calculate the box around our elements, let's play with the boxes around the article, header and h tags. **Text style** The text in the document is still pretty boring, so let's style it. What we already know so far is how to change a color and how to make the text align to the center. -As you probably already have understood, the other values of text-align are left, right and justified; +As you probably already have understood, the other values of text-align are left, right and justified; by default the value is left. When text-align is set to `justify`, each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers). An important decision to make is which font we are going to use for the project. @@ -287,17 +287,17 @@ You can specify the type of font with the font-family property. There are two types of font family names: generic family: a group of font families with a similar look (like `Serif` or `Monospace`) -font family: a specific font family (like `Times New Roman` or `Arial`) -To specify your font you have two ways. +font family: a specific font family (like `Times New Roman` or `Arial`) +To specify your font you have two ways. One way is to use a common family-font (one with a high probablity that all users have on their machines) called a "web-safe" font. Or use a font-face rule. That's a new property that allows a designer to include font-family on -your server and refer to it. +your server and refer to it. This second way was a small revolution, since it gave the designer the freedom to choose the font they prefer and now we have a huge choice. -For now we are going to use the "web-safe" font since that is easier and faster. +For now we are going to use the "web-safe" font since that is easier and faster. Tips: If you try to use a particular font that you download onto your computer, and it display correctly--be careful -because on other people's computers, it probably won't. The correct display doesn't come from the browser but from +because on other people's computers, it probably won't. The correct display doesn't come from the browser but from what's on your machine. h1, h2 { @@ -309,15 +309,15 @@ what's on your machine. font-size: 0.9em; } -And here we can already see the other really important property: font-size. As you already understood that sets +And here we can already see the other really important property: font-size. As you already understood that sets the size of the font of your selector. Browsers have a font-size set by default but it is important for a good look to change these defaults. You should not use font size adjustments, however, to make paragraphs look like headings or headings to look like paragraphs. The font-size can be set using px, em or %. -Your screen resolution specifies how many pixels your screen/display is made of. So when you specify: font-size: +Your screen resolution specifies how many pixels your screen/display is made of. So when you specify: font-size: 12px;, you're basically telling the browser that each letter should be 12 pixels high. That is therefore connected with your screen size. -Font-size: 50%; sets the font size of your element to 50% of the font size of its parent element and em is the -width of the letter 'm' in the selected typeface. It's basically the same as percentage, except that 1em is 100% +Font-size: 50%; sets the font size of your element to 50% of the font size of its parent element and em is the +width of the letter 'm' in the selected typeface. It's basically the same as percentage, except that 1em is 100% and 1.5em is 150%. To calculate the size from pixels to em, use this formula: pixels/16=em. For example: @@ -326,12 +326,12 @@ For example: font-size:2.5em; /* 40px/16=2.5em */ } -It's hard to tell you what you have to do with the sizes, because it is hard to tell what you want to achieve +It's hard to tell you what you have to do with the sizes, because it is hard to tell what you want to achieve in each of your layouts. Layouts are about creativity, and you can't just have one approach for all of them. -For now we can say that it is better to use em for a font in these days since the user has so many different +For now we can say that it is better to use em for a font in these days since the user has so many different devices and screen sizes that this is the easiest way to make the font-size automatically resizeable. -A good solution can also be setting a font-size: 100% in the body element and then use em for each different +A good solution can also be setting a font-size: 100% in the body element and then use em for each different selector so you start in every browser with the same size. Ok, now it is time for you to play, modify and create your font style. diff --git a/core/structure.md b/core/structure.md index cdf45e5..4ab6c87 100644 --- a/core/structure.md +++ b/core/structure.md @@ -7,15 +7,15 @@ title: The template structure ### Preamble: How to write a HTML document -This is actually pretty simple: HTML is written in just a plain text document. -Even Microsoft Notepad can write one just fine, although you might wish to use -a code editor like Sublime Text, Gedit, or Textmate instead. +This is actually pretty simple: HTML is written in just a plain text document. +Even Microsoft Notepad can write one just fine, although you might wish to use +a code editor like Sublime Text, Gedit, or Textmate instead. A HTML file always uses the extension **.html** to indicate its filetype. ## Doctype -The first thing on a HTML page is the **doctype**, which as you might guess, +The first thing on a HTML page is the **doctype**, which as you might guess, tells the browser what type of document it's looking at, and how to read it. Thankfully, HTML5's doctype is extremely simple - it's just `html`. @@ -30,36 +30,36 @@ You're now officially editing a html document! These are the basic building blocks of HTML. -**Elements** *are* what makes up a HTML document. Because you can have zero, -one or more elements inside another, this is what makes HTML *heirarchical*. +**Elements** *are* what makes up a HTML document. Because you can have zero, +one or more elements inside another, this is what makes HTML *heirarchical*. An element can include three things: a tag, attributes, and content. -A **Tag** is the thing that indicates an element's purpose. For example, -the `

` tag indicates a paragraph of text is in that element, and the `

  • ` -represents a 'list item'. You'll notice they're always surrounded by angle -backets. *Opening* and *Closing* tags mark the beginning and end of an +A **Tag** is the thing that indicates an element's purpose. For example, +the `

    ` tag indicates a paragraph of text is in that element, and the `

  • ` +represents a 'list item'. You'll notice they're always surrounded by angle +backets. *Opening* and *Closing* tags mark the beginning and end of an element and wrap its content, like so:

    This is a paragraph.

    -You can see the closing tag includes a `/` before its name; otherwise it would +You can see the closing tag includes a `/` before its name; otherwise it would be another opening tag! -**Always** double-check that you've closed all your elements; otherwise, a +**Always** double-check that you've closed all your elements; otherwise, a browser can and will get mixed up trying to understand your HTML document. -There are some specific elements that are exceptions to this rule. -When elements cannot contain anything else, then they don't need to be closed. +There are some specific elements that are exceptions to this rule. +When elements cannot contain anything else, then they don't need to be closed. For example, the following elements are referred to as 'self-closing':
    -There aren't so many of such elements, and you should easily pick up which are +There aren't so many of such elements, and you should easily pick up which are which by writing some more code :) -Lastly, *nesting* elements isn't so hard, and is fundamental to how HTML works. +Lastly, *nesting* elements isn't so hard, and is fundamental to how HTML works. It looks just like this:

    This is a sentence, with a span element inside it.

    @@ -70,84 +70,84 @@ or this:

    The h1 tags indicates the primary header of the document

    -You'll notice that HTML doesn't actually care about the whitespace or -newlines *between* tags. It would end up looking the same if the above had +You'll notice that HTML doesn't actually care about the whitespace or +newlines *between* tags. It would end up looking the same if the above had been fit onto one line. -In the above example, you can see our first case of an **attribute**. It -starts with a lowercase name, and then is almost always followed by an -`=` and a 'value' that's surrounded in double quotes, `"like this"`. An element -can have many attributes, in which case you separate them by spaces, as you'll +In the above example, you can see our first case of an **attribute**. It +starts with a lowercase name, and then is almost always followed by an +`=` and a 'value' that's surrounded in double quotes, `"like this"`. An element +can have many attributes, in which case you separate them by spaces, as you'll see soon. Attributes give information about an element in particular. In this case, the `
    ` tag (which is used to *divide* groups of elements up) -has an `id` attribute assigned to `page-title`. That's telling us that this -section of the document is designed to hold the page's main title. You will +has an `id` attribute assigned to `page-title`. That's telling us that this +section of the document is designed to hold the page's main title. You will learn more about specific attributes later! ## Html and Head Elements -Coming back to our file (hope you're coding along!), after the doctype we +Coming back to our file (hope you're coding along!), after the doctype we begin our document with a root `html` element, just like so: -It encompasses every other element in our HTML document, nothing should go -outside it! Next, the document is broken up into two important parts: +It encompasses every other element in our HTML document, nothing should go +outside it! Next, the document is broken up into two important parts: The **head** and **body**. -The head contains the title of the page & information **about** the page -(*meta* information). Most meta information isn't visible to the user, -but it has many purposes. For example, meta elements can tell search engines -information about your page, such as who created it and a description of +The head contains the title of the page & information **about** the page +(*meta* information). Most meta information isn't visible to the user, +but it has many purposes. For example, meta elements can tell search engines +information about your page, such as who created it and a description of your page's content. Here's an example `head` element: - + My first Portfolio -You can see meta tags are one of the self-closing elements! -First off, there is a charset meta tag. -This is the most important meta tag. Without it your website might not display -properly. It is best practice to include it as the first element inside the -head element. 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. `uft-8` +You can see meta tags are one of the self-closing elements! +First off, there is a charset meta tag. +This is the most important meta tag. Without it your website might not display +properly. It is best practice to include it as the first element inside the +head element. 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. `uft-8` is usually the best general encoding to use. -Here we've also written another type of a meta tag, the description. -We define what kind of meta tag it is with the `name` attribute and put our +Here we've also written another type of a meta tag, the description. +We define what kind of meta tag it is with the `name` attribute and put our description in the *value* of the content attribute. -Inside our head element, we have lastly written a title of our website. Chuck -the above code in your file (inside your `html` element), and change the -content of the ``. Then you can check your document by opening your -file in a browser and looking at what is written in your browser toolbar. +Inside our head element, we have lastly written a title of our website. Chuck +the above code in your file (inside your `html` element), and change the +content of the `<title>`. Then you can check your document by opening your +file in a 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. -Head tags can also include external files or resources, such as CSS or +Head tags can also include external files or resources, such as CSS or JavaScript files. We will see later how to do this. ## The Body -Finally, we are at the place where our content goes. -The body contains the actual content of the page. Everything that is +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 the closing head tag but still inside the html element, +Just after the closing head tag but still inside the html element, let's add the body tags. <body> </body> Everything that is written inside this tag will be displayed to the user. -Try to write some plain text between the body tags and check the file +Try to write some plain text between the body tags and check the file in your browser. -There are different HTML elements that we can use to indicate different types +There are different HTML elements that we can use to indicate different types of content in our document, like the <p></p> tags which we have already met. Let's try writing a title, followed by a paragraph. @@ -156,18 +156,18 @@ Let's try writing a title, followed by a paragraph. <p>And I'm a paragraph!</p> </body> -Heading elements are straightforward to understand. They start from h1 with the +Heading elements are straightforward to understand. They start from h1 with the biggest font and importance, going to h6 with the smallest font. ****** -Are you wondering why we wrote the h1 and p tags *indented* inside +Are you wondering why we wrote the h1 and p tags *indented* inside the body tags? -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 there is a lot of lines of code. It also shows +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 there is a lot of lines of code. It also shows the heircharcical nature of HTML pretty well. ****** @@ -177,7 +177,7 @@ So far, our entire document might look like this: <!DOCTYPE html> <html> <head> - <meta charset="UTF-8"> + <meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <title>My first Portfolio @@ -190,26 +190,26 @@ So far, our entire document might look like this: -Hopefully the document in your file looks similar, but not exactly the same. +Hopefully the document in your file looks similar, but not exactly the same. You might have changed some of the text... does it all work in your browser? There are two questions you might be asking, which we intend to answer: -1. Right now I can basically write paragraphs and headers. What are some other +1. Right now I can basically write paragraphs and headers. What are some other HTML elements and how can I use them? How would I get a picture? -2. Ok, so I have some content, but this looks utterly bland. How do I spice it +2. Ok, so I have some content, but this looks utterly bland. How do I spice it up a little? Read on to find out! ****** -lastly, you might also wonder why you're writing all these elements by hand, +lastly, you might also wonder why you're writing all these elements by hand, when you could make up the same stuff in a Word document. -Well, think about some of the cooler websites around that you've seen on the -web, and their complex layouts. Do you think you could replicate them -using Word? How long might it take? That's the power of manual control that -HTML (and CSS, and Javascript) gives to the web and web developers. You can +Well, think about some of the cooler websites around that you've seen on the +web, and their complex layouts. Do you think you could replicate them +using Word? How long might it take? That's the power of manual control that +HTML (and CSS, and Javascript) gives to the web and web developers. You can learn it too! diff --git a/core/style.md b/core/style.md index 4a30f3c..0b2752e 100644 --- a/core/style.md +++ b/core/style.md @@ -22,17 +22,17 @@ to refer to because the browser has no need to load another file. 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. +Then, you can link that to a HTML document using the following syntax. Write it just after the meta tag. -This is the best way if you have a lot of CSS to write and you want to +This is the best way if you have a lot of CSS to write and you want to keep it organized. 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 +You should see the path of your CSS file and under the STATUS column see a *200 OK* response. That means your file is read from your browser and linked to your HTML document in the right way. @@ -52,7 +52,7 @@ Let's take the h1 title we wrote in our HTML file and give it a nice red color. } 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 +*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: @@ -72,7 +72,7 @@ To give a background color to our paragraph, write ****** -Web colors are colors used in designing web pages. +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 can be picked from a graphics software or from some nice web tool, such as, [Color picker](http://www.colorpicker.com/), for example. diff --git a/index.md b/index.md index 19ffcc2..1928e9f 100644 --- a/index.md +++ b/index.md @@ -7,59 +7,59 @@ title: Get started with HTML & CSS # Welcome -Welcome to Open Tech School's HTML & CSS workshop! This course is a simple +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 in the -end it will always be transformed into HTML because that's the language of +**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 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 latest version of HTML. There is a lot of interest -about it, because it improves and adds many HTML elements, making it +And **HTML5**? What's that? +This is just the latest version of HTML. There is a lot of interest +about it, because it improves and adds many HTML elements, making it easier to write and to use. -**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. -It is closely connected with HTML, since it gives style to HTML elements. -In contrast to HTML, CSS has no hierarchy and can be written in the order +**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. +It is closely connected with HTML, since it gives style to HTML elements. +In contrast to HTML, CSS has no hierarchy and can be written in the order that we choose. -**CSS3** is the last released version of CSS, and it also -improves CSS a lot. For example, it gives the possibility to animate +**CSS3** is the last released version of CSS, and it also +improves CSS a lot. For example, it gives 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 'Tools'. You should find a 'Developer tools' -or similar option. Click it, and the toolbox will be opened. -Here is the place where we can monitor our code and see whether it works -or not. Don't worry! We will explain this better later; for now it is +To check all our code, we will use the console in our browser. +Open any browser and check under 'Tools'. You should find a 'Developer tools' +or similar option. Click it, and the toolbox will be opened. +Here is the place where we can monitor our code and see 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 style it with CSS. -Our goal is to create a personal portfolio page with a +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. -Once you are done with your personal portfolio, you can explore some -interesting links that you can find below the 'Extra' section. -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 +Once you are done with your personal portfolio, you can explore some +interesting links that you can find below the 'Extra' section. +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. ## The course -* [The template structure](core/structure.html) - +* [The template structure](core/structure.html) - Using HTML, transform a white page to a 'Hello World'. -* [Your first styled Hello World!](core/style.html) - +* [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) - +* [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) - +* [Create your personal Portfolio - Part 2.](core/portfolio-2.html) - Positioning, anchor and form elements. ## Extra fun stuff @@ -74,19 +74,19 @@ about what's next. ## Reference material -The Mozilla Developer Network (MDN), by the guys who make Firefox, +The Mozilla Developer Network (MDN), by the guys who make Firefox, host some great resources: - * [HTML Portal](https://developer.mozilla.org/en-US/docs/Web/HTML) - + * [HTML Portal](https://developer.mozilla.org/en-US/docs/Web/HTML) - Guides, intros, tutorials, references, elements, attributes... - * [HTML Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) - + * [HTML Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) - Every HTML element listed, find out about them all, and make use of them! - * [CSS Portal](https://developer.mozilla.org/en-US/docs/Web/CSS) - + * [CSS Portal](https://developer.mozilla.org/en-US/docs/Web/CSS) - Tutorials for writing effective CSS, demos of CSS3, and much more. - * [CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) - + * [CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) - More CSS properties and classes than you can shake a stick at. Learning resources: - * [CodeAcademy](http://www.codecademy.com/tracks/web) - + * [CodeAcademy](http://www.codecademy.com/tracks/web) - A good hands-on tutorial to keep you learning. diff --git a/locales/DE/core/README.md b/locales/DE/core/README.md new file mode 100644 index 0000000..e69de29 diff --git a/locales/DE/core/portfolio.md b/locales/DE/core/portfolio.md new file mode 100644 index 0000000..e69de29 diff --git a/locales/DE/core/portolio-2.md b/locales/DE/core/portolio-2.md new file mode 100644 index 0000000..e69de29 diff --git a/locales/DE/core/structure.md b/locales/DE/core/structure.md new file mode 100644 index 0000000..e69de29 diff --git a/locales/DE/core/style.md b/locales/DE/core/style.md new file mode 100644 index 0000000..e69de29 diff --git a/locales/DE/extras/CSS3.md b/locales/DE/extras/CSS3.md new file mode 100644 index 0000000..e69de29 diff --git a/locales/DE/extras/HTML5.md b/locales/DE/extras/HTML5.md new file mode 100644 index 0000000..e69de29 diff --git a/locales/DE/extras/README.md b/locales/DE/extras/README.md new file mode 100644 index 0000000..e69de29 diff --git a/locales/DE/extras/compatibility.md b/locales/DE/extras/compatibility.md new file mode 100644 index 0000000..e69de29 diff --git a/locales/DE/extras/frameworks.md b/locales/DE/extras/frameworks.md new file mode 100644 index 0000000..e69de29 diff --git a/locales/DE/extras/responsive.md b/locales/DE/extras/responsive.md new file mode 100644 index 0000000..e69de29 diff --git a/locales/DE/extras/sass-less.md b/locales/DE/extras/sass-less.md new file mode 100644 index 0000000..e69de29 diff --git a/locales/DE/index.md b/locales/DE/index.md new file mode 100644 index 0000000..14cbb7b --- /dev/null +++ b/locales/DE/index.md @@ -0,0 +1,91 @@ +--- + +layout: ots +title: Erste Schritte mit HTML & CSS + +--- + +# Willkommen + +Willkommen beim Open Tech School HTML & CSS Workshop! Dieser Kurs soll euch +dabei helfen, einen Einstieg in die Web Entwicklung zu finden und euch mit den +Grundlagen von HTML und CSS vertraut machen. + +**HTML** oder auch __HyperText Markup Language__ ist eine Auszeichnungssprache +zum Erstellen von Webseiten und Darstellen von Informationen in einem Webbrowser. +Du kannst eine Web-Anwendung in jeder beliebigen Programmiersprache schreiben, +aber am Ende wird der Inhalt stets in die Sprache des Browsers umgewandelt – HTML. +Es ist eine strukturierte Sprache in der Elemente hierarchisch aufgebaut sind. + +Und **HTML5**? Was ist das? +Das ist lediglich die neueste Spezifikation von HTML. Diese enthält viele Verbesserungen +und stellt neue HTML Elemente zur Verfügung, die das Schreiben von HTML vereinfachen. + +**Was ist CSS?** +CSS oder auch __Cascading Style Sheets__ ist die Sprache für die Beschreibung von +Formatierung und Darstellung von Dokumenten einer Auszeichnungssprache. +Sie ist eng mit HTML verknüpft, da sie den einzelnen Elementen ihr Aussehen gibt. +Im Gegensatz zu HTML ist CSS nicht hierarchisch aufgebaut und kann somit +in beliebiger Reihenfolge definiert werden. + +**CSS3** ist die aktuelle Version von CSS und bringt eine Reihe von Neuerungen +mit sich. Zum Beispiel gibt es nun die Möglichkeit Elemente zu animieren. + +Um den Code auf der Seite zu überprüfen, werden wir die Konsole unseres Browsers +nutzen. Nimm einen beliebigen Browser und schaue unter 'Werkzeuge' nach. +Dort solltest du 'Entwickler Werkzeuge' oder eine ähnliche Option finden. +Wähle die Option aus und die Werkzeugleiste sollte sich öffnen. +Hier werden wir unseren Code überprüfen und schauen ob er +funktioniert oder nicht. Keine Sorge, wir werden später nochmal genauer erklären, +wie man das macht. Für diesen Moment reicht es zu wissen, wo die Konsole zu finden ist +und wie man sie öffnet. + +## Was wir heute machen + +Heute werden wir lernen wie man eine Webseite mit HTML aufbaut und CSS gestaltet. +Wir wollen ein persönliches Portfolio erstellen, das eine Seite mit Informationen über dich +sowie ein Kontaktformular beinhaltet. + +Wenn dein persönliches Portfolio fertig ist und deine Neugier geweckt ist, findest du unter der +Rubrik 'Extras' eine Vielzahl interessanter Links. Dort kannst du erfahren was dich als Nächstes +erwartet oder weitere HTML- und CSS-Techniken lernen. + +## Der Kurs + + * [Die Seiten Vorlage](core/structure.html) - + HMTL nutzen – Verwandle eine weiße Seite in ein 'Hallo Welt'. + * [Dein erstes gestyltes Hello World!](core/style.html) - + CSS verstehen – Was ist eine Klasse, eine ID und ein Selektor? + * [Erstelle dein persönliches Portfolio - Teil 1](core/portfolio.html) - + HTML5-Elemente, Ausrichtung, das Box-Modell und Schriftstile. + * [Erstelle dein persönliches Portfolio - Teil 2](core/portfolio-2.html) - + Positionierung, Verlinkung und Formulare. + +## Zusatzmaterial + + * [HTML5, Was ist neu ?](extra/HTML5.html) + * [Besonders Aussehen mit CSS3](extras/CSS3.html) + * [Cross-Browser Kompatibilität und IE Probleme](extras/compatibility.html) + * [Responsive Design](extras/responsive.html) + * [Frameworks und Vorlagen](extras/frameworks.html) + * [Pre-Compiler, SASS und Less](extras/sass-less.html) + * [Einführung in JavaScript](extras/javascript.html) + +## Referenzmaterial + +Das Mozilla Developer Network (MDN), von den Jungs hinter Firefox, +stellen einige großartige Seiten bereit: + + * [HTML Portal](https://developer.mozilla.org/en-US/docs/Web/HTML) - + Anleitungen, Beispiele, Elemente, Attribute… + * [HTML Verweise](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) - + Eine Liste aller HTML-Elemente – finde heraus welches es gibt und nutze sie! + * [CSS Portal](https://developer.mozilla.org/en-US/docs/Web/CSS) - + Anleitungen fürs effiziente Schreiben von CSS, Demos mit CSS3 und mehr. + * [CSS Verweise](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) - + Mehr Informationen über die CSS-Eigenschaften und Klassen als du dir vorstellen kannst. + +## Lernmaterialien + +* [CodeAcademy](http://www.codecademy.com/tracks/web) - + Gute und praktische Anleitungen, die dich beim Lernen unterstützen. diff --git a/locales/EN/core/README.md b/locales/EN/core/README.md new file mode 100644 index 0000000..22cda9c --- /dev/null +++ b/locales/EN/core/README.md @@ -0,0 +1,7 @@ +--- +layout: ots +title: Core Content +--- + +This directory is for core course content. +From basic HTML structure through different CSS selectors and properties so that learners create a personal portfolio. diff --git a/locales/EN/core/portfolio-2.md b/locales/EN/core/portfolio-2.md new file mode 100644 index 0000000..b6e568e --- /dev/null +++ b/locales/EN/core/portfolio-2.md @@ -0,0 +1,134 @@ +--- + +layout: ots +title: Create your Personal Portfolio + +--- + +So far we built the core of our website. Now we need a home page and a contact page. +Here we explain some basic concepts but after that you have the freedom to experiment. + +## Home page and positioning +Let's start from the home page. + +**Goal** + +The home page is made by: +- navigation menu +- big centered and resizable image +- two sentence intro text (on the top of the image) + +So let's open a new file and set the basic structure. +To make the nav menu we can just copy what we have done in the first part. +Then, take an image that you like. It should be big enough and with good resolution. + +Just after the nav tag, include your image and give it a class name. +Now you need to set the width of just this image as full-width, which is 100%. + + .home-imag { + width: 100% + } + +In this way your image will follow the size of the browser window. +It is possible that when the window is very small or very big, you can see a white space at the bottom of the image. +You can change it setting the height: 100%. But now you need to be sure that you image isn't stretched. + + .home-imag { + height: 100% + } + +After the image, write another header tag within h1 and h2, add a class name to your header so you can style it +and not be confused with the other one. (I will use header-home as the class name) +In the CSS we are goint to write this: + + .header-home { + position: relative; + top: -300px; + } +Here we are changing the position of this element by bringing it outside of the normal flow. Its position is +now relative to its parent element (in our case the div#wrap-centered). Now you can move your element where +you prefer in the page using the properties top, right, bottom and left. + +So, what is positioning? +When a box is taken out of the normal flow, all the content that is still within normal flow will ignore it +completely and not make space for it. Elements can be positioned using the top, bottom, left, and right +properties. These properties will not work, however, unless the position property is set first. They also work +differently depending on the positioning method. + +There are four different positioning methods. + +**Static positioning** +A statically positioned box is one that is in normal flow, from top to bottom. + +**Fixed Positioning** +An element with fixed position is positioned relative to the browser window. +What makes it possible is: position: fixed. +After setting this, you can play with changing the position, adding a different pixel value to top, bottom, left or right positioning. + +**Relative Positioning** +A relatively positioned element is positioned relative to its normal position. Elements that come after a relatively-positioned element behave as if the relatively-positioned element was still in its ‘normal flow’ position - leaving a gap for it. +What makes it possible is: position: relative. +After setting this, you can play with changing the position, adding a different pixel value to top, bottom, left or right positioning. + +**Absolute Positioning** + +An absolutely positioned box is moved out of the normal flow entirely. +What makes it possible is: position: absolute. +After setting this, you can play with changing the position, adding a different pixel value to top, bottom, left or right positioning. + +**Overlapping Elements: z-index property** + +When elements are positioned outside of the normal flow, they can overlap other elements. The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others). +What make it possible is: z-index: n°pixel. + +Knowing all that, create your own home page! + +## Form elements +Time to create the contact page! + +**Goal** + +Create a page with: +- navigation menu +- contact form as main content +- footer + +Your contact form will have the following fields: name, surname, gender, age, email, comment field, agree button and send button. + +As we already did before, let's open a new page, copy all the structure, the nav menu, and the footer from +part 1. + +(FORM ELEMENTS) + +## a tag + +Good! Our portfolio is almost ready. +Now we need just one more thing: to link all your pages together. +To do that there is a special tag: a tag (anchor). +In our nav menu, we need to add an a tag to our li elements: + +
  • Home |
    • + +The most important attribute of the `` element is the href attribute, which indicates the link's destination. +Your link's destination is the name and the extension to which you gave your other pages. Be careful to type it right. +If the page to which you are going to link is not in the same root, you need to specify in which folder it can be +found. +For example, if I have the contact page in a contact folder I write: + +
  • Contact
    • + +Check in the browser and... Done! + +By default the a tag is styled like this: +- An unvisited link is underlined and blue +- A visited link is underlined and purple +- An active link is underlined and red + +You can change the style and the color by selecting the a tag. + +** :hover** +To get the nice effect of changing the color of a link when the mouse moves over it, you need to use the :hover selector. + + a:hover { + color: red; + } diff --git a/locales/EN/core/portfolio.md b/locales/EN/core/portfolio.md new file mode 100644 index 0000000..9c1b356 --- /dev/null +++ b/locales/EN/core/portfolio.md @@ -0,0 +1,341 @@ +--- + +layout: ots +title: Create your Personal Portfolio + +--- + +# HTML5 structure and starter CSS +## Main Content + +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 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. + +Take a file just like the one we just wrote but without any content. (Head with meta tags, title and +`styles.css` linked but a completely empty body.) + +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 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 write our main page content: + +
    +
    + +Since we have just one main content, we can use the ID selector. + +In styles.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; + } + +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. + +At the beginning of the `styles.css` file, let's write something like this: + + * { + padding: 0; + margin: 0; + border: 0; + } + +That is to set all the elements `*` with default padding, margin and border to 0px. +This is really important to do because every browser sets a default size for some tags and without +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. + +## 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 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 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 styles.css: + + nav { + width: 100%; + margin-top: 20px; + } + + nav ul { + font-decoration: none; + float: right; + margin-right: 20px; + } + + nav li { + display: inline; + font-decoration: none; + color: ##08c; + } + +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. + +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 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 HTML elements are like a block displayed in a vertical flow. We can change this flow +thanks to the float property. + +Another property 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. + +
    + +And in the CSS file: + + .clear { + clear: both; + } + +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 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 + +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 tag for that is: + + + +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; + } + + footer p { + text-align: center; + } + +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 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 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 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. + +
    + +
    +
    +
    + +In styles.css: + + .content { + width: 70%; + margin:0 auto; + } + + aside { + width: 35%; + margin: 20px; + border-right: 1px solid #000; + min-height: 300px; + float: left; + } + + section { + width: 55%; + display: inline-block; + padding: 10px; + margin: 20px 10px; + } + +First, we gave a size to the content and placed it in the middle of the page. Then we gave the aside tag some +margins to allow the content to breathe along with a minimum height and width. We also highlighted the border-right of this element so that it displays +a line that divides aside from section. +Last, we gave a float: left in order to make the section (or whatever we will write after the aside) slip next to the +aside, right on its left. +It is really important to set display: inline-block for the section. + +In the aside let's place an image, our personal profile image. + + + + img { + width: 272px; + margin-top: 10px; + } + +When you don't know the size of your image, you can place it and then open your console and check from there, +try out different width sizes and see what the best width is. +Of course, the best way to do this work is to crop your image before, knowing the size, with some graphic editing rograms +like Photoshop or GIMP but for now that is enough. + +Time to write your personal presentation! + +
    +
    +
    +

    Title

    +

    Second title

    +

    Hello hello hello

    +
    +
    +
    + +Here we put inside the section an article tag. Each article tag is composed of a header tag, a tag that is +made for wrapping up all the h tags. So we place inside of it an h1 and h2 tag. Followed by a p tag where finally +all of our content is written. Write at least some text inside of your article, because we will need it later on. + +Before we make our article better looking, we need to know some basics about the box model. +What is a box model, and why is it so importan? + +Every element in web design is a rectangular box. (Yes, both block and inline elements. You can set paddings, +margins and borders on both of them.) +In CSS, the term "box model" is used when talking about design and layout. +The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, +padding, and the actual content. +The box model allows us to place a border around elements and margins and padding around this element too. +How is the size of the box calculated exactly? Here is a diagram: + + + +What do these elements do? +* Margin: Clears an area around the border. The margin does not have a background color; it is completely transparent. +* Borders: Goes around the padding and content. The border must have a color and thickness. +* Padding: Clears an area around the content. The padding is affected by the background color of the box. +* Content: The content of the box, where text, images or other elements appear. + +Margin is unique in that it doesn't affect the size of the box itself, but it affects the other boxes on the page. + +The size of the box itself is calculated like this: + +**Width:** width + padding-left + padding-right + border-left + border-right + +**Height:** height + padding-top + padding-bottom + border-top + border-bottom + +Tips: Remember to set all of these elemnents to `0px` when you start your .CSS files as we did at the very beginning. + +So, now that we know how to calculate the box around our elements, let's play with the boxes around the article, +header and h tags. + +**Text style** + +The text in the document is still pretty boring, so let's style it. +What we already know so far is how to change a color and how to make the text align to the center. +As you probably already have understood, the other values of text-align are left, right and justified; +by default the value is left. +When text-align is set to `justify`, each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers). +An important decision to make is which font we are going to use for the project. +You can specify the type of font with the font-family property. + +There are two types of font family names: +generic family: a group of font families with a similar look (like `Serif` or `Monospace`) +font family: a specific font family (like `Times New Roman` or `Arial`) +To specify your font you have two ways. +One way is to use a common family-font (one with a high probablity that all users have on their machines) called a +"web-safe" font. Or use a font-face rule. That's a new property that allows a designer to include font-family on +your server and refer to it. +This second way was a small revolution, since it gave the designer the freedom to choose the font they prefer +and now we have a huge choice. + +For now we are going to use the "web-safe" font since that is easier and faster. +Tips: If you try to use a particular font that you download onto your computer, and it display correctly--be careful +because on other people's computers, it probably won't. The correct display doesn't come from the browser but from +what's on your machine. + + h1, h2 { + font-family: Georgia, serif; + } + + p { + font-family: "Trebuchet MS", Helvetica, sans-serif; + font-size: 0.9em; + } + +And here we can already see the other really important property: font-size. As you already understood that sets +the size of the font of your selector. Browsers have a font-size set by default but it is important for a good look to change these defaults. +You should not use font size adjustments, however, to make paragraphs look like headings or headings to look like paragraphs. +The font-size can be set using px, em or %. +Your screen resolution specifies how many pixels your screen/display is made of. So when you specify: font-size: +12px;, you're basically telling the browser that each letter should be 12 pixels high. That is therefore +connected with your screen size. +Font-size: 50%; sets the font size of your element to 50% of the font size of its parent element and em is the +width of the letter 'm' in the selected typeface. It's basically the same as percentage, except that 1em is 100% +and 1.5em is 150%. +To calculate the size from pixels to em, use this formula: pixels/16=em. +For example: + + h1 { + font-size:2.5em; /* 40px/16=2.5em */ + } + +It's hard to tell you what you have to do with the sizes, because it is hard to tell what you want to achieve +in each of your layouts. Layouts are about creativity, and you can't just have one approach for all of them. +For now we can say that it is better to use em for a font in these days since the user has so many different +devices and screen sizes that this is the easiest way to make the font-size automatically resizeable. + +A good solution can also be setting a font-size: 100% in the body element and then use em for each different +selector so you start in every browser with the same size. + +Ok, now it is time for you to play, modify and create your font style. +If you want to try something more, you can check your cheatsheet and discover other font- text- properties. + + + diff --git a/locales/EN/core/structure.md b/locales/EN/core/structure.md new file mode 100644 index 0000000..4ab6c87 --- /dev/null +++ b/locales/EN/core/structure.md @@ -0,0 +1,215 @@ +--- + +layout: ots +title: The template structure + +--- + +### Preamble: How to write a HTML document + +This is actually pretty simple: HTML is written in just a plain text document. +Even Microsoft Notepad can write one just fine, although you might wish to use +a code editor like Sublime Text, Gedit, or Textmate instead. + +A HTML file always uses the extension **.html** to indicate its filetype. + +## Doctype + +The first thing on a HTML page is the **doctype**, which as you might guess, +tells the browser what type of document it's looking at, and how to read it. + +Thankfully, HTML5's doctype is extremely simple - it's just `html`. + +Open a new file in your editor and write this line first: + + + +You're now officially editing a html document! + +## Elements and Tags + +These are the basic building blocks of HTML. + +**Elements** *are* what makes up a HTML document. Because you can have zero, +one or more elements inside another, this is what makes HTML *heirarchical*. +An element can include three things: a tag, attributes, and content. + +A **Tag** is the thing that indicates an element's purpose. For example, +the `

    ` tag indicates a paragraph of text is in that element, and the `

  • ` +represents a 'list item'. You'll notice they're always surrounded by angle +backets. *Opening* and *Closing* tags mark the beginning and end of an +element and wrap its content, like so: + +

    This is a paragraph.

    + +You can see the closing tag includes a `/` before its name; otherwise it would +be another opening tag! + +**Always** double-check that you've closed all your elements; otherwise, a +browser can and will get mixed up trying to understand your HTML document. + +There are some specific elements that are exceptions to this rule. +When elements cannot contain anything else, then they don't need to be closed. +For example, the following elements are referred to as 'self-closing': + +
    + + + +There aren't so many of such elements, and you should easily pick up which are +which by writing some more code :) + +Lastly, *nesting* elements isn't so hard, and is fundamental to how HTML works. +It looks just like this: + +

    This is a sentence, with a span element inside it.

    + +or this: + +
    +

    The h1 tags indicates the primary header of the document

    +
    + +You'll notice that HTML doesn't actually care about the whitespace or +newlines *between* tags. It would end up looking the same if the above had +been fit onto one line. + +In the above example, you can see our first case of an **attribute**. It +starts with a lowercase name, and then is almost always followed by an +`=` and a 'value' that's surrounded in double quotes, `"like this"`. An element +can have many attributes, in which case you separate them by spaces, as you'll +see soon. Attributes give information about an element in particular. + +In this case, the `
    ` tag (which is used to *divide* groups of elements up) +has an `id` attribute assigned to `page-title`. That's telling us that this +section of the document is designed to hold the page's main title. You will +learn more about specific attributes later! + +## Html and Head Elements + +Coming back to our file (hope you're coding along!), after the doctype we +begin our document with a root `html` element, just like so: + + + + +It encompasses every other element in our HTML document, nothing should go +outside it! Next, the document is broken up into two important parts: +The **head** and **body**. + +The head contains the title of the page & information **about** the page +(*meta* information). Most meta information isn't visible to the user, +but it has many purposes. For example, meta elements can tell search engines +information about your page, such as who created it and a description of +your page's content. Here's an example `head` element: + + + + + My first Portfolio + + +You can see meta tags are one of the self-closing elements! +First off, there is a charset meta tag. +This is the most important meta tag. Without it your website might not display +properly. It is best practice to include it as the first element inside the +head element. 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. `uft-8` +is usually the best general encoding to use. + +Here we've also written another type of a meta tag, the description. +We define what kind of meta tag it is with the `name` attribute and put our +description in the *value* of the content attribute. + +Inside our head element, we have lastly written a title of our website. Chuck +the above code in your file (inside your `html` element), and change the +content of the ``. Then you can check your document by opening your +file in a 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. + +Head tags can also include external files or resources, such as CSS or +JavaScript files. We will see later how to do this. + +## The Body + +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 the closing head tag but still inside the html element, +let's add the body tags. + + <body> + </body> + +Everything that is written inside this tag will be displayed to the user. +Try to write some plain text between the body tags and check the file +in your browser. + +There are different HTML elements that we can use to indicate different types +of content in our document, like the <p></p> tags which we have already met. +Let's try writing a title, followed by a paragraph. + + <body> + <h1>I'm the title.</h1> + <p>And I'm a paragraph!</p> + </body> + +Heading elements are straightforward to understand. They start from h1 with the +biggest font and importance, going to h6 with the smallest font. + +****** + +Are you wondering why we wrote the h1 and p tags *indented* inside +the body tags? + +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 there is a lot of lines of code. It also shows +the heircharcical nature of HTML pretty well. + +****** + +So far, our entire document might look like this: + + <!DOCTYPE html> + <html> + <head> + <meta charset="UTF-8"> + <meta name="description" content="Free Web tutorials"> + <title>My first Portfolio + + +

    I'm the title.

    +

    And I'm a paragraph!

    +

    This is a sub-heading...

    +

    Well now we're just blathering on.

    + + + + +Hopefully the document in your file looks similar, but not exactly the same. +You might have changed some of the text... does it all work in your browser? + +There are two questions you might be asking, which we intend to answer: + +1. Right now I can basically write paragraphs and headers. What are some other + HTML elements and how can I use them? How would I get a picture? + +2. Ok, so I have some content, but this looks utterly bland. How do I spice it + up a little? + +Read on to find out! + +****** + +lastly, you might also wonder why you're writing all these elements by hand, +when you could make up the same stuff in a Word document. + +Well, think about some of the cooler websites around that you've seen on the +web, and their complex layouts. Do you think you could replicate them +using Word? How long might it take? That's the power of manual control that +HTML (and CSS, and Javascript) gives to the web and web developers. You can +learn it too! diff --git a/locales/EN/core/style.md b/locales/EN/core/style.md new file mode 100644 index 0000000..0b2752e --- /dev/null +++ b/locales/EN/core/style.md @@ -0,0 +1,105 @@ +--- + +layout: ots +title: Your first styled Hello World! + +--- + +## Writing CSS + +There are two ways to write CSS for a document. + +An internal CSS code can be typed in the head section of the code. +The coding starts with the style tag, written just before the closing +head tag. + + + +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. + +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. + + + +This is the best way if you have a lot of CSS to write and you want to +keep it organized. + +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 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 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** 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 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: + + selector { + property: value; ** remember always to write a ; after your value ** + property: value; + } + +Refresh your browser and see how the color of your title has changed. + +Isn't it nice? +To give a background color to our paragraph, write + + p { + background-color: #ddd; + } + +****** + +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 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 nice border to our images. + + img { + border: 1px solid #000; + } + +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 give some more styles to your images. ** + + + + + + + diff --git a/locales/EN/extras/CSS3.md b/locales/EN/extras/CSS3.md new file mode 100644 index 0000000..0cb9908 --- /dev/null +++ b/locales/EN/extras/CSS3.md @@ -0,0 +1,4 @@ +--- +layout: ots +title: CSS3 - getting stylish +--- diff --git a/locales/EN/extras/HTML5.md b/locales/EN/extras/HTML5.md new file mode 100644 index 0000000..9a11508 --- /dev/null +++ b/locales/EN/extras/HTML5.md @@ -0,0 +1,4 @@ +--- +layout: ots +title: HTML5 - what is new? +--- diff --git a/locales/EN/extras/README.md b/locales/EN/extras/README.md new file mode 100644 index 0000000..aa49c8e --- /dev/null +++ b/locales/EN/extras/README.md @@ -0,0 +1,2 @@ +This directory is for extra content. Fill it up with neat things that make constructing pages easier or cooler! + diff --git a/locales/EN/extras/compatibility.md b/locales/EN/extras/compatibility.md new file mode 100644 index 0000000..cfb560f --- /dev/null +++ b/locales/EN/extras/compatibility.md @@ -0,0 +1,4 @@ +--- +layout: ots +title: Dealing with cross-browser compatibility +--- diff --git a/locales/EN/extras/frameworks.md b/locales/EN/extras/frameworks.md new file mode 100644 index 0000000..86b14a6 --- /dev/null +++ b/locales/EN/extras/frameworks.md @@ -0,0 +1,4 @@ +--- +layout: ots +title: CSS Frameworks and what they can do for you +--- diff --git a/locales/EN/extras/images/.gitignore b/locales/EN/extras/images/.gitignore new file mode 100644 index 0000000..e69de29 diff --git a/locales/EN/extras/responsive.md b/locales/EN/extras/responsive.md new file mode 100644 index 0000000..b5f6753 --- /dev/null +++ b/locales/EN/extras/responsive.md @@ -0,0 +1,4 @@ +--- +layout: ots +title: Writing CSS Responsively - Being friendly to mobile +--- diff --git a/locales/EN/extras/sass-less.md b/locales/EN/extras/sass-less.md new file mode 100644 index 0000000..0fa9dc1 --- /dev/null +++ b/locales/EN/extras/sass-less.md @@ -0,0 +1,4 @@ +--- +layout: ots +title: Effective and Efficient CSS with Sass and Less +--- diff --git a/locales/EN/index.md b/locales/EN/index.md new file mode 100644 index 0000000..d17a089 --- /dev/null +++ b/locales/EN/index.md @@ -0,0 +1,92 @@ +--- + +layout: ots +title: Get started with HTML & CSS + +--- + +# Welcome + +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 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 latest version of HTML. There is a lot of interest +about it, because it improves and adds many HTML elements, making it +easier to write and to use. + +**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. +It is closely connected with HTML, since it gives style to HTML elements. +In contrast to HTML, CSS has no hierarchy and can be written in the order +that we choose. + +**CSS3** is the last released version of CSS, and it also +improves CSS a lot. For example, it gives 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 'Tools'. You should find a 'Developer tools' +or similar option. Click it, and the toolbox will be opened. +Here is the place where we can monitor our code and see 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 style it with CSS. +Our goal is to create a personal portfolio page with a +presentation and contact page. + +Once you are done with your personal portfolio, you can explore some +interesting links that you can find below the 'Extra' section. +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. + +## The course + +* [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) +* [Looking extra smart with CSS3](extras/CSS3.html) +* [Cross-Browser compatibility and dealing with IE](extras/compatibility.html) +* [Responsive Design](extras/responsive.html) +* [Frameworks and Boilerplates](extras/frameworks.html) +* [Getting Sassy more or Less](extras/sass-less.html) +* [Introducing Javscript](extras/javascript.html) + +## Reference material + +The Mozilla Developer Network (MDN), by the guys who make Firefox, +host some great resources: + + * [HTML Portal](https://developer.mozilla.org/en-US/docs/Web/HTML) - + Guides, intros, tutorials, references, elements, attributes... + * [HTML Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) - + Every HTML element listed, find out about them all, and make use of them! + * [CSS Portal](https://developer.mozilla.org/en-US/docs/Web/CSS) - + Tutorials for writing effective CSS, demos of CSS3, and much more. + * [CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) - + More CSS properties and classes than you can shake a stick at. + +## Learning resources: + + * [CodeAcademy](http://www.codecademy.com/tracks/web) - + A good hands-on tutorial to keep you learning. diff --git a/locales/README.md b/locales/README.md new file mode 100644 index 0000000..66d58b1 --- /dev/null +++ b/locales/README.md @@ -0,0 +1,6 @@ +[Internationalization (i18n)](http://www.w3.org/International/) + +Following translation exists: + +DE - +EN -