This document outlines the steps to create two basic websites using HTML and CSS. For the first website, it describes creating the HTML structure with a container, header, blog post, and footer sections. It then details writing the HTML code for each section and linking an external CSS stylesheet to style the webpage. Similar steps are followed for the second website, including defining the HTML structure, writing the code, linking the CSS, and styling elements like the container, header, content and footer. The document concludes by thanking the reader.

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