Code First: Girls
Spring/Summer 2016
Welcome!
We're happy you're here!
- Introduce yourselves:
- Standard stuff (name, degree/job, year of study, favourite dessert)
- What was the first website you ever visited?
- What is your favourite technology?
- What do you think of when you think of a developer?
- What did you want to be when you were 10?
Ada Lovelace & Margaret Hamilton
Who am I
MEng MathComp @ UCL :)
Web Developer
I started coding in Front-End and I love everything JavaScript.
Also speak C, Python and Java :)
Fun Fact!
I wanted to be an actress when I was younger
![](https://s3.amazonaws.com/media-p.slid.es/uploads/441510/images/2177338/diana.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/441510/images/2177354/doyouGIF.gif)
The Web
Coding
Dev Tools
Checklist!
Do you have...
- Google Chrome?
- Sublime Text?
- A GitHub account?
- GitHub Desktop Client?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/441510/images/2177414/screenshot.png)
What makes a website?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/441510/images/2177794/filestructure.png)
files of a basic website
There are no secrets in HTML, CSS or JS
Find out using Google Chrome Dev Tools
THE INTERNET
What people think
![](https://s3.amazonaws.com/media-p.slid.es/uploads/441510/images/2178251/IPv6.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/441510/images/2178257/LOLcloud.png)
THE INTERNET
Reality
![](https://s3.amazonaws.com/media-p.slid.es/uploads/441510/images/2178268/realCloud.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/441510/images/2178271/le-cloud.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/441510/images/2178381/Wireless-Router.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/441510/images/2178387/internet.gif)
Client
Makes requests for information, and takes information from users
Server
Responds with requested information, and stores information from users
![](https://s3.amazonaws.com/media-p.slid.es/uploads/441510/images/2178284/client_server.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/441510/images/2178293/How-The-Internet-Works.jpg)
Type in 74.125.224.72 - where does it go?
Static
already prepared
e.g. a simple landing page
Dynamic
generated on the fly
e.g. facebook.com
Websites usually come in two flavours...
They need to be hosted on a web server to be publicly available
Let's get started!
Hyper Text Markup Language
What is a markup language?
Why index.html?
In the old days of the web, navigating a website was a lot more like moving around the folder system on your laptop.
You would go to a base site and there would just be a list of the files and folders available: an index.
Try creating an HTML page yourself! :)
<img src="cutecat.jpg" alt="Cute Cat">
<div class="main">
Elements - define semantic value
Opening Tag
Closing Tag
Attribute type
Attribute value
These are HTML Tags
YES
NO
<div>
<p>
<em>I <strong>really</strong> mean that</em>.
</p>
</div>
<div> <p> <em>I <strong>really</em> mean</div> that</strong>.</p>
Writing readable code is very important.
The HTML DOM
Document Object Model
So what does this mean?
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
...
</body>
</html>
Version
Metainformation
Content
Your turn!
Homework
Watch the CSS video!
Send me your github username on Slack!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/441510/images/2178355/baracktocat.jpg)
Code First: Girls UCL Session 1
By Diana K. Lee
Code First: Girls UCL Session 1
Intro to Front-End
- 1,151