Freeformers starting to code

freeformers.com/digitalmissions
Copyright © 2013 Freeformers Ltd.
2
This pack will challenge you and provide the tools on how to make your very own
website.
Useful for all sorts of things: your business, portfolio or just to express your undyin
We have a list of awesome digital projects that you can browse here:
www.freeformers.com/digitalmissions
We recommend starting with this one:
Find it, click it a
The steps should be self-explanato

Challenge One :
1) Open up JSBin.com in your browser (we don’t recommend Internet Explorer)
2) Register on JSBin (save your work)
3) Begin writing some HTML in the HTML window!
Answers over the page! Don’t flip over till you’ve given it a go!
3
3

4
Where to write your HTML
What is HTML (Hyper Text Markup Language)?
– It’s the bricks and mortar of any website, mobile app and videogame
– Without HTML you won’t have an app
– Style (CSS) and interaction (JavaScript) is built upon and refers back to your HTML
so you need this to start off
Begin writing between the <body> and </body> tags

If you want to add something and you don't
know what HTML tag to use: Google it!!
Usually you will find W3 Schools which is
great general resource for beginner coders
Some HTML Example Code
5

6
What’s a JSBin?
JSBin is an online text editor.
It saves things to the Cloud so you can work from anywhere.
To create a new HTML
document, use the
BINS menu: ‘New’
Super
Important:
Register as user
so work is saved
If JSBin sometimes pulls up an animated example page.
Click Bins > New to get rid of it.
Bad internet sometimes JSBin doesn’t load your work properly.
If your having trouble just refresh the page
JSBin autosaves but to
manually save work
click ‘Create Milestone’
Having Issues?

Challenge Two :
Get an image on your website.
7

Inserting an image in JSBin
1) Insert an empty image tag
The HTML img tag needs
the source of the image (a
URL). You can leave the alt
attribute empty
JSBin Shortcut
1) Type img in JSBin
2) Hit the Tab key
3) That produces
<img src="" alt="">
4) Add the image you
want (next slide)
8

9
When you’ve found
the image copy image
URL
Do not copy Google
search URL
(it won’t work)
2) Finding the image on the Web
9

10
This is OK, but could be made a lot nicer looking. Now we need CSS (next slide)
This URL is what was copied as the
image location goes here in the
<img> tag. Make sure it goes
between the two double quotes.
10
3) Adding image location to <img> tag

Challenge Three :
Style your content! Chang your title in green.
11
In order to move on to CSS you
need to open the CSS tab

Styling your h1 tag
12
This is the styling part of the website
Make sure you:
1) Use matching curly brackets
2) End with a semicolon.
(also note: the American spelling)

Enhancing Text
● You can change the look of paragraphs, headings, etc. with CSS
– As usual, use Google to find what you can do
Remember to include 'CSS'
in the Google search.
(see next slide)
Some basic CSS
commands but there are
literally millions.
13
What is CSS (Cascading Style Sheets)?
– It’s the lick of paint for your brick and mortar house
– You can add fonts, styles, colours and change sizes so your website looks less nineties!
– It’s called Cascading Style sheets because the style lower down the page overwrites the styles
higher up the page.

Challenge Four :
Give your website a background colour
14

Styling body
First you need to figure out which HTML tag to refer to in CSS to change the whole page.
You can change the background to a colour.
15

Challenge Five :
Give your website a background image

18
Great! You’re Done.
Submit submission for your first website!

19
Need Help?
Use the Freeformers Forums
www.forums.freeformers.com/

Freeformers starting to code

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (17)

Similar to Freeformers starting to code

Similar to Freeformers starting to code (20)

Recently uploaded

Recently uploaded (20)

Freeformers starting to code