Mi9 Front End Training

Series of lessons introducing front-end basics.

How-to

• To run the demos simply open any index file in Chrome.
• Get a copy of Sublime Text (free) to edit the HTML / CSS.
• Save changes and refresh your browser to see the changes.

Part 1 HTML + CSS Training

1.1 Course introduction

1.2 Course objectives

1.3 HTML + CSS refresher

• What is HTML
  • Document structure
  • Attributes
• What is CSS
  • Cascading
  • Specificity
  • Block / Inline
• What is Javascript

Part 2 CSS Layouts + Responsive Design

2.1 Introduction

• Revision

2.2 CSS layouts

• Box model
• Visualising designs
• Float
• Practical examples

2.3 CSS Responsive design

• What is 'responsive design'?
• What is 'mobile first'?
• Why mobile first for business?
• Why mobile first for the user?
• Practical examples

Part 3 CSS Typography + UI Elements

3.1 Introduction

• CSS layout revision
• CSS layout bonus - positioning; static, absolute, relative and fixed

3.2 CSS typography

• A brief history of type on the web
• The present: webfonts
• Limitations
• Photoshop vs browser type (also introducing Sketch)
• Typography with CSS

3.3 CSS UI elements

• Inputs and forms
• Carousel widget

Part 4 CSS Transitions + Animation

4.1 Introduction

• CSS typography / UI revision
• A brief history of animation
• Why animation - experience and accessibility
• Why not animation?

4.2 CSS Transitions

• Transition basics
• What can / can't be animated
• Tweening
• Poor performance

4.3 CSS Transformations

• 2D Transforms
• 3D Transforms
• Performance

4.4 CSS Keyframe Animation

• Keyframe multi-step example

Part 5 Web Development Processes

5.1 Introdction

• CSS Animation revision
• A brief history of web development

5.2 Front-end / back-end

• Front-end development
• Back-end development

5.3 Dev team: Agile, JIRA

• Agile
• Jira

5.4 Technical methodoglogy

• Git
• Stash

Part 6 Infrastructure

6.1 Introduction

• Development, agile, Git revision
• A brief history of web infrastructure

6.2 CI (Continuous Integration)

• What is CI?
• Agile and CI
• The deployment pipeline
• Blue / Green deployment

6.3 CDN / Infrastructure

• What is a CDN?
• Origin, Client, Server, Edge
• Infrastructure topology
• Benefits of a CDN
• Limitations of a CDN

6.4 Image Resizer

• Handling media
• Picture element

Part 7 Miscellany

7.1 Introduction to the miscellany

• Revision

7.2 Video on the web

• A brief history
• Standards and vendor formats
• Brightcove player

7.3 Vector Images

• Legacy formats
• SVG
• Animating SVGs
• Icon web fonts vs SVGs
• Assets

7.3 Tracking + SEO

• Why track?
• Why SEO?
• Ominture click tracking
• Semantic documents for SEO

Part 8 In Conclusion

8.1 Bringing it all together

• Introduction to the summary

8.2 HTML Revision

• In a nutshell
• Attributes
• Picture, Video, Audio

8.3 CSS Revision

• Basics
• Layouts
• Responsive Design
• Typography
• Animation

8.3 Development Practices

• Front-end / Back-end
• Agile, Git

8.4 Infrastructure

• Akamai / cache
• Continuous Integration