Skip to content

Instantly share code, notes, and snippets.

View tavisca-dpingale's full-sized avatar

DPingle tavisca-dpingale

View GitHub Profile
@tavisca-dpingale
tavisca-dpingale / 3-web-fonts.html
Last active July 10, 2018 09:27
*** @font-face for Custom Web Fonts
* The @font-face CSS at-rule specifies a custom font with which to display text.
* By allowing authors to provide their own fonts, @font-face makes it possible to design content without
being limited to the so-called "safe" fonts (that is, the fonts which are so common that they're
considered to be universally available) for eg. Arial, Verdana, Times Now etc etc.
* Make it possible to do so without relying on an Internet connection.
@tavisca-dpingale
tavisca-dpingale / 3-semantic-html-custom-web-font.html
Last active July 3, 2018 10:21
# Why Semantic Elements?
* With HTML4, developers used their own id/class names to style elements:
header, top, bottom, footer, menu, navigation, main, container,
content, article, sidebar, topnav, etc.
* This made it impossible for search engines to identify the correct web page content.
* With the new HTML5 elements (<header> <footer> <nav> <section> <article>),
this will become easier.
@tavisca-dpingale
tavisca-dpingale / 2-html-page-structure-imp-of-head-info.html
Last active June 20, 2018 04:03
* The <head> element is a container for metadata (data about data).
* HTML metadata is data about the HTML document.
* Placed between the <html> tag and the <body> tag.
* Metadata is not displayed.
* Metadata typically define the document title, character set,
styles, links, scripts.
* <title> <style> <meta> <link> <script>.
* Define the character set used.
@tavisca-dpingale
tavisca-dpingale / 2-html-page-structure-imp-of-head.html
Last active June 18, 2018 10:11
HTML page structure / Importance of Head tag
<!DOCTYPE html>
<html lang="en">
<head>
<!-- CHARACTER SET META -->
<meta charset="UTF-8">
<!-- VIEWPORT META -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- MICROSOFT OLD BROWSER COMPATIBILITY -->
@tavisca-dpingale
tavisca-dpingale / 1-reading-design-before-html.md
Last active June 19, 2018 10:55

  • Look design as boxes.

  • Ask if the application has mobile friendly requirement.

  • Identify design whether it is fixed width or a fluid (100%).

  • Identify the width of layout.

  • Identify the different sections in design.