What makes a Website?
Diana Lee
@duhrtyd
What was the first website you visited?
Since the start of software, things have grown tremendously quickly...
3 billion users online since 2014
Ada Lovelace & Margaret Hamilton
Who am I
MEng MathComp @ UCL :)
diana.click / github: parisandmilo
teach coding with Code First: Girls
Web Developer
I started coding in Front-End and I love everything JavaScript.
Also speak Python, Java, and C :)
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 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 216.58.204.46 - where does it go?
Static
already prepared and served locally
e.g. a simple landing page
Dynamic
generated on the fly and dependent on remote data
e.g. facebook.com
Websites usually come in two flavours...
Both need to be hosted on a web server to be publicly available
![](https://s3.amazonaws.com/media-p.slid.es/uploads/441510/images/3112462/Screen_Shot_2016-10-13_at_14.51.14.png)
What makes a website?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/441510/images/2177794/filestructure.png)
files of a basic website
content + additional resources
HTML
CSS
JavaScript
structure
style
interaction
There are no secrets in (front-end) HTML, CSS or JS
Dev Tools
So...
how do i make dynamic websites and web applications?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/441510/images/3117222/pic_htmltree.gif)
THE HTML DOM
Client application
Server application
database
PUT
POST
DELETE
GET
Document Object Model
But how?
You need a back-end service
RESTful web services :D
What next?
Could you build for the web?
Think about the applications we use today - how would you do it differently to truly make an impact?
WHAT PROBLEMS DO YOU WANT TO SOLVE?
WHICH LANGUAGE(S) SHOULD I LEARN?
WHAT DO YOU WANT TO BUILD?
- Application Development (Web & Mobile, Desktop)
- Intelligent Software & Data Analytics
- Operating Systems, Networks & Data Engineering
- Robots, Cars, Machines
What languages you pick depend on the type of problems you want to solve...
An example of the Full-Stack Engineer's repertoire
1) Knowing where to find things
2) Understanding Concepts
3) Always learning
![](https://s3.amazonaws.com/media-p.slid.es/uploads/441510/images/2178355/baracktocat.jpg)
What Makes a Website
By Diana K. Lee
What Makes a Website
Talk
- 564