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

Made with Slides.com