Skip to content

Commit 7e0f3b3

Browse files
author
Matteo Menapace
committed
Intro and .full
1 parent c142f9b commit 7e0f3b3

File tree

1 file changed

+44
-15
lines changed

1 file changed

+44
-15
lines changed

README.md

Lines changed: 44 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
<!--
12
- [ ] **Intro**. Why the Web is great and why being Web-literate is fundamental these days. - JDM contributes
23
- [ ] **Sketch** out your portfolio. Checklist: images, texts (name, blurb, project description, links, contact details).
34
- [ ] Some storytelling stuff? - JDM to provide portfolio bants as inspired
@@ -6,25 +7,55 @@
67
- [ ] make sure we're using Chrome.
78
- [ ] Animated gif? - JDM to talk about how Giphy had $300 million invested. GIFs are big business!
89
- [ ] cropping images and saving them for Web
9-
10+
-->
1011

1112
# Build your own Web portfolio
1213

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+
1349
You'll learn how to:
1450

1551
* 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
1753
* [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
2155

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. -->
2357

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**.
2859

2960

3061
# HTML & CSS crash course
@@ -415,22 +446,20 @@ First we want to get some `section` elements in our page to take the full browse
415446
}
416447
```
417448
418-
<!--
419449
This is not enough though. 
420450

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.
422452

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.
424454

425455
_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!
426456

427-
```css
457+
> ```css
428458
html, body
429459
{
430460
height: 100%;
431461
}
432462
```
433-
-->
434463
435464
### Background images
436465

0 commit comments

Comments
 (0)