|
| 1 | +<!-- |
1 | 2 | - [ ] **Intro**. Why the Web is great and why being Web-literate is fundamental these days. - JDM contributes
|
2 | 3 | - [ ] **Sketch** out your portfolio. Checklist: images, texts (name, blurb, project description, links, contact details).
|
3 | 4 | - [ ] Some storytelling stuff? - JDM to provide portfolio bants as inspired
|
|
6 | 7 | - [ ] make sure we're using Chrome.
|
7 | 8 | - [ ] Animated gif? - JDM to talk about how Giphy had $300 million invested. GIFs are big business!
|
8 | 9 | - [ ] cropping images and saving them for Web
|
9 |
| - |
| 10 | +--> |
10 | 11 |
|
11 | 12 | # Build your own Web portfolio
|
12 | 13 |
|
| 14 | +## Why? |
| 15 | + |
| 16 | +* Why are we here today? |
| 17 | + |
| 18 | +* Why should you have an online portfolio? |
| 19 | + |
| 20 | +* Why bother with the Web? |
| 21 | + |
| 22 | +### How many hours do you spend on the Web every day? |
| 23 | + |
| 24 | +Pretty much anything you do is in some way related to the Web. |
| 25 | + |
| 26 | +You communicate with your friends on the Web, you buy and sell stuff from strangers, you consume entertainment (music, videos, pictures), you find information, you can find jobs, and you can promote yourself on the Web... |
| 27 | + |
| 28 | +### Become Web-literate |
| 29 | + |
| 30 | +In a short time (~20 years) the Web has disrupted every industry it touched. The creative industries are no exception. |
| 31 | + |
| 32 | +<!-- |
| 33 | +Today is not about becoming professional coders (although this could be your starting point), but rather to become **confident in tinkering with code**. To see code as a **toolbox**, and not something **scary** or too **complex**. |
| 34 | +--> |
| 35 | + |
| 36 | +No matter what your dream job is, as a **creative professional in the 21st century you can’t be Web-illiterate**. Just like you have to be able to read and write, and do some maths. |
| 37 | + |
| 38 | +You need to understand a bit of code and have a presence online. |
| 39 | + |
| 40 | +<!-- You don't have to be a geek/nerd, the Web is for *everyone*. --> |
| 41 | + |
| 42 | +Becoming Web-literate will enable you to use the Web as an **open platform**, a place where you can be a **maker**, instead of a **consumer**. |
| 43 | + |
| 44 | +<!-- Also it's a highly paid industry. --> |
| 45 | + |
| 46 | + |
| 47 | +## Today |
| 48 | + |
13 | 49 | You'll learn how to:
|
14 | 50 |
|
15 | 51 | * Organise your work to **tell the story** of your projects
|
16 |
| -* Start building an **online one-page portfolio** for your work |
| 52 | +* Build an **online one-page portfolio** for your work |
17 | 53 | * [Learn **HTML & CSS**](#html-css-crash-course)
|
18 |
| -* **Publish and host** your portfolio online |
19 |
| - |
20 |
| -Bringing storytelling and coding together to make something that is useful to you, today. |
| 54 | +* **Publish** your portfolio online |
21 | 55 |
|
22 |
| -The **demo** is at [j.mp/html-css-portfolio-demo](http://j.mp/html-css-portfolio-demo). Click `Remix` to reveal all its **source code**. |
| 56 | +<!-- Bringing storytelling and coding together to make something that is useful to you, today. --> |
23 | 57 |
|
24 |
| -<!-- |
25 |
| -* as a creative, you'll be telling the story of your work and your process for the rest of your working life |
26 |
| -* is there a jump in the story of your process (remember story lines?) |
27 |
| ---> |
| 58 | +A finished **demo** of what we will build together is at [j.mp/html-css-portfolio-demo](http://j.mp/html-css-portfolio-demo). Click `Remix` to reveal all its **source code**. |
28 | 59 |
|
29 | 60 |
|
30 | 61 | # HTML & CSS crash course
|
@@ -415,22 +446,20 @@ First we want to get some `section` elements in our page to take the full browse
|
415 | 446 | }
|
416 | 447 | ```
|
417 | 448 |
|
418 |
| -<!-- |
419 | 449 | This is not enough though.
|
420 | 450 |
|
421 |
| -It is important to understand what `height: 100%;`means: _the full height of the parent element_. It doesn't magically mean *the height of the browser window*. So if you want your main container to have the height of the browser window, setting `height: 100%;` isn’t enough. |
| 451 | +It is important to understand that `height: 100%;` means _the full height of the parent element_. It doesn't magically mean *the height of the browser window*. So if you want your `.full` sections to have the height of the browser window, setting `height: 100%;` isn’t enough. |
422 | 452 |
|
423 |
| -_Why?_ Because the parent of your `section` (`body`) has its height set by default to `auto`, which means it is sized according to its _content_. You can try adding `height: 100%;` to the `body` element to see… it is still not enough. |
| 453 | +_Why?_ Because the parent of your `section` (`body`) has its height set by default to `auto`, which means it is sized according to its _content_. You can try adding `height: 100%;` to the `body` element ... and it is still not enough. |
424 | 454 |
|
425 | 455 | _Why?_ Because the parent of `body` (`html`) has also its height set by default to `auto`. Now what if you try to add `height: 100%;` to the `html` element? It works!
|
426 | 456 |
|
427 |
| -```css |
| 457 | +> ```css |
428 | 458 | html, body
|
429 | 459 | {
|
430 | 460 | height: 100%;
|
431 | 461 | }
|
432 | 462 | ```
|
433 |
| ---> |
434 | 463 |
|
435 | 464 | ### Background images
|
436 | 465 |
|
|
0 commit comments