[ENG] VO Website Maken
crash course
Building websites
Items in this lesson
crash course
Building websites
Schedule
What do you know about the web? (5 min)
Part A → Building a website from thin air (35 min)
Part B → Generating a website using AI (15 min)
Goal
At the end of this lesson you'll be able to describe the way of the internet
You'll be able to build a simple site using HTML and JavaScript
You can make simple webpages with the help of artificial intelligence
Question
What happens when you go to instagram.com?
The way of the web
Laptop
instagram.com
AP
Laptop
The way of the web
Access Point
wireless via Wi-Fi
AP
Laptop
The way of the web
Modem
Connects our building to the global internet
AP
Modem
DNS
Laptop
The way of the web
Domain Name System
Street names for domain names
instagram.com -> 57.144.222.34
AP
DNS
Server
Laptop
The way of the web
Modem
Webservers of Instagram
(somewhere in Europe)
AP
Modem
DNS
Server
Laptop
The way of the web
Sends a HTML-file back to our modem
AP
Modem
DNS
Server
Laptop
The way of the web
Back to the access point
AP
Modem
DNS
Server
Laptop
The way of the web
From the access point to our laptop
AP
Modem
DNS
Server
Laptop
The way of the web
Google Chrome converts the HTML file from code to something visible
The way of the web
Round trip through Europe in less then 100 milliseconds
Requirements
HTML
Browser
(Web) server
Requirements: HTML
HyperText Markup Language
Structure of the website
Uses CSS for styling (how does it look)
Uses JavaScript for interaction (what happens)
Requirements: server
A dedicated computer running one or more websites (host).
Usually in a datacenter for 24/7 uptime, fast internet and reliable electricity
Requirements: browser
Able to request webpages from the world wide web
Converts HTML, CSS & JavaScript from code to something humans can see.
Part A: building a simple site
Simple webpage with JavaScript interations
Part A: building a simple site
Laptop with Visual Studio Code
Web browser for rendering HTML
Part B: website via AI
Easy deployments of websites through ChatGPT or Copilot
Prompt: Make me a HTML page for a my little pony fanpage using bootstrap 5.
Part B: website via AI
Exercise: let AI generate a website for your hobby/game/interest
Tip: instruct the AI to generate HTML
using Bootstrap 5
Downside of AI websites
Generic designs
Limited functionalities because of a complex curve
A lot of innefficient and unmaintanable code
Little control over details and changes
Severe security and privacy risks
Conclusion
At the end of this lesson you'll be able to describe the way of the internet
You'll be able to build a simple site using HTML and JavaScript
You can make simple webpages with the help of artificial intelligence
