HTML & CSS ADV.

HTML & CSS ADV

DOCTYPE •  <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01/EN” hAp://www.w3.org/TR/html4/strict.dd> • 
<!DOCTYPE html>

LINKS •  <link rel=“dns-prefetch” href=“”> •  <link rel=“prefetch” href=“”> • 
<link rel=“prerender” href=“”> hAps://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ hAps://css-tricks.com/prefetching-preloading-prebrowsing/

HEAD vs BODY (SCRIPT) •  <head><script type="text/javascript" src= //code.jquery.com/jquery-2.2.1.min.js” async></head>
VS •  <body><script type="text/javascript" src= //code.jquery.com/jquery-2.2.1.min.js”></body> •  Why jQuery in head? •  When to use JS in body? hAp://stackoverﬂow.com/quesjons/3531314/should-i-write-script-in- the-body-or-the-head-of-the-html hAp://www.growingwiththeweb.com/2014/02/async-vs-defer- aAributes.html

Data AAributes •  <p id="desc-0" class="hide" data-url="hAp:// www.sanity.com.au/products/2311514/ Bourne_Uljmatum_The" data-retailer="SANITY">
•  Why use data-* aAributes?

Nonidex & Nofollow •  <a href="hAp://www.sanity.com.au/products/ 2311508/Bourne_Legacy_The" class="buAon small" id="shopx-acjon-item"
target="_blank" rel="noindex,nofollow"> hAps://support.google.com/webmasters/answer/ 96569?hl=en hAp://stackoverﬂow.com/quesjons/13085931/is- it-a-good-idea-to-use-a-href-hAp-name-com-rel- noindex-nofollowname

CSS •  What is Responsive Design •  Bootstrap / Foundajon
(Grid) •  Always use classes wherever possible •  Why doing id styling is EVIL •  Everything should be in em or % (Why?) •  z-index •  Avoid ‘-webkit*’ or ‘-moz*’ etc. if possible

MEDIA CSS QUERIES •  @media (min-width: 700px) { …. }
•  @media (min-width: 700px) and (orientajon: landscape) { …. } •  @media (min-width: 700px) and (orientajon: landscape) and (-webkit-min-device-pixel- rajo: 2) { …. } •  <link rel=“stylesheet” media=“(max-width: 700px)” href=“example.css”/>

Styling Resources •  Chrome Inspector •  For icons use: hAp://fontawesome.io/
•  For fonts use: hAps://fonts.google.com/?authuser=1 •  ALL above is CSS

HTML & CSS ADV.

HTML & CSS ADV.

herby

Other Decks in Technology

Featured

Transcript

HTML & CSS ADV

DOCTYPE •  <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01/EN” hAp://www.w3.org/TR/html4/strict.dd> •

LINKS •  <link rel=“dns-prefetch” href=“”> •  <link rel=“prefetch” href=“”> •

HEAD vs BODY (SCRIPT) •  <head><script type="text/javascript" src= //code.jquery.com/jquery-2.2.1.min.js” async></head>

Data AAributes •  <p id="desc-0" class="hide" data-url="hAp:// www.sanity.com.au/products/2311514/ Bourne_Uljmatum_The" data-retailer="SANITY">

Nonidex & Nofollow •  <a href="hAp://www.sanity.com.au/products/ 2311508/Bourne_Legacy_The" class="buAon small" id="shopx-acjon-item"

CSS •  What is Responsive Design •  Bootstrap / Foundajon

MEDIA CSS QUERIES •  @media (min-width: 700px) { …. }

Styling Resources •  Chrome Inspector •  For icons use: hAp://fontawesome.io/