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)

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

Viewers also liked (8)

HTML CSS Best Practices
HTML CSS Best PracticesHTML CSS Best Practices
HTML CSS Best Practices
Den Widhana
 
Web1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSSWeb1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSS
NYCSS Meetup
 
Intro to CSS
Intro to CSSIntro to CSS
Intro to CSS
UC Berkeley Graduate School of Journalism
 
Web 101 intro to html
Web 101  intro to htmlWeb 101  intro to html
Web 101 intro to html
Hawkman Academy
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
Amit Tyagi
 
JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An Introduction
Manvendra Singh
 
Introduction to multimedia
Introduction to multimediaIntroduction to multimedia
Introduction to multimedia
Southern Leyte State University
 
JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript Programming
Sehwan Noh
 
Ad

Similar to Intro to HTML + CSS (20)

Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)
Thinkful
 
GDG On Campus NBNSCOE Web Workshop Day 1 : HTML & CSS
GDG On Campus  NBNSCOE Web Workshop Day 1 : HTML & CSSGDG On Campus  NBNSCOE Web Workshop Day 1 : HTML & CSS
GDG On Campus NBNSCOE Web Workshop Day 1 : HTML & CSS
udaymore742
 
IT2255 Web Essentials - Unit II Web Designing
IT2255 Web Essentials - Unit II  Web DesigningIT2255 Web Essentials - Unit II  Web Designing
IT2255 Web Essentials - Unit II Web Designing
pkaviya
 
Code & Design your first website 4/18
Code & Design your first website 4/18Code & Design your first website 4/18
Code & Design your first website 4/18
TJ Stalcup
 
HTML+CSS: how to get started
HTML+CSS: how to get startedHTML+CSS: how to get started
HTML+CSS: how to get started
Dimitris Tsironis
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
Eliran Eliassy
 
WELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptx
WELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptxWELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptx
WELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptx
HarshwardhanPatil52
 
EdTechJoker Spring 2020 - Lecture 4 - HTML
EdTechJoker Spring 2020 - Lecture 4 - HTMLEdTechJoker Spring 2020 - Lecture 4 - HTML
EdTechJoker Spring 2020 - Lecture 4 - HTML
Bryan Ollendyke
 
Tech Winter Break : Basics of Web Development
Tech Winter Break : Basics of Web DevelopmentTech Winter Break : Basics of Web Development
Tech Winter Break : Basics of Web Development
Vaishnavi186737
 
Tech Winter Break- GDG on Campus Bajaj Institute of Technology, Wardha
Tech Winter Break- GDG on Campus Bajaj Institute of Technology, WardhaTech Winter Break- GDG on Campus Bajaj Institute of Technology, Wardha
Tech Winter Break- GDG on Campus Bajaj Institute of Technology, Wardha
GDSCBITW1
 
Introduction to Web Development.pptx
Introduction to Web Development.pptxIntroduction to Web Development.pptx
Introduction to Web Development.pptx
GDSCVJTI
 
Introduction to Web Development.pptx
Introduction to Web Development.pptxIntroduction to Web Development.pptx
Introduction to Web Development.pptx
Alisha Kamat
 
Introduction to Web Development.pptx
Introduction to Web Development.pptxIntroduction to Web Development.pptx
Introduction to Web Development.pptx
Alisha Kamat
 
CSS
CSSCSS
CSS
Akila Iroshan
 
A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3
Darren Wood
 
slidesgo-mastering-html-and-css-a-comprehensive-guide-to-tags-and-elements-20...
slidesgo-mastering-html-and-css-a-comprehensive-guide-to-tags-and-elements-20...slidesgo-mastering-html-and-css-a-comprehensive-guide-to-tags-and-elements-20...
slidesgo-mastering-html-and-css-a-comprehensive-guide-to-tags-and-elements-20...
MrunmayiLohakare
 
2h landing page
2h landing page 2h landing page
2h landing page
AndryRajohnson
 
Tfbyoweb.4.9.17
Tfbyoweb.4.9.17Tfbyoweb.4.9.17
Tfbyoweb.4.9.17
Jordan Zurowski
 
Tfbyoweb.4.9.17
Tfbyoweb.4.9.17Tfbyoweb.4.9.17
Tfbyoweb.4.9.17
Jordan Zurowski
 
Intermediate Web Design
Intermediate Web DesignIntermediate Web Design
Intermediate Web Design
mlincol2
 
Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)
Thinkful
 
GDG On Campus NBNSCOE Web Workshop Day 1 : HTML & CSS
GDG On Campus  NBNSCOE Web Workshop Day 1 : HTML & CSSGDG On Campus  NBNSCOE Web Workshop Day 1 : HTML & CSS
GDG On Campus NBNSCOE Web Workshop Day 1 : HTML & CSS
udaymore742
 
IT2255 Web Essentials - Unit II Web Designing
IT2255 Web Essentials - Unit II  Web DesigningIT2255 Web Essentials - Unit II  Web Designing
IT2255 Web Essentials - Unit II Web Designing
pkaviya
 
Code & Design your first website 4/18
Code & Design your first website 4/18Code & Design your first website 4/18
Code & Design your first website 4/18
TJ Stalcup
 
HTML+CSS: how to get started
HTML+CSS: how to get startedHTML+CSS: how to get started
HTML+CSS: how to get started
Dimitris Tsironis
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
Eliran Eliassy
 
WELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptx
WELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptxWELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptx
WELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptx
HarshwardhanPatil52
 
EdTechJoker Spring 2020 - Lecture 4 - HTML
EdTechJoker Spring 2020 - Lecture 4 - HTMLEdTechJoker Spring 2020 - Lecture 4 - HTML
EdTechJoker Spring 2020 - Lecture 4 - HTML
Bryan Ollendyke
 
Tech Winter Break : Basics of Web Development
Tech Winter Break : Basics of Web DevelopmentTech Winter Break : Basics of Web Development
Tech Winter Break : Basics of Web Development
Vaishnavi186737
 
Tech Winter Break- GDG on Campus Bajaj Institute of Technology, Wardha
Tech Winter Break- GDG on Campus Bajaj Institute of Technology, WardhaTech Winter Break- GDG on Campus Bajaj Institute of Technology, Wardha
Tech Winter Break- GDG on Campus Bajaj Institute of Technology, Wardha
GDSCBITW1
 
Introduction to Web Development.pptx
Introduction to Web Development.pptxIntroduction to Web Development.pptx
Introduction to Web Development.pptx
GDSCVJTI
 
Introduction to Web Development.pptx
Introduction to Web Development.pptxIntroduction to Web Development.pptx
Introduction to Web Development.pptx
Alisha Kamat
 
Introduction to Web Development.pptx
Introduction to Web Development.pptxIntroduction to Web Development.pptx
Introduction to Web Development.pptx
Alisha Kamat
 
A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3
Darren Wood
 
slidesgo-mastering-html-and-css-a-comprehensive-guide-to-tags-and-elements-20...
slidesgo-mastering-html-and-css-a-comprehensive-guide-to-tags-and-elements-20...slidesgo-mastering-html-and-css-a-comprehensive-guide-to-tags-and-elements-20...
slidesgo-mastering-html-and-css-a-comprehensive-guide-to-tags-and-elements-20...
MrunmayiLohakare
 
Intermediate Web Design
Intermediate Web DesignIntermediate Web Design
Intermediate Web Design
mlincol2
 
Ad

More from Jamal Sinclair O'Garro (15)

A Look at TensorFlow.js
A Look at TensorFlow.jsA Look at TensorFlow.js
A Look at TensorFlow.js
Jamal Sinclair O'Garro
 
Intro to React
Intro to ReactIntro to React
Intro to React
Jamal Sinclair O'Garro
 
React + Redux for Web Developers
React + Redux for Web DevelopersReact + Redux for Web Developers
React + Redux for Web Developers
Jamal Sinclair O'Garro
 
Intro to ionic 2
Intro to ionic 2Intro to ionic 2
Intro to ionic 2
Jamal Sinclair O'Garro
 
Intro to ES6 / ES2015
Intro to ES6 / ES2015Intro to ES6 / ES2015
Intro to ES6 / ES2015
Jamal Sinclair O'Garro
 
The Ten Code Commandments
The Ten Code CommandmentsThe Ten Code Commandments
The Ten Code Commandments
Jamal Sinclair O'Garro
 
Using TypeScript with Angular
Using TypeScript with AngularUsing TypeScript with Angular
Using TypeScript with Angular
Jamal Sinclair O'Garro
 
Intro to UI-Router/TypeScript
Intro to UI-Router/TypeScriptIntro to UI-Router/TypeScript
Intro to UI-Router/TypeScript
Jamal Sinclair O'Garro
 
Intro to Node.js
Intro to Node.jsIntro to Node.js
Intro to Node.js
Jamal Sinclair O'Garro
 
Intro to iOS Development
Intro to iOS DevelopmentIntro to iOS Development
Intro to iOS Development
Jamal Sinclair O'Garro
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
Jamal Sinclair O'Garro
 
Intro to rails 2_kg_edited
Intro to rails 2_kg_editedIntro to rails 2_kg_edited
Intro to rails 2_kg_edited
Jamal Sinclair O'Garro
 
Intro to Ruby on Rails
Intro to Ruby on RailsIntro to Ruby on Rails
Intro to Ruby on Rails
Jamal Sinclair O'Garro
 
Intro to javascript (4 week)
Intro to javascript (4 week)Intro to javascript (4 week)
Intro to javascript (4 week)
Jamal Sinclair O'Garro
 
Intro to Programming
Intro to ProgrammingIntro to Programming
Intro to Programming
Jamal Sinclair O'Garro
 

Recently uploaded (20)

ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptxISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
AyilurRamnath1
 
vertical-cnc-processing-centers-drillteq-v-200-en.pdf
vertical-cnc-processing-centers-drillteq-v-200-en.pdfvertical-cnc-processing-centers-drillteq-v-200-en.pdf
vertical-cnc-processing-centers-drillteq-v-200-en.pdf
AmirStern2
 
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Infrassist Technologies Pvt. Ltd.
 
Soulmaite review - Find Real AI soulmate review
Soulmaite review - Find Real AI soulmate reviewSoulmaite review - Find Real AI soulmate review
Soulmaite review - Find Real AI soulmate review
Soulmaite
 
Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
Domino IQ – Was Sie erwartet, erste Schritte und AnwendungsfälleDomino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
panagenda
 
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
Safe Software
 
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
Your startup on AWS - How to architect and maintain a Lean and Mean account J...Your startup on AWS - How to architect and maintain a Lean and Mean account J...
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
angelo60207
 
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOMEstablish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Anchore
 
Oracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI FoundationsOracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI Foundations
VICTOR MAESTRE RAMIREZ
 
Jeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software DeveloperJeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software Developer
Jeremy Millul
 
MCP vs A2A vs ACP: Choosing the Right Protocol | Bluebash
MCP vs A2A vs ACP: Choosing the Right Protocol | BluebashMCP vs A2A vs ACP: Choosing the Right Protocol | Bluebash
MCP vs A2A vs ACP: Choosing the Right Protocol | Bluebash
Bluebash
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean accountYour startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
7 Salesforce Data Cloud Best Practices.pdf
7 Salesforce Data Cloud Best Practices.pdf7 Salesforce Data Cloud Best Practices.pdf
7 Salesforce Data Cloud Best Practices.pdf
Minuscule Technologies
 
Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025
Safe Software
 
FME Beyond Data Processing Creating A Dartboard Accuracy App
FME Beyond Data Processing Creating A Dartboard Accuracy AppFME Beyond Data Processing Creating A Dartboard Accuracy App
FME Beyond Data Processing Creating A Dartboard Accuracy App
Safe Software
 
Improving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevExImproving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevEx
Justin Reock
 
How to Detect Outliers in IBM SPSS Statistics.pptx
How to Detect Outliers in IBM SPSS Statistics.pptxHow to Detect Outliers in IBM SPSS Statistics.pptx
How to Detect Outliers in IBM SPSS Statistics.pptx
Version 1 Analytics
 
Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...
BookNet Canada
 
“How Qualcomm Is Powering AI-driven Multimedia at the Edge,” a Presentation f...
“How Qualcomm Is Powering AI-driven Multimedia at the Edge,” a Presentation f...“How Qualcomm Is Powering AI-driven Multimedia at the Edge,” a Presentation f...
“How Qualcomm Is Powering AI-driven Multimedia at the Edge,” a Presentation f...
Edge AI and Vision Alliance
 
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
Edge AI and Vision Alliance
 
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptxISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
AyilurRamnath1
 
vertical-cnc-processing-centers-drillteq-v-200-en.pdf
vertical-cnc-processing-centers-drillteq-v-200-en.pdfvertical-cnc-processing-centers-drillteq-v-200-en.pdf
vertical-cnc-processing-centers-drillteq-v-200-en.pdf
AmirStern2
 
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Infrassist Technologies Pvt. Ltd.
 
Soulmaite review - Find Real AI soulmate review
Soulmaite review - Find Real AI soulmate reviewSoulmaite review - Find Real AI soulmate review
Soulmaite review - Find Real AI soulmate review
Soulmaite
 
Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
Domino IQ – Was Sie erwartet, erste Schritte und AnwendungsfälleDomino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
panagenda
 
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
Safe Software
 
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
Your startup on AWS - How to architect and maintain a Lean and Mean account J...Your startup on AWS - How to architect and maintain a Lean and Mean account J...
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
angelo60207
 
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOMEstablish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Anchore
 
Oracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI FoundationsOracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI Foundations
VICTOR MAESTRE RAMIREZ
 
Jeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software DeveloperJeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software Developer
Jeremy Millul
 
MCP vs A2A vs ACP: Choosing the Right Protocol | Bluebash
MCP vs A2A vs ACP: Choosing the Right Protocol | BluebashMCP vs A2A vs ACP: Choosing the Right Protocol | Bluebash
MCP vs A2A vs ACP: Choosing the Right Protocol | Bluebash
Bluebash
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean accountYour startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
7 Salesforce Data Cloud Best Practices.pdf
7 Salesforce Data Cloud Best Practices.pdf7 Salesforce Data Cloud Best Practices.pdf
7 Salesforce Data Cloud Best Practices.pdf
Minuscule Technologies
 
Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025
Safe Software
 
FME Beyond Data Processing Creating A Dartboard Accuracy App
FME Beyond Data Processing Creating A Dartboard Accuracy AppFME Beyond Data Processing Creating A Dartboard Accuracy App
FME Beyond Data Processing Creating A Dartboard Accuracy App
Safe Software
 
Improving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevExImproving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevEx
Justin Reock
 
How to Detect Outliers in IBM SPSS Statistics.pptx
How to Detect Outliers in IBM SPSS Statistics.pptxHow to Detect Outliers in IBM SPSS Statistics.pptx
How to Detect Outliers in IBM SPSS Statistics.pptx
Version 1 Analytics
 
Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...
BookNet Canada
 
“How Qualcomm Is Powering AI-driven Multimedia at the Edge,” a Presentation f...
“How Qualcomm Is Powering AI-driven Multimedia at the Edge,” a Presentation f...“How Qualcomm Is Powering AI-driven Multimedia at the Edge,” a Presentation f...
“How Qualcomm Is Powering AI-driven Multimedia at the Edge,” a Presentation f...
Edge AI and Vision Alliance
 
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
Edge AI and Vision Alliance
 

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