Anzeige
Intro to HTML and CSS basics
Melden
Eliran EliassyFolgen
Front End Development um Market.co.uk21. Nov 2018•0 gefällt mir•1,583 Aufrufe
9 gefällt mir
Sei der Erste, dem dies gefällt
Mehr anzeigen
Aufrufe
Aufrufe insgesamt
0
Auf Slideshare
0
Aus Einbettungen
0
Anzahl der Einbettungen
0
Intro to HTML and CSS basics
21. Nov 2018•0 gefällt mir•1,583 Aufrufe
9 gefällt mir
Sei der Erste, dem dies gefällt
Mehr anzeigen
Aufrufe
Aufrufe insgesamt
0
Auf Slideshare
0
Aus Einbettungen
0
Anzahl der Einbettungen
0
Downloaden Sie, um offline zu lesen
Melden
Technologie
Intro to HTML and CSS basics
Eliran EliassyFolgen
Front End Development um Market.co.ukAnzeige
Intro to HTML and CSS basics
- 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!
Anzeige