pixelspencil

• HTML 101

---

HTML 101

WIP

pixelspencil

• GIT 101

---

GIT 101

---

git clone

pixelspencil

• Emmet 101
  • Using Emmet with HTML
    • Creating nested html using >
    • Creating nested & adjacent html using +
    • Creating placeholder text using lorem
    • Creating placeholder text using lorem and multiplying with *
    • Using ^ to move up elements and add sibling p after first p
    • Select text then using ctrl+w type in ul>li*>a[href="https://www.$#.com" target="_blank"]{$#}`

---

pixelspencil

• Sass 101
  • Preprocessing
    • Working with basic variables
      • Basic variable syntax & use
      • Variables referencing variables & use
    • Fonts stored in variables & use
    • Nesting your styles
    • Using Partials
      • Using the @import command
• Using basic mixins

pixelspencil

• CSS Grid 101
  • Gaps
    • Example - the super smart grid gaps
  • Named Grid Lines
  • Fraction Units
    • Example - the beautiful fr unit
    • The math
      • Notes
  • Minmax
• Idea/future

pixelspencil

• CSS Flexbox 101

---

CSS Flexbox 101

WIP

pixelspencil

HTML - Create responsive images - Fast load times

    <picture>
      <source media="(max-width: 799px)" srcset="elva-480w.jpg">
      <source media="(min-width: 800px)" srcset="elva-800w.jpg">
      <img src="elva-800w.jpg">
    </picture>

pixelspencil

JavaScript - Console snippets

- console.group(‘name’) and console.groupEnd(‘name’)
- console.trace()
- console.count(“counter: ”)
- console.time() and console.timeEnd()
- console.assert()
- console.profile([label])
- console.timeStamp([label])