Introductory class to HTML and CSS

1. CODE CREW | INTRO TO HTML + CSS
INTRO TO
HTML + CSS
Jamal O’Garro
Code Crew
Software Engineer + Instructor

2. CODE CREW | INTRO TO HTML + CSS
CLASS ROADMAP

3. CODE CREW | INTRO TO HTML + CSS
WHAT IS HTML?

4. CODE CREW | INTRO TO HTML + CSS
WHAT IS HTML? (continued)

5. CODE CREW | INTRO TO HTML + CSS
HTML STRUCTURE
• Similar to a news article or word document
• Header, paragraphs, images
• Elements tell the browser what part is a header,
paragraph, etc.

6. CODE CREW | INTRO TO HTML + CSS
HTML STRUCTURE (continued)

7. CODE CREW | INTRO TO HTML + CSS
HTML ELEMENTS

8. HTML ELEMENTS (continued)
Head
Paragraph
Link
Image
List
List Item
Table
Div
Span
Section
Nav
Article
Header/Footer
Video
CODE CREW | INTRO TO HTML + CSS

9. CODE CREW | INTRO TO HTML + CSS
EXERCISE

10. CODE CREW | INTRO TO HTML + CSS
HTML5 ELEMENTS
<header>
<nav>
<section>
<article/div>
<aside>
<footer>
* Article can have header and footer

11. CODE CREW | INTRO TO HTML + CSS
HTML5 ELEMENTS (continued)
Audio
Video
Canvas
Geolocation WebAPI

12. CODE CREW | INTRO TO HTML + CSS
WHAT IS CSS?

13. CODE CREW | INTRO TO HTML + CSS
CSS RULES

14. CSS SELECTORS
element
class
id
CODE CREW | INTRO TO HTML + CSS

15. CODE CREW | INTRO TO HTML + CSS
CSS PROPERTIES
color
font-family
font-size
background-color
background-image
border
margin
padding

16. CODE CREW | INTRO TO HTML + CSS
THE BOX MODEL

17. CODE CREW | INTRO TO HTML + CSS
BLOCK ELEMENTS

18. CODE CREW | INTRO TO HTML + CSS
INLINE ELEMENTS

19. CODE CREW | INTRO TO HTML + CSS
CSS POSITIONING

20. CODE CREW | INTRO TO HTML + CSS
CSS POSITIONING (continued)

21. CODE CREW | INTRO TO HTML + CSS
CSS POSITIONING (continued)

22. CODE CREW | INTRO TO HTML + CSS
CSS POSITIONING (continued)

23. CODE CREW | INTRO TO HTML + CSS
RESPONSIVE DESIGN

24. CODE CREW | INTRO TO HTML + CSS
WHAT IS BOOTSTRAP?

25. BOOTSTRAP CLASSES
btn
btn-lg
btn-primary
success
danger
table
table-striped
CODE CREW | INTRO TO HTML + CSS

26. CODE CREW | INTRO TO HTML + CSS
THE GRID

27. CODE CREW | INTRO TO HTML + CSS
THANKS MUCH!!!
Jamal O’Garro
Code Crew
Software Engineer + Instructor