SlideShare a Scribd company logo
1 of 96
Download to read offline
Lunch & Learn: CSS
Oct 23 & 30 2013 // bswift
What we will talk about:
Front-end vs Back-end coding at bswift
Defining HTML, CSS and Javascript
How the client stylesheets work
Examples
Tools
Let’s get started!
Static Pages / Dynamic Pages
SERVER

page.html

page.html

page.html

A static website is a group of self-contained,
individual pages (or page), sent to the browser from
the server one-page-at-a-time.
.net

SERVER

page.html

SQL databases
HTML

Dyamic web content is built when it is requested,
by the user directly, or programmatically while
a user is on a page (e.g., facebook updates).
Most websites contain both static and dynamic elements.
front-end

SERVER
REQUEST

HTML
CSS
Javascript

thanks!

Can I have
a webpage,
please?

.net

SQL databases

back-end “recipe”

SERVER
RESPONSE
Server-side / Client-side
aka

Back End / Front-end
.net
.asp
SQL

page.html

SERVER

BROWSER
style.css

etc
script.js

Client-side (front-end) coding includes HTML, CSS
and Javascript. This just means that our code will be
downloaded from the server and then compiled
entirely in the browser.
HTML, CSS, Javascript
Three layers of web design:
Structure, Style, Behavior
BEHAVIOR
Javascript

PRESENTATION
CSS
Imagery

STRUCTURE
HTML markup
Site planning

Three layers of web design
Three layers of web design
Three layers of web design
Three layers of web design
Three layers of web design
HTML
Hyper Text
+
Markup Language
Hyper Text
Markup Language
A markup language is a
set of markup tags.
The purpose of the tags is to
group and describe page content.
Markup Language
Without any markup to give your content structure, the
browser renders unformatted and unstyled text, also
known as “plain text”.
Html / CSS Presentation
Markup Language
HTML tags give structure and meaning to your content.
“Semantic markup” refers to the use of meaningful tags to
describe content (e.g. using header tags for header content).
Markup Language
Once your content is marked up, the browser applies built-in
default styles to the tags. While you can override these styles
with css, your marked up, non-css styled document should be
readable and have a clear hierarchy.
doctype
html
head
body
EXCEPTION

<!DOCTYPE html>
The doctype is not actually a tag,
but a declaration, telling the browser
what kind of html you are using. The
doctype above declares HTML 5.
<html></html>

The <html> element defines
the whole HTML document.
<head></head>
The <head> element contains special
elements that instruct the browser
where to find stylesheets, provide meta
info, and more.
<body></body>

The <body> element contains
the document content (what is shown
inside the browser window).
Nesting
The use of our first three tags (html, head and body),
introduces and important concept: Nesting, which is when
tags “wrap” other tags. When you create markup, you should
indicate nesting by indenting the nested tags with 2 spaces
(preferred) or a tab.
<html>
<head> </head>
<body>
<h1></h1>
<p></p>
</body>
</html>
Document Hierarchy: Parents, children and siblings
Just as in a genealogy tree, the family hierarchy is described in
terms of relationships. All elements in the document have a
parent (up to ‘document’, which is at the top), and may have
children (nested inside) or siblings (placed alongside).

<parent x>
<child and sibling y> </child and sibling y>
<child and sibling z> </child and sibling z>
</parent x>
The ‘address’ of an element
The document hierarchy provides us with an ‘address’ for each
element.

in the div with class “client-text-container”, make all of the h2
elements orange and 24px.
HTML Elements
Anatomy of an Element

<tag>Content</tag>
An HTML element includes both
the HTML tag and everything between
the tag (the content).
Anatomy of an Element

<tag>Content</tag>
Tags normally come in pairs. The
first tag is the start tag, and the second
tag is the end tag.
Anatomy of an Element

<h1>Main Headline</h1>
HTML has a defined set of tag
names (also called keywords) that
the browser understands.
The essential element tags
Primary
Structure
html

Structural
Elements
(block)

Formatting
Elements
(inline)

head

p

em

body

br
h1 – h6
ul
ol
a
img
(div)

i
strong

Head
Elements
title
meta
link

b
q
blockquote
(span)
Anatomy of an Element

<html lang=”en”></html>
Most elements can have attributes,
which provides additional information
about the element.
Anatomy of an Element

<div class=”left-nav”></div>
Attributes always follow the same
format: name=”value”. You can use
either single or double quotes.
The essential attributes

link

<link rel=”stylesheet” type-”text/css” href=”stylesheet/styles.css”>

img

<img src=”images/image.jpg” alt=”Sam”>

a

<a href=”http://colum.edu”>My school</a>
CSS
Cascading
+
Style Sheet
The Stylesheet
A stylesheet is a set of rules defining
how an html element will be “presented”
in the browser.
These rules are targeted to specific
elements in the html document.
The Cascade
The “cascade” part of CSS is a set of rules
for resolving conflicts with multiple CSS
rules applied to the same elements.
For example, if there are two rules defining
the color or your h1 elements, the rule that
comes last in the cascade order will
“trump” the other.
low importance

Browser stylesheet

high importance

Linked (external) stylesheet

Embedded (internal) stylesheet

Inline (internal) Styles
Html / CSS Presentation
Inheritance
Most elements will inherit many style properties
from their parent elements by default.
HTML

relationship

<body>
<div>
<ul>
<li></li>
</ul>
</div>
</body>

parent of site
parent of ul and li, child of body
parent of li, child of div and body
child of ul, div, and body
Inheritance
body
make the paragraph 16px, Verdana, red
p
make the paragraph blue

16px, Verdana, blue
Specificity
Shortly after styling your first html elements,
you will find yourself wanting more control over
where your styles are applied.
This is where specificity comes in.
Specificity refers to how specific your selector is
in naming an element.
Specificity
body
make the paragraph 16px, Verdana, red
p
make the paragraph blue
p.pink
make the paragraph pink
16px, Verdana, pink
HTML

<div id=”plan-2323”>
<p>Here is some text.</p>
<p>Hide this text.</p>
<div>

<div id=”plan-2323”>
<p>Here is some text.</p>
<p class=”hideclass”>Hide this text.</p>
<div>
CSS

#plan-2323.hideclass {display: none}
Html / CSS Presentation
CSS Syntax

Syntax = the rules for how to write the language
Three terms for describing your styles:

CSS rule
CSS selector
CSS declaration
CSS Rule

selector {property: value;}
declaration

Every style is defined by a selector and
a declaration. The declaration contains at least
one property/value pair.Together they are
called a CSS Rule.
CSS Selector
body {font-family: Arial, Helvetica}
p {color: #666666}
h1 {font-size: 24px}
a {color: blue}

The selector associates css rules with
HTML elements.
CSS Selector
p {
color: red
}

The selector is typed in front of the declaration,
with a space separating it and the opening
curly-bracket (aka curly-brace).
Typically, extra spaces and returns are added as
shown for the sake of readability.
CSS Selector
h1,h2,h3,h4 {
font-weight: bold
}

You can apply styles to multiple selectors in the
same rule by separating the selectors with
commas.
CSS Declaration
p {
property: value
}

The declaration is always defined in a property/
value pair. The two are separated by a colon.
How you define the properties will affect how
HTML elements are displayed.
CSS Declaration
p {
font-family: Arial, sans-serif;
font-size: 14px;
color: #666666;
}

You can apply multiple declarations to a
selector(s) by separating the delcarations with
semi-colons.
CSS Selectors
p

Type (element)

#

ID

.

Class
Type (element) Selectors
body {declaration}
p {declaration}
h1 {declaration}
ul {declaration}

The simplest selector is the type selector, which
targets an html element by name.
The essential selector types (elements)
Primary
Structure
html

Body
Elements
p

Formatting
Elements
em

body

br

i

h1 – h6
ul
ol
a
img
div

strong
b
q
blockquote
span
ID Selectors
CSS

#logo {declaration}
HTML

<img id=”logo” src=”” alt=””>

An ID is an html attribute that is added to your
html markup. You reference that ID in your css
with a hash.
Class Selectors
CSS

.ingredients {declaration}
HTML

<ul class=”ingredients”>

A class is an html attribute that is added to your
html markup. You reference that ID in your css
with a period.
IDs vs Classes

The most important difference between IDs
and classes is that there can be only one ID
on a page, but multiple classes.
An ID is more specific than a class.
An element can have both an ID and
multiple classes.
IDs vs Classes

ID: #344-34-4344
Class: Male
Class: Employee

ID: #123-54-9877
Class: Female
Class: Employee
Descendant Selectors
CSS

#sidebar .author {declaration}
HTML

<div id=”sidebar”>
<p class=”author”></p>
</div>

A space between two selectors indicates a
descendant selector. In the example above, the
style is targeted to an element with the class
“author” inside the id “sidebar”.
Multiple classes
CSS

.ingredients.time {declaration}
HTML

<div class=”ingredients time”>
<h1></h1>
</div>

Elements can have multiple classes, giving you
more control. The are written in the CSS in the
exact order they appear in the html, with no
spaces.
bswift Client Stylesheets
Html / CSS Presentation
Html / CSS Presentation
Common uses:

Hiding elements
Tweaking specific text styles
Branding
Some things you can change with CSS
colors
type
type size
backgrounds
spacing
sizes
borders
positions (layout)
Some things you can’t change with CSS
content
markup
Example:

Client text + Client CSS
Html / CSS Presentation
Html / CSS Presentation
Example:

Login Branding
Html / CSS Presentation
Html / CSS Presentation
Html / CSS Presentation
Html / CSS Presentation
Html / CSS Presentation
Html / CSS Presentation
Html / CSS Presentation
Html / CSS Presentation
Example:

Login Examples
Html / CSS Presentation
Html / CSS Presentation
Html / CSS Presentation
Html / CSS Presentation
END NOTES

You are not expected to write
your own html & css
If you do, please run it by the UX team
Apply big changes only to ‘safe’ pages
Make sure we aren’t just fixing symptoms
Don’t make changes that damage
usability / readability / legibility
Tools
Html / CSS Presentation
Html / CSS Presentation

More Related Content

What's hot

What's hot (20)

Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to Javascript
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
 
HTML5 & CSS3
HTML5 & CSS3 HTML5 & CSS3
HTML5 & CSS3
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
 
Web Development using HTML & CSS
Web Development using HTML & CSSWeb Development using HTML & CSS
Web Development using HTML & CSS
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
 
css.ppt
css.pptcss.ppt
css.ppt
 
Css selectors
Css selectorsCss selectors
Css selectors
 
Basic Html Notes
Basic Html NotesBasic Html Notes
Basic Html Notes
 
Java script
Java scriptJava script
Java script
 
Intro Html
Intro HtmlIntro Html
Intro Html
 
JavaScript - An Introduction
JavaScript - An IntroductionJavaScript - An Introduction
JavaScript - An Introduction
 
HTML (Web) basics for a beginner
HTML (Web) basics for a beginnerHTML (Web) basics for a beginner
HTML (Web) basics for a beginner
 
HTML/CSS/java Script/Jquery
HTML/CSS/java Script/JqueryHTML/CSS/java Script/Jquery
HTML/CSS/java Script/Jquery
 
Javascript
JavascriptJavascript
Javascript
 
Html ppt
Html pptHtml ppt
Html ppt
 

Viewers also liked

HTML presentation for beginners
HTML presentation for beginnersHTML presentation for beginners
HTML presentation for beginnersjeroenvdmeer
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet pptabhilashagupta
 
3. tutorial html web desain
3. tutorial html web desain3. tutorial html web desain
3. tutorial html web desainfaizibra
 
[Old] Curso de programação web dia 01
[Old] Curso de programação web dia 01[Old] Curso de programação web dia 01
[Old] Curso de programação web dia 01ailton bsj
 
HTML Web Platform
HTML Web PlatformHTML Web Platform
HTML Web Platformdynamis
 
Introduction au Génie Logiciel
Introduction au Génie LogicielIntroduction au Génie Logiciel
Introduction au Génie Logicielguest0032c8
 
WebSide - eBrouchure & Presentation
WebSide - eBrouchure & PresentationWebSide - eBrouchure & Presentation
WebSide - eBrouchure & PresentationWebSide
 
The Future of the Web: HTML5
The Future of the Web: HTML5The Future of the Web: HTML5
The Future of the Web: HTML5Derek Bender
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksAmit Tyagi
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to htmlvikasgaur31
 
Ppt of web development
Ppt of web developmentPpt of web development
Ppt of web developmentbethanygfair
 

Viewers also liked (18)

CSS ppt
CSS pptCSS ppt
CSS ppt
 
HTML presentation for beginners
HTML presentation for beginnersHTML presentation for beginners
HTML presentation for beginners
 
Basic css-tutorial
Basic css-tutorialBasic css-tutorial
Basic css-tutorial
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet ppt
 
Cookie and session
Cookie and sessionCookie and session
Cookie and session
 
3. tutorial html web desain
3. tutorial html web desain3. tutorial html web desain
3. tutorial html web desain
 
HTTP & HTML & Web
HTTP & HTML & WebHTTP & HTML & Web
HTTP & HTML & Web
 
[Old] Curso de programação web dia 01
[Old] Curso de programação web dia 01[Old] Curso de programação web dia 01
[Old] Curso de programação web dia 01
 
HTML Web Platform
HTML Web PlatformHTML Web Platform
HTML Web Platform
 
Introduction au Génie Logiciel
Introduction au Génie LogicielIntroduction au Génie Logiciel
Introduction au Génie Logiciel
 
WebSide - eBrouchure & Presentation
WebSide - eBrouchure & PresentationWebSide - eBrouchure & Presentation
WebSide - eBrouchure & Presentation
 
Introduction to WEB HTML, CSS
Introduction to WEB HTML, CSSIntroduction to WEB HTML, CSS
Introduction to WEB HTML, CSS
 
The Future of the Web: HTML5
The Future of the Web: HTML5The Future of the Web: HTML5
The Future of the Web: HTML5
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Cookies!
Cookies!Cookies!
Cookies!
 
Ppt of web development
Ppt of web developmentPpt of web development
Ppt of web development
 

Similar to Html / CSS Presentation

CSS Foundations, pt 1
CSS Foundations, pt 1CSS Foundations, pt 1
CSS Foundations, pt 1Shawn Calvert
 
Class Intro / HTML Basics
Class Intro / HTML BasicsClass Intro / HTML Basics
Class Intro / HTML BasicsShawn Calvert
 
HTML Foundations, part 1
HTML Foundations, part 1HTML Foundations, part 1
HTML Foundations, part 1Shawn Calvert
 
CSS Foundations, pt 2
CSS Foundations, pt 2CSS Foundations, pt 2
CSS Foundations, pt 2Shawn Calvert
 
Html, css and jquery introduction
Html, css and jquery introductionHtml, css and jquery introduction
Html, css and jquery introductioncncwebworld
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2Erin M. Kidwell
 
HTML Foundations, pt 2
HTML Foundations, pt 2HTML Foundations, pt 2
HTML Foundations, pt 2Shawn Calvert
 
Introduction to Html5, css, Javascript and Jquery
Introduction to Html5, css, Javascript and JqueryIntroduction to Html5, css, Javascript and Jquery
Introduction to Html5, css, Javascript and Jqueryvaluebound
 
Industrial training report
Industrial training report Industrial training report
Industrial training report Akash Kr Sinha
 
Intro webtechstc
Intro webtechstcIntro webtechstc
Intro webtechstccmcsubho
 

Similar to Html / CSS Presentation (20)

CSS Foundations, pt 1
CSS Foundations, pt 1CSS Foundations, pt 1
CSS Foundations, pt 1
 
Class Intro / HTML Basics
Class Intro / HTML BasicsClass Intro / HTML Basics
Class Intro / HTML Basics
 
PHP HTML CSS Notes
PHP HTML CSS  NotesPHP HTML CSS  Notes
PHP HTML CSS Notes
 
HTML Foundations, part 1
HTML Foundations, part 1HTML Foundations, part 1
HTML Foundations, part 1
 
CSS Foundations, pt 2
CSS Foundations, pt 2CSS Foundations, pt 2
CSS Foundations, pt 2
 
Web technologies part-2
Web technologies part-2Web technologies part-2
Web technologies part-2
 
Pfnp slides
Pfnp slidesPfnp slides
Pfnp slides
 
Week 2-intro-html
Week 2-intro-htmlWeek 2-intro-html
Week 2-intro-html
 
Html, css and jquery introduction
Html, css and jquery introductionHtml, css and jquery introduction
Html, css and jquery introduction
 
HTML and CSS Basics
HTML and CSS BasicsHTML and CSS Basics
HTML and CSS Basics
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
 
CSS.pdf
CSS.pdfCSS.pdf
CSS.pdf
 
HTML Foundations, pt 2
HTML Foundations, pt 2HTML Foundations, pt 2
HTML Foundations, pt 2
 
Presentation
PresentationPresentation
Presentation
 
Html Workshop
Html WorkshopHtml Workshop
Html Workshop
 
Introduction to Html5, css, Javascript and Jquery
Introduction to Html5, css, Javascript and JqueryIntroduction to Html5, css, Javascript and Jquery
Introduction to Html5, css, Javascript and Jquery
 
Industrial training report
Industrial training report Industrial training report
Industrial training report
 
Css
CssCss
Css
 
Rational HATS and CSS
Rational HATS and CSSRational HATS and CSS
Rational HATS and CSS
 
Intro webtechstc
Intro webtechstcIntro webtechstc
Intro webtechstc
 

More from Shawn Calvert

Basics of Web Navigation
Basics of Web NavigationBasics of Web Navigation
Basics of Web NavigationShawn Calvert
 
User Centered Design
User Centered DesignUser Centered Design
User Centered DesignShawn Calvert
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web DesignShawn Calvert
 
Web Design I Syllabus 22 3375-03
Web Design I Syllabus 22 3375-03Web Design I Syllabus 22 3375-03
Web Design I Syllabus 22 3375-03Shawn Calvert
 
Intro to Javascript and jQuery
Intro to Javascript and jQueryIntro to Javascript and jQuery
Intro to Javascript and jQueryShawn Calvert
 
HTML Foundations, pt 3: Forms
HTML Foundations, pt 3: FormsHTML Foundations, pt 3: Forms
HTML Foundations, pt 3: FormsShawn Calvert
 
10 Usability & UX Guidelines
10 Usability & UX Guidelines10 Usability & UX Guidelines
10 Usability & UX GuidelinesShawn Calvert
 
Usability and User Experience
Usability and User ExperienceUsability and User Experience
Usability and User ExperienceShawn Calvert
 
Creating Images for the Web
Creating Images for the WebCreating Images for the Web
Creating Images for the WebShawn Calvert
 
Web Design 1: Introductions
Web Design 1: IntroductionsWeb Design 1: Introductions
Web Design 1: IntroductionsShawn Calvert
 
22-3530, Photo Communications Syllabus
22-3530, Photo Communications Syllabus22-3530, Photo Communications Syllabus
22-3530, Photo Communications SyllabusShawn Calvert
 
An Overview of Stock Photography
An Overview of Stock PhotographyAn Overview of Stock Photography
An Overview of Stock PhotographyShawn Calvert
 

More from Shawn Calvert (20)

HTML Email
HTML EmailHTML Email
HTML Email
 
Basics of Web Navigation
Basics of Web NavigationBasics of Web Navigation
Basics of Web Navigation
 
User Centered Design
User Centered DesignUser Centered Design
User Centered Design
 
Intro to jQuery
Intro to jQueryIntro to jQuery
Intro to jQuery
 
Images on the Web
Images on the WebImages on the Web
Images on the Web
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
 
Web Layout
Web LayoutWeb Layout
Web Layout
 
Web Typography
Web TypographyWeb Typography
Web Typography
 
Web Design I Syllabus 22 3375-03
Web Design I Syllabus 22 3375-03Web Design I Syllabus 22 3375-03
Web Design I Syllabus 22 3375-03
 
Intro to Javascript and jQuery
Intro to Javascript and jQueryIntro to Javascript and jQuery
Intro to Javascript and jQuery
 
HTML Foundations, pt 3: Forms
HTML Foundations, pt 3: FormsHTML Foundations, pt 3: Forms
HTML Foundations, pt 3: Forms
 
10 Usability & UX Guidelines
10 Usability & UX Guidelines10 Usability & UX Guidelines
10 Usability & UX Guidelines
 
Usability and User Experience
Usability and User ExperienceUsability and User Experience
Usability and User Experience
 
Creating Images for the Web
Creating Images for the WebCreating Images for the Web
Creating Images for the Web
 
Web Design Process
Web Design ProcessWeb Design Process
Web Design Process
 
Web Design 1: Introductions
Web Design 1: IntroductionsWeb Design 1: Introductions
Web Design 1: Introductions
 
22-3530, Photo Communications Syllabus
22-3530, Photo Communications Syllabus22-3530, Photo Communications Syllabus
22-3530, Photo Communications Syllabus
 
An Overview of Stock Photography
An Overview of Stock PhotographyAn Overview of Stock Photography
An Overview of Stock Photography
 
Color Photography
Color PhotographyColor Photography
Color Photography
 
PSA posters
PSA postersPSA posters
PSA posters
 

Recently uploaded

Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 

Recently uploaded (20)

Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 

Html / CSS Presentation