From 43e7bae02854b9320973ba43e5392335ed54e5cf Mon Sep 17 00:00:00 2001 From: "Esteban S. Abait" Date: Wed, 29 Oct 2014 13:58:23 -0300 Subject: [PATCH 1/3] First step to a new version Changing writing style, fixing grammar issues. Added notes to expand HTML section. --- README.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index ba43369..7b798e2 100644 --- a/README.md +++ b/README.md @@ -2,16 +2,17 @@ # HTML -All the basics about the markup language are available at [WebPlatform](http://docs.webplatform.org/wiki/html/tutorials). Please follow the different tutorials and you will be learning from basic tag semantics (span, p, div) to others more specific as (section, article, nav, etc). +For an introduction to HTML please go to [WebPlatform](http://docs.webplatform.org/wiki/html/tutorials). Recommendations: -1. **The Basics of HTML:** create a basic `.html` file and experiment a little with your browser modifying and reloading to see the changes reflected. -2. **Doctypes and Validations:** Keep focus on validate what you have written (DOCTYPES defines how you should write your content). -3. **The HTML head:** You will see how to link your html file with other assets as `js` and `css`, for now keep focus on markup semantics and make some examples changing your already created file. -4. **The HTML body:** Keep focus on markup semantics and understand default behaviors provided by the different types of inputs (`type=text`, `type=number`, `type=date`, etc). Do not care about browsers compatibility, just use lastest chrome or firefox to experiment. +1. **The Basics of HTML:** create a basic `.html` file and experiment a little bit with it (add titles, images, tables, lists, ...). +2. **Doctypes and Validations:** Learn how to write valid, and semantic markup [HTML VAlidation](https://docs.webplatform.org/wiki/guides/html_validation) ADD EXERCISE +3. **The HTML head:** ADD A RESOURCE EXPLAINING HEAD; METATAGS; LINKS; SCRIPTS. +4. **The HTML body:** ADD A LINK TO NEW HTML5 TAG SEMANTICS +5. **ACCESSIBILITY** ADD LINK TO ACCESSIBILITY -Once you finish with **The HTML body**, you should have a `html` file with several examples applying the different tags you were playing in the tutorial (do not include any JS o CSS code). +By now, you should have an `html` file with several examples of how to create lists, tables, add images, headers, etc. All the markup is syntactically valid, is semantic, passes the HTML validator, and is accessible. # CSS From ce1212715615513ea7911b9f44ffc8307b096a89 Mon Sep 17 00:00:00 2001 From: eabait Date: Thu, 6 Nov 2014 14:03:40 -0300 Subject: [PATCH 2/3] Revamped document. Lots of additions --- README.md | 184 +++++++++++++++++++++++++++++++++--------------------- 1 file changed, 114 insertions(+), 70 deletions(-) diff --git a/README.md b/README.md index 7b798e2..d00f6d2 100644 --- a/README.md +++ b/README.md @@ -1,86 +1,130 @@ # Basics of HTML and CSS -# HTML - -For an introduction to HTML please go to [WebPlatform](http://docs.webplatform.org/wiki/html/tutorials). - -Recommendations: - -1. **The Basics of HTML:** create a basic `.html` file and experiment a little bit with it (add titles, images, tables, lists, ...). -2. **Doctypes and Validations:** Learn how to write valid, and semantic markup [HTML VAlidation](https://docs.webplatform.org/wiki/guides/html_validation) ADD EXERCISE -3. **The HTML head:** ADD A RESOURCE EXPLAINING HEAD; METATAGS; LINKS; SCRIPTS. -4. **The HTML body:** ADD A LINK TO NEW HTML5 TAG SEMANTICS -5. **ACCESSIBILITY** ADD LINK TO ACCESSIBILITY - -By now, you should have an `html` file with several examples of how to create lists, tables, add images, headers, etc. All the markup is syntactically valid, is semantic, passes the HTML validator, and is accessible. - -# CSS - -* Create a basic [index.html](https://raw.githubusercontent.com/h5bp/html5-boilerplate/master/index.html) file (example provided). -* Create an empty style.css file and link it to the index.html using [ tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#Examples). -* Include [normalize.css](http://necolas.github.io/normalize.css/) before your style.css to fix cross-browser problems. -* Add a basic page structure using HTML as it’s described in the following picture: +##1. HTML + +For an introduction to HTML please see [WebPlatform](http://docs.webplatform.org/wiki/html/tutorials). + +W3C's HTML5 specification can be found here: [http://www.w3.org/TR/html5/](http://www.w3.org/TR/html5/) + +Through the rest of this section you will create a basic HTML document. After finishing this section you will: + +* be able to create HTML documents that displays text, images, tables, lists +* understand how to structure HTML documents, and what the basic building blocks are +* understand best practices to write valid, accessible, and semantic HTML markup. + +###Exercises + +1. **The Basics of HTML:** + 1. Create a basic `.html` file with a header displaying "Hello World". + 2. Change the `header` to "My todo list". + 3. Add a `list` of "todo items" for your daily chores. + 4. Create another `.html` file. Create a table for your expenses. + 5. Create another `.html` file. Add an image, a video, and a sound. + * You may find this book useful: [http://diveintohtml5.info/](http://diveintohtml5.info/) + 6. Create a "sign up" form with fields for: first name, last name, email, birthday, a dropdown to choose your favourite sport, and a text-area to include a small bio for the user. Add a button at the end to submit the form, and another one to clear the form. Add relevant validation rules for all fields (like required fields, valid email). + 7. Test your HTML files in at least Firefox, Chrome, IE, and Chrome for Android or iOS Safari. +2. **Doctypes & Metatags:** + 1. Learn how to write valid, and semantic markup: + * [HTML Validation](https://docs.webplatform.org/wiki/guides/html_validation) + * [WHAT DOES IT ALL MEAN?](http://diveintohtml5.info/semantics.html) + 2. Add `doctype` to the previously created HTML documents. See what happens if you remove it. + 3. Add metatags to the document. + 4. Add the [meta viewport tag](http://www.quirksmode.org/mobile/metaviewport/). Check what happens in a mobile browser with or without it. + 4. Validate your markup: [W3C Validator](http://validator.w3.org/) + 5. Finally, check out [The HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate), to see a best-practice HTML document. +3. **Accessibility** + * Understand **why** accessibility is important: + * [W3C Accessibility](http://www.w3.org/standards/webdesign/accessibility) + * Understand **how** to make web document accessible: + * [508 checklist](http://webaim.org/standards/508/checklist) + * [BBC Accessibility Guideline](http://www.bbc.co.uk/guidelines/futuremedia/accessibility/html/). + * [Leverage HTML5 features to improve accessibility](http://www.w3.org/Talks/2014/0317-HTML5-A11Y/) + * [Accessibility: The Missing Ingredient](http://alistapart.com/article/accessibility-the-missing-ingredient) + * **Validate** your markup to see if it is accessible: + * Install a screen reader like [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en), and test your HTML document. + * Install [Accessibility Developer Tools](https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en), and perform an audit on your markup. + +By now, you should have several `html` files with different examples of how to create lists, tables, add images, headers, etc. All the markup is syntactically valid, is semantic, passes the HTML validator, and is accessible. + +## 2. CSS +In this section you will learn hot to use CSS to modify the look & feel, and the layout of HTML documents. + +For a short introduction to HTML & CSS please go to: [http://learn.shayhowe.com/html-css/](http://learn.shayhowe.com/html-css/) + +W3C's CSS specifications can be found [here](http://www.w3.org/TR/css-2010/). + +### 2.1 Basics + +Exercises: +1. Create a basic [index.html](https://raw.githubusercontent.com/h5bp/html5-boilerplate/master/index.html) file (example provided). +2. Create an empty style.css file and link it to the index.html using [the link tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#Examples). +3. Learn why is a best-practice to use a `reset stylesheet` [here](http://meyerweb.com/eric/tools/css/reset/). Then include [normalize.css](http://necolas.github.io/normalize.css/) before linking your style.css. +4. Add a basic page structure using HTML as depicted by the following picture: ![alt text](images/html5-structure.png "HTML5 structure") -## Rules - -### Selectors and properties +### 2.2 Selectors and properties +Learn how to create CSS rules. ![alt text](images/anatomy-of-a-css-rule.gif "Anatomy of a CSS rule") * [Brief of CSS selectors](http://www.sitepoint.com/web-foundations/css-selectors/) * [CSS3 selectors sheet](http://www.w3.org/TR/css3-selectors/) -* [Play a little game to consolidate your knowledge](http://flukeout.github.io/) -* [Bookmark the following list of properties for future reference](http://ref.openweb.io/CSS/) -* [Bookmark a reference of CSS Vocabulary](http://pumpula.net/p/apps/css-vocabulary/) -* Now write some code and: - * Add background to the header, footer, aside and nav. - * Add a global font definition (at html element) with a value of 14px, using a font-family you like. - * Make the header and footer text centered. - -### Specificity -[Learn about CSS Specificity (basically how the rules override others)](http://www.w3.org/TR/CSS21/cascade.html#specificity) - -* [Experiment specificity right now using CSS3 selectors](http://specificity.keegan.st/) -* Now add classes to the different HTML tags with the following names: - * To <header> add class .header +* Play a little [game](http://flukeout.github.io/) to consolidate your knowledge +* Bookmark the following list of properties for future reference [http://ref.openweb.io/CSS/](http://ref.openweb.io/CSS/) +* Bookmark a reference of CSS Vocabulary [http://pumpula.net/p/apps/css-vocabulary/](http://pumpula.net/p/apps/css-vocabulary/) +* +Exercises: + 1. Add background to the header, footer, aside and nav. + 2. Add a global font definition (at html element) with a value of 14px, using a font-family you like. + 3. Center the header and footer text. + +### 2.3 Specificity +Learn about CSS Specificity (basically how rules override one each others) [http://www.w3.org/TR/CSS21/cascade.html#specificity](http://www.w3.org/TR/CSS21/cascade.html#specificity) + +Exercises: + +1. Experiment with specificity right now using CSS3 selectors [http://specificity.keegan.st/](http://specificity.keegan.st/) +2. Now add the following classes to the document created in section 2.1: + * To <header> add class .header * To <footer> add class .footer * To <section> add class .content * To <nav> add class .navigation * To <aside> add class .sidebar -* Using the new added classes figure out how to override: - * .header must define a font-size: 46px; - * .footer must define a font-size: 10px; - * .content must define a font-size: 14px; - * .navigation must define a font-size: 12px; - * .sidebar must define a font-size: 10px; -* If the class attribute finish with **r (example header, footer)**, the background must be magenta. -* If the class attribute contain an **a (example nav)** but do NOT finish with r, the background must be blue. -* How could you add weight to the global font definition to override all the overrides provided by point c? -* Imagine you have something like class=”oh-no-inline-styles” style=”background:red” and you should change the background to green but without changing the inline style, How could you accomplish this? - -### The Box Model -* [Learn about the Box Model (how the browser calculate boxes size)](http://www.w3.org/TR/CSS21/box.html) - * [Play with it here changing width / margin / padding / box-sizing](http://dabblet.com/gist/2986528) -* [How to alter the box model calculations](http://quirksmode.org/css/user-interface/boxsizing.html) -* [Extra about box-sizing](http://adamschwartz.co/magic-of-css/chapters/1-the-box/) - * Use the playground provided above to change *box-sizing* and see the changes. - -### Layout - -#### The display property -* [Learn how to handle the display property (block, inline, inline-block, none)](http://learnlayout.com/display.html) -* [An extra documentation (only read display property for now)](http://adamschwartz.co/magic-of-css/chapters/2-layout/) - * Now modify your CSS to reach something similar to the initial layout asked. You will need to be smart with the use of *display: inline-block*. - -#### Layout systems -* [Learn how to create your own layout system](http://www.adamkaplan.me/grid/) - * [Checkout floats and fully understand them](http://alistapart.com/article/css-floats-101) - * [Review your knowledge about CSS relative units](http://alistapart.com/article/love-the-boring-bits-of-css) +3. Using the new added classes figure out how to override: + * .header must have a font size of 46px + * .footer must have a font size of 10px + * .content must have a font size of 14px + * .navigation must have a font size of 12px + * .sidebar must have a font size of 10px +4. If the class attribute finish with **r (example header, footer)**, the background must be magenta. +5. If the class attribute contain an **a (example nav)** but do NOT finish with r, the background must be blue. +6. How could you add weight to the global font definition to win over the classes added by point 3? +7. Imagine there is a declaration like class=”oh-no-inline-styles” style=”background:red” and you need to change the background to green without changing the inline style. How could you accomplish this? + +### 2.4 The Box Model +* Learn about the Box Model (how the browser calculate boxes size): [http://www.w3.org/TR/CSS21/box.html](http://www.w3.org/TR/CSS21/box.html) +* Experiment with the box-model here by changing width / margin / padding / box-sizing [http://dabblet.com/gist/2986528](http://dabblet.com/gist/2986528) +* Learn how to alter the box model calculations: [box-sizing](http://quirksmode.org/css/user-interface/boxsizing.html) +* More on [box-sizing](http://adamschwartz.co/magic-of-css/chapters/1-the-box/) +* Use the playground provided above to change *box-sizing* and see the changes. + +### 2.5 Layout + +#### 2.5.1 The display property +* Learn how to handle the display property (block, inline, inline-block, none) [http://learnlayout.com/display.html](http://learnlayout.com/display.html) +* Read about the display property [here](http://adamschwartz.co/magic-of-css/chapters/2-layout/) + +Exercises + +1. Now modify your CSS to reach something similar to the initial layout asked. + +#### 2.5.2 Layout systems +* Learn how to create your own layout system [Grid Systems](http://www.adamkaplan.me/grid/) +* Learn hot to float elements [CSS Floats](http://alistapart.com/article/css-floats-101) +* Learn about [CSS units](http://alistapart.com/article/love-the-boring-bits-of-css) * Using your own layout system, implement the following page (only desktop). ![alt text](images/example-layout.png) - * When the user **:hover** the right side black box (observe at middle right of the screen shot) it must show a “hello world” message and go back when move the mouse out. To accomplish this [Learn about CSS position](http://learnlayout.com/position.html). - -### Media queries -* [Learn Media Queries](http://css-tricks.com/css-media-queries/) and Adapt the given layout to be ready for mobile screens using the following design as guide [example](http://mediaqueri.es/ity/). +* When the user **:hover** the right side black box (observe at middle right of the screenshot) it must show a “hello world” message and go back when move the mouse out. To accomplish this [Learn about CSS position](http://learnlayout.com/position.html). +### 2.6 Media queries +* [Learn Media Queries](http://css-tricks.com/css-media-queries/) and adapt your previous exercises to work on mobile screens. Use the following design as guide [example](http://mediaqueri.es/ity/). From 6cfd7fe0f35f663542cb995557e0ede764139a1a Mon Sep 17 00:00:00 2001 From: eabait Date: Thu, 6 Nov 2014 14:05:56 -0300 Subject: [PATCH 3/3] Fix in Basic section --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index d00f6d2..a3c28ee 100644 --- a/README.md +++ b/README.md @@ -55,7 +55,8 @@ W3C's CSS specifications can be found [here](http://www.w3.org/TR/css-2010/). ### 2.1 Basics -Exercises: +Exercises + 1. Create a basic [index.html](https://raw.githubusercontent.com/h5bp/html5-boilerplate/master/index.html) file (example provided). 2. Create an empty style.css file and link it to the index.html using [the link tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#Examples). 3. Learn why is a best-practice to use a `reset stylesheet` [here](http://meyerweb.com/eric/tools/css/reset/). Then include [normalize.css](http://necolas.github.io/normalize.css/) before linking your style.css.