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
 

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
 

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)

Cyber security cyber security cyber security cyber security cyber security cy...
Cyber security cyber security cyber security cyber security cyber security cy...Cyber security cyber security cyber security cyber security cyber security cy...
Cyber security cyber security cyber security cyber security cyber security cy...
pranavbodhak
 
New Ways to Reduce Database Costs with ScyllaDB
New Ways to Reduce Database Costs with ScyllaDBNew Ways to Reduce Database Costs with ScyllaDB
New Ways to Reduce Database Costs with ScyllaDB
ScyllaDB
 
Evaluation Challenges in Using Generative AI for Science & Technical Content
Evaluation Challenges in Using Generative AI for Science & Technical ContentEvaluation Challenges in Using Generative AI for Science & Technical Content
Evaluation Challenges in Using Generative AI for Science & Technical Content
Paul Groth
 
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 ADr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr. Jimmy Schwarzkopf
 
MCP Dev Summit - Pragmatic Scaling of Enterprise GenAI with MCP
MCP Dev Summit - Pragmatic Scaling of Enterprise GenAI with MCPMCP Dev Summit - Pragmatic Scaling of Enterprise GenAI with MCP
MCP Dev Summit - Pragmatic Scaling of Enterprise GenAI with MCP
Sambhav Kothari
 
Content and eLearning Standards: Finding the Best Fit for Your-Training
Content and eLearning Standards: Finding the Best Fit for Your-TrainingContent and eLearning Standards: Finding the Best Fit for Your-Training
Content and eLearning Standards: Finding the Best Fit for Your-Training
Rustici Software
 
Splunk Leadership Forum Wien - 20.05.2025
Splunk Leadership Forum Wien - 20.05.2025Splunk Leadership Forum Wien - 20.05.2025
Splunk Leadership Forum Wien - 20.05.2025
Splunk
 
Marko.js - Unsung Hero of Scalable Web Frameworks (DevDays 2025)
Marko.js - Unsung Hero of Scalable Web Frameworks (DevDays 2025)Marko.js - Unsung Hero of Scalable Web Frameworks (DevDays 2025)
Marko.js - Unsung Hero of Scalable Web Frameworks (DevDays 2025)
Eugene Fidelin
 
Offshore IT Support: Balancing In-House and Offshore Help Desk Technicians
Offshore IT Support: Balancing In-House and Offshore Help Desk TechniciansOffshore IT Support: Balancing In-House and Offshore Help Desk Technicians
Offshore IT Support: Balancing In-House and Offshore Help Desk Technicians
john823664
 
Cyber Security Legal Framework in Nepal.pptx
Cyber Security Legal Framework in Nepal.pptxCyber Security Legal Framework in Nepal.pptx
Cyber Security Legal Framework in Nepal.pptx
Ghimire B.R.
 
Master tester AI toolbox - Kari Kakkonen at Testaus ja AI 2025 Professio
Master tester AI toolbox - Kari Kakkonen at Testaus ja AI 2025 ProfessioMaster tester AI toolbox - Kari Kakkonen at Testaus ja AI 2025 Professio
Master tester AI toolbox - Kari Kakkonen at Testaus ja AI 2025 Professio
Kari Kakkonen
 
Introducing FME Realize: A New Era of Spatial Computing and AR
Introducing FME Realize: A New Era of Spatial Computing and ARIntroducing FME Realize: A New Era of Spatial Computing and AR
Introducing FME Realize: A New Era of Spatial Computing and AR
Safe Software
 
Protecting Your Sensitive Data with Microsoft Purview - IRMS 2025
Protecting Your Sensitive Data with Microsoft Purview - IRMS 2025Protecting Your Sensitive Data with Microsoft Purview - IRMS 2025
Protecting Your Sensitive Data with Microsoft Purview - IRMS 2025
Nikki Chapple
 
Supercharge Your AI Development with Local LLMs
Supercharge Your AI Development with Local LLMsSupercharge Your AI Development with Local LLMs
Supercharge Your AI Development with Local LLMs
Francesco Corti
 
Let’s Get Slack Certified! 🚀- Slack Community
Let’s Get Slack Certified! 🚀- Slack CommunityLet’s Get Slack Certified! 🚀- Slack Community
Let’s Get Slack Certified! 🚀- Slack Community
SanjeetMishra29
 
UiPath Community Zurich: Release Management and Build Pipelines
UiPath Community Zurich: Release Management and Build PipelinesUiPath Community Zurich: Release Management and Build Pipelines
UiPath Community Zurich: Release Management and Build Pipelines
UiPathCommunity
 
Grannie’s Journey to Using Healthcare AI Experiences
Grannie’s Journey to Using Healthcare AI ExperiencesGrannie’s Journey to Using Healthcare AI Experiences
Grannie’s Journey to Using Healthcare AI Experiences
Lauren Parr
 
Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...
Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...
Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...
Aaryan Kansari
 
European Accessibility Act & Integrated Accessibility Testing
European Accessibility Act & Integrated Accessibility TestingEuropean Accessibility Act & Integrated Accessibility Testing
European Accessibility Act & Integrated Accessibility Testing
Julia Undeutsch
 
SDG 9000 Series: Unleashing multigigabit everywhere
SDG 9000 Series: Unleashing multigigabit everywhereSDG 9000 Series: Unleashing multigigabit everywhere
SDG 9000 Series: Unleashing multigigabit everywhere
Adtran
 
Cyber security cyber security cyber security cyber security cyber security cy...
Cyber security cyber security cyber security cyber security cyber security cy...Cyber security cyber security cyber security cyber security cyber security cy...
Cyber security cyber security cyber security cyber security cyber security cy...
pranavbodhak
 
New Ways to Reduce Database Costs with ScyllaDB
New Ways to Reduce Database Costs with ScyllaDBNew Ways to Reduce Database Costs with ScyllaDB
New Ways to Reduce Database Costs with ScyllaDB
ScyllaDB
 
Evaluation Challenges in Using Generative AI for Science & Technical Content
Evaluation Challenges in Using Generative AI for Science & Technical ContentEvaluation Challenges in Using Generative AI for Science & Technical Content
Evaluation Challenges in Using Generative AI for Science & Technical Content
Paul Groth
 
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 ADr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr. Jimmy Schwarzkopf
 
MCP Dev Summit - Pragmatic Scaling of Enterprise GenAI with MCP
MCP Dev Summit - Pragmatic Scaling of Enterprise GenAI with MCPMCP Dev Summit - Pragmatic Scaling of Enterprise GenAI with MCP
MCP Dev Summit - Pragmatic Scaling of Enterprise GenAI with MCP
Sambhav Kothari
 
Content and eLearning Standards: Finding the Best Fit for Your-Training
Content and eLearning Standards: Finding the Best Fit for Your-TrainingContent and eLearning Standards: Finding the Best Fit for Your-Training
Content and eLearning Standards: Finding the Best Fit for Your-Training
Rustici Software
 
Splunk Leadership Forum Wien - 20.05.2025
Splunk Leadership Forum Wien - 20.05.2025Splunk Leadership Forum Wien - 20.05.2025
Splunk Leadership Forum Wien - 20.05.2025
Splunk
 
Marko.js - Unsung Hero of Scalable Web Frameworks (DevDays 2025)
Marko.js - Unsung Hero of Scalable Web Frameworks (DevDays 2025)Marko.js - Unsung Hero of Scalable Web Frameworks (DevDays 2025)
Marko.js - Unsung Hero of Scalable Web Frameworks (DevDays 2025)
Eugene Fidelin
 
Offshore IT Support: Balancing In-House and Offshore Help Desk Technicians
Offshore IT Support: Balancing In-House and Offshore Help Desk TechniciansOffshore IT Support: Balancing In-House and Offshore Help Desk Technicians
Offshore IT Support: Balancing In-House and Offshore Help Desk Technicians
john823664
 
Cyber Security Legal Framework in Nepal.pptx
Cyber Security Legal Framework in Nepal.pptxCyber Security Legal Framework in Nepal.pptx
Cyber Security Legal Framework in Nepal.pptx
Ghimire B.R.
 
Master tester AI toolbox - Kari Kakkonen at Testaus ja AI 2025 Professio
Master tester AI toolbox - Kari Kakkonen at Testaus ja AI 2025 ProfessioMaster tester AI toolbox - Kari Kakkonen at Testaus ja AI 2025 Professio
Master tester AI toolbox - Kari Kakkonen at Testaus ja AI 2025 Professio
Kari Kakkonen
 
Introducing FME Realize: A New Era of Spatial Computing and AR
Introducing FME Realize: A New Era of Spatial Computing and ARIntroducing FME Realize: A New Era of Spatial Computing and AR
Introducing FME Realize: A New Era of Spatial Computing and AR
Safe Software
 
Protecting Your Sensitive Data with Microsoft Purview - IRMS 2025
Protecting Your Sensitive Data with Microsoft Purview - IRMS 2025Protecting Your Sensitive Data with Microsoft Purview - IRMS 2025
Protecting Your Sensitive Data with Microsoft Purview - IRMS 2025
Nikki Chapple
 
Supercharge Your AI Development with Local LLMs
Supercharge Your AI Development with Local LLMsSupercharge Your AI Development with Local LLMs
Supercharge Your AI Development with Local LLMs
Francesco Corti
 
Let’s Get Slack Certified! 🚀- Slack Community
Let’s Get Slack Certified! 🚀- Slack CommunityLet’s Get Slack Certified! 🚀- Slack Community
Let’s Get Slack Certified! 🚀- Slack Community
SanjeetMishra29
 
UiPath Community Zurich: Release Management and Build Pipelines
UiPath Community Zurich: Release Management and Build PipelinesUiPath Community Zurich: Release Management and Build Pipelines
UiPath Community Zurich: Release Management and Build Pipelines
UiPathCommunity
 
Grannie’s Journey to Using Healthcare AI Experiences
Grannie’s Journey to Using Healthcare AI ExperiencesGrannie’s Journey to Using Healthcare AI Experiences
Grannie’s Journey to Using Healthcare AI Experiences
Lauren Parr
 
Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...
Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...
Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...
Aaryan Kansari
 
European Accessibility Act & Integrated Accessibility Testing
European Accessibility Act & Integrated Accessibility TestingEuropean Accessibility Act & Integrated Accessibility Testing
European Accessibility Act & Integrated Accessibility Testing
Julia Undeutsch
 
SDG 9000 Series: Unleashing multigigabit everywhere
SDG 9000 Series: Unleashing multigigabit everywhereSDG 9000 Series: Unleashing multigigabit everywhere
SDG 9000 Series: Unleashing multigigabit everywhere
Adtran
 

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