HTML + CSS Examples

1. HTML + CSS
Examples
MOHAMED LOEY

2. Agenda
 Part I: Website1
 Part II: Website 2

3. Website 1

4. STEP 1: The site HTML structure
 Container
 Header
 h1
 p
 Blog-post
 h2
 p
 em
 Footer
 h3
 p

5. STEP 2: WRITING THE HTML
 Header
 Code:

6. STEP 2: WRITING THE HTML
 Blog-post

7. STEP 2: WRITING THE HTML
 Code:

8. STEP 2: WRITING THE HTML
 Footer
 Code:

9. STEP 2: WRITING THE HTML
 Container
 Code:

10. STEP 3: HTML Webpage

11. STEP 3: HTML Webpage
 Code:

12. STEP 4: Link CSS with HTML
 Code:

13. STEP 5: Adding our style sheet
 Body:
 Result: Code:

14. STEP 5: Adding our style sheet
 Container :
 Result: Code:

15. STEP 5: Adding our style sheet
 Header & Footer :
 Result: Code:

16. STEP 5: Adding our style sheet
 Footer :
 Result: Code:

17. STEP 5: Adding our style sheet
 Lead:
 Result: Code:

18. STEP 5: Adding our style sheet
 Blog-post:
 Result: Code:

19. STEP 5: Adding our style sheet
 H1,H2,H3:
 Result: Code:

20. STEP 5: Adding our style sheet
 Blog-post h2,p,em:
 Result: Code:

21. STEP 6: Final CSS File

22. STEP 7: Your first Website with HTML and CSS

23. Website 2

24. STEP 1: The site HTML structure
 Container
 Header
 H1
 Navigation
 ul
 Content-container
 Content
 H2
 P
 Footer

25. STEP 2: WRITING THE HTML
 Header
 Code:

26. STEP 2: WRITING THE HTML
 Navigation
 Code:

27. STEP 2: WRITING THE HTML
 Content-container
 Code:

28. STEP 2: WRITING THE HTML
 Footer
 Code:

29. STEP 3: HTML Webpage

30. STEP 3: HTML Webpage
 Code:

31. STEP 4: Link CSS with HTML
 Code:

32. STEP 5: Adding our style sheet
 Container:
 Result: Code:

33. STEP 5: Adding our style sheet
 Header :
 Result: Code:

34. STEP 5: Adding our style sheet
 Header :
 Result: Code:

35. STEP 5: Adding our style sheet
 Content:
 Result: Code:

36. STEP 5: Adding our style sheet
 Footer:
 Result: Code:

37. STEP 6: Final CSS File

38. STEP 7: Your Second Website with HTML and CSS

39. THANK U