Designer023/front-end-docs

Docs to help explain and demonstrate front end concepts, techniques and practices

★ 0Forks 0JavaScriptGitHub ↗Compare

README

Front end documentation

Aim

To create a set of documents that covers most aspects of front end work.

Markup and styling

CSS

  • Naming conventions
  • Specificity
  • BEM

Sass

  • What is Sass
  • How to use Sass
  • Variables
  • Mixins
  • Functions
  • Placeholders
  • Other features (maps, loops, etc.)

HTML

  • Basics of HTML 5 document
  • Document Object Model (DOM) - What is it?
  • Meta data for headers

Interactivity and Apps

JavaScript

Jquery

  • Adding jQuery to a page
  • Using jQuery to select things
  • Getting information from the DOM
  • Updating the DOM
Examples
  • React - Basic example - A modern JS (ES6) React app using WebPack to compile and Babel to transform to ES5

Command line tools, package managers, bundlers and pipelines

Gulp

  • Basic Concept
  • Basic Config
  • Plugins
  • PostCSS

WebPack

  • Basic Concept
  • Basic Config
  • Plugins

Misc

Analytics

Advertising

Optimisation

  • Best practices for optimising page speed and tools to use

Resources

To save digging around existing projects for code examples and then cutting out the unnecessary parts...

WebPack configs

Contributors

Designer023

Issues