Skip to content

Commit 854c289

Browse files
eabaiteabait
committed
Merge pull request #2 from eabait/master
Improved version
2 parents f3a1eb5 + 6cfd7fe commit 854c289

File tree

1 file changed

+115
-69
lines changed

1 file changed

+115
-69
lines changed

‎README.md‎

Lines changed: 115 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,131 @@
11
# Basics of HTML and CSS
22

3-
# HTML
4-
5-
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).
6-
7-
Recommendations:
8-
9-
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.
10-
2. **Doctypes and Validations:** Keep focus on validate what you have written (DOCTYPES defines how you should write your content).
11-
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.
12-
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.
13-
14-
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).
15-
16-
# CSS
17-
18-
* Create a basic [index.html](https://raw.githubusercontent.com/h5bp/html5-boilerplate/master/index.html) file (example provided).
19-
* Create an empty style.css file and link it to the index.html using [<link> tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#Examples).
20-
* Include [normalize.css](http://necolas.github.io/normalize.css/) before your style.css to fix cross-browser problems.
21-
* Add a basic page structure using HTML as it’s described in the following picture:
3+
##1. HTML
4+
5+
For an introduction to HTML please see [WebPlatform](http://docs.webplatform.org/wiki/html/tutorials).
6+
7+
W3C's HTML5 specification can be found here: [http://www.w3.org/TR/html5/](http://www.w3.org/TR/html5/)
8+
9+
Through the rest of this section you will create a basic HTML document. After finishing this section you will:
10+
11+
* be able to create HTML documents that displays text, images, tables, lists
12+
* understand how to structure HTML documents, and what the basic building blocks are
13+
* understand best practices to write valid, accessible, and semantic HTML markup.
14+
15+
###Exercises
16+
17+
1. **The Basics of HTML:**
18+
1. Create a basic `.html` file with a header displaying "Hello World".
19+
2. Change the `header` to "My todo list".
20+
3. Add a `list` of "todo items" for your daily chores.
21+
4. Create another `.html` file. Create a table for your expenses.
22+
5. Create another `.html` file. Add an image, a video, and a sound.
23+
* You may find this book useful: [http://diveintohtml5.info/](http://diveintohtml5.info/)
24+
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).
25+
7. Test your HTML files in at least Firefox, Chrome, IE, and Chrome for Android or iOS Safari.
26+
2. **Doctypes & Metatags:**
27+
1. Learn how to write valid, and semantic markup:
28+
* [HTML Validation](https://docs.webplatform.org/wiki/guides/html_validation)
29+
* [WHAT DOES IT ALL MEAN?](http://diveintohtml5.info/semantics.html)
30+
2. Add `doctype` to the previously created HTML documents. See what happens if you remove it.
31+
3. Add metatags to the document.
32+
4. Add the [meta viewport tag](http://www.quirksmode.org/mobile/metaviewport/). Check what happens in a mobile browser with or without it.
33+
4. Validate your markup: [W3C Validator](http://validator.w3.org/)
34+
5. Finally, check out [The HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate), to see a best-practice HTML document.
35+
3. **Accessibility**
36+
* Understand **why** accessibility is important:
37+
* [W3C Accessibility](http://www.w3.org/standards/webdesign/accessibility)
38+
* Understand **how** to make web document accessible:
39+
* [508 checklist](http://webaim.org/standards/508/checklist)
40+
* [BBC Accessibility Guideline](http://www.bbc.co.uk/guidelines/futuremedia/accessibility/html/).
41+
* [Leverage HTML5 features to improve accessibility](http://www.w3.org/Talks/2014/0317-HTML5-A11Y/)
42+
* [Accessibility: The Missing Ingredient](http://alistapart.com/article/accessibility-the-missing-ingredient)
43+
* **Validate** your markup to see if it is accessible:
44+
* Install a screen reader like [ChromeVox](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en), and test your HTML document.
45+
* Install [Accessibility Developer Tools](https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en), and perform an audit on your markup.
46+
47+
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.
48+
49+
## 2. CSS
50+
In this section you will learn hot to use CSS to modify the look & feel, and the layout of HTML documents.
51+
52+
For a short introduction to HTML & CSS please go to: [http://learn.shayhowe.com/html-css/](http://learn.shayhowe.com/html-css/)
53+
54+
W3C's CSS specifications can be found [here](http://www.w3.org/TR/css-2010/).
55+
56+
### 2.1 Basics
57+
58+
Exercises
59+
60+
1. Create a basic [index.html](https://raw.githubusercontent.com/h5bp/html5-boilerplate/master/index.html) file (example provided).
61+
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).
62+
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.
63+
4. Add a basic page structure using HTML as depicted by the following picture:
2264

2365
![alt text](images/html5-structure.png "HTML5 structure")
2466

25-
## Rules
26-
27-
### Selectors and properties
67+
### 2.2 Selectors and properties
68+
Learn how to create CSS rules.
2869
![alt text](images/anatomy-of-a-css-rule.gif "Anatomy of a CSS rule")
2970

3071
* [Brief of CSS selectors](http://www.sitepoint.com/web-foundations/css-selectors/)
3172
* [CSS3 selectors sheet](http://www.w3.org/TR/css3-selectors/)
32-
* [Play a little game to consolidate your knowledge](http://flukeout.github.io/)
33-
* [Bookmark the following list of properties for future reference](http://ref.openweb.io/CSS/)
34-
* [Bookmark a reference of CSS Vocabulary](http://pumpula.net/p/apps/css-vocabulary/)
35-
* Now write some code and:
36-
* Add background to the header, footer, aside and nav.
37-
* Add a global font definition (at html element) with a value of 14px, using a font-family you like.
38-
* Make the header and footer text centered.
39-
40-
### Specificity
41-
[Learn about CSS Specificity (basically how the rules override others)](http://www.w3.org/TR/CSS21/cascade.html#specificity)
42-
43-
* [Experiment specificity right now using CSS3 selectors](http://specificity.keegan.st/)
44-
* Now add classes to the different HTML tags with the following names:
45-
* To &lt;header&gt; add class .header
73+
* Play a little [game](http://flukeout.github.io/) to consolidate your knowledge
74+
* Bookmark the following list of properties for future reference [http://ref.openweb.io/CSS/](http://ref.openweb.io/CSS/)
75+
* Bookmark a reference of CSS Vocabulary [http://pumpula.net/p/apps/css-vocabulary/](http://pumpula.net/p/apps/css-vocabulary/)
76+
*
77+
Exercises:
78+
1. Add background to the header, footer, aside and nav.
79+
2. Add a global font definition (at html element) with a value of 14px, using a font-family you like.
80+
3. Center the header and footer text.
81+
82+
### 2.3 Specificity
83+
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)
84+
85+
Exercises:
86+
87+
1. Experiment with specificity right now using CSS3 selectors [http://specificity.keegan.st/](http://specificity.keegan.st/)
88+
2. Now add the following classes to the document created in section 2.1:
89+
* To &lt;header&gt; add class .header
4690
* To &lt;footer&gt; add class .footer
4791
* To &lt;section&gt; add class .content
4892
* To &lt;nav&gt; add class .navigation
4993
* To &lt;aside&gt; add class .sidebar
50-
* Using the new added classes figure out how to override:
51-
* .header must define a font-size: 46px;
52-
* .footer must define a font-size: 10px;
53-
* .content must define a font-size: 14px;
54-
* .navigation must define a font-size: 12px;
55-
* .sidebar must define a font-size: 10px;
56-
* If the class attribute finish with **r (example header, footer)**, the background must be magenta.
57-
* If the class attribute contain an **a (example nav)** but do NOT finish with r, the background must be blue.
58-
* How could you add weight to the global font definition to override all the overrides provided by point c?
59-
* 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?
60-
61-
### The Box Model
62-
* [Learn about the Box Model (how the browser calculate boxes size)](http://www.w3.org/TR/CSS21/box.html)
63-
* [Play with it here changing width / margin / padding / box-sizing](http://dabblet.com/gist/2986528)
64-
* [How to alter the box model calculations](http://quirksmode.org/css/user-interface/boxsizing.html)
65-
* [Extra about box-sizing](http://adamschwartz.co/magic-of-css/chapters/1-the-box/)
66-
* Use the playground provided above to change *box-sizing* and see the changes.
67-
68-
### Layout
69-
70-
#### The display property
71-
* [Learn how to handle the display property (block, inline, inline-block, none)](http://learnlayout.com/display.html)
72-
* [An extra documentation (only read display property for now)](http://adamschwartz.co/magic-of-css/chapters/2-layout/)
73-
* 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*.
74-
75-
#### Layout systems
76-
* [Learn how to create your own layout system](http://www.adamkaplan.me/grid/)
77-
* [Checkout floats and fully understand them](http://alistapart.com/article/css-floats-101)
78-
* [Review your knowledge about CSS relative units](http://alistapart.com/article/love-the-boring-bits-of-css)
94+
3. Using the new added classes figure out how to override:
95+
* .header must have a font size of 46px
96+
* .footer must have a font size of 10px
97+
* .content must have a font size of 14px
98+
* .navigation must have a font size of 12px
99+
* .sidebar must have a font size of 10px
100+
4. If the class attribute finish with **r (example header, footer)**, the background must be magenta.
101+
5. If the class attribute contain an **a (example nav)** but do NOT finish with r, the background must be blue.
102+
6. How could you add weight to the global font definition to win over the classes added by point 3?
103+
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?
104+
105+
### 2.4 The Box Model
106+
* 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)
107+
* Experiment with the box-model here by changing width / margin / padding / box-sizing [http://dabblet.com/gist/2986528](http://dabblet.com/gist/2986528)
108+
* Learn how to alter the box model calculations: [box-sizing](http://quirksmode.org/css/user-interface/boxsizing.html)
109+
* More on [box-sizing](http://adamschwartz.co/magic-of-css/chapters/1-the-box/)
110+
* Use the playground provided above to change *box-sizing* and see the changes.
111+
112+
### 2.5 Layout
113+
114+
#### 2.5.1 The display property
115+
* Learn how to handle the display property (block, inline, inline-block, none) [http://learnlayout.com/display.html](http://learnlayout.com/display.html)
116+
* Read about the display property [here](http://adamschwartz.co/magic-of-css/chapters/2-layout/)
117+
118+
Exercises
119+
120+
1. Now modify your CSS to reach something similar to the initial layout asked.
121+
122+
#### 2.5.2 Layout systems
123+
* Learn how to create your own layout system [Grid Systems](http://www.adamkaplan.me/grid/)
124+
* Learn hot to float elements [CSS Floats](http://alistapart.com/article/css-floats-101)
125+
* Learn about [CSS units](http://alistapart.com/article/love-the-boring-bits-of-css)
79126
* Using your own layout system, implement the following page (only desktop).
80127
![alt text](images/example-layout.png)
81-
* 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).
82-
83-
### Media queries
84-
* [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/).
128+
* 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).
85129

130+
### 2.6 Media queries
131+
* [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/).

0 commit comments

Comments
 (0)