You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
You can have a great time at Codebar no matter what kind of laptop you have, but you must do a little setup before jumping in to the tutorials. You can do this at home so you can jump straight into a tutorial at Codebar. Don't worry if you have trouble - your coach can help you with this if you prefer.
4
+
5
+
6
+
## Somewhere to save your files (required)
7
+
8
+
Programming projects are normally made up of several related files, and we hope you'll come back to Codebar several times! You should create a folder on your hard drive dedicated to Codebar. Create a new folder inside it when you start work on a new tutorial.
9
+
10
+
11
+
## A text editor (required)
12
+
13
+
Programmers use **text editors** to write code. You could use [Notepad](https://en.wikipedia.org/wiki/Notepad_%28software%29) (Windows) or [Notes.app](https://en.wikipedia.org/wiki/Notes_%28application%29) (Mac) to write code, but almost all programmers use a text editor with programming-specific features:
14
+
15
+
-**Syntax highlighting** shows your code in different colours. This helps you spot typos and understand the structure of your code.
16
+
-**Auto-indent** helps you keep your code tidy.
17
+
-**Project navigation and tabs** help you move between the different files in your project.
18
+
-**Autocompletion** shows you keywords you could use to finish what you're typing, so you don't have to remember all the possible commands.
19
+
20
+
We recommend you use **[Sublime Text 2](http://www.sublimetext.com/)** at Codebar. It's free to download & use for as long as you like (though it will nag you intermittently to buy it when you save your work), and it runs on both Windows & Mac.
21
+
22
+
23
+
## A web browser (required)
24
+
25
+
You'll have one of these already! Windows comes with [Internet Explorer](http://windows.microsoft.com/en-us/internet-explorer/), and OS X comes with [Safari](https://www.apple.com/uk/safari/). [Firefox](https://www.mozilla.org/en-US/firefox/) and [Chrome](https://www.google.com/chrome/) are popular alternatives. You can get started with whatever you currently use, but when you reach the later tutorials the powerful developer tools in Chrome and Firefox will be useful. Your coach will show you how to use them while you work through the tutorials.
26
+
27
+
## Ruby (optional)
28
+
29
+
You won't need Ruby installed if you're working on CSS or HTML, but you will need access to Ruby if you work on the Ruby tutorials. You can use [a free webservice called Nitrous](https://www.nitrous.io/) to get started. You can sign up before the workshop to save some time.
30
+
31
+
If you have a Mac you'll have a version of Ruby installed already. A coach can help you get started with Ruby on your Mac - ask them about `rbenv` and Homebrew.
32
+
33
+
You can [download and run the RubyInstaller program](http://rubyinstaller.org/) to program Ruby on Windows.
Copy file name to clipboardExpand all lines: html/lesson6/tutorial.md
+38-48Lines changed: 38 additions & 48 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,63 +8,40 @@ footer: true
8
8
9
9
### Recap
10
10
11
-
In the last lesson, we briefly introduced **HTML5** and **CSS3** with more focus on **CSS3**
12
-
13
-
### Today we will be focusing more on HTML5
14
-
15
-
The page we will build will look similar to this [example page](http://codebar.github.io/tutorials/html/lesson6/index.html"Women in Programming")
16
-
17
-
## But before we start...
18
-
19
-
### Required files
20
-
21
-
Download the files required to begin working through the tutorial from [here](https://gist.github.com/despo/7680133/download)
11
+
In the last lesson, we briefly introduced **HTML5** and **CSS3**. We focused on **CSS3**.
22
12
13
+
### Today we will be focusing more on HTML5!
23
14
24
15
## HTML5 structural semantics
25
16
26
17
### Sectioning
27
18
28
-
In the previous lessons, we used some HTML5 elements, like`<header>` and `<footer>`, `<section>` . There are a lot more elements, some other ones that are quite commonly used are `<section>`, `<nav>` and `<article>`.
19
+
We used some HTML5 elements in previous lessons, including`<header>`, `<footer>`, and `<section>`. HTML5 introduced many other new elements. Some common ones include `<nav>`, `<article>`, and `<main>`.
29
20
30
21
31
22
32
-
The purpose of structural semantics is that the elements describe parts of a website.
23
+
These elements don't change how our website *looks*. They let us describe the *structure*of our page. This gives more information to the user's browser, and helps out assistive programs (such as screen readers, commonly used by blind people). We can still use CSS to change the style of these elements, just like we did with `<div>`s in previous tutorials.
33
24
34
25
### `<section>`
35
-
A section is usually a blob of content. When you are considering using it, try and ask yourself if what you are thinking of defining as section has a natural heading. If not, you should probably avoid it. It is also used for sectioning elements.
26
+
A section is usually a "blob" of content. When you are considering using it, ask yourself if your potential `<section>` has a natural heading. If not, it might not be the right choice.
27
+
28
+
If you just want to style a part of the page, a `<div>` would be more appropriate.
36
29
37
-
If you just want to use it to style a part of the page, `<div>` would be more appropriate.
38
30
39
31
### `<article>`
40
-
The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
41
32
42
-
Besides content, an `<article>` could have a heading `<header>` and sometimes a `<footer>`. It's commonly used for blog posts, comments and stories.
33
+
An `<article>`should make sense as a self-contained document. For instance, it could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, or any other independent item of contant. You can use `<header>` and `<footer>` tags within your `<article>`s too.
43
34
44
35
### `<aside>`
45
-
aside can be used within different contexts. For example, if you are using it inside the page, the content needs to be related to the context of the page. Some example usage would be list of posts (if the page displays posts), advertising - if that is related to the page, or event additional navigation). If you use it within an article element, then the context should be specifically related to that article.
46
36
47
-
### Other elements
37
+
An `<aside>` is something related to but separate to the current containing element. For instance, if your page displayed bits of blog posts, an `<aside>` might contain a list of posts, or adverts related to the main content. Or maybe your page is a blog article - in that case, you could use an `<aside>` to contain a sidenote.
48
38
49
-
#### `<address>`
50
-
The `<address>` provides contact information for the page, or part of the page. Some information we could include in it are email addresses, postal addresses, telephone details and other means of contact.
This is **bad usage**, unless this information is directly relevant to the page.
44
+
The `<address>` element is used to provide contact information related to the page. It's mainly meant for details like postal addresses and telephone numbers, but you can include email addresses and links to online contact methods too. Here's an example:
68
45
69
46
```html
70
47
<address>
@@ -77,8 +54,9 @@ This is **bad usage**, unless this information is directly relevant to the page.
77
54
```
78
55
79
56
#### `<figure>` and `<figcaption>`
57
+
58
+
We've already seen that we can put images in our page using the `<img>` tag, but we often want to include a caption for our images.
80
59
`<figure>` can be used in conjunction with the `<figcaption>` element to describe images, pictures, illustrations and diagrams (and even more).
81
-
`<figcaption>` represents a caption or legend for a picture.
82
60
83
61
```html
84
62
<figure>
@@ -92,30 +70,38 @@ This is **bad usage**, unless this information is directly relevant to the page.
92
70
93
71
94
72
### `<video>` and `<audio>`
95
-
The `<video>` and `<audio>`tags were introduced to support build-in media and offer the ability to easy embed media into HTML documents.
73
+
In the old days, before HTML5, you had to use a plug-in if you wanted to include videos and audio in your page. These weren't supported in all browsers, and often didn't work at all on smart phones. These days, we can use the `<video>` and `<audio>`elements to play media directly in the browser and embed them in our documents.
96
74
97
-
When you include a video, if the browser used does not support it, it will fall back to the message you contain within the container
75
+
Some browsers still don't support this. In that case, the browser will show the message you include within the tag. Here's a video example:
98
76
99
77
```html
100
78
<videosrc="path/to/video">
101
79
Your browser doesn't support embedded video!
102
80
</video>
103
81
```
104
82
105
-
The same applies to the `<audio>`. You can also make the audio file start playing automatically by setting the **autoplay**property
83
+
We can use other attributes to control our media plays. To make music start playing automatically, you use the **autoplay**attribute. To make the controls visible, use the **controls** attribute. Without this, you wouldn't see your audio player!
Today, we will be following a different approach to building our page.
114
95
115
-
You now know enough to build the page from scratch. Using this [page](http://codebar.github.io/tutorials/html/lesson6/index.html"Women in Programming") try and build it yourself, using the HTML5 elements we mentioned today and what you have learned in the previous tutorials.
96
+
You now know enough to build a complete web page from scratch. Open [our example page](http://codebar.github.io/tutorials/html/lesson6/index.html"Women in Programming"), then try to build it yourself. You should use the HTML5 elements we mentioned today and what you have learned in the previous tutorials.
97
+
98
+
### But before you begin...
99
+
100
+
Download the files required to begin working through the tutorial from [here](https://gist.github.com/despo/7680133/download). Create a new folder on your computer for this tutorial, and extract the downloaded archive in that folder.
116
101
117
102
118
-
### Links and resources you will be needing
103
+
104
+
### Links and resources you will need
119
105
120
106
```
121
107
Hi I'm Ada Lovelace - http://codebar.github.io/tutorials/html/lesson3/example.html
@@ -127,20 +113,24 @@ Grace Hopper on Letterman - http://codebar.github.io/tutorials/html/lesson6/asse
127
113
128
114
Also, don't forget to refer to the [previous tutorials](http://codebar.github.io/tutorials)
129
115
130
-
> Don't afraid to ask help from your coach.
116
+
> Don't be afraid to ask for help from your coach.
117
+
118
+
> Build a basic version first, then try to make it more fancy. Don't try to make it perfect first time.
131
119
132
-
> Remember to use your browser inspector!
120
+
> Remember to use your browser inspector! It can help you find out why things aren't working. Try not to use it to peek at how the example was built, though. :)
133
121
134
-
> Use Chrome to test the video playing, there is a small issue with playing the video on Firefox.
122
+
> If your video doesn't play, try using Chrome. There's a known issue with Firefox's video playback.
135
123
136
124
## CSS Bonus
137
125
138
-
Rotate elements using transform
126
+
You can rotate elements using CSS:
139
127
140
128
```css
129
+
img {
141
130
transform: rotate(20deg);
131
+
}
142
132
```
143
133
144
134
145
135
-----
146
-
This ends our sixth lesson. How did you find the introduction to HTML5? Is there something you don't understand? Try and go through the provided resources with your coach. If you have any feedback, or can think of ways to improve this tutorial [send us an email](mailto:feedback@codebar.io) and let us know.
136
+
This ends our sixth lesson. How did you find the introduction to HTML5? Is there something you don't understand? Try to use the provided resources with your coach. If you have any feedback, or can think of ways to improve this tutorial [send us an email](mailto:feedback@codebar.io) and let us know.
0 commit comments