Skip to content

Commit 2b93a83

Browse files
author
Matteo Menapace
committed
First commit
1 parent e0056b1 commit 2b93a83

File tree

1 file changed

+396
-2
lines changed

1 file changed

+396
-2
lines changed

‎README.md‎

Lines changed: 396 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,396 @@
1-
# web-portfolio
2-
A one day workshop to build your own online portfolio
1+
<!--
2+
3+
- [ ] Embed videos
4+
- [ ] QUIZ?
5+
- [ ] Lato / Lekton?
6+
- [ ] make sure we're using Chrome.
7+
- [ ] Animated gif
8+
9+
-->
10+
11+
12+
# Build your own Web portfolio
13+
14+
The aims of today are:
15+
16+
* Organise your work to **tell the story** of your projects
17+
* Start building an **online one-page portfolio** for your work
18+
* Learn **HTML & CSS**
19+
* **Publish and host** your portfolio online
20+
21+
Bringing storytelling and coding together to make something that is useful to you, today.
22+
23+
<!--
24+
* as a creative, you'll be telling the story of your work and your process for the rest of your working life
25+
* is there a jump in the story of your process (remember story lines?)
26+
-->
27+
28+
29+
# HTML & CSS crash course
30+
31+
We're going to learn how to:
32+
33+
* Write HTML to **structure** your content
34+
* Create several types of **text** (paragraphs, headings, quotes)
35+
* Create **links** to other Web pages (eg: your blog)
36+
* Add **images** (eg: of your work)
37+
* **Embed** other media (eg: YouTube videos, tweets etc.)
38+
39+
* Write CSS to **style** your content
40+
* Design your page's **typography**
41+
* Set your page's **colours**
42+
* Get images to fill up the whole browser's window, without loosing their original aspect ratio
43+
* Position elements in the horizontal and vertical centre of the page
44+
* Create a *curtain reveal* effect
45+
46+
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**.
47+
48+
## Step by step
49+
50+
Go to [thimble.mozilla.org](https://thimble.mozilla.org/) and sign up (it's free).
51+
52+
Then log in and click on `Start a project from scratch`.
53+
54+
### 1. Content first
55+
56+
It's good practice to build the **HTML** first, and then make it _stylish_ with CSS. Aka *content first*.
57+
58+
#### HTML skeleton
59+
60+
Thimble created an HTML skeleton for us, containing the basic **building blocks**: `html`, `head` and `body` tags.
61+
62+
Every HTML document, at the bare bones, needs to have this structure
63+
64+
```html
65+
<!doctype html>
66+
<html>
67+
<head>
68+
...
69+
</head>
70+
<body>
71+
...
72+
</body>
73+
</html>
74+
```
75+
76+
#### Head
77+
78+
In the `head` we can change the `title`.
79+
80+
Later, we'll add links to external resources like *stylesheets* and *meta* information.
81+
82+
What you put in the `head` is not visible in the page.
83+
84+
#### Body
85+
86+
We're dividing our page into sections, so let's create a few empty `section` tags inside the `body`.
87+
88+
```html
89+
<section></section>
90+
<section></section>
91+
<section></section>
92+
<section></section>
93+
<section></section>
94+
```
95+
96+
#### Headings
97+
98+
In the first section we'll add a `div`. Inside that, we'll add a **heading** (`h1`) and a **sub-heading** (`h2`). These will be the most important pieces of information in your page.
99+
100+
```html
101+
<section>
102+
<div>
103+
<h1>Your name</h2>
104+
<h2>Your specialties, eg: film maker</h2>
105+
</div>
106+
</section>
107+
```
108+
109+
#### Images
110+
111+
In that same `div`, underneath the headings, we can add an **image** which could serve as a logo or a profile picture.
112+
113+
```html
114+
<img src="profilepic.jpg" alt="Describe this image">
115+
```
116+
117+
#### Text
118+
119+
We'll have two sections with **textual content**, so let's write something in there.
120+
121+
```html
122+
<section>
123+
<p>Write something here to introduce your project and the ideas behind it.</p>
124+
<p>A little information about the process you took from research through to the development.</p>
125+
<p>You process is important!</p>
126+
</section>
127+
```
128+
129+
`p` is for *paragraph*.
130+
131+
#### Hyperlinks
132+
133+
We can add **hyperlinks** to our content using the `a` element (`a` is for *anchor*).
134+
135+
```html
136+
<a href="http://example.com">the clickable text</a>
137+
```
138+
139+
For instance:
140+
```html
141+
<section>
142+
<p>Influenced by the playful approaches to image-making used by Dadaist <a href="http://www.whitechapelgallery.org/exhibitions/hannah-hoch/">Hannah Höch</a>, I gathered a collection of portraits (Vogue portraits from the 1920's-40's and more current artist portraits) to create a collage of anonymous parts.</p>
143+
</section>
144+
```
145+
146+
#### Contact details
147+
148+
Let's add our **contact details** to the final section.
149+
150+
```html
151+
<section>
152+
<div>
153+
<h2>Say hello!</h2>
154+
<p>aimeebethmj@gmail.com</p>
155+
</div>
156+
</section>
157+
```
158+
159+
### 2. Style later
160+
161+
Now the fun part: **CSS**!
162+
163+
#### Normalize
164+
165+
We want to tell the browser not to mess with our style.
166+
167+
So we're going to use a little CSS utility called [**normalize.css**](https://necolas.github.io/normalize.css/), which resets the default browser's stylesheet and provides a consistent common ground to base our own styles.
168+
169+
Search `normalize.css` in Google and click on the first link.
170+
171+
Click download and save the file by going to *File* and *Save page as*.
172+
173+
Now upload that file to Thimble.
174+
175+
Let's include a `link` in the `head`, which will point to the `normalize.css` file.
176+
177+
```html
178+
<link rel="stylesheet" href="normalize.css">
179+
```
180+
181+
#### Our style
182+
183+
As you can see, `normalize.css` has flattened our page. Now we can start building our own style.
184+
185+
There's a `link` in our `head` which points to another CSS file called **style.css**. This is where we add our custom styles.
186+
187+
```html
188+
<link rel="stylesheet" href="css/style.css">
189+
```
190+
191+
#### Typography
192+
193+
We are going start with **typography**.
194+
195+
We can grab a **font** from [Google Fonts](https://www.google.com/fonts): pick a typeface you like and then grab the `link` code for it and paste it in your page's head. 
196+
197+
Where? Between `normalize.css` and `style.css`
198+
199+
```html
200+
<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro:400,300,700,900' rel='stylesheet' type='text/css'>
201+
```
202+
203+
Let's give some ground rules to our page, by applying them to the `body` element. Then we can set the rules for headings, paragraphs and bold elements.
204+
205+
```css
206+
body
207+
{
208+
font-family: 'Lato', sans-serif;
209+
}
210+
```
211+
212+
#### Readability
213+
214+
To center the content sections and make them easier to read, we add `class="content"` to all the `section` elements that contain text in HTML.
215+
216+
Then in CSS we create a rule for those `section` elements *classified* as `content`.
217+
218+
219+
```css
220+
.content
221+
{
222+
margin: 2rem auto;
223+
max-width: 40rem;
224+
padding: 0 1rem;
225+
}
226+
```
227+
228+
`.` is a shortcut for `class`.
229+
230+
#### Full-size
231+
232+
Let's work on the **full-size images**.
233+
234+
First we want to get some `section` elements in our page to take the full browser height. So we create a `.full` class and give it a `height: 100%;` property.
235+
236+
```css
237+
.full
238+
{
239+
height: 100%;
240+
}
241+
```
242+
243+
This is not enough though. 
244+
245+
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.
246+
247+
_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.
248+
249+
_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!
250+
251+
```css
252+
html, body
253+
{
254+
height: 100%;
255+
}
256+
```
257+
258+
#### Background images
259+
260+
Now onto the **images**. We're going to use `background-image` to define a few images that will be applied to the background of our `.full` elements. 
261+
262+
We are going to add our `background-image` directly into our HTML. For each `section` with the class `.full` add in `style="background-image: url('image.jpg')"`
263+
264+
For example:
265+
```html
266+
<section class="full" style="background-image: url('image.jpg')">
267+
<div>
268+
<h1>Your name</h2>
269+
<h2>Your specialties, eg: film maker</h2>
270+
<img src="profilepic.jpg" alt="Describe this image">
271+
</div>
272+
</section>
273+
```
274+
275+
By default background-images *tile*, but we want them to take up the whole available screen space, without losing their aspect ratio (no squashing). 
276+
277+
We can achieve that with `background-size`. This property can take various values: pixel sizes, percentages, and then a couple of interesting keywords.
278+
279+
* `contain` will scale the image so as to be as large as possible providing that it is **contained** within the background positioning area. 
280+
* `cover` instead, will scale the image, this time to be as large as possible so that the background positioning area is completely **covered** by the background image.
281+
282+
We're going to add `background-size: cover;` to the `.full` rule (so that it will apply to all sections with the `full` class).
283+
```css
284+
.full
285+
{
286+
height: 100%;
287+
background-size: cover;
288+
}
289+
```
290+
291+
#### Image sizes
292+
293+
Next we're styling the **logo** or **profile picture**.
294+
295+
By default images will be added to the top-left corner of their *parent*.
296+
297+
If we want it to be centred, we need CSS.
298+
299+
Let's give the `img` a class `profile`.
300+
```html
301+
<img class="profile" src="profilepic.jpg" alt="Describe this image">
302+
```
303+
304+
We can set a height and width for our image
305+
```css
306+
.profile
307+
{
308+
height: 10rem;
309+
width: 10rem;
310+
}
311+
```
312+
313+
We also can make sure that the `img` is not bigger than its container
314+
315+
```css
316+
.profile
317+
{
318+
height: 10rem;
319+
width: 10rem;
320+
max-width: 100%;
321+
}
322+
```
323+
324+
#### Aligning stuff
325+
326+
To center the image, we create two classes `h-centred` and `v-centred`.
327+
328+
```css
329+
.h-centred
330+
{
331+
display: flex;
332+
justify-content: center;
333+
}
334+
.v-centred
335+
{
336+
display: flex;
337+
align-items: center;
338+
}
339+
```
340+
341+
Let's add them to our HTML `section`.
342+
343+
```html
344+
<section class="full h-centred v-centred" style="background-image: url('image.jpg')">
345+
<div>
346+
<h1>Your name</h2>
347+
<h2>Your specialties, eg: film maker</h2>
348+
<img class="profile" src="profilepic.jpg" alt="Describe this image">
349+
</div>
350+
</section>
351+
```
352+
353+
We can see the `div` has moved into the centre of the screen, but the content inside it is still aligned to the left. Let's add some CSS to fix that. Add some style into the `div`.
354+
355+
```html
356+
<div style="text-align: center">
357+
<h1>Your name</h2>
358+
<h2>Your specialties, eg: film maker</h2>
359+
<img class="profile" src="profilepic.jpg" alt="Describe this image">
360+
</div>
361+
```
362+
363+
#### Scrolling effect
364+
365+
Now we want to get the **curtain reveal effect**, so that instead of scrolling with the rest of the page, the background-images will be revealed as we scroll up and down. That makes our page more interesting.
366+
367+
We can achieve this with another CSS property, `background-attachment`. With this property we have two options: 
368+
369+
* `scroll` (default): the background image will scroll with the rest of the content.
370+
* `fixed`: the background image will remain stationary as the rest of the content is scrolled
371+
372+
Which one do we want? Obviously `fixed`.
373+
374+
Add `background-attachment: fixed;` to `.full`
375+
376+
```css
377+
.full
378+
{
379+
height: 100%;
380+
background-size: cover;
381+
background-attachment: fixed;
382+
}
383+
```
384+
385+
This **demo** is at [j.mp/html-css-portfolio-demo](http://j.mp/html-css-portfolio-demo). Click `Remix` to reveal all its **source code**.
386+
387+
388+
389+
<!--- [ ] cropping images and saving them for Web-->
390+
391+
392+
### License
393+
394+
[![](https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png)](http://creativecommons.org/licenses/by-nc-sa/4.0)
395+
396+
This work is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License ](http://creativecommons.org/licenses/by-nc-sa/4.0)

0 commit comments

Comments
 (0)