SlideShare a Scribd company logo
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.
Intro to HTML and CSS basics
Intro to HTML and CSS basics
Intro to HTML and CSS basics
Intro to HTML and CSS basics
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.
Intro to HTML and CSS basics
Intro to HTML and CSS basics
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
CssCss
Css
shanmuga rajan
 
Intro Html
Intro HtmlIntro Html
Intro Html
Chidanand Byahatti
 
Advanced Cascading Style Sheets
Advanced Cascading Style SheetsAdvanced Cascading Style Sheets
Advanced Cascading Style Sheets
fantasticdigitaltools
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
casestudyhelp
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introduction
apnwebdev
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
Dave Kelly
 
Css ppt
Css pptCss ppt
Css ppt
Nidhi mishra
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
Amit Kumar Singh
 
Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap
1amitgupta
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
Salman Memon
 
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive Design
Zoe Gillenwater
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
Rachel Andrew
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
David Lindkvist
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
Amit Tyagi
 
CSS
CSSCSS
CSS
People Strategists
 
HTML-(workshop)7557.pptx
HTML-(workshop)7557.pptxHTML-(workshop)7557.pptx
HTML-(workshop)7557.pptx
Raja980775
 
Introduction to JavaScript (1).ppt
Introduction to JavaScript (1).pptIntroduction to JavaScript (1).ppt
Introduction to JavaScript (1).ppt
MuhammadRehan856177
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to Javascript
Walid Ashraf
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
Mario Hernandez
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
Rachel Andrew
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
casestudyhelp
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introduction
apnwebdev
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
Dave Kelly
 
Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap
1amitgupta
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
Salman Memon
 
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive Design
Zoe Gillenwater
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
Rachel Andrew
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
Amit Tyagi
 
HTML-(workshop)7557.pptx
HTML-(workshop)7557.pptxHTML-(workshop)7557.pptx
HTML-(workshop)7557.pptx
Raja980775
 
Introduction to JavaScript (1).ppt
Introduction to JavaScript (1).pptIntroduction to JavaScript (1).ppt
Introduction to JavaScript (1).ppt
MuhammadRehan856177
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to Javascript
Walid Ashraf
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
Mario Hernandez
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
Rachel Andrew
 

Similar to Intro to HTML and CSS basics (20)

WELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptx
WELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptxWELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptx
WELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptx
HarshwardhanPatil52
 
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
 
Tech Winter Break'24 Workshop A hands-o
Tech Winter Break'24 Workshop  A hands-oTech Winter Break'24 Workshop  A hands-o
Tech Winter Break'24 Workshop A hands-o
ghatbandhechinmayi
 
Html & Html5 from scratch
Html & Html5 from scratchHtml & Html5 from scratch
Html & Html5 from scratch
Ahmad Al-ammar
 
Introduction to Web Techniques_Key componenets_HTML Basics
Introduction to Web Techniques_Key componenets_HTML BasicsIntroduction to Web Techniques_Key componenets_HTML Basics
Introduction to Web Techniques_Key componenets_HTML Basics
DeepakUlape2
 
Web development basics (Part-1)
Web development basics (Part-1)Web development basics (Part-1)
Web development basics (Part-1)
Rajat Pratap Singh
 
Punit summer traning report.pdf
Punit summer traning report.pdfPunit summer traning report.pdf
Punit summer traning report.pdf
AliFaramarz
 
css v1 guru
css v1 gurucss v1 guru
css v1 guru
GuruPada Das
 
Web Dev Workshop at GDG on Campus:MGMCOE
Web Dev Workshop at GDG on Campus:MGMCOEWeb Dev Workshop at GDG on Campus:MGMCOE
Web Dev Workshop at GDG on Campus:MGMCOE
Kashish Aswani
 
Intro to html, css & sass
Intro to html, css & sassIntro to html, css & sass
Intro to html, css & sass
Sean Wolfe
 
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
 
Chapter 6 - Web Design
Chapter 6 - Web DesignChapter 6 - Web Design
Chapter 6 - Web Design
tclanton4
 
Web.pdf
Web.pdfWeb.pdf
Web.pdf
AkankshaPathak42
 
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
 
Teched Inetrgation ppt and lering in simple
Teched Inetrgation ppt  and lering in simpleTeched Inetrgation ppt  and lering in simple
Teched Inetrgation ppt and lering in simple
JagadishBabuParri
 
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
 
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
 
WELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptx
WELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptxWELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptx
WELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptx
HarshwardhanPatil52
 
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
 
Tech Winter Break'24 Workshop A hands-o
Tech Winter Break'24 Workshop  A hands-oTech Winter Break'24 Workshop  A hands-o
Tech Winter Break'24 Workshop A hands-o
ghatbandhechinmayi
 
Html & Html5 from scratch
Html & Html5 from scratchHtml & Html5 from scratch
Html & Html5 from scratch
Ahmad Al-ammar
 
Introduction to Web Techniques_Key componenets_HTML Basics
Introduction to Web Techniques_Key componenets_HTML BasicsIntroduction to Web Techniques_Key componenets_HTML Basics
Introduction to Web Techniques_Key componenets_HTML Basics
DeepakUlape2
 
Web development basics (Part-1)
Web development basics (Part-1)Web development basics (Part-1)
Web development basics (Part-1)
Rajat Pratap Singh
 
Punit summer traning report.pdf
Punit summer traning report.pdfPunit summer traning report.pdf
Punit summer traning report.pdf
AliFaramarz
 
Web Dev Workshop at GDG on Campus:MGMCOE
Web Dev Workshop at GDG on Campus:MGMCOEWeb Dev Workshop at GDG on Campus:MGMCOE
Web Dev Workshop at GDG on Campus:MGMCOE
Kashish Aswani
 
Intro to html, css & sass
Intro to html, css & sassIntro to html, css & sass
Intro to html, css & sass
Sean Wolfe
 
Chapter 6 - Web Design
Chapter 6 - Web DesignChapter 6 - Web Design
Chapter 6 - Web Design
tclanton4
 
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
 
Teched Inetrgation ppt and lering in simple
Teched Inetrgation ppt  and lering in simpleTeched Inetrgation ppt  and lering in simple
Teched Inetrgation ppt and lering in simple
JagadishBabuParri
 
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
 
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
 
Ad

More from Eliran Eliassy (10)

Angular - Improve Runtime performance 2019
Angular - Improve Runtime performance 2019Angular - Improve Runtime performance 2019
Angular - Improve Runtime performance 2019
Eliran Eliassy
 
Between JS and AI
Between JS and AIBetween JS and AI
Between JS and AI
Eliran Eliassy
 
Ngrx meta reducers
Ngrx meta reducersNgrx meta reducers
Ngrx meta reducers
Eliran Eliassy
 
Angular CDK
Angular CDKAngular CDK
Angular CDK
Eliran Eliassy
 
Angular - injection tokens & Custom libraries
Angular - injection tokens & Custom librariesAngular - injection tokens & Custom libraries
Angular - injection tokens & Custom libraries
Eliran Eliassy
 
Runtime performance
Runtime performanceRuntime performance
Runtime performance
Eliran 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 improvments
Eliran Eliassy
 
Angular genericforms2
Angular genericforms2Angular genericforms2
Angular genericforms2
Eliran Eliassy
 
Generic forms
Generic formsGeneric forms
Generic forms
Eliran Eliassy
 
Angular - Improve Runtime performance 2019
Angular - Improve Runtime performance 2019Angular - Improve Runtime performance 2019
Angular - Improve Runtime performance 2019
Eliran Eliassy
 
Angular - injection tokens & Custom libraries
Angular - injection tokens & Custom librariesAngular - injection tokens & Custom libraries
Angular - injection tokens & Custom libraries
Eliran 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 improvments
Eliran Eliassy
 
Ad

Recently uploaded (20)

Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...
Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...
Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...
Precisely
 
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc Webinar - 2025 Global Privacy SurveyTrustArc Webinar - 2025 Global Privacy Survey
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc
 
Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...
BookNet Canada
 
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Safe Software
 
Oracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI ProfessionalOracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI Professional
VICTOR MAESTRE RAMIREZ
 
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Floods in Valencia: Two FME-Powered Stories of Data ResilienceFloods in Valencia: Two FME-Powered Stories of Data Resilience
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Safe Software
 
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Infrassist Technologies Pvt. Ltd.
 
Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
Domino IQ – Was Sie erwartet, erste Schritte und AnwendungsfälleDomino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
panagenda
 
Edge-banding-machines-edgeteq-s-200-en-.pdf
Edge-banding-machines-edgeteq-s-200-en-.pdfEdge-banding-machines-edgeteq-s-200-en-.pdf
Edge-banding-machines-edgeteq-s-200-en-.pdf
AmirStern2
 
Down the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training RoadblocksDown the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training Roadblocks
Rustici Software
 
If You Use Databricks, You Definitely Need FME
If You Use Databricks, You Definitely Need FMEIf You Use Databricks, You Definitely Need FME
If You Use Databricks, You Definitely Need FME
Safe Software
 
“Solving Tomorrow’s AI Problems Today with Cadence’s Newest Processor,” a Pre...
“Solving Tomorrow’s AI Problems Today with Cadence’s Newest Processor,” a Pre...“Solving Tomorrow’s AI Problems Today with Cadence’s Newest Processor,” a Pre...
“Solving Tomorrow’s AI Problems Today with Cadence’s Newest Processor,” a Pre...
Edge AI and Vision Alliance
 
Secure Access with Azure Active Directory
Secure Access with Azure Active DirectorySecure Access with Azure Active Directory
Secure Access with Azure Active Directory
VICTOR MAESTRE RAMIREZ
 
TimeSeries Machine Learning - PyData London 2025
TimeSeries Machine Learning - PyData London 2025TimeSeries Machine Learning - PyData London 2025
TimeSeries Machine Learning - PyData London 2025
Suyash Joshi
 
Oracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization ProgramOracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization Program
VICTOR MAESTRE RAMIREZ
 
Introduction to Internet of things .ppt.
Introduction to Internet of things .ppt.Introduction to Internet of things .ppt.
Introduction to Internet of things .ppt.
hok12341073
 
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdfcnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
AmirStern2
 
Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...
Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...
Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...
Impelsys Inc.
 
Ben Blair - Operating Safely in a Vibe Coding World
Ben Blair - Operating Safely in a Vibe Coding WorldBen Blair - Operating Safely in a Vibe Coding World
Ben Blair - Operating Safely in a Vibe Coding World
AWS Chicago
 
Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025
Safe Software
 
Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...
Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...
Precisely Demo Showcase: Powering ServiceNow Discovery with Precisely Ironstr...
Precisely
 
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc Webinar - 2025 Global Privacy SurveyTrustArc Webinar - 2025 Global Privacy Survey
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc
 
Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...
BookNet Canada
 
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Safe Software
 
Oracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI ProfessionalOracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI Professional
VICTOR MAESTRE RAMIREZ
 
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Floods in Valencia: Two FME-Powered Stories of Data ResilienceFloods in Valencia: Two FME-Powered Stories of Data Resilience
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Safe Software
 
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Infrassist Technologies Pvt. Ltd.
 
Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
Domino IQ – Was Sie erwartet, erste Schritte und AnwendungsfälleDomino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
panagenda
 
Edge-banding-machines-edgeteq-s-200-en-.pdf
Edge-banding-machines-edgeteq-s-200-en-.pdfEdge-banding-machines-edgeteq-s-200-en-.pdf
Edge-banding-machines-edgeteq-s-200-en-.pdf
AmirStern2
 
Down the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training RoadblocksDown the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training Roadblocks
Rustici Software
 
If You Use Databricks, You Definitely Need FME
If You Use Databricks, You Definitely Need FMEIf You Use Databricks, You Definitely Need FME
If You Use Databricks, You Definitely Need FME
Safe Software
 
“Solving Tomorrow’s AI Problems Today with Cadence’s Newest Processor,” a Pre...
“Solving Tomorrow’s AI Problems Today with Cadence’s Newest Processor,” a Pre...“Solving Tomorrow’s AI Problems Today with Cadence’s Newest Processor,” a Pre...
“Solving Tomorrow’s AI Problems Today with Cadence’s Newest Processor,” a Pre...
Edge AI and Vision Alliance
 
Secure Access with Azure Active Directory
Secure Access with Azure Active DirectorySecure Access with Azure Active Directory
Secure Access with Azure Active Directory
VICTOR MAESTRE RAMIREZ
 
TimeSeries Machine Learning - PyData London 2025
TimeSeries Machine Learning - PyData London 2025TimeSeries Machine Learning - PyData London 2025
TimeSeries Machine Learning - PyData London 2025
Suyash Joshi
 
Oracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization ProgramOracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization Program
VICTOR MAESTRE RAMIREZ
 
Introduction to Internet of things .ppt.
Introduction to Internet of things .ppt.Introduction to Internet of things .ppt.
Introduction to Internet of things .ppt.
hok12341073
 
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdfcnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
AmirStern2
 
Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...
Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...
Creating an Accessible Future-How AI-powered Accessibility Testing is Shaping...
Impelsys Inc.
 
Ben Blair - Operating Safely in a Vibe Coding World
Ben Blair - Operating Safely in a Vibe Coding WorldBen Blair - Operating Safely in a Vibe Coding World
Ben Blair - Operating Safely in a Vibe Coding World
AWS Chicago
 
Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025
Safe Software
 

Intro to HTML and CSS basics