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
Copy file name to clipboardExpand all lines: README.md
+64-37Lines changed: 64 additions & 37 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -15,7 +15,7 @@ The aims of today are:
15
15
16
16
* Organise your work to **tell the story** of your projects
17
17
* Start building an **online one-page portfolio** for your work
18
-
* Learn **HTML & CSS**
18
+
*[Learn **HTML & CSS**](#html-css-crash-course)
19
19
***Publish and host** your portfolio online
20
20
21
21
Bringing storytelling and coding together to make something that is useful to you, today.
@@ -47,13 +47,13 @@ The **demo** is at [j.mp/html-css-portfolio-demo](http://j.mp/html-css-portfolio
47
47
48
48
## Step by step
49
49
50
-
Go to [thimble.mozilla.org](https://thimble.mozilla.org/) and sign up (it's free).
50
+
> Go to [thimble.mozilla.org](https://thimble.mozilla.org/) and sign up (it's free).
51
51
52
-
Then log in and click on `Start a project from scratch`.
52
+
> Then log in and click on `Start a project from scratch`.
53
53
54
54
### 1. Content first
55
55
56
-
It's good practice to build the **HTML** first, and then make it _stylish_ with CSS. Aka*content first*.
56
+
It's good practice to build the **HTML** first, and then make it _stylish_ with CSS. This approach is called*content first*.
57
57
58
58
#### HTML skeleton
59
59
@@ -75,64 +75,88 @@ Every HTML document, at the bare bones, needs to have this structure
75
75
76
76
#### Head
77
77
78
-
In the `head`we can change the `title`.
78
+
> In the `head`you can change the `title`.
79
79
80
-
Later, we'll add links to external resources like *stylesheets* and *meta* information.
80
+
Later, you'll add links to external resources like *stylesheets* and *meta* information.
81
81
82
82
What you put in the `head` is not visible in the page.
83
83
84
84
#### Body
85
85
86
-
We're dividing our page into sections, so let's create a few empty `section` tags inside the `body`.
86
+
We're dividing our page into sections.
87
+
88
+
> Create a few empty `section` tags inside the `body`.
87
89
88
-
```html
89
-
<section></section>
90
-
<section></section>
91
-
<section></section>
92
-
<section></section>
93
-
<section></section>
90
+
> ```html
91
+
...
92
+
<body>
93
+
<section></section>
94
+
<section></section>
95
+
<section></section>
96
+
<section></section>
97
+
<section></section>
98
+
</body>
99
+
</html>
94
100
```
95
101
96
102
#### Headings
97
103
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>
104
+
> In the **first section** add a `div`. Inside that, add a **heading** (`h1`) and a **sub-heading** (`h2`).
105
+
106
+
> ```html
107
+
...
108
+
<body>
109
+
<section>
110
+
<div>
111
+
<h1>Your name</h2>
112
+
<h2>Your specialties, eg: film maker</h2>
113
+
</div>
114
+
</section>
115
+
...
107
116
```
108
117
118
+
These will be the most important pieces of information in your page (for search engines like Google).
119
+
109
120
#### Images
110
121
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
-
<imgsrc="profilepic.jpg"alt="Describe this image">
122
+
Images are worth thousands of words, they say. So let's upload one to start with.
123
+
124
+
> To upload an image to Thimble, click on the green `+` on the top-left and the `Upload...`
125
+
126
+
The **image** to upload could be your logo or your profile picture.
127
+
128
+
> Once you've uploaded your picture, in that same `div`, underneath the headings, add an `<img>` code and set its `src` (source) to your image file, like so
129
+
130
+
> ```html
131
+
...
132
+
<h2>Your specialties, eg: film maker</h2>
133
+
<imgsrc="YOUR_IMAGE_FILE.jpg"alt="DESCRIBE THIS IMAGE">
134
+
</div>
135
+
...
115
136
```
116
137
117
138
#### Text
118
139
119
-
We'll have two sections with**textual content**, so let's write something in there.
140
+
> In the second section we'll have**textual content**, so let's write something in there.
120
141
121
-
```html
142
+
> ```html
143
+
...
144
+
<section> ... this is the first section ... </section>
122
145
<section>
123
146
<p>Write something here to introduce your project and the ideas behind it.</p>
124
147
<p>A little information about the process you took from research through to the development.</p>
125
148
<p>You process is important!</p>
126
149
</section>
150
+
...
127
151
```
128
152
129
153
`p` is for *paragraph*.
130
154
131
155
#### Hyperlinks
132
156
133
-
We can add **hyperlinks** to our content using the `a` element (`a` is for *anchor*).
157
+
> Add **hyperlinks** to your content using the `a` element (`a` is for *anchor*).
0 commit comments