Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sinau Bareng Frontend Web Development @ DiLo Malang


Published on

Materi Slide cuma 14 halaman, hanya poin-poin saja, penjelasan lebih detail melalui demo tiap slide:
Web, Frontend Web Development, Code Editor, HTML, CSS, Browser, Responsive, Bootstrap CSS, Bootstrap Components, Bootstrap Javascript, Sass @ Malang Digital Lounge (DiLo) 29 April 2015

Published in: Technology
  • Be the first to comment

Sinau Bareng Frontend Web Development @ DiLo Malang

  1. 1. FRONTEND WEB DEVELOPMENT SINAU BARENG Malang 29 April 2015 Digital Lounge (DiLo)
  2. 2. Moch. Zamroni @pakzam 2000-2001 Gracia Design 2002-2006 Detail adv. 2006 Utero adv. 2006 Jade 2006-2007 iMMedia 2007-2008 iCreativeLabs 2008-2011 PhaseDev 2011-2013 2013-recent LP3I Malang 2009-recent WPCharity 2010-2014
  3. 3. UI/UX Designer (Web Designer) Frontend Developer (Client Side) Backend Developer (Server Side) Hosting Specialist (Monitoring) User (Client) WebWeb
  4. 4. HTML (Content) CSS (Layout) Javascript (Behavior) Frontend Web Development Frontend Web Development
  5. 5. Code Editor Code Editor Notepad Notepad++ Sublime Text Dreamweaver Eclipse Etc. TextMate TopStyle Atom
  6. 6. HTMLHTML Structure (html, head, body, div, span) Meta Info (doctype, title, link, meta, style) Text (p, h1-h6, blockquote, br, etc) Links (a) Images (img) Lists (ol, ul, li) Tables (table, tr, td, th, tbody, thead) Scripting (script) Forms (form, input, textarea, select, option, button, label, etc)
  7. 7. CSSCSS Text & Fonts (font, line-height, letter-spacing, text-align, text-decoration, text-indent text-transform,vertical-align, etc) Colours & Backgrounds (color, background-color, background, background-image, background-repeat, background-position, etc) Box Model (width, height, padding, margin, border, outline, etc) Positioning & Display (position, top, right, bottom, left, clip, overflow, z-index, float, clear, display, visibility) Lists (list-style, list-style-type, list-style-image, list-style-position) Tables (table-layout, border-collapse, border-spacing, empty-cells, etc) Misc. (content, cursor, etc)
  8. 8. BrowserBrowser Mozilla Firefox Google Chrome Opera SafariInternet Explorer
  9. 9. ResponsiveResponsive Desktop LaptopMobile Tablet TV
  10. 10. Bootstrap CSS Bootstrap CSS Grid system Typography Code Tables FormsButtons Images Helper classes Responsive utilities
  11. 11. Bootstrap Components Bootstrap Components Glyphicons Dropdowns Button groups Button dropdowns Input groups Navs Navbar Breadcrumbs Pagination Labels Badges Jumbotron Page header Thumbnails Alerts Progress bars Media object List group Panels Responsive embed Wells
  12. 12. Bootstrap JavaScript Bootstrap JavaScript Transitions Modal Dropdown Scrollspy Tab Tooltip Popover Alert Button Collapse Carousel Affix
  13. 13. SassSass Preprocessing Variables Nesting Partials Import Mixins Inheritance Operators
  14. 14. Terimakasih :) @pakzam