Web Design
101
Erick
erickdelfin.me
We
Web Developer
@erickpy
Why Web Design?
You don't know Web Design?
Web Technologies
0
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>.container {
background: green;
text-align: center;
}
.title {
font-size: 30px;
}const panels = document.querySelectorAll('.panel');
function toggleOpen() {
this.classList.toggle('open');
}
function toggleActive(e) {
console.log(e.propertyName);
if (e.propertyName.includes('flex')) {
this.classList.toggle('open-active')
}
}
Layouts
1
Fixed
Fluid
Adaptive
Responsive
Colors
2
Why should you care about color?
Colors
16,800,000
Color Representation
rgb(0, 0, 0) = black
rgb(255, 255, 255) = white
#ffffff = white
#000000 = white
RGB
HEX
Monochrome
Complimentary
Triadic
Fonts
3
Graphics
4
Visual impact & communication
- Logos
- Images
- Graphics
https://muzzleapp.com/
Resources
www.awwwards.com
www.codepen.io/
tympanus.net/codrops/
https://www.codecademy.com/
Learn Web Dev
Web Design 101
By Nifled -
