Schalk Venter
🔧 Front-end Development / 🎨 UI Design / 🌍 Social Good / ❤️ Destigmatising mental illness
Web Development
Lets build your first website!
Table of Contents
What is the Web?
Taking stock
Buckling Up
Before we start
Your First Website
Right here, right now.
🌌
👨🚀
🚀
🌌 What is the Web?
Tacking stock
What is This?
Spoiler: the answer is not Facebook
A Website
You already know more than you realize
A Website
Where do browsers get websites?
Beyond Vision
Browsers
?
Browsers
Servers
Servers
Where do they get websites?
Browsers
Servers
Developers
What do they give servers?
Developers
Users
Servers
Code
Developers
Code
How do developers make it?
The Reality
It's more boring than you think
👨🚀 Buckling Up
Before we start
What is Code?
Types of Code
Back-end:
- Sit in chair
- face towards audience
- stand for applause
Front-end:
- play note C#,
- play note B-,
- play note D,
Usually split between roles
Coding Languages
Back-end:
- Sit in chair
- face towards audience
- stand for applause
Front-end:
- play note C#,
- play note B-,
- play note D,
Back-end Stacks
etc, etc, etc...
LAMP
MEAN
Subliminal Messaging
Initial Example
Back-end: Get food, deliver to table 41, ask for drinks
Front-end: 3 eggs + 1kg flour + 1 pinch salt + 2L milk
Types of Code
Imperative
Declarative
Types of Code
Imperative
Declarative
"a programming paradigm [...] expresses the logic of a computation without describing its control flow. [...] programs describe their desired results without explicitly listing commands or steps that must be performed."
Wikipedia
Declarative Programming
Declarative Code
<body>
<ul>
<li>This is first item</li>
<li>This is second item</li>
<li>This is third item</li>
</ul>
</body>"a programming paradigm [...] expresses the logic of a computation without describing its control flow. [...] programs describe their desired results without explicitly listing commands or steps that must be performed."
Wikipedia
Declarative Programming
Declarative Code
<body>
<ul>
<li>This is first item</li>
<li>This is second item</li>
<li>This is third item</li>
</ul>
</body>"a programming paradigm [...] expresses the logic of a computation without describing its control flow. [...] programs describe their desired results without explicitly listing commands or steps that must be performed."
Wikipedia
Declarative Programming
<body>
<ul>
<li>This is first item</li>
<li>This is second item</li>
<li>This is third item</li>
</ul>
</body>Declarative Code
"a programming paradigm [...] expresses the logic of a computation without describing its control flow. [...] programs describe their desired results without explicitly listing commands or steps that must be performed."
Wikipedia
Declarative Programming
<body>
<ul>
<li>This is first item</li>
<li>This is second item</li>
<li>This is third item</li>
</ul>
</body>Declarative Code
"a programming paradigm [...] expresses the logic of a computation without describing its control flow. [...] programs describe their desired results without explicitly listing commands or steps that must be performed."
Wikipedia
Declarative Programming
<body>
<ul>
<li>This is first item</li>
<li>This is second item</li>
<li>This is third item</li>
</ul>
</body>Declarative Code
"a programming paradigm [...] expresses the logic of a computation without describing its control flow. [...] programs describe their desired results without explicitly listing commands or steps that must be performed."
Wikipedia
Declarative Programming
<body>
<ul>
<li>This is first item</li>
<li>This is second item</li>
<li>This is third item</li>
</ul>
</body>Declarative Code
Wikipedia
Imperative Programming
Imperative Code
const list = document.createElement('ul')
const text = ['first', 'second', 'third']
const items = text.map((value) =>
document.createElement('li')
)
items.forEach((node, index) => {
node.innerText =
`This is the ${text[index]} item`
list.appendChild(node)
})
document.body.appendChild(list)"...a programming paradigm that uses statements that change a program's state [...] an imperative program consists of commands for the computer to perform. Imperative programming focuses on describing how..."
Wikipedia
Imperative Programming
"...a programming paradigm that uses statements that change a program's state [...] an imperative program consists of commands for the computer to perform. Imperative programming focuses on describing how..."
Imperative Code
const list = document.createElement('ul')
const text = ['first', 'second', 'third']
const items = text.map((value) =>
document.createElement('li')
)
items.forEach((node, index) => {
node.innerText =
`This is the ${text[index]} item`
list.appendChild(node)
})
document.body.appendChild(list)Wikipedia
Imperative Programming
Imperative Code
const list = document.createElement('ul')
const text = ['first', 'second', 'third']
const items = text.map((value) =>
document.createElement('li')
)
items.forEach((node, index) => {
node.innerText =
`This is the ${text[index]} item`
list.appendChild(node)
})
document.body.appendChild(list)"...a programming paradigm that uses statements that change a program's state [...] an imperative program consists of commands for the computer to perform. Imperative programming focuses on describing how..."
Wikipedia
Imperative Programming
Imperative Code
const list = document.createElement('ul')
const text = ['first', 'second', 'third']
const items = text.map((value) =>
document.createElement('li')
)
items.forEach((node, index) => {
node.innerText =
`This is the ${text[index]} item`
list.appendChild(node)
})
document.body.appendChild(list)"...a programming paradigm that uses statements that change a program's state [...] an imperative program consists of commands for the computer to perform. Imperative programming focuses on describing how..."
Wikipedia
Imperative Programming
Imperative Code
const list = document.createElement('ul')
const text = ['first', 'second', 'third']
const items = text.map((value) =>
document.createElement('li')
)
items.forEach((node, index) => {
node.innerText =
`This is the ${text[index]} item`
list.appendChild(node)
})
document.body.appendChild(list)"...a programming paradigm that uses statements that change a program's state [...] an imperative program consists of commands for the computer to perform. Imperative programming focuses on describing how..."
The Same Output
<body>
<ul>
<li>This is first item</li>
<li>This is second item</li>
<li>This is third item</li>
</ul>
</body>const list = document.createElement('ul')
const text = ['first', 'second', 'third']
const items = text.map((value) =>
document.createElement('li')
)
items.forEach((node, index) => {
node.innerText =
`This is the ${text[index]} item`
list.appendChild(node)
})
document.body.appendChild(list)Types of Code
Imperative
Declarative
Preprocessing
Imperative
Declarative
🚀 Your First Website
Right here, right now
Web Development Lets build your first website!
Web Development
By Schalk Venter
Web Development
Lets build your first website!
- 574
