html + css examples

HTML + CSS Examples

MOHAMED LOEY

Agenda

Part I: Website1

Part II: Website 2

Website 1

STEP 1: The site HTML structure

Container Header

h1

p

Blog-post h2

p

em

Footer h3

p

STEP 2: WRITING THE HTML

Header

Code:

STEP 2: WRITING THE HTML

Blog-post

STEP 2: WRITING THE HTML

Code:

STEP 2: WRITING THE HTML

Footer

Code:

STEP 2: WRITING THE HTML

Container

Code:

STEP 3: HTML Webpage

STEP 3: HTML Webpage

Code:

STEP 4: Link CSS with HTML

Code:

STEP 5: Adding our style sheet

Body:

Result: Code:

STEP 5: Adding our style sheet

Container :

Result: Code:

STEP 5: Adding our style sheet

Header & Footer :

Result: Code:

STEP 5: Adding our style sheet

Footer :

Result: Code:

STEP 5: Adding our style sheet

Lead:

Result: Code:

STEP 5: Adding our style sheet

Blog-post:

Result: Code:

STEP 5: Adding our style sheet

H1,H2,H3:

Result: Code:

STEP 5: Adding our style sheet

Blog-post h2,p,em:

Result: Code:

STEP 6: Final CSS File

STEP 7: Your first Website with HTML and CSS

Website 2

STEP 1: The site HTML structure

Container

Header

H1

Navigation

ul

Content-container

Content

H2

P

Footer

STEP 2: WRITING THE HTML

Header

Code:

STEP 2: WRITING THE HTML

Navigation

Code:

STEP 2: WRITING THE HTML

Content-container

Code:

STEP 2: WRITING THE HTML

Footer

Code:

STEP 3: HTML Webpage

STEP 3: HTML Webpage

Code:

STEP 4: Link CSS with HTML

Code:

STEP 5: Adding our style sheet

Container:

Result: Code:

STEP 5: Adding our style sheet

Header :

Result: Code:

STEP 5: Adding our style sheet

Header :

Result: Code:

STEP 5: Adding our style sheet

Content:

Result: Code:

STEP 5: Adding our style sheet

Footer:

Result: Code:

STEP 6: Final CSS File

STEP 7: Your Second Website with HTML and CSS

THANK U