SlideShare uma empresa Scribd logo
1 de 133
Baixar para ler 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!

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

How to learn HTML in 10 Days
How to learn HTML in 10 DaysHow to learn HTML in 10 Days
How to learn HTML in 10 Days
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
Jquery
JqueryJquery
Jquery
 
html-css
html-csshtml-css
html-css
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Advanced Cascading Style Sheets
Advanced Cascading Style SheetsAdvanced Cascading Style Sheets
Advanced Cascading Style Sheets
 
Javascript basics
Javascript basicsJavascript basics
Javascript basics
 
Dom
DomDom
Dom
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to Javascript
 
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 And JAVASCRIPT!
HTML, CSS And JAVASCRIPT!HTML, CSS And JAVASCRIPT!
HTML, CSS And JAVASCRIPT!
 
HTML5 & CSS3
HTML5 & CSS3 HTML5 & CSS3
HTML5 & CSS3
 
Css types internal, external and inline (1)
Css types internal, external and inline (1)Css types internal, external and inline (1)
Css types internal, external and inline (1)
 
Css Ppt
Css PptCss Ppt
Css Ppt
 
Html,javascript & css
Html,javascript & cssHtml,javascript & css
Html,javascript & css
 
HTML5
HTML5HTML5
HTML5
 
Web Development using HTML & CSS
Web Development using HTML & CSSWeb Development using HTML & CSS
Web Development using HTML & CSS
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginners
 

Semelhante a Intro to HTML and CSS basics

Class Intro / HTML Basics
Class Intro / HTML BasicsClass Intro / HTML Basics
Class Intro / HTML Basics
Shawn Calvert
 
Intro webtechstc
Intro webtechstcIntro webtechstc
Intro webtechstc
cmcsubho
 
Css introduction
Css introductionCss introduction
Css introduction
Sridhar P
 
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
Heather Rock
 

Semelhante a Intro to HTML and CSS basics (20)

Html-Prabakaran
Html-PrabakaranHtml-Prabakaran
Html-Prabakaran
 
CSS
CSSCSS
CSS
 
Class Intro / HTML Basics
Class Intro / HTML BasicsClass Intro / HTML Basics
Class Intro / HTML Basics
 
Web Development 4 (HTML & CSS)
Web Development 4 (HTML & CSS)Web Development 4 (HTML & CSS)
Web Development 4 (HTML & CSS)
 
Web Development 4
Web Development 4Web Development 4
Web Development 4
 
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
 
Learn html elements and structure cheatsheet codecademy
Learn html  elements and structure cheatsheet   codecademyLearn html  elements and structure cheatsheet   codecademy
Learn html elements and structure cheatsheet codecademy
 

Mais de Eliran Eliassy

Mais de 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
 

Último

TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 

Último (20)

API Governance and Monetization - The evolution of API governance
API Governance and Monetization -  The evolution of API governanceAPI Governance and Monetization -  The evolution of API governance
API Governance and Monetization - The evolution of API governance
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch Tuesday
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Simplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxSimplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptx
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingEvent-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream Processing
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps Productivity
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 

Intro to HTML and CSS basics