SlideShare a Scribd company logo
CODE CREW | INTRO TO HTML + CSS 
INTRO TO 
HTML + CSS 
Jamal O’Garro 
Code Crew 
Software Engineer + Instructor
CODE CREW | INTRO TO HTML + CSS 
CLASS ROADMAP
CODE CREW | INTRO TO HTML + CSS 
WHAT IS HTML?
CODE CREW | INTRO TO HTML + CSS 
WHAT IS HTML? (continued)
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.
CODE CREW | INTRO TO HTML + CSS 
HTML STRUCTURE (continued)
CODE CREW | INTRO TO HTML + CSS 
HTML ELEMENTS
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
CODE CREW | INTRO TO HTML + CSS 
EXERCISE
CODE CREW | INTRO TO HTML + CSS 
HTML5 ELEMENTS 
<header> 
<nav> 
<section> 
<article/div> 
<aside> 
<footer> 
* Article can have header and footer
CODE CREW | INTRO TO HTML + CSS 
HTML5 ELEMENTS (continued) 
Audio 
Video 
Canvas 
Geolocation WebAPI
CODE CREW | INTRO TO HTML + CSS 
WHAT IS CSS?
CODE CREW | INTRO TO HTML + CSS 
CSS RULES
CSS SELECTORS 
element 
class 
id 
CODE CREW | INTRO TO HTML + CSS
CODE CREW | INTRO TO HTML + CSS 
CSS PROPERTIES 
color 
font-family 
font-size 
background-color 
background-image 
border 
margin 
padding
CODE CREW | INTRO TO HTML + CSS 
THE BOX MODEL
CODE CREW | INTRO TO HTML + CSS 
BLOCK ELEMENTS
CODE CREW | INTRO TO HTML + CSS 
INLINE ELEMENTS
CODE CREW | INTRO TO HTML + CSS 
CSS POSITIONING
CODE CREW | INTRO TO HTML + CSS 
CSS POSITIONING (continued)
CODE CREW | INTRO TO HTML + CSS 
CSS POSITIONING (continued)
CODE CREW | INTRO TO HTML + CSS 
CSS POSITIONING (continued)
CODE CREW | INTRO TO HTML + CSS 
RESPONSIVE DESIGN
CODE CREW | INTRO TO HTML + CSS 
WHAT IS BOOTSTRAP?
BOOTSTRAP CLASSES 
btn 
btn-lg 
btn-primary 
success 
danger 
table 
table-striped 
CODE CREW | INTRO TO HTML + CSS
CODE CREW | INTRO TO HTML + CSS 
THE GRID
CODE CREW | INTRO TO HTML + CSS 
THANKS MUCH!!! 
Jamal O’Garro 
Code Crew 
Software Engineer + Instructor

More Related Content

What's hot (20)

PDF
HTML/CSS Crash Course (april 4 2017)
Daniel Friedman
 
PPTX
Web Development Basics: HOW TO in HTML
Der Lo
 
PPTX
CSS Walktrough Internship Course
Zoltan Iszlai
 
PDF
Fundamental CSS3
Achmad Solichin
 
PDF
Web Design Course: CSS lecture 4
Gheyath M. Othman
 
PDF
Web front end development introduction to html css and javascript
Marc Huang
 
PDF
Introduction to HTML and CSS
Mario Hernandez
 
PDF
Lesson 02
Gene Babon
 
PDF
Web Design Course: CSS lecture 3
Gheyath M. Othman
 
PDF
Modular HTML, CSS, & JS Workshop
Shay Howe
 
PDF
Web Design Course: CSS lecture 2
Gheyath M. Othman
 
PDF
CSS3 Introduction
Jaeni Sahuri
 
PDF
Web Design Course: CSS lecture 5
Gheyath M. Othman
 
PPT
CSS Part I
Doncho Minkov
 
PDF
Web Design Course: CSS lecture 1
Gheyath M. Othman
 
PPT
CSS, CSS Selectors, CSS Box Model
jamiecavanaugh
 
PDF
HTML(5) and CSS(3) for beginners - I
vincentleeuwen
 
PDF
Unit 2 (it workshop)
Dr.Lokesh Gagnani
 
PPTX
About Best friends - HTML, CSS and JS
Naga Harish M
 
HTML/CSS Crash Course (april 4 2017)
Daniel Friedman
 
Web Development Basics: HOW TO in HTML
Der Lo
 
CSS Walktrough Internship Course
Zoltan Iszlai
 
Fundamental CSS3
Achmad Solichin
 
Web Design Course: CSS lecture 4
Gheyath M. Othman
 
Web front end development introduction to html css and javascript
Marc Huang
 
Introduction to HTML and CSS
Mario Hernandez
 
Lesson 02
Gene Babon
 
Web Design Course: CSS lecture 3
Gheyath M. Othman
 
Modular HTML, CSS, & JS Workshop
Shay Howe
 
Web Design Course: CSS lecture 2
Gheyath M. Othman
 
CSS3 Introduction
Jaeni Sahuri
 
Web Design Course: CSS lecture 5
Gheyath M. Othman
 
CSS Part I
Doncho Minkov
 
Web Design Course: CSS lecture 1
Gheyath M. Othman
 
CSS, CSS Selectors, CSS Box Model
jamiecavanaugh
 
HTML(5) and CSS(3) for beginners - I
vincentleeuwen
 
Unit 2 (it workshop)
Dr.Lokesh Gagnani
 
About Best friends - HTML, CSS and JS
Naga Harish M
 

Viewers also liked (8)

PDF
HTML CSS Best Practices
Den Widhana
 
PPTX
Web1O1 - Intro to HTML/CSS
NYCSS Meetup
 
PPTX
Web 101 intro to html
Hawkman Academy
 
PPT
Introduction to Javascript
Amit Tyagi
 
PPT
JavaScript - An Introduction
Manvendra Singh
 
PPT
Introduction to multimedia
Southern Leyte State University
 
PDF
JavaScript Programming
Sehwan Noh
 
HTML CSS Best Practices
Den Widhana
 
Web1O1 - Intro to HTML/CSS
NYCSS Meetup
 
Web 101 intro to html
Hawkman Academy
 
Introduction to Javascript
Amit Tyagi
 
JavaScript - An Introduction
Manvendra Singh
 
Introduction to multimedia
Southern Leyte State University
 
JavaScript Programming
Sehwan Noh
 
Ad

Similar to Intro to HTML + CSS (20)

PDF
Intro to HTML & CSS
Colin Loretz
 
PPTX
HTML5 for ASP.NET Developers
Justin Lee
 
PPT
Web development basics (Part-1)
Rajat Pratap Singh
 
PPTX
HTMLforbeginerslearntocodeforbeginersinfh
enisp1
 
PPTX
2h landing page
AndryRajohnson
 
PDF
The Ring programming language version 1.10 book - Part 55 of 212
Mahmoud Samir Fayed
 
PDF
HTML5 developer Certification
Vskills
 
PDF
Certified HTML5 Developer
Narender Rana
 
PPTX
Introduction to HTML+CSS+Javascript.pptx
PedroGonzalez915307
 
PPTX
Introduction to HTML+CSS+Javascript.pptx
SadiaBaig6
 
PDF
Implementing Awesome: An HTML5/CSS3 Workshop
Shoshi Roberts
 
PPT
Even faster web sites presentation 3
Felipe Lavín
 
PPTX
Html5 ppt
Rahul Gupta
 
PDF
GDI Seattle Intermediate HTML and CSS Class 1
Heather Rock
 
PDF
The Ring programming language version 1.5.3 book - Part 55 of 184
Mahmoud Samir Fayed
 
PDF
The Ring programming language version 1.5.3 book - Part 45 of 184
Mahmoud Samir Fayed
 
PPTX
Introduction to HTML+CSS+Javascript.pptx
AliRaza899305
 
PPTX
Introduction to HTML+CSS+Javascript.pptx
KADAMBARIPUROHIT
 
PPTX
Tech Winter Break - GDG on Campus - PIET
khushi15250705
 
PPTX
WEBSITE DESIGN AND DEVELOPMENT WITH CASCADING STYLE SHEETS(CSS)
brianbyamukama302
 
Intro to HTML & CSS
Colin Loretz
 
HTML5 for ASP.NET Developers
Justin Lee
 
Web development basics (Part-1)
Rajat Pratap Singh
 
HTMLforbeginerslearntocodeforbeginersinfh
enisp1
 
2h landing page
AndryRajohnson
 
The Ring programming language version 1.10 book - Part 55 of 212
Mahmoud Samir Fayed
 
HTML5 developer Certification
Vskills
 
Certified HTML5 Developer
Narender Rana
 
Introduction to HTML+CSS+Javascript.pptx
PedroGonzalez915307
 
Introduction to HTML+CSS+Javascript.pptx
SadiaBaig6
 
Implementing Awesome: An HTML5/CSS3 Workshop
Shoshi Roberts
 
Even faster web sites presentation 3
Felipe Lavín
 
Html5 ppt
Rahul Gupta
 
GDI Seattle Intermediate HTML and CSS Class 1
Heather Rock
 
The Ring programming language version 1.5.3 book - Part 55 of 184
Mahmoud Samir Fayed
 
The Ring programming language version 1.5.3 book - Part 45 of 184
Mahmoud Samir Fayed
 
Introduction to HTML+CSS+Javascript.pptx
AliRaza899305
 
Introduction to HTML+CSS+Javascript.pptx
KADAMBARIPUROHIT
 
Tech Winter Break - GDG on Campus - PIET
khushi15250705
 
WEBSITE DESIGN AND DEVELOPMENT WITH CASCADING STYLE SHEETS(CSS)
brianbyamukama302
 
Ad

More from Jamal Sinclair O'Garro (15)

PDF
A Look at TensorFlow.js
Jamal Sinclair O'Garro
 
PDF
Intro to React
Jamal Sinclair O'Garro
 
PDF
React + Redux for Web Developers
Jamal Sinclair O'Garro
 
PDF
Intro to ionic 2
Jamal Sinclair O'Garro
 
PDF
Intro to ES6 / ES2015
Jamal Sinclair O'Garro
 
PDF
The Ten Code Commandments
Jamal Sinclair O'Garro
 
PDF
Using TypeScript with Angular
Jamal Sinclair O'Garro
 
PDF
Intro to UI-Router/TypeScript
Jamal Sinclair O'Garro
 
PDF
Intro to Node.js
Jamal Sinclair O'Garro
 
PDF
Intro to iOS Development
Jamal Sinclair O'Garro
 
PDF
Introduction to AngularJS
Jamal Sinclair O'Garro
 
PDF
Intro to rails 2_kg_edited
Jamal Sinclair O'Garro
 
PDF
Intro to Ruby on Rails
Jamal Sinclair O'Garro
 
PDF
Intro to javascript (4 week)
Jamal Sinclair O'Garro
 
PDF
Intro to Programming
Jamal Sinclair O'Garro
 
A Look at TensorFlow.js
Jamal Sinclair O'Garro
 
Intro to React
Jamal Sinclair O'Garro
 
React + Redux for Web Developers
Jamal Sinclair O'Garro
 
Intro to ionic 2
Jamal Sinclair O'Garro
 
Intro to ES6 / ES2015
Jamal Sinclair O'Garro
 
The Ten Code Commandments
Jamal Sinclair O'Garro
 
Using TypeScript with Angular
Jamal Sinclair O'Garro
 
Intro to UI-Router/TypeScript
Jamal Sinclair O'Garro
 
Intro to Node.js
Jamal Sinclair O'Garro
 
Intro to iOS Development
Jamal Sinclair O'Garro
 
Introduction to AngularJS
Jamal Sinclair O'Garro
 
Intro to rails 2_kg_edited
Jamal Sinclair O'Garro
 
Intro to Ruby on Rails
Jamal Sinclair O'Garro
 
Intro to javascript (4 week)
Jamal Sinclair O'Garro
 
Intro to Programming
Jamal Sinclair O'Garro
 

Recently uploaded (20)

PPTX
MARTSIA: A Tool for Confidential Data Exchange via Public Blockchain - Pitch ...
Michele Kryston
 
PDF
Kubernetes - Architecture & Components.pdf
geethak285
 
PPTX
Mastering Authorization: Integrating Authentication and Authorization Data in...
Hitachi, Ltd. OSS Solution Center.
 
PDF
Unlocking FME Flow’s Potential: Architecture Design for Modern Enterprises
Safe Software
 
PPTX
2025 HackRedCon Cyber Career Paths.pptx Scott Stanton
Scott Stanton
 
PDF
Darley - FIRST Copenhagen Lightning Talk (2025-06-26) Epochalypse 2038 - Time...
treyka
 
PDF
DoS Attack vs DDoS Attack_ The Silent Wars of the Internet.pdf
CyberPro Magazine
 
PPTX
Practical Applications of AI in Local Government
OnBoard
 
PPTX
Smarter Governance with AI: What Every Board Needs to Know
OnBoard
 
PDF
Quantum AI Discoveries: Fractal Patterns Consciousness and Cyclical Universes
Saikat Basu
 
PPSX
Usergroup - OutSystems Architecture.ppsx
Kurt Vandevelde
 
PDF
99 Bottles of Trust on the Wall — Operational Principles for Trust in Cyber C...
treyka
 
PDF
5 Things to Consider When Deploying AI in Your Enterprise
Safe Software
 
PDF
Plugging AI into everything: Model Context Protocol Simplified.pdf
Abati Adewale
 
PPTX
Paycifi - Programmable Trust_Breakfast_PPTXT
FinTech Belgium
 
PDF
Understanding AI Optimization AIO, LLMO, and GEO
CoDigital
 
PDF
Redefining Work in the Age of AI - What to expect? How to prepare? Why it mat...
Malinda Kapuruge
 
PPTX
01_Approach Cyber- DORA Incident Management.pptx
FinTech Belgium
 
PDF
Optimizing the trajectory of a wheel loader working in short loading cycles
Reno Filla
 
PDF
Why aren't you using FME Flow's CPU Time?
Safe Software
 
MARTSIA: A Tool for Confidential Data Exchange via Public Blockchain - Pitch ...
Michele Kryston
 
Kubernetes - Architecture & Components.pdf
geethak285
 
Mastering Authorization: Integrating Authentication and Authorization Data in...
Hitachi, Ltd. OSS Solution Center.
 
Unlocking FME Flow’s Potential: Architecture Design for Modern Enterprises
Safe Software
 
2025 HackRedCon Cyber Career Paths.pptx Scott Stanton
Scott Stanton
 
Darley - FIRST Copenhagen Lightning Talk (2025-06-26) Epochalypse 2038 - Time...
treyka
 
DoS Attack vs DDoS Attack_ The Silent Wars of the Internet.pdf
CyberPro Magazine
 
Practical Applications of AI in Local Government
OnBoard
 
Smarter Governance with AI: What Every Board Needs to Know
OnBoard
 
Quantum AI Discoveries: Fractal Patterns Consciousness and Cyclical Universes
Saikat Basu
 
Usergroup - OutSystems Architecture.ppsx
Kurt Vandevelde
 
99 Bottles of Trust on the Wall — Operational Principles for Trust in Cyber C...
treyka
 
5 Things to Consider When Deploying AI in Your Enterprise
Safe Software
 
Plugging AI into everything: Model Context Protocol Simplified.pdf
Abati Adewale
 
Paycifi - Programmable Trust_Breakfast_PPTXT
FinTech Belgium
 
Understanding AI Optimization AIO, LLMO, and GEO
CoDigital
 
Redefining Work in the Age of AI - What to expect? How to prepare? Why it mat...
Malinda Kapuruge
 
01_Approach Cyber- DORA Incident Management.pptx
FinTech Belgium
 
Optimizing the trajectory of a wheel loader working in short loading cycles
Reno Filla
 
Why aren't you using FME Flow's CPU Time?
Safe Software
 

Intro to HTML + 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