Starting web development

A presentation at Web Development Workshop: DAAD in March 2019 in Awka, Nigeria by Joy Uchenna

Slide 1

Slide 1

Starting Web Development

Slide 2

Slide 2

Hello! Joy is my name, and I am a Software Engineer @joyadauche

Slide 3

Slide 3

What is the web really? How does the internet work?

Slide 4

Slide 4

So? What happens when I type google.com or any other url/uri

Slide 5

Slide 5

Enough Talk! Let us dive into HTML https://github.com/joymichs/daad-web-dev-workshop/tree/html

Slide 6

Slide 6

Let us give style to HTML using CSS https://github.com/joymichs/daad-web-dev-workshop/tree/css

Slide 7

Slide 7

Slide 8

Slide 8

Slide 9

Slide 9

Some Web design/development principles

Slide 10

Slide 10

  • Font-sizes between 15 and 20 px. - Line-spacing between 120% and 150% - Choose good looking fonts: Google fonts

Slide 11

Slide 11

  • When you put text directly on images: - Overlay the image - Blur the image

Slide 12

Slide 12

  • Use icons to list features and steps

Slide 13

Slide 13

  • Put whitespace between your: - elements - groups of elements - website’s section

Slide 14

Slide 14

Responsive Layouts and then CSS Flexbox Demo Source: peter sommerhoff

Slide 15

Slide 15

Flex-Containers Flex-items flex-direction justify-content align-items flex-wrap order align-self flex-grow flex-shrink flex-basis

Slide 16

Slide 16

Let us build a website from scratch

Slide 17

Slide 17

Small Talks

Slide 18

Slide 18

Thank You @joyadauche