SlideShare a Scribd company logo
1 of 133
Download to read offline
HTML & CSS
Course
Development - Training - Consulting
500tech.com
HTML & CSS
The basics
Layout
Fundamentals
SASS ANIMATIONS
bit.ly/css-html-course
About mySelf
• Experienced FE developer, specialised in B2C applications
• FE trainer & lecturer @ 500Tech
• Weekends FE developer @ fashbash.co
Tim Berners-lee invents the
World wide web
1990
1994
HTML 2
CSS introduced
1996
world wide web
is created
1998
XHTML is introduced -
Microsoft does not adopt it
HTML 4
2000
CSS 2
2006
HTML 5
2009
XHTML is stopped
2012
CSS 3
HTML
Hyper Text Markup Language
A markup language is a computer language that defines
the structure and presentation of raw text.
Markup languages work by surrounding raw text with
information the computer can interpret, "marking it up" to
be processed.
In HTML, the computer can interpret raw text that is
wrapped in HTML elements.
These elements are often nested inside one another, with
each containing information about the type and structure
of the information to be displayed in the browser.
<element> row text </element>
Hyper Text is text displayed on a computer or device that
provides access to other text through links, also known as
“hyperlinks.”
<html>
<head></head>
<body></body>
</html>
<html>
<head></head>
<body></body>
</html>
Tells the browser that the included text is HTML format
<html>
<head></head>
<body></body>
</html>
non-displaying information about the document,
like the TITLE and other descriptive tags
<html>
<head></head>
<body></body>
</html>
Defines the content of the document.
Body
elements
Style
elements
Anchor
elements
Image
elements
List
elements
Other
elements
Body
elements
Style
elements
Anchor
elements
Image
elements
List
elements
Other
elements
Body
elements
Style
elements
Anchor
elements
Image
elements
List
elements
Other
elements
H1 - H6 Section heading
P Defines paragraphs in the document.
BR
Puts a single break in the middle of a
paragraph, list item, etc.
HR
Runs a horizontal line across the page (or
table cell)
DIV
Division - Defines a particular section of the
document. Used to spread document
attributes across a whole section.
SPAN
used to group inline-elements in a
document
Body
elements
Style
elements
Anchor
elements
Image
elements
List
elements
Other
elements
IMG
Displays an 'inline' (embedded in the
document) image in the document.
Source (SRC="") gives the full or partial
URL of the image file to use.
ALT gives the alternative/caption text for
the image
Body
elements
Style
elements
Anchor
elements
Image
elements
List
elements
Other
elements
UL
Unordered list. Bullet List. Items in the list
are LI elements.
Lists can be nested.
OL
Ordered list. Numberd (or lettered) list.
Items in the list are LI elements.
Lists can be nested.
LI
List item. An item in a bullet or numbered
list.
DL
Definition list. A list of terms with definitions
or entries with annotations.
DT
In an annotated list, the item or term being
annotated
DD
In an annotated list, the annotation or
definition
Body
elements
Style
elements
Anchor
elements
Image
elements
List
elements
Other
elements
A href=“url”
Allows the user to retrieve the document at
the specified URL by clicking on the
contents of the element.
Body
elements
Style
elements
Anchor
elements
Image
elements
List
elements
Other
elements
STRONG
Strong emphasis. Generally displays as
Bold.
EM Emphasis. Generally displays as Italic.
CITE Citation. Generally displays as Italic.
CODE
Computer Code. Usually displays in a fixed
font.
B Bold
I Italic
U Underline
Body
elements
Style
elements
Anchor
elements
Image
elements
List
elements
Other
elements
<!- - - ->
Inserts a 'comment' which does not display
on the browser screen, but can be seen in
the file itself when viewing the source or
editing the HTML.
EXCERCISE - 1-3
Form
elements
Input
Textarea
Button
Checkbox
Label
Form
Output
<form oninput=“x.value=parseInt(a.value)">
<input type="range" id="a" value="50">

<output name="x" for="a"></output>

</form>
EXCERCISE - 4
Semantic HTML - Semantics is the study of the
meanings of words and phrases in a language.
Semantic elements = elements with a meaning.
A semantic element clearly describes its meaning to both
the browser and the developer.
<header /> <main /> <footer />
<article /> <details /> <aside />
<div /> <span />
<header /> <main /> <footer />
<article /> <details /> <aside />
<div /> <span />
CSS
Cascading Style Sheets (CSS) is a style sheet
language used for describing the presentation of a
document written in a markup language.
Inline External
CSS selector
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<h1>Hello HTML & CSS course</h1>

</body>

</html>
CSS selector
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<h1>Hello HTML & CSS course</h1>

</body>

</html>
h1 {

color: red;

font-size: 30px;

}
selector {

property: value;

}
Common properties
width
height
padding
margin
border
border-radius
line-height
background
opacity
visibility
cursor
font
font-size
font-weight
EXCERCISE - 4
classes and id’s
Selectors to memorize
* {

color: blue;

}
.title {

font-size: 12px;

}
#my-title {

font-size: 30px;

}
EXCERCISE
.classA .classB {

color: red;

}
.classA #my-id {

font-size: 12px;

}
.a .b .c .d{

font-size: 30px;

}
h1 {

color: red;

}
Button:hover {

background: blue;

}
input[type=“password”]{

font-size: 30px;

}
Target by element type
EXCERCISE
.classA + .classB {

color: red;

}
.classA ~ .classB {

font-size: 30px;

}
It will select only the element that is
immediately preceded by the former element.
#container > ul {

color: red;

}
direct children
It will select all the elements that match after classA
EXCERCISE
.classA:nth-child(3) {

color: red;

}
ul:nth-of-type(2) {

font-size: 30px;

}
.classB:nth-child(4n) {

color: red;

}
#my-id:first-child {

color: red;

}
#my-id:only-child {

font-size: 30px;

}
#my-id:last-child {

color: red;

}
EXCERCISE
Common web tools
https://www.cssmatic.com/box-shadow
http://www.colorzilla.com/gradient-editor/
https://www.cssmatic.com/border-radius
EXCERCISE
Length units
CSS has several different units for expressing a length.
Many CSS properties take "length" values, such as width,
margin, padding, font-size, border-width, etc.
cm Centimeters
mm Millimeters
in inches
px
pt 1pt = 1/72 of in
pc 1pc = 12pt
% Percentage
vh
1% of the height of
the viewport
vw
1% of the width of
the viewport
rem
relative to font size
of the root element
em
Relative to the font
size of the element
EXCERCISE
The meta tag
Metadata is data (information) about data.
The <meta> tag provides metadata about the HTML
document. Metadata will not be displayed on the page,
but will be machine parsable.
HTML5 introduced a method to let web designers take
control over the viewport, through the <meta> tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Layout Fundamentals
Layouting an HTML page is a lot like LEGO,
you start with the big blocks and build up
your page with smaller blocks of content.
Shay Keinan
LIVE DEMO - INSTAGRAM PAGE
All HTML elements can be considered as boxes.
In CSS, the term "box model" is used when talking about
design and layout. The CSS box model is essentially a
box that wraps around every HTML element.
Margin
Border
Content
Padding
content-box (default) border-box
width
padding
border
margin
width
padding
border
margin
The box-sizing property
Centering content
EXCERCISE
the display property
display is CSS's most important property for controlling
layout. Every element has a default display value
depending on what type of element it is.
The default for most elements is usually block or inline.
div is the standard block-level element. A block-level element starts on
a new line and stretches out to the left and right as far as it can.
span is the standard inline element. An inline
element can wrap some text inside a
paragraph <span> like this </span> without
disrupting the flow of that paragraph. The a
element is the most common inline element,
since you use them for links.
Another common display value is none. It is commonly
used with JavaScript to hide and show elements without
really deleting and recreating them.
Positioning
The position property specifies the type of
positioning method used for an element (static,
relative, fixed, absolute or sticky).
Static - HTML elements are positioned static by default.
positioned according to the normal flow of the page.
Relative - behaves the same as static unless
you add some extra properties
Top: 200px
Left: 100px
A fixed element is positioned relative to the
viewport, which means it always stays in the
same place even if the page is scrolled.
Absolute is the trickiest position value.
absolute behaves like fixed except
relative to the nearest positioned ancestor
relative
EXCERCISE
Stacking
The z-index property specifies the stack order of an
element.
An element with greater stack order is always in
front of an element with a lower stack order.
Note: z-index only works on positioned elements
EXCERCISE
Float is a CSS positioning property.
Float's sister property is clear. An element that has the clear property set
on it will not move up adjacent to the float like the float desires, but will
move itself down past the float.
float: left float: right
not cleared
float: left float: right
cleared
the great collapse
If this parent element contained nothing but
floated elements, the height of it would literally
collapse to nothing.
float: left float: left float: left
The column layout system
http://www.responsivegridsystem.com/calculator/
The column layout system
http://www.responsivegridsystem.com/calculator/
col-3 col-3 col-3 col-3
The column layout system
http://www.responsivegridsystem.com/calculator/
col-3 col-3 col-3 col-3
col-12
EXCERCISE
Flex box
The Flexbox Layout (Flexible Box) module aims at providing
a more efficient way to lay out, align and distribute space
among items in a container, even when their size is
unknown and/or dynamic (thus the word "flex").
Container
item item item
Properties for the parent
.container {

display: flex;

}
This defines a flex container; inline or block depending on the
given value. It enables a flex context for all its direct children.
.container {

flex-direction: row | row-reverse | column | column-reverse;

}
.container {

flex-wrap: nowrap | wrap | wrap-reverse;

}
justify-content
flex-start
flex-end
center
space-between
space-around
space-evenly
align-items
flex-start
flex-end
center
stretch
baseline
align-content
flex-start flex-end
center stretch
space-between space-around
Properties for the children
order
1 2 5
flex-basis: <length>
200px
flex-grow
1 2 1
*flex-shrink
flex
This is the shorthand for flex-grow, flex-shrink and flex-basis combined
Align-self
flex-start
flex-end
http://flexboxfroggy.com/
Browser support
Browser vendors are working to stop using vendor prefixes for experimental features.
.my-class {

-webkit-: chrome, safari, newer versions of opera

-moz-: firefox
-o-: //old, pre-webkit, versions of opera
-ms-: //explorer and edge

}
@supports (display: flex) {

div {

display: flex;

}

}



@supports not (display: flex) {

div {

float: right;

}

}
https://caniuse.com/
responsive design
plan small
avoid fixed dimensions
grid system
media queries
.title {

font-size: 40px;

}



@media only screen and (max-device-width: 360px) {

/* rules for 0 - 360px dimensions */

.title {

font-size: 16px;

}

}
Animations
.example {

transition: [property] [duration] [timing-function] [delay];

}
.example {

transition: background 300ms linear; //ease, ease-in, ease-out

}
.element {

animation: pulse 5s infinite;

}



@keyframes pulse {

0% {

background-color: #001F3F;

}

100% {

background-color: #FF4136;

}

}
EXCERCISE
SASS
Syntactically Awesome Style Sheets
Nesting
ul li .title {

font-size: 12px;

}



ul li .title:hover {

color: blue;

}

Nesting
ul {

li {

.title {

font-size: 12px;



&:hover {

color: blue;

}

}

}

}
*The Sass Ampersand
Imports
/* HTTP request for each import */

@import "path-to-file";

@import url("");
Imports
@import "reset";

@import "button";

@import "dropdown";
Styles
_reset.scss
_button.scss
_dropdown.scss
Extend/Inheritance
.message {

border: 1px solid #ccc;

padding: 10px;

color: #333;

}



.success {

@extend .message;

border-color: green;

}



.error {

@extend .message;

border-color: red;

}



.warning {

@extend .message;

border-color: yellow;

}
Variables
$primary-color: #333;

$secondary-color: #e0e0e0;



body {

color: $primary-color;



&:hover {

color: $secondary-color; 

}

}
Operators
.container { width: 100%; }



.button {

float: left;

width: 600px / 960px;

}



.dropdown {

float: right;

width: 300px / 960px * 100%;

}
Mixins
@mixin border-radius($radius) {

-webkit-border-radius: $radius;

-moz-border-radius: $radius;

-ms-border-radius: $radius;

border-radius: $radius;

}



.box { 

@include border-radius(10px); 

}
Functions
A function is very similar to a mixin, however the
output from a function is a single value. This can be
any Sass data type, including: numbers, strings,
colors, booleans, or lists.
Functions
@function remy($pxsize) {

@return ($pxsize/16)+rem;

}



h1 { font-size: remy(32);}



/* h1 { font-size: 2rem; } */
Loops
@for $i from 1 through 12 {



.column-#{$i} { /**/ }



}



.column-1 {}

/* ... */

.column-12 {}
THANK YOU!

More Related Content

What's hot (20)

Css Ppt
Css PptCss Ppt
Css Ppt
 
HTML CSS Basics
HTML CSS BasicsHTML CSS Basics
HTML CSS Basics
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Web Development using HTML & CSS
Web Development using HTML & CSSWeb Development using HTML & CSS
Web Development using HTML & CSS
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheet
 
Basic Details of HTML and CSS.pdf
Basic Details of HTML and CSS.pdfBasic Details of HTML and CSS.pdf
Basic Details of HTML and CSS.pdf
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Css
CssCss
Css
 
Html images syntax
Html images syntaxHtml images syntax
Html images syntax
 
Span and Div tags in HTML
Span and Div tags in HTMLSpan and Div tags in HTML
Span and Div tags in HTML
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
 
Intro Html
Intro HtmlIntro Html
Intro Html
 
Css
CssCss
Css
 
Css
CssCss
Css
 
Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)Cascading Style Sheet (CSS)
Cascading Style Sheet (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)
 
Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designers
 
Html, CSS & Web Designing
Html, CSS & Web DesigningHtml, CSS & Web Designing
Html, CSS & Web Designing
 

Similar to Intro to HTML and CSS basics

How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksAmit Tyagi
 
Class Intro / HTML Basics
Class Intro / HTML BasicsClass Intro / HTML Basics
Class Intro / HTML BasicsShawn Calvert
 
Web Development 4 (HTML & CSS)
Web Development 4 (HTML & CSS)Web Development 4 (HTML & CSS)
Web Development 4 (HTML & CSS)ghayour abbas
 
Workshop 2 Slides.pptx
Workshop 2 Slides.pptxWorkshop 2 Slides.pptx
Workshop 2 Slides.pptxDaniyalSardar
 
Html tutorials-infotech aus
Html tutorials-infotech ausHtml tutorials-infotech aus
Html tutorials-infotech ausNilesh Pujara
 
CSS Foundations, pt 1
CSS Foundations, pt 1CSS Foundations, pt 1
CSS Foundations, pt 1Shawn Calvert
 
INTERNSHIP PROJECT PPT RAJ HZL.pdf
INTERNSHIP PROJECT PPT RAJ HZL.pdfINTERNSHIP PROJECT PPT RAJ HZL.pdf
INTERNSHIP PROJECT PPT RAJ HZL.pdfDineshKumar522328
 
Intro webtechstc
Intro webtechstcIntro webtechstc
Intro webtechstccmcsubho
 
Html & Html5 from scratch
Html & Html5 from scratchHtml & Html5 from scratch
Html & Html5 from scratchAhmad Al-ammar
 
HTML Foundations, part 1
HTML Foundations, part 1HTML Foundations, part 1
HTML Foundations, part 1Shawn Calvert
 
Css introduction
Css introductionCss introduction
Css introductionSridhar P
 
Html, css and jquery introduction
Html, css and jquery introductionHtml, css and jquery introduction
Html, css and jquery introductioncncwebworld
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1Heather Rock
 

Similar to Intro to HTML and CSS basics (20)

Html-Prabakaran
Html-PrabakaranHtml-Prabakaran
Html-Prabakaran
 
CSS
CSSCSS
CSS
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
 
Class Intro / HTML Basics
Class Intro / HTML BasicsClass Intro / HTML Basics
Class Intro / HTML Basics
 
Web Development 4
Web Development 4Web Development 4
Web Development 4
 
Web Development 4 (HTML & CSS)
Web Development 4 (HTML & CSS)Web Development 4 (HTML & CSS)
Web Development 4 (HTML & CSS)
 
Workshop 2 Slides.pptx
Workshop 2 Slides.pptxWorkshop 2 Slides.pptx
Workshop 2 Slides.pptx
 
Html basic
Html basicHtml basic
Html basic
 
Html tutorials-infotech aus
Html tutorials-infotech ausHtml tutorials-infotech aus
Html tutorials-infotech aus
 
CSS Foundations, pt 1
CSS Foundations, pt 1CSS Foundations, pt 1
CSS Foundations, pt 1
 
INTERNSHIP PROJECT PPT RAJ HZL.pdf
INTERNSHIP PROJECT PPT RAJ HZL.pdfINTERNSHIP PROJECT PPT RAJ HZL.pdf
INTERNSHIP PROJECT PPT RAJ HZL.pdf
 
Intro webtechstc
Intro webtechstcIntro webtechstc
Intro webtechstc
 
Html & Html5 from scratch
Html & Html5 from scratchHtml & Html5 from scratch
Html & Html5 from scratch
 
HTML Foundations, part 1
HTML Foundations, part 1HTML Foundations, part 1
HTML Foundations, part 1
 
Week 2-intro-html
Week 2-intro-htmlWeek 2-intro-html
Week 2-intro-html
 
Html
HtmlHtml
Html
 
HTML and CSS Basics
HTML and CSS BasicsHTML and CSS Basics
HTML and CSS Basics
 
Css introduction
Css introductionCss introduction
Css introduction
 
Html, css and jquery introduction
Html, css and jquery introductionHtml, css and jquery introduction
Html, css and jquery introduction
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1
 

More from Eliran Eliassy

Angular - Improve Runtime performance 2019
Angular - Improve Runtime performance 2019Angular - Improve Runtime performance 2019
Angular - Improve Runtime performance 2019Eliran Eliassy
 
Angular - injection tokens & Custom libraries
Angular - injection tokens & Custom librariesAngular - injection tokens & Custom libraries
Angular - injection tokens & Custom librariesEliran Eliassy
 
Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics Eliran Eliassy
 
Angular performance improvments
Angular performance improvmentsAngular performance improvments
Angular performance improvmentsEliran Eliassy
 

More from Eliran Eliassy (10)

Angular - Improve Runtime performance 2019
Angular - Improve Runtime performance 2019Angular - Improve Runtime performance 2019
Angular - Improve Runtime performance 2019
 
Between JS and AI
Between JS and AIBetween JS and AI
Between JS and AI
 
Ngrx meta reducers
Ngrx meta reducersNgrx meta reducers
Ngrx meta reducers
 
Angular CDK
Angular CDKAngular CDK
Angular CDK
 
Angular - injection tokens & Custom libraries
Angular - injection tokens & Custom librariesAngular - injection tokens & Custom libraries
Angular - injection tokens & Custom libraries
 
Runtime performance
Runtime performanceRuntime performance
Runtime performance
 
Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics
 
Angular performance improvments
Angular performance improvmentsAngular performance improvments
Angular performance improvments
 
Angular genericforms2
Angular genericforms2Angular genericforms2
Angular genericforms2
 
Generic forms
Generic formsGeneric forms
Generic forms
 

Recently uploaded

The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxfnnc6jmgwh
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationKnoldus Inc.
 
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...itnewsafrica
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersNicole Novielli
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observabilityitnewsafrica
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 

Recently uploaded (20)

The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog Presentation
 
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 

Intro to HTML and CSS basics